Day10【jQuery进阶】each函数 ***

最新推荐文章于 2024-08-04 16:33:59 发布

信仰G

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量73

点赞数

文章标签： js jquery javascript html

本文链接：https://blog.csdn.net/qq_43639081/article/details/109472399

版权

jquery数组的遍历

1、原始遍历（普通for）将指定的代码重复执行指定的次数
2、jquery对象函数遍历（对象.each）
$("div").each(function(index,element){ })
3、jquery全局函数遍历（$ .each）重点!!!
$.each(数组的对象,function(index,elemen){})
4、jquery3.0新特性(增强for) 重点!!!
for(li of liEles){ }

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//1:-------------原始遍历（普通for）-----------------
			/*$(function () {
				//获取页面中所有的li标签
				var $lis = $("li");
				//循环
				for (var i = 0;i<$lis.length;i++){
					//获取数组中的元素，jquery对象本质是一个数组[e1,e2,e3]
					// alert($lis[i].innerHTML);
					alert($($lis[i]).text());
				}
            });*/

			//2:-------------jquery对象函数遍历-----------------
			//function 函数时每一次遍历时都会执行
			//参1	index索引值
			//参2	element指循环中的每一个元素对象 liEles[i]
			/*$(function () {
				$("li").each(function (index,element) {
					alert(index + "----"+ $(element).html())
					// alert($(element).text())
				})
			})*/

			//3:------------- jquery的全局函数遍历-----------------(重点)
			/*$(function () {
				//参1 数组 参2 就是一个function
				$.each($("li"),function (index,element) {
					alert($(element).text())
				})
			})*/

			//4:------------- jquery3.0新特性遍历(增强for)-----------------(重点)
			//java中： for(元素类型 变量名：集合或者数组)
			//js中：	  for(变量名 of 集合或者数组)
			$(function () {
				for (li of $("li")){
					alert($(li).text())
				}
			})
		</script>
	</head>
	<body>
		<ul id="city">
			<li>北京</li>
			<li>上海</li>
			<li>天津</li>
			<li>重庆</li>
		</ul>
	</body>
</html>

jQuery事件绑定和解绑

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

方式1：在标签中写死
function clickFn(){}
方式2：在程序中动态绑定，但是不能解绑
$("#btnId").click(function(){});
方式3：在程序中动态绑定，可以解绑
$("#btnId").on("click",function(){});
$("#btnId").on("mouseover",function(){});
这种绑定事件的方式可以解绑
$("#btnId").off("click");
$("#btnId").off("mouseover");
jQuery元素对象.off(事件名称); 如果off不加参数，表示解除所有事件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
    	//1:----------------在标签中写死----------------
        function clickFun() {
            alert("原始绑定")
        }

        $(function () {
        	//2:----------------动态绑定，不能解绑----------------
            $("#btnId2").click(function () {
                alert("绑定成功")
            })
			
			//3:----------------动态绑定，可以解绑----------------
            $("#btnId3").on("click",function () {//绑定点击事件
                alert("绑定成功")
            })
            $("#btnId3").on("mouseover",function () {
                alert("鼠标停在上方")
            })

            $("#btnId4").on("click",function () {
                // $("#btnId3").off("click")
                // $("#btnId3").off("mouseover")
                $("#btnId3").off()
            })
        })
    </script>
</head>
<body>
    <input id="btnId1" type="button" value="原始绑定" onclick="clickFun()"/>
    <input id="btnId2" type="button" value="动态绑定，不能解绑" />
    <input id="btnId3" type="button" value="点我-jquery绑定" />
    <input id="btnId4" type="button" value="点我-解绑" />
</body>
</html>

jQuery事件切换(了解)

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

jquery对象.on(“事件名”，函数)
jquery对象.on(“事件名”，函数)

（2）链接方式
方法返回当前对象

jquery对象.on(“事件名”，函数).on(“事件名”，函数)

（3）切换方式
hover函数等于同时绑定鼠标移入，与移出函数

jquery对象.hover(函数,函数) 参1 处理移入参2处理移出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function () {

            //1:----------------原始方式----------------
            //逐个添加事件
            /*
           $("#myDiv").on("mouseover",function () {
               $(this).css("backgroundColor","green");
           });
            $("#myDiv").on("mouseout",function () {
                $(this).css("backgroundColor","blue");
            });
            */
            
            //2:----------------链式方式----------------
            $("#myDiv").on("mouseover",function () {
                $(this).css("backgroundColor","green");
            }).on("mouseout",function () {
                $(this).css("backgroundColor","blue");
            });

            //3:----------------切换方式----------------
            /*
            $("#myDiv").hover(function () {//mouseover
                $(this).css("backgroundColor","green");
            },function () {//mouseleave
                $(this).css("backgroundColor","blue");
            });
            */
        });
    </script>
</head>
<body>

    <div id="myDiv" style="width:300px;height:300px;background:red">鼠标移入变成绿色，
    移出回复红色</div>

</body>
</html>

信仰G

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day10【jQuery进阶】each函数 ***

jquery数组的遍历1、原始遍历（普通for）将指定的代码重复执行指定的次数2、jquery对象函数遍历（对象.each）$("div").each(function(index,element){ })3、jquery全局函数遍历（$ .each）重点!!!$.each(数组的对象,function(index,elemen){})4、jquery3.0新特性(增强for) 重点!!!for(li of liEles){ }<html> <head>
复制链接

扫一扫