1、attr（name|pro|key，val|fn） 作用获取或者设置属性节点的值 可以传递一个参数，也可以传递两个参数 如传递一个参数，代表获取属性节点的值 如传递两个参数，代表设置属性节点的值
ps：不管找到多少个元素，都只返回第一个元素指定的属性节点的值 2、removeAttr（name） 作用：删除指定属性节点
<html> <style type="text/css"> div{ margin:5px 0; border:1px solid gray;width: 100px; height: 100px; background-color: greenyellow;} </style> <script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery库--> <script type="text/javascript"> $(function (){ //找到多个，读取第1个 console.log($("span").attr("class")); //找到多个，设置多个， $("span").attr("class","box"); console.log($("span").attr("class")); //如果属性节点不存在你，系统会自动新增该属性 $("span").attr("newcla","added"); console.log($("span").attr("newcla")); //删除一个或多个属性节点，多个属性节点名可以用空格隔开 $("span").removeAttr("newcla name"); }); </script> <head> </head> <body> <span class="span1" name="myname1"></span> <span class="span2" name="myname2"></span> </script> </body> </html>1、prop方法 官方建议，在操作属性节点时，具有true和false两个属性的属性节点，如checked，selected或者disabled使用prop（），其他的使用attr（） 2、removeProp方法 删除属性节点
<html> <style type="text/css"> div{ margin:5px 0; border:1px solid gray;width: 100px; height: 100px; background-color: greenyellow;} </style> <script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery库--> <script type="text/javascript"> $(function (){ //找到所有span元素的第1个元素（下标为0） $("span").eq(0).prop("demo","myname3"); console.log($("span").prop("demo")); $("span").removeProp("demo"); console.log($("span").prop("demo")); $("input").prop("checked","true"); }); </script> <head> </head> <body> <span class="span1" name="myname1">第一个span</span><br/> <span class="span2" name="myname2">第二个span</span><br/> <input type="checkbox"> </script> </body> </html>另一则操作属性节点实例
<html> <style type="text/css"> div{ margin:5px 0; border:1px solid gray;width: 100px; height: 100px; background-color: greenyellow;} </style> <script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery库--> <script type="text/javascript"> $(function (){ //给按钮添加点击事件 var btn=document.getElementsByTagName("button")[0]; btn.onclick=function(){ var input=document.getElementsByTagName("input")[0]; var text=input.value; console.log(text); var img=document.getElementsByTagName("img")[0]; //$("img").eq(0).prop("src","images/gril01.jpg") img.prop("src","images/gril01.jpg"); } }); </script> <head> </head> <body> <input type="text"> <button>changeimg</button><br/> <img src="images/gril04.jpg"> </script> </body> </html>1、addClass（class|fn） 添加类属性 2、removeClass（class|fn） 删除类属性 3、toggleClass（class|fn[,sw]） 有就删除，没有就添加
<html> <style type="text/css"> div{ margin:5px 0; border:1px solid gray;width: 100px; height: 100px;} .class1{ background-color: green;} .class2{ background-color: red;} </style> <script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery库--> <script type="text/javascript"> $(function (){ var btn=document.getElementsByTagName("button"); btn[0].onclick=function(){ $("div").addClass("class1"); } btn[1].onclick=function(){ $("div").removeClass("class1"); } btn[2].onclick=function(){ $("div").toggle("class1"); } }); </script> <head> </head> <body> <button>添加类</button><br/> <button>删除类</button><br/> <button>切换类</button><br/> <div ></div> </script> </body> </html>1、html（[val | fn]）
2、text（[val | fn]）
3、val（[val | fn|arr]）
<html> <style type="text/css"> div{ margin:5px 0; border:1px solid gray;width: 100px; height: 100px;} .class1{ background-color: green;} .class2{ background-color: red;} </style> <script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery库--> <script type="text/javascript"> $(function (){ var btn=document.getElementsByTagName("button"); btn[0].onclick=function(){ //和原生的innerHTML一致 $("div").html("<p>我是一些段落<span>我是一个span</span></P>"); } btn[1].onclick=function(){ console.log($("div").html()); } btn[2].onclick=function(){ //和原生的innerText一致 $("div").text("<p>我是一些段落<span>我是一个span</span></P>"); } btn[3].onclick=function(){ //和原生的innerText一致 console.log($("div").text()); } btn[4].onclick=function(){ //和原生的value属性一致 $("input").val("请输入内容"); } btn[5].onclick=function(){ //和原生的value属性一致 console.log($("input").val()); } }); </script> <head> </head> <body> <button>设置html</button><br/> <button>获取html</button><br/> <button>设置text</button><br/> <button>获取text</button><br/> <button>设置value</button><br/> <button>获取value</button><br/> <div ></div> <input type="text"> </script> </body> </html>另一案例：
<html> <style type="text/css"> div{ margin:5px 0; border:1px solid gray;width: 100px; height: 100px;} .class1{ background-color: green;} .class2{ background-color: red;} </style> <script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery库--> <script type="text/javascript"> $(function (){ $("div").css("width","200px") $("div").css("backgroundColor","blue") //批量设置css $("div").css({ height:"300px", border:"5px solid red" }); //获取css样式值 console.log($("div").css("width")); }); </script> <head> </head> <body> <button>设置html</button><br/> <button>获取html</button><br/> <button>设置text</button><br/> <button>获取text</button><br/> <button>设置value</button><br/> <button>获取value</button><br/> <div ></div> <input type="text"> </script> </body> </html>再一例
<html> <style type="text/css"> div{ overflow:scroll; margin:5px 0; border:1px solid gray;width: 110px; height: 400px;} .class1{ background-color: green;} .class2{ background-color: red;} </style> <script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery库--> <script type="text/javascript"> $(function (){ var btns=document.getElementsByTagName("button"); btns[0].onclick=function(){ console.log($(".scroll").scrollTop()); } btns[1].onclick=function(){ $(".scroll").scrollTop(200); } }); </script> <head> </head> <body> <div class="scroll">这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本这里是一些文本</div> <button>设置</button> <button>获取</button> </script> </body> </html>jQuery有两种绑定事件方式 1、eventName（fn）//推荐方法 2、on（eventName，fn）//有些方法只能通过on的方法来实现
<html> <style type="text/css"> div{ overflow:scroll; margin:5px 0; border:1px solid gray;width: 110px; height: 400px;} .class1{ background-color: green;} .class2{ background-color: red;} </style> <script type="text/javascript"> $(function (){ //eventName（fn）方法。推荐方法 $("button").eq(0).click(function(){ console.log("这是jQuery的事件回调函数"); }) //on（eventName，fn） $("button").eq(1).on("click",function(){ console.log("这是jQuery的事件回调的另一种方式函数"); }); //添加多个事件在 一个按钮上 $("button").eq(0).mouseenter(function(){ console.log("鼠标进入时函数"); }) function test(){ alert("hello world"); } //移除加载在指定button上的所有事件 $("button").eq(1).off(); //移除加载在指定button上的指定事件 $("button").eq(0).off("click"); //移除指定类型的指定事件（需要传入两个参数） $("button").eq(0).off("click",test()); }); </script> <head> </head> <body> <button>设置</button> <button>获取</button> </script> </body> </html>1、return false; 2、event.stopPropagation();
<html> <style type="text/css"> .father{ width: 200px; height: 200px; background-color: green;} .son{ width: 100px; height: 100px; background-color: yellow;} </style> <script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery库--> <script type="text/javascript"> $(function (){ //以下会产生事件冒泡 $(".father").click(function (){ console.log("this is father div"); }); $(".son").click(function (){ console.log("this is son div"); //返回false会阻止事件冒泡,即事件不再向下传导 return false; }); $(".son").click(function (event){ console.log("this is son div"); //以下也可以阻止冒泡 event.stopPropagation(); }); }); </script> <head> </head> <body> <div class="father"> <div class="son"></div> </div> <a href="http://www.sina.com">我是百度</a> <form action="http://www.baidu.com"> <input type="text"> <input type="submit"> </form> </body> </html>1、return false; 2、event.preventDefault();
<html> <style type="text/css"> .father{ width: 200px; height: 200px; background-color: green;} .son{ width: 100px; height: 100px; background-color: yellow;} </style> <script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery库--> <script type="text/javascript"> $(function (){ $("a").click(function(){ alert("弹出注册框"); //阻止默认行为,不再前往连接 return false; }); //或者另一种方式阻止默认行为 $("a").click(function(event){ alert("弹出注册框"); //阻止默认行为,不再前往连接 event.preventDefault(); }) }); </script> <head> </head> <body> <div class="father"> <div class="son"></div> </div> <a href="http://www.sina.com">我是百度</a> <form action="http://www.baidu.com"> <input type="text"> <input type="submit"> </form> </body> </html>1、trigger 会自动触发冒泡 自动触发事件的时候，会触发默认行为 2、triggerHandler 不会自动触发冒泡 自动触发事件的时候，不会触发默认行为
<html> <style type="text/css"> .father{ width: 200px; height: 200px; background-color: green;} .son{ width: 100px; height: 100px; background-color: yellow;} </style> <script language="javascript" src="jquery-3.5.1.js"></script><!-- 引入jquery库--> <script type="text/javascript"> $(function (){ //或者另一种方式阻止默认行为 $(".father").click(function(){ console.log("father"); }); //自动触发了father的click事件 //$(".father").trigger("click"); $(".father").triggerHandler("click"); }); </script> <head> </head> <body> <div class="father"> <div class="son"></div> </div> <a href="http://www.sina.com">我是百度</a> <form action="http://www.baidu.com"> <input type="text"> <input type="submit"> </form> </body> </html>