jquey基本选择器快速复习整理

<!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基本选择器快速复习整理

猜你喜欢
