第二章 jquery的一些常用方法

一,jquery中的一些常用方法

1.find()方法

获取当前元素集合中的每个元素的后代

 <div id="wrap">
        <img src="../Day32/3.jpg" width="500px" height="600px" alt="">
        <div>
            <p>
                我是p标签
            </p>
            <div>
                <span>我是span标签</span>
            </div>
        </div>
        <p>
            噜噜噜
        </p>

    </div>

上面的页面的html结构是这样的

                  $("#wrap").find("div").css("color","red");

find()
他会找到id名为wrap下面的所有div

2.children()方法

只找到子元素 就是儿子 找不到孙子

              $("#wrap").children("div").css("background","green")

children

3.next()方法first()方法 同级使用

              $("#wrap").children().next("p").css("border","1px solid red")//会在div上设置了边框

next()

4.nextAll()

当前元素之后的所有元素

          $("#wrap").children().nextAll().css("background","green")

nextall

5.siblings()

获取匹配集合中每个元素的同胞,通过选择器进行筛选

之前我们清除样式的时候需要在之前写一个foe循环来进行清除样式 这次就不用了,用siblings就可以了

写一个小案列

<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <div>6</div>
    </ul>
<script>
  
        $("ul>li").eq(1).css("background","red").siblings("li").css("background","green")
        //第二个为红色 其余li为绿色
</script>

siblings

我们会发现6这个div没有被选中 是因为siblings里面可以写选择器,如果里面不写就会将ul里面所有的子元素全部选中。

-利用siblings这个方法的特性,可以用于做轮播图

二,jquery的绑定事件和解绑事件

1.绑定事件

• 直接使用事件名

    $("li").click(function(){代码块})
  

• on(事件,function(){})

  $("li").on("click",function(){代码块})
  

• bind(事件,function(){代码块})

   $("li").bind("click",function(){})
  

---

2.解除绑定

• off()
  通常用于移除通过on方法绑定的事件

    $("li").off()
  

• unbind()
  用于解绑bind绑定的事件的

    $("button").unbind();
  

---

新增事件, 移入移出的结合(相当于onmouseover onmouseout一起使用 )
写法:

         hover(function(){
                代码块1
            },function(){
                代码块2
            })