<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<li class="li">苹果</li>
<li class="li">小米</li>
<li>华为</li>
<li>三星</li>
<li><span></span>联想</li>
<button>更多</button>
</ul>
</div>
<script type="text/javascript">
//基本标签选择器
//$("#box li").css("background","#ccc"); //后代
//$("#box>li").css("background","#ccc"); //子代
//$("#box>li").css("background","#ccc"); //子代
//$(".one+li").css("background","#ccc"); //同级的下一个标签
//$(".one~li").css("background","#ccc"); //同级下所有
//$("#box>ul>li:last").css("background","#ccc") //选取最后一个
//$("#box>ul>li:not(:last)").css("background","#ccc") //除了最后一个
//$("#box>ul>li:odd").css("background","#ccc") //选取奇数
//$("#box>ul>li:gt(2)").css("background","#ccc") //选取下标大于2的
//$("#box>ul>li:not(:last,:lt(2))").css("background","#ccc") //组合
//$("#box>ul>li:contains(3)").css("background","#ccc") //含有指定文本
//$("#box>ul>li:empty").css("background","#ccc") //选取空元素(无子代)
//$("#box>ul>li:has(span)").css("background","#ccc") //含有某个子标签
//$("#box>ul>li:parent").css("background","#ccc") //含有子元素,与empty相反
//演示visible和hidden选择器
/*$("#box>ul>li").css("float","left");
var $arr = $("#box>ul>li:not(:last,:lt(2))");
$arr.css("display","none");
$("#box button").click(function(){
if($arr.is(":hidden")){ //is方法
$arr.css("display","block");
$("#box button").text("隐藏");
}else{
$arr.css("display","none");
$("#box button").text("更多");
}
})*/
//属性选择器
//$("li[class]").css("background","red"); //选取有class属性的
//$("li[class=li]").css("background","red"); //选取class属性等于li
//$("li[class $= i]").css("background","red"); //选取class属性以i结尾的
//$("li[class ^= i]").css("background","red"); //选取class属性以i开头的
//子级过滤器
//$("li:nth-child(4)").css("background","red"); //选取第几个
//$("ul li:first-child").css("background","red"); //选取ul下的第一个li
</script>
<input type="checkbox" checked>
<input type="radio" name="">
<input type="file" name="">
<input type="text" name="">
<input type="textarea" name="">
<input type="checkbox" name="">
<button>1</button>
<script type="text/javascript">
//表单属性状态选择器
//console.log($(":checked").length); //选取checked的单选和复选表单
//console.log($(":enable").length); //选取可操作的表单
//表单对象选择器
console.log($(":input").length);
console.log($(":checkbox")); //选择checkbox表单
console.log($(":text")); //选择text表单
console.log($(":input")[0]); //jquery对象转换为dom对象
console.log($(":input").get(0)); //jquery对象转换为dom对象
var v = document.getElementById('box');
console.log($(v)); //Dom对象转化为jquery对象
</script>
</body>
</html>
jquey基本选择器快速复习整理
最新推荐文章于 2024-04-19 00:11:01 发布