一．简介

二．寻找元素1.选择器1.1 基本选择器 $(“*”):选择所有标签$(“#idname”):选择id=idname的标签$(“#classname”):选择class=classname的标签$(“#TagName”):选择Tag=TagName的标签$(“.classname,p,div”):选择class=classname,p及div的所有标签该部分代码块如下：

    
         
这是P标签1
    
     welcome to jQuery    
     
      这是div标签外围1    
      
       这是div标签内部
      
        
      
这是P标签2
    
     
    
这是span标签

1.2 层级选择器

$(".inner p")：calssname="inner"标签内的所有p标签 $(".inner>p"):calssname="inner"标签内的所有p标签$(".inner+p"):calssname="inner"标签下方相邻的p标签$(".inner~p"):calssname="inner"标签下方所有的p标签(仅要求下方即可，可以不相邻)该部分实例代码块如下:

    
         
这是P标签1
    
     welcome to jQuery    
     
      这是div标签外围1        
      
这是P标签2
        
      
       这是div标签内部            
       
这是P标签31
            
       
这是P标签32
        
      
        
      
这是P标签4
        
      这是span标签1        
      
这是P标签5
    
     
    
     
这是P标签5
    
这是span标签

1.3 基本筛选器

$(ele:frist):第1个ele标签$(ele:eq(n)):第N个ele标签$(ele:last):最后1个ele标签$("li:even"):对排序为基数的li标签进行操作$("li:odd"):对排序为偶数的li标签进行操作$("li:gt(2)"):对大于第二个(不包含第2个)的li标签(排序从0开始)进行操作$("li:lt(2)"):对小于第二个(不包含第2个)的li标签(排序从0开始)进行操作该部分代码块如下:

    
        
    
    
     
第一个li标签
    
     
第二个li标签
    
     
第三个li标签
    
     
第四个li标签
    
     
第五个li标签
    

1.4属性选择器

$(“[class=’classname’][id=’idname’]”)：选择class=’classname’且id=’idname’的标签进行操作；代码块如下:

    
        
    
    
     
第一个li标签
    
     
第二个li标签
    
     
第三个li标签
    
     
第四个li标签
    
     
第五个li标签
    

1.5 表单选择器

$(“:type”):其中type的值为text/checkbox/radio的任意一种，对type=’text’的input标签进行操作；代码块如下：

    
         111 222 333 444

2.筛选器

常见的筛选器如下:$(".outer p").hasClass("pp") //判断class='outer'下的class='pp'的p标签是否存在，返回结果为布尔值$(".outer").eq(2).css("color","red")//操作第二个class='outer'的标签$(".outer").children("p").css("color","green") //class='outer'内的第一个p标签$(".outer").find("p").css("color","red") //class='outer'内的所有p标签//next向下$(".inner1").next("p").css("color","red") //class='inner1'下方(与其同级别)其与其相邻的第1个p标签$(".inner1").nextAll("p").css("color","red") //class='inner1'下方(与其同级别)的所有p标签$(".inner1").nextUntil(".p53").css("color","red") //class='inner1'下方(与其同级别)的直到class='p53'(不包含p53)的所有p标签//prev向上$(".inner2").prev().css("color","red") //class='inner2'上方(与其同级别)其与其相邻的第1个标签$(".inner2").prevAll().css("color","red") //class='inner2'上方(与其同级别)的所有标签$(".inner2").prevUntil("#u1").css("color","red") //class='inner2'上方(与其同级别)的直到id='u1'(不包含u1)的所有p标签//parent向外$(".pp").parent().css("color","red") //对class='pp'的第一级父级标签进行操作$(".pp").parents().css("color","red") //对class='pp'的所有父级标签进行操作,默认直到HTML的最外层html标签$(".pp").parentsUntil("#d1").css("color","red") //对class='pp'的直到id='d1'(不包含d1这一层)的所有父级标签进行操作//兄弟标签$(".pp").siblings().css("color","red") //对class='pp'所有兄弟标签(即:与.pp同级的所有标签)进行操作代码块如下：

    
         
这是P标签1
    
     welcome to jQuery    
     
      这是div标签外围1        
      
这是P标签2
        
      
       这是div标签内部            
       
这是P标签31
            
       
这是P标签32
        
      
        
      这是下划线        
      这是span标签1        
      
这是P标签4
        
      这是span标签2        
      
这是P标签51
        
      
       这是div标签内部2            
       
这是P标签321
            
       
这是P标签322
        
      
        
      
这是P标签52
        
      
这是P标签53
        
      
这是P标签54
    
     
    
     
这是P标签6
    
这是span标签

三．jQuery其他操作

1.属性$(":checkbox:first").attr("custome") //attr()一个值是进行查询属性值$(":checkbox:first").attr("myclass","test") //attr()一个值是进行查询属性值，两个值是进行赋值$(":checkbox:first").prop("custome") //prop()一个值是进行查询属性值$(":checkbox:first").prop("class","myclss") //prop()一个值是进行查询属性值，两个值是进行赋值实例代码块：

    
        
    
    
     男    
     女
    

2 操作class的值

$(":checkbox:first").addClass(classname);//addClass(classname) 增加class$(":checkbox:first").removeClass(classname);//removeClass(classname) 增加class示例代码如下：

    
        
    
    
     男    
     女
    

3.操作HTML代码/文本/值

$(":checkbox:first").html() //获取html的代码(不带自身标签,但是包含div的文本及子标签下的所有html内容)$(".d1").text() //获取text的内容(不带div标签,包含div及子标签下的所有文本)$(".d1").html("newhtml")) //设置(更改整个div下的)html的代码(不带div标签,但是带div下的所有子标签)$(".d1").text("newtxet")) //设置(更改)整个div下的text的代码(不带div标签,但是带div下的所有子标签)$(":text").val() //获取input的value值。注意:只能用于获取再带value属性的值$(":text").val("newvalue") //获取input的value值。注意:只能用于获取再带value属性的值实例代码块如下：

    
        
    
    
     
              这个div标签        
      
保险业务
        
          
     
    

4.Css样式操作

$("#d1").css("color","red") //单个css样式设置//$("#d1").css({"color":"red","background-color":"pink"}) //多个css样式设置实例代码如下:

    
        
    
    
     
              这个div标签        
      
保险业务
        
          
     
    

5.jQuery循环方式

三种循环方法，1.js的for循环语法；2.$.each(callbackobj,function(形参x,形参2))，其中形参1的值是遍历对象的索引，形参2的值是索引对应的值;3.$.elements.each(),其中$.elements表示元素集合；实例代码块如下：

    
        
    
    
     
p标签1
    
     
p标签2
    
     
p标签3
    

5.1循环的一个应用(全选/反选/取消)

    
            
    
         
      
               
               
玫瑰
               
杜鹃
          
          
               
               
白菜
               
西红柿
          
          
               
 
               
苹果
               
香梨
          
          
               
全选
               
反选
               
取消
          
     
    

四．jQuery文档处理

1.内部文档插入append()的用法，作用:在父标签下添加一个子标签appendTo()的用法，作用:将子标签添加到父标签下prepend(),用法:将标签添加到指定标签的前面prepend(),用法:将标签添加到指定标签的前面实例代码如下:

    
        
    
    
     
        
      
这个是P标签
    
     
    

2.外部插入

after()用法:例如:A.after(B),将标签B插入到A标签之后insertAfter()用法:例如:B.insertAfter(A),将标签B插入到A标签之后before()用法:例如:A.before(B),将标签B插入到A标签之前insertAfter()用法:例如:B.insertAfter(A),将标签B插入到A标签之前实例代码如下：

    
        
    
    
     
        
      
这个是P标签
    
     
    

3.替换

replaceWith()用法:例如:B.replaceWith(A),将标签B替换成标签A实例代码如下:

    
        
    
    
     
        
      
这个是P标签
    
     
    

4.清空/删除

$("p").empty(); //只会清空标签中的内容，不会删除标签本身$("p").remove() //会删除整个标签本身(包含标签内部的内容)实例代码如下:

    
        
    
    
     
        
      
这个是P标签
    
     
    

5.复制

$("p").clone() //clone()用法:A.clone()复制一次A标签五．Css操作1.Css样式操作1.1$("#d1").css("color","red") //单个css样式设置1.2$("#d1").css({"color":"red","background-color":"pink"}) //多个css样式设置实例代码如下:

    
        
    
    
     
              这个div标签        
      
保险业务
        
          
     
    

2.位置

2.1 offset()是相对于视口(浏览器窗口)的距离2.2 position()是相对于进行了定位的父级容器的距离,所有标签的默认定位均是浏览器视口示例代码如下:

2.3 $(window).scrollTop():滚动条滚动离顶部的距离

$(window).scrollTop(num):设置滚动条滚动离顶部的距离等于num(单位px)实例代码如下:

    
            
    
    
     
    
     
    
     
      返回左部
     
    
     
    
     
      返回顶部
     
    

3.尺寸

3.1 height()/width():指内容区的高宽,不包含padding和margin区域3.2 innerHeight()/innerHeight():指包含padding区域的高宽3.3 outerHeight()/outerWidth():指包含padding区域的高宽3.4 outerHeight(true)/outerWidth(true):指带true参数则包含padding和margin区域的高宽实例代码如下:

六．事件

1.事件绑定方式1.1格式:格式:$("").bind("event",function()){function body}注意:同一个标签绑定了先后绑定了2个事件，则按jquery代码先后顺序执行这2个事件1.2事件解除绑定方式格式:$("").unbind("event")代码块如下:

    
        
    
    
     
aaa
    
     
bbb
    
     
ccc
    
     
ddd
    

2.事件委托

需求:给所有的li标签绑定点击(click)事件，点击后弹框提示,并且点击addli是添加一个li标签;

    
        
    
    
     
aaa
    
     
bbb
    
     
ccc
    
     
ddd
    
addli

此时发现，后面添加的li标签的点击事件不再进行弹框提示，那么如何解决该问题呢？

我们使用另外一种方式解决.格式:$("").on("event",[elementsselector],[data],function()){function body}代码块如下:

    
        
    
    
     
aaa
    
     
bbb
    
     
ccc
    
     
ddd
    
addli

3.事件绑定与事件委托的区别

事件绑定(bind)和事件委托(on)在处理上并不相同，事件绑定是先找到要触发事件的元素(标签)，直接进行事件绑定(也就是说事先已经拿到了所有的需要绑定的元素)；而事件委托是先找到触发事件元素的父级，相当于临时绑定，只有当触发时才发进行绑定(也就是说事先没有指定哪些元素可以触发事件，在后期可变化)。所以，事件委托可以实现2中的需求而事件绑定则不行。4.事件准备我们知道，js代码是加载一行执行一行，如果把JavaScript代码放在document之前，则会发生找到元素而不能正确执行JavaScript代码，达不到理想中的效果。在jQuery中也一样，为了解决该问题，JavaScript中使用了load方法，在jQuery中使用read方法。格式1:$(document).ready(function () { 等待document加载完成才执行的代码块}格式2:$(function () { 等待document加载完成才执行的代码块})实例代码如下:(改写2中的代码块)

    
                
    
    
     
aaa
    
     
bbb
    
     
ccc
    
     
ddd
    
addli

5.事件委托中data参数的使用

事件委托格式:$("").on("event",[elementsselector],[data],function()){function body}作用:将data中的参数传给function函数使用实例代码块如下:

    
                
    
    
     
aaa
    
     
bbb
    
     
ccc
    
     
ddd
    
addli

七．jQuery动画效果

1.切换效果$().show(time) 效果显示函数time单位为毫秒，可不带时间,不带时间则快速展示$().hide(time) 效果隐藏函数time单位为毫秒，可不带时间,不带时间则快速隐藏$().toggle(time) 效果切换函数time单位为毫秒，可不带时间,不带时间则快速切换(切换是指当前为显示状态的则变成隐藏效果，当前为隐藏状态的则变成显示效果)代码块如下:

    
                
    
    
     
    
显示隐藏切换

2.滑动效果

与切换效果类似，三个对应的函数分别为：$().slideDown();$().slideUp();$().slideToggle();实例代码如下:

    
                
    
    
     
    
显示隐藏切换

3.淡入淡出

根据更改透明度来展示或隐藏元素$().fadeIn(time) 效果淡出(显示,透明值为1)函数time单位为毫秒，可不带时间,不带时间则快速淡化展示$().fadeOut(time) 效果淡入(隐藏,透明值为0)函数time单位为毫秒，可不带时间,不带时间则快速淡化隐藏$().fadeToggle(time) 淡入淡出效果切换函数,time单位为毫秒，可不带时间,不带时间则快速切换(切换是指当前为显示状态的则淡化变成隐藏效果，当前为隐藏状态的则淡化变成显示效果)$().fadeTo(time,pram) 效果切换到指定效果函数,time单位为毫秒(必须带)，pram为设置淡入淡出最终的透明值(必须带),(该函数是将当前状态切换到设定的透明度效果状态)实例代码如下:

    
                
    
    
     
    
显示隐藏切换特定切换

4.回调函数

下列所有的function函数均为回调函数，回调函数即为等待执行完某函数后再去执行的函数。$().show(time,function () { //等待time毫秒执行完show()函数后再执行functionfunction body}); $().hide(time,function () { //等待time毫秒执行完hide()函数后再执行functionfunction body}); $().toggle(time,function () { //等待time毫秒执行完toggle()函数后再执行functionfunction body});$().slideDown(time,function () { //等待time毫秒执行完slideDown()函数后再执行functionfunction body}); $().slideUp(time,function () { //等待time毫秒执行完slideUp()函数后再执行functionfunction body}); $().slideToggle(time,function () { //等待time毫秒执行完slideToggle()函数后再执行functionfunction body}); $().fadeIn(time,function () { //等待time毫秒执行完fadeIn()函数后再执行functionfunction body}); $().fadeOut(time,function () { //等待time毫秒执行完fadeOut()函数后再执行functionfunction body}); $().fadeToggle(time,function () { //等待time毫秒执行完fadeToggle()函数后再执行functionfunction body}); $().fadeTo(time,pram,function () { //等待time毫秒执行完fadeTo()函数后再执行functionfunction body}); 八．jQuery扩展方法/插件机制(自定义方法)作用:当jQuery中的标准库提供的方法不能达到我们想要的效果时，我们可以通过扩展方法来自定义方法来让jQuery调用已达到理想效果。用jQuery写自己写插件时，最核心的两个方法。1.为jQuery添加一个静态方法,格式:$.extend(object)实例代码块如下:

    
                
    
    
     
点我呀
    

2.为jQuery添加一个方法,格式:$.fn.extend(object)

实例代码如下:

    
                
    
    
     
点我呀
    

九.欢迎关注作者公众号