day10-Jquery进阶

day10-Jquery进阶

学习目标

1.能够使用jQuery对象的遍历方法
2.能够使用jQuery全局的遍历方法
3.能够使用jQuery3.0的for-of遍历方法
4.能够使用jQuery的绑定与解绑方法

jquery数组的遍历

1: 原始遍历（普通for）将指定的代码重复执行指定的次数

<!--原始的方式-->
        $(function () {
            //获取页面中所有的li标签
            var $lis =	$("li")
            //循环
            for(var i =0;i<$lis.length;i++){
                    //获取数组中的元素  jquery对象本质是一个数组 [e1,e2,e3]
                   //alert($lis[i].innerHTML)//用js对象.属性访问
                   alert($($lis[i]).text())//多加一个$变成一个对象，就可以调用函数
            }
        })

2:jquery对象函数遍历（对象.each）

 $("div").each(function(index,element){  });

e.g:

  //参1  index索引值，会跟着改变
        //参2  element指循环中的每一个元素
 $(function () {
            $("li").each(function (index,element) {
                //alert(index)
                alert($(element).text())
            })
        })

**3:jquery全局函数遍历（$.each） 重点!!!**用的比较多

$.each(数组的对象,function(index,elemen){})

e.g: //全局循环函数
 $(function () {
                //  参1 数组 参2就是一个function
                $.each($("li"),function (index,element) {
                    alert($(element).text())
                })
        })`

4:jquery3.0新特性(增强for) 重点!!!

 for(li of liEles){
  }

	<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>

只有导入3开头的js才能使用

        //java  for(元素类型 变量名:集合或者数组)
        //js  for(变量名 of 集合或者数组)
 $(function () {
             for(li of $("li")){
                 alert($(li).text())
             }
         })

jquery事件绑定和解绑

事件的绑定和解绑

<input id="btnId" type="button" onclick="clickFn()" value="点我,弹框"/>

方式1：在标签中写死，不能解绑

function clickFn(){}

<input id="btnId1" type="button" value="点我44" onclick="func1()" />

方式2：在程序中动态绑定，但是不能解绑

$("#btnId").click(function(){});

<input id="btnId2" type="button" value="动态：点我44" />
   $(function () {
            //在页面加载成功时给btn2绑定事件
            $("#btnId2").click(function () {
                alert("绑定成功")
            })
        })

上两种方法都不能解绑，只有用.on的词可以解绑，.off解绑，方式三可以解绑

方式3：在程序中动态绑定，可以解绑

$("#btnId").on("click",function(){});
$("#btnId").on("mouseover",function(){});

这种绑定事件的方式可以解绑

$("#btnId").off("click");
$("#btnId").off("mouseover");jQuery元素对象.off(事件名称);//如果off不加参数，表示解除所有事件

e.g:

        $(function () {
            $("#btnId3").on("click",function () {//绑定点击事件
                alert("绑定成功")
            })
            $("#btnId3").on("mouseover",function () {//绑定点击事件
                alert("鼠标停在上方")
            })
            $("#btnId4").on("click",function () {//绑定点击事件
                //$("#btnId3").off("click")
                //$("#btnId3").off("mouseover")
                $("#btnId3").off()//清除所有的事件绑定，一次性清除所有的事件绑定
            })
        })
        
<input id="btnId3" type="button" value="点我-jquery绑定" />
<input id="btnId4" type="button" value="点我-解绑" />

jquery事件切换

（1）逐个添加事件
需要几个事件，就天添加几次，每次是对象调用函数on

 //获取div元素$("#myDiv").on("mouseover",function () {
                 $("#myDiv").css("backgroundColor","green")
             })  
             $("#myDiv").on("mouseleave",function () {
                 $("#myDiv").css("backgroundColor","red")
             })

上为对象调用.on方法返回当前对象，on方法执行完后会访问当前对象，既然返回当前对象，可以用当前对象直接调，叫做链接方式

（2）链接方式

 链式
            $("#myDiv").on("mouseover",function () {
                $("#myDiv").css("backgroundColor","green")
            }).on("mouseleave",function () {
                $("#myDiv").css("backgroundColor","red")
            })

（3）切换方式

over函数等于同时绑定鼠标移入，与移出函数

   $("#myDiv").hover(function () {//mouseover
                $("#myDiv").css("backgroundColor","green")
            },function () {//mouseout
                $("#myDiv").css("backgroundColor","red")
            })
        })
        //这个方法只能处理鼠标移进移出的效果

通常用第一种比较好