这么快就jq了?!
作者:互联网
<!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) // } // onl oad = 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) // } // onl oad = 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>
标签:function,这么,color,jq,js,div,li 来源: https://www.cnblogs.com/mz610/p/15523632.html