<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JQuery对象和js对象的转换</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <body> <div id="div1"> div1... </div> <div id="div2"> div2... </div> <script> // 1.通过js方式来获取名称叫div的所有html元素对象 let divs = document.getElementsByTagName("div")//获取元素集合 alert(divs.length);//可以将其当做数组使用 //对div中所有的div,让其标签体内容变为"aaa" for (let i = 0; i < divs.length; i++) { //divs[i].innerHTML = "aaa"; $(divs[i]).html("ccc"); } //2.通过jp方式来获取名称叫div的所有html元素对象 let $divs = $("div"); alert($divs.length);//可以将其当做数组使用 //对div中所有的div,让其标签体内容变为"bbb" 使用jq方式 // $divs.html("bbb"); $divs[0].innerHTML = "ddd"; $divs.get(1).innerHTML = "eee"; /* 1.JQuery对象在操作时,更加方便。 2.JQuery对象和js对象方法不通用的。 3.两者相互转换 jq -- > js :jq对象[索引] 或者 jq对象.get(索引) js -- > jq : $(js对象) */ </script> </body> </html>
JQuery事件绑定,入口函数,样式控制
事件绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件绑定</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <body> <div id="div1"> div1... </div> <div id="div2"> div2... </div> <input type="button" value="点我" id="b1"> <script> //给b1按钮添加事件 //获取b1按钮 $("#b1").click(function () { // click:点击事件 alert("abc"); }); </script> </body> </html>
样式控制
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件绑定</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <script> //给b1按钮添加事件 // window.onload = function () { // //获取b1按钮 // $("#b1").click(function () { // click:点击事件 // alert("abc"); // }); // // } //JQuery入口函数(dom文档加载完成之后执行该函数中的代码) $(function () { //获取b1按钮 $("#b1").click(function () { // click:点击事件 alert("abc"); }); }); //样式控制 $(function () { $("#div1").css("backgroundColor","red") $("#div2").css("backgroundColor","pink") }) /* window.onload 和 $(function) 区别 window.onload:只能定义一次,如果定义多次,后边的会将前边的覆盖掉 $(function):可以定义多次 */ </script> <body> <div id="div1"> div1... </div> <div id="div2"> div2... </div> <input type="button" value="点我" id="b1"> </body> </html>
标签:JQuery,function,对象,JS,b1,div,divs From: https://www.cnblogs.com/xuche/p/17108307.html