這麼快就jq了？！
阿新 • • 發佈：2021-11-08
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/jquery-3.3.1.min.js"></script> <title>Document</title> <script> // window.onload = function () { // console.log(0) // } // onload = function () { // console.log(0) // }
// alert(); // window.alert();
// jquery物件的三種表現形式 // $(document).ready(function(){
// }) // $().ready(function(){
// }) // $(function(){
// })
// js物件轉換jq物件 // js => jq // jq = $(js/dom) // jq = $(div) // jq = $("<li>列表</li>")
// jq物件轉換成js物件 // [0] // js = jq[0] // 例子： // js = $(div)[0] // js = $div[0]
$(function () { // 將js封裝為jq // 簡化前 // var div = document.querySelector(".div"); // var $div = $(".div")
// 簡化後 var $div = $(".div")
// js封裝成jq之前 // div.onclick = function(){
// }
// js封裝成jq之後 // $div.click(function(){
// })
$("li:frist") // eq 代表等於 $("li:eq(2)").css("color", "red") // gt 代表大於 $("li:gt(2)").css("color", "green") // lt 代表小於 $("li:lt(2)").css("color", "bule") // li:eq(2)中li 和 :eq之間不能加空格！！！因為過濾的是li自身所以要緊挨著:eq
// 內容過濾器 // $("li:parent").css("color","red") // $("li:parent").css("color","red") 文字節點（空格/換行）也可以起作用 用來驗證裡面有沒有東西 //$("li:has(.span)").css("color","red")驗證其中有無內容 選擇器 //$("li:contain(999)").css("color","red")文字檢查 檢查的是文字 選擇器 //display:none看不見 選擇器只識別display:none }) </script> </head>
<body> <div class="div"></div> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4<span class="span">999</span></li> <li>列表5</li> <li>
</li> </ul> </body>
</html>
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="./js/jquery-3.3.1.min.js"></script> <title>Document</title> <script> // window.onload = function () { // console.log(0) // } // onload = function () { // console.log(0) // }
// alert(); // window.alert();
// jquery物件的三種表現形式 // $(document).ready(function(){
// }) // $().ready(function(){
// }) // $(function(){
// })
// js物件轉換jq物件 // js => jq // jq = $(js/dom) // jq = $(div) // jq = $("<li>列表</li>")
// jq物件轉換成js物件 // [0] // js = jq[0] // 例子： // js = $(div)[0] // js = $div[0]
$(function () { // 將js封裝為jq // 簡化前 // var div = document.querySelector(".div"); // var $div = $(".div")
// 簡化後 var $div = $(".div")
// js封裝成jq之前 // div.onclick = function(){
// }
// js封裝成jq之後 // $div.click(function(){
// })
$("li:frist") // eq 代表等於 $("li:eq(2)").css("color", "red") // gt 代表大於 $("li:gt(2)").css("color", "green") // lt 代表小於 $("li:lt(2)").css("color", "bule") // li:eq(2)中li 和 :eq之間不能加空格！！！因為過濾的是li自身所以要緊挨著:eq
// 內容過濾器 // $("li:parent").css("color","red") // $("li:parent").css("color","red") 文字節點（空格/換行）也可以起作用 用來驗證裡面有沒有東西 //$("li:has(.span)").css("color","red")驗證其中有無內容 選擇器 //$("li:contain(999)").css("color","red")文字檢查 檢查的是文字 選擇器 //display:none看不見 選擇器只識別display:none }) </script> </head>
<body> <div class="div"></div> <ul> <li>列表1</li> <li>列表2</li> <li>列表3</li> <li>列表4<span class="span">999</span></li> <li>列表5</li> <li>
</li> </ul> </body>
</html>