JavaScript回顾:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script> window.onload=function () { var eles=document.getElementsByClassName("item"); for (var i=0;i<eles.length;i++){ eles[i].onclick=function (event) { alert(123); } } } </script> </head> <body> <div> <div class="item btn">菜单一</div> <div class="item">菜单二</div> <div class="item">菜单三</div> </div> </body> </html>
作用域链
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script> function bar(age) { console.log(age); //age=function var age = 99; var sex='male'; console.log(age); function age() { alert(123); } console.log(age); return 100; } result=bar(5); </script> </head> <body> </body> </html>
输出: function age() { alert(123); } 99 99
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>PPPPPPP</p> <script src="jquery-3.2.1.js"></script> <script> $("p").css("color","red"); console.log($("p")[0].innerText); //innerText是DOM对象的属性 var ele=document.getElementById("id"); //通过id去找 var $ele=$("p"); //jQuery对象 </script> </body> </html>
输出 PPPPPPP
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>p</p> <p id="p2">pp</p> <p class="p3">ppp</p> <div>DIV</div> <div class="outer"> <p>PPP</p> <div class="inner"> <p>PPPPPP</p> </div> <p>PPPPPPPPPPPPPPPPPPP</p> </div> <a href="">click</a> <p>bingabcd</p> <script src="jquery-3.2.1.js"></script> <script> //基本选择器 $("*").css("color","red"); //所有标签的值都变成红色 $("*") $("#p2,.p3").css("color","red"); //指定id的标签的值变成红色 $("#id") $(".outer,.inner").css("color","red"); //$(".class") // 层级选择器 $(".outer p").css("color","red"); //后代选择器 $(".outer>p").css("color","red"); //子代选择器 $(".outer+p").css("color","red"); //毗邻兄弟选择器 $(".outer~p").css("color","red"); //普通兄弟选择器 </script> </body> </html>
jQuery筛选器，属性选择器，表单选择器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> </style> </head> <body> <ul> <li class="item">111</li> <li class="item">222</li> <li class="item">333</li> <li class="item">444</li> <li class="item">555</li> </ul> <div alex="sb">ALEX</div> <div alex="sbb">ALEX</div> <input type="text" value="123"> <input type="password" value="123"> <script src="jquery-3.2.1.js"></script> <script> //JavaScript for循环遍历 var eles=document.getElementsByClassName("item"); for (var i=0;i<eles.length;i++){ eles[i].style.color="red"; } //筛选器 $("ul .item").css("color","red"); //取所有class="item"的元素，变成红色 $("ul .item:first").css("color","red");//取第一个，变成红色 $("ul .item:last").css("color","red");//取最后一个 $("ul .item:eq(2)").css("color","red");//取元素下标为2的元素变成红色 $("ul .item:even").css("color","red");//取元素下标为偶数的元素变成红色 $("ul .item:odd").css("color","red");//取元素下标为奇数的元素变成红色 $("ul .item:gt(2)").css("color","red");//取元素下标大于2的元素变成红色 $("ul .item:lt(4)").css("color","red");//取元素下标小于4的元素变成红色 //属性选择器 $("[alex='sb']").css("color","red"); //表单选择器: $(":text) $("[type='text']").css("border","3px solid red"); $(":text").css("border","3px solid red") </script> </body> </html>