jQuery 常用方法总结

熟练掌握以下内容，jquery 你已经会使用一大半了，当然其中原理当我们慢慢深入自会心领神会，融会贯通。

一. 选择器

    1. $("#div1")  =>  根据元素的id属性值来查找节点(id选择器)
    2. $(".div1")  =>  根据元素的class属性值来查找节点(class选择器)
    3. $(".div1, p")  =>  将每一个选择器匹配到的元素合并后一起返回(群组选择器)
    4. $(".div1 ul li")  =>  查找祖先元素下匹配所有的后代元素(结构选择器)
    5. $(".div1 > ul > li")  =>  查找给定的父元素下匹配所有的子元素(结构选择器)
    6. $(".div1 ul li:eq(1)")  =>  查找一个给定索引值的元素(索引值是从0开始)
    7. $('input[name="user"]')  =>  根据元素的属性来查找元素
    8. $(".div1:visible")  =>  查找所有的可见元素
    9. $("input:checked")  =>  选中的表单控件
    10. $("select option:selected")  =>  匹配所有选中的option元素

二. 筛选

    1. $("div").eq(1)  =>  获取第N个元素(从0开始)
    2. $("li").first()  =>  获取第一个元素
    3. $("li").last()  =>  获取最后一个元素
    4. $(".div1").hasClass("selected")  =>  判断元素是否有指定的类   有返回true或false
    5. $(".div1").children()  =>  返回所有的子元素，参数可以是一个选择器，会对子元素进行筛选
    6. $(".div1").find("span")  =>  获取.div1节点下的所有的span元素(后代元素)
    7. $(".div1").next()  =>  获取下一个兄弟节点
    8. $(".div1").nextAll()  =>  获取下边所有的兄弟节点
    9. $(".div1").prev()  =>  获取上一个兄弟节点
    10. $(".div1").prevAll()  =>  获取上边所有的兄弟节点
    11. $(".div1").siblings()  =>  获取.div1元素所有的兄弟节点
    12. $(".div1").parent()  =>  查找.div1元素的父节点
    13. $(".div1").parents("选择器")  =>  返回指定的祖先元素
    14. $(".div1").find("p").end()  =>  将匹配的元素列表变为上一次的状态

三. CSS

    1. $(".div1").css({...})  =>  设置元素css样式，同时设置多个
    2. $(".div1").width()  =>  获取元素内容的宽度(不包含padding和border)，传参数表示设置
    3. $(".div1").innerWidth()  =>  获取元素可视区的宽度(不包含border)，传参数表示设置
    4. $(".div1").outerWidth()  =>  获取元素盒模型的宽度，传参数表示设置
    5. $(".div1").height()
    6. $(".div1").innerHeight()
    7. $(".div1").outerHeight()
    8. $(".div1").offset().left/top  =>  获取匹配元素在当前视口的相对偏移
    9. $("html, body").scrollTop()  =>  获取页面卷过去的距离，传参表示设置

四. 事件

    1. $(".div1").on("事件类型", 事件处理函数)  =>  表示元素的事件绑定，事件类型没有on
    2. $(".div1").off("事件类型")  =>  表示元素事件的解绑
    3. $(".div1").on("事件类型", "选择器", 事件处理函数)  =>  表示事件的委派，选择器所选择的元素是真正产生事件的元素

五. 属性操作

    1. $(".div1").attr()  =>  属性操作，一个参数表示查找属性，两个参数表示设置属性，如果想同时设置多个属性，传json对象
    2. $(".div1").removeAttr()  =>  表示移除一个属性，参数是属性名
    3. $(".div1").addClass("selected")  =>  表示追加class属性
    4. $(".div1").removeClass("selected")  =>  表示移除一个class属性
    5. $(".div1").html()  =>  设置或获取节点的html文本，不传参数表示获取，传参表示设置
    6. $("input").val()  =>  设置或获取表单元素的值，不传参数表示获取，传参表示设置
    7. $("input[type='checkbox']").prop("checked")  =>  获取表单元素的选中状态，返回 true/false

六. 文档处理

    1. $(".div1").append()  =>  节点的追加，参数节点作为子元素追加到目标节点后边，参数可以是字符串也可以是节点对象
    2. $(".div1").after()  =>  在匹配的元素之后插入内容，作为兄弟节点插入，参数可以是字符串也可以是节点对象
    3. $(".div1").before()  =>  在匹配的元素之前插入内容，作为兄弟节点插入，参数可以是字符串也可以是节点对象
    4. $(".div1").remove()  =>  表示节点的移除
    5. $(".div1").clone()  =>  表示节点的克隆/复制   包含后代元素元素   参数默认是false   如果参数是true表是事件也会被克隆

七. 核心

    1. each 方法  =>  jQuery对象.each(function(){})  =>  表示节点的遍历
    2. index 方法  =>  jQuery对象.index()  =>  获取当前节点在节点列表中的索引值
    3. length 属性  =>  获取JQ对象中节点的个数
    4. $(".div1").get(0)  =>  获取JQ对象中一个匹配的元素，返回原生js对象，等价于$(".div1")[0]

八. ajax

    $.ajax({ 
     type : "POST", //提交方式 
     url : "",//路径 
     data : { 
      //提交的参数
     },//数据，这里使用的是Json格式进行传输 
     success : function(result) {//返回数据根据结果进行相应的处理 
      if ( result.success ) { 
        这里写成功的数据处理
      } else { 
        这里写错误的数据处理
      } 
     } 
    }); 

post 方法

    $.post( "",//路径 
        { 
            //提交的参数
        },//数据，这里使用的是Json格式进行传输 
        function(result) {//返回数据根据结果进行相应的处理 
          if ( result.success ) { 
            这里写成功的数据处理
          } else { 
            这里写错误的数据处理
          } 
         }
     ); 

get 方法

    $.get( "",//路径 
        { 
            //提交的参数
        },//数据，这里使用的是Json格式进行传输 
        function(result) {//返回数据根据结果进行相应的处理 
          if ( result.success ) { 
            这里写成功的数据处理
          } else { 
            这里写错误的数据处理
          } 
         }
     ); 

九. 动画

    1. $(".div1").show()  =>  显示元素
    2. $(".div1").hide()  =>  隐藏元素
    3. $(".div1").fadeIn()  =>  淡入动画
    4. $(".div1").fadeout()  =>  淡出动画
    5. $(".div1").slideUp()  =>  收起的动画
    6. $(".div1").slideDown()  => 展开的动画
    7. $(".div1").animate()  =>  自定义动画  参数：1. 样式的json对象   2. 动画持续时间    3. 回调函数
    8. stop => jQuery 的stop方法是用来清空动画序列

十. 工具方法

    1. $.trim(str)  =>  过滤字符串首位空格
    2. $.isArray(arr)  =>  判断参数是否是数据
    3. $.inArray("John", arr)  =>  查找第一个参数在数组中的位置(如果没有找到则返回 -1 )
    4. $.proxy()  =>  $.proxy(方法名, 新的引用)(方法的参数列表)  改变方法中的this指向

更多详细知识介绍请访问我的个人主页