9.jquery学习(对象访问)

一.对象访问

1.each( )  遍历   

$("#div1 div").each(function(i){
        $(this).attr("index",i)
        console.log(i);
    })
//$(this)代表现在正在遍历的元素
//在使用当前元素的时候必须要$(this)   

2.length( )  返回长度

$("div").length

3.get( ) 以列表的形式返回元素

$($("#div1 div").get(2)).css("background","black")
//这个方法比较奇特 返回列表出来还不能直接用jQuery的方法 
//必须在前面加一个美元符号  才能使用jQuery的方法

//上面的那段代码等同于 
$("#div1 div").eq(2).css("background","black")

4.index(选择器)  

$("#div1 div").index($(".ddd")) 
//查找.ddd在其中的下标

5.data( )在元素上面存储数据

//这个有点吊阿  
$("#div1 div").eq(2).data("hahah")
//传入一个参数为获取
//传入两个参数为赋值（存储）

6.removeData( ) 移除存储的数据

$("#div1 div").removeData("hahah")

7.queue( ) 显示在元素上执行函数的队列

$("#div1 div").queue()
//没有就返回一个列表

8.extend 扩展jQuery 留着等会研究

二.筛选

 1.eq(index) 根据下标取出元素

$("xxx").eq(index).css("","")   
//操作元素

2.first( ) 取出列表的第一个元素 

$("xxx").first()
//列表的第一个元素

3.last()  取出列表的最后一个元素

$("xxx").last() 
//列表的最后一个元素

4.hasClass("className")  判断是否有这个元素

$("xxx").hasClass("className")  
//如果有就返回true 如果没有就返回false

5.filter("表达式")  更加精确的匹配  

$("div").filter("#divv").css("background","black")
//通俗的讲就是在已经匹配的基础上   再次匹配其中含有的类   元素   id 等等

 6.is(选择器)   判断元素是否符合条件  在集合中只要有一个符合条件  就返回true

$("#form").is(":checked")  //判断复选框是被选中
$("#form").is(":animated")  //判断元素是否在动画中

//is()中也可以传入函数  函数的返回值必须是true或者false

7.map(function(){ return xxx})  把所有匹配到的元素放入一个数组   然后根据return的值返回  

$("div").map(function(){
        return this
    })
//如果return this   那么返回的值应该和 $("div").get() 一样

 8.has(选择器)  匹配含有这个选择器后代的元素    有这个后代的元素会得以保留

$('li').has('ul').css('background-color', 'red')
//含有后代ul的li背景颜色会是red

9.not(选择器)  去掉与选择器匹配的元素

$("div").not(".div1")

10.slice(start，end)   截取元素  

$("div").slice(1,3)
从start开始   从end结束 

11.children()   选取子集  

$(".div2").children()

 12.find()   找多所有的子孙

$("div").find()

13.parent()   找到父级

$("div").parent()

14.parents()   找到所有的祖先

$("div").parents()

15.next()  下一个元素

//自己相邻的弟弟元素   
$("div").next()

16.prev()   上一个元素

//自己相邻的上一个元素
$("div").next()

17.siblings()  兄弟元素

$("div").siblings()

18.add()

 // 已经确定好了div 
$("div").css("xx","xxx") 
// 想要添加其他元素 
$("div").add().css("xx","xxx")