首页 技术 正文
技术 2022年11月14日
0 收藏 946 点赞 4,115 浏览 2086 个字

一、基本知识

Jquery是什么?
  它就是一套JS方法包,jQuery是一个快速,小巧,功能丰富的JavaScript库。它使得HTML文档遍历和操作,事件处理,动画和Ajax更容易使用易于使用的API,可以工作在众多的浏览器。结合多功能性和可扩展性,jQuery已经改变了数百万人编写JavaScript的方式。
二、选择器

JQuery 基本知识,选择器,事件,DOM操作

基本选择器:

  基本:

    ID选择器:$(“#ID”)

    Class选择器:$(“.Class”)  

    标签选择器:$(“标签名”)

  组合:

    并列:用逗号隔开 $(“#ID1″,”#ID2″,”#ID3″,”#ID4”,…)

    后代:用空格隔开 $(“.Class Div”)

过滤选择器:

  基本过滤:

    首尾:  首个:$(“.Class:first”)   尾个:$(“.Class:last”)

    等于:  任意个:$(“.Class:eq(索引号)”) 或者 $(“.Class”).eq(索引号)   建议使用第二个,例如循环时取索引号方便

    不等于:大于:$(“.Class:gt(索引号)”)     小于$(“.Class:lt(索引号)”)    排除:$(“.Class:not(.Class:eq(索引号))”)

    奇偶:索引号为奇数:$(“.Class:odd”)      索引号为偶数:$(“.Class:even”)

  属性过滤:

    属性名过滤:$(“.Class[属性名]”)

    属性的名值对过滤:$(“.Class[属性名=值]”)    $(“.Class[属性名!=值]”)

  内容过滤:

    文字:$(“.Class:contains(“字符串”)”)

    子元素:$(“.Class:has(选择器)”)

  未来元素:

    $(“选择器”).live(“事件名”,function () { });

三、事件

JQuery 基本知识,选择器,事件,DOM操作

  常规事件

    把JS事件中的on去掉即可;

    复合事件:

      $(“选择器”).hover(function(){},function(){});      相当于把mouseover()mouseout()合二为一

      $(“选择器”).toggle(function(){},function(){},function(){},…);    点击事件循环执行

  事件冒泡

    阻止事件冒泡:在事件结束前加上 return false;   例如:

 $("#id").click(function () {
alert("");
return false;
});

四:DOM操作

JQuery 基本知识,选择器,事件,DOM操作

  操作属性

    获取属性  var s=$(“选择器”).attr(“属性名”);

    设置属性  $(“选择器”).attr(“属性名”,”属性值”);

    删除属性  $(“选择器”).removeAttr(“属性名”);

  操作样式

    操作内联样式     获取样式  var s=$(“选择器”).css(“样式名”);      设置样式  $(“选择器”).css(“样式名”,”值”);

    操作样式表的class   添加class   $(“选择器”).addClass(“class名”);

              移除class   $(“选择器”).removeClass(“class名”);

添加移除交替class   $(“选择器”).toggleClass(“class名”)

  操作内容
    表单元素     取值: var s=$(“选择器”).val();     赋值:  $(“选择器”).val(“值”);

    非表单元素   取值: var s=$(“选择器”).html();  var s=$(“选择器”).text();     赋值:  $(“选择器”).html(“内容”);   $(“选择器”).text(“内容”);

  操作相关元素

    查找    父级:$(“选择器”).parent();    $(“选择器”).parents(“选择器”);

        子级:$(“选择器”).children(“选择器”);    $(“选择器”).find(“选择器”);

        平级:前面的:$(“选择器”).prve();    $(“选择器”).prveAll(“选择器”);

           后面的:$(“选择器”).next();    $(“选择器”).nextAll(“选择器”);

  操作

    新建: var s=$(“Html字符串”);

      添加: 内部添加:$(“选择器”).append($(“Html字符串”));

        平级之前添加:$(“选择器”).before($(“Html字符串”));

        平级之后添加:$(“选择器”).after($(“Html字符串”));

    移除:清空内部所有元素: $(“选择器”).empty();    移除元素本身包含内部的元素: $(“选择器”).remove();

    复制:var s=$(“选择器”).clone();

五、动画

JQuery 基本知识,选择器,事件,DOM操作

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:878 阅读:9,074
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:807 阅读:5,551
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:569 阅读:6,399
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:733 阅读:6,176
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:7,811
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:4,892