jq基础内容1

// $(document).ready(function(){})
// 简写：
// $().ready(function(){})
// $(function(){})
alert();=window.alert();
js=>jq
// 只有jq方法才可以调用jq对象
// jq=$(js/dom文本)eg:jq=$(div) jq=$("<li>列表</li>")
// :eq()等于
// :gt()大于
// :lt()小于
$("li:eq(2)").css("color","red")//索引等于2
$("li:gt(2)").css("color","green")//索引大于2
$("li:lt(2)").css("color","blue")//索引小于2
$("li:parent").css("color","red") //文本节点（空格/换行）也可以起作用 用来验证里面有没有东西
$("li:has(.span)").css("color","red")//验证其中有无内容 选择器
$("li:contain(999)").css("color","red")//文本检查 检查的是文本 选择器
//display:none看不见 选择器只识别display:none
eg:
<script>
window.onload=function(){
console.log(0)
}
$(function(){
$("li:eq(2)").css("color","red")//索引等于2
$("li:gt(2)").css("color","green")//索引大于2
$("li:lt(2)").css("color","blue")//索引小于2

$("li:parent").css("color","red") //文本节点（空格/换行）也可以起作用 用来验证里面有没有东西
$("li:has(.span)").css("color","red")//验证其中有无内容 选择器
$("li:contain(999)").css("color","red")//文本检查 检查的是文本 选择器
//display:none看不见 选择器只识别display:none
})
</script>
<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>

效果：

 

posted @ 2021-11-08 20:04  与神明画过押  阅读(35)  评论(0)    收藏  举报