<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器</title>
<script src="../js/jquery-3.3.1.js"></script>
<script>
//类似与window.οnlοad=fuunction(){};
$(function(){
//1.基本选择器
//2.层次选择器
//"+"表示选择下一个li.~选择后面全部
console.log($("#gz+"));
//3过滤选择器
//3.1基本过滤(****)
console.log($("li:first"));//输出第一个li
console.log($("li:even"));//输出偶数的li
console.log($("li:gt(2)"));//下表大于2的li
console.log($("li:not(#gz)"));//不选择广州
console.log($("li:contains('京')"));
//3.2内容过滤
//3.3可见性过滤
console.log($("li:visible"));
//3.4属性过滤
console.log($("li[id!='gz']"));
//3.5状态过滤(**)
console.log($("input:enabled"));//筛选可用的,disabled不可用
console.log($("input:checked"));
});
//4.表单选择器
console.log($("input:checkbox"));
</script>
</head>
<body>
<ul>
<li>北京</li>
<li>上海</li>
<li id="gz">广州</li>
<li>深圳</li>
<li>南京</li>
<li style="display:none;">香港</li>
</ul>
<p>
<input type="text" disabled/>
<!-- 加disabled就不可用 不提交给服务器 -->
</p>
<p>
<input type="password"/>
</p>
<p>
羽毛球<input type="checkbox" checked/>
蓝球<input type="checkbox" checked/>
<input type="checkbox" />
</p>
</body>
</html>
选择器part3
最新推荐文章于 2021-04-27 22:47:23 发布