jquery中的选择器
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery的各种选择器</title>
<link rel="stylesheet" href="">
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<style type="text/css">
#id-name1{
width: 150px;
height: 50px;
background: red;
color: white;
}
.box2{width: 200px;height: 50px;background:pink;}
</style>
</head>
<body>
<script type="text/javascript">
// 基本选择器：
// 1.标签元素选择器：$("element")
// 2.id选择器：$("#id-name")
// 3.类选择器：$(".class-name")
// 4.全局选择器：$("*")
// 5.匹配多个元素：$('#id,.class,element')
//文档就绪函数
$(document).ready(function(){
$("*").css("background","#ccc");
$('.class-name1').css('color','red');
$('#id-name1').css('background','blue');
$("h2").css("color","blue");
})
//层级选择器：
//1.给定的父元素下匹配所以的子元素：$('父元素>子元素')
//2.给定的祖先元素下匹配所以的后代元素：$('父元素 后代元素')
//3.匹配紧跟在prev元素后面的next元素：$('prev+next')
//4.匹配prev元素后面所以的siblings元素：$('prev~siblings')
$(document).ready(function(){
$(".box1>span").css("color","green");
$(".box1 span").css("background","yellow");
$(".p1+h3").css("font-size","38px");
$(".p1~h3").css("background","pink");
})
//顺序选择器：
//1.顺序 $(":first")第一个元素；$(":last")最后一个元素
//2.比较（x的顺序从零开始）
//$(":gt(x)")表示大于值x的元素；$(":lt(x)")表示小于值x的元素；
//$(":eq(x)")表示等于值x的元素；
//3.奇偶 $(":odd")奇数顺序；$(":even")偶数顺序。（从0开始）。
//4.非 $(":not(selector)")匹配不是selector的所有元素。
$(document).ready(function(){
$("li:first").css("color","red");
$("li:last").css("color","blue");
$("li:gt(1)").css("font-size","20px");
$("li:lt(3)").css("font-style","italic");
$("li:eq(3)").css("color","green");
$("li:odd").css("background","yellow");
$("li:even").css("background","pink");
$("").css("","");
})
//内容选择器：
//$(":contains()text")匹配包含给定文本text的元素
//$(":has(selector)")匹配包含特定选择器的元素
////$(":empty")匹配不包含内容的元素，即不包含元素或者文本的空元素
//$(":parent")匹配含有子元素或者文本的元素
$(document).ready(function(){
$("p:contains(中原)").css("color","green");
$("p:has(i)").css("font-size","29px");
$(".box2:empty").css("background","blue");
$(".box2:parent").css("background","green");
})
//属性选择器：
//$("[attribute]")匹配包含给定属性的元素
//$("[attribute=value]")匹配给定属性等于特定值的元素
//$("[attribute！=value]")匹配给定属性不等于特定值的元素
//$("[attribute ^=value]")匹配给定属性以某特定值开头的元素
//$("[attribute $=value]")匹配给定属性以某特定值结尾的元素
//$("[attribute *=value]")匹配给定属性内包含特定值的元素
//$("[attrSel[1] attrSel[1] ] attrSel[1]")复合选择器，需要同时满足多个条件时使用
$(document).ready(function(){
$("strong[id]").css("color","green");
$("strong[class=class2]").css("color","blue");
$("strong[class!=cla3]").css("font-size","27px");
$("strong[class^=a]").css("font-size","15px");
$("strong[class$=5]").css("color","red");
$("strong[class*=jjj]").css("color","blue");
$("strong[class][name*=me111]").css("color","red");
})
//表单选择器：
//$(":enbaled")匹配所有激活的input元素，即可以使用的
//$(":disabled")匹配所有禁用的input元素
//$(":selected")匹配所有被选取的select元素
//$(":checked")匹配所有被选中的input元素
$(document).ready(function(){
$("input:enabled").css("background","pink");
$("input:disabled").css("background","blue");
// $("option:selected").css("color","pink");
$(":checked").parent().css("color","blue");
})
</script>
<!-- 基本选择器： -->
<h2>标签选择器</h2>
<div id="id-name1">id选择器。。。</div>
<p>类选择器ccccc</p>
<hr>
<!-- 层级选择器： -->
<div>
<h2>计算机原理</h2>
<span>php中文网，一个学习web开发的优秀网站</span><br>
<p><span>计算机软件</span></p>
<h3>javascript脚本语言</h3>
<h3>php脚本语言</h3>
</div>
<hr>
<!-- 顺序选择器： -->
<ul>
<li>中 文</li>
<li>英 文</li>
<li>俄罗斯文</li>
<li>法 文</li>
<li>德 文</li>
<li>西班牙文</li>
<li>日 文</li>
</ul>
<hr>
<!-- 内容选择器： -->
<p id="p2"><i>中原输油气分公司</p></i>
<div></div>
<div>baiduwangzhan</div>
<hr>
<!-- 属性选择器： -->
<strong id="id2">属性选择器。</strong>
<strong>属性选择器里第二个部分。</strong>
<strong>属性选择器，属性不等于。。。</strong>
<strong>dddddddddddddddddd。。。</strong>
<strong>属ggggggggggggg。。。</strong><br>
<strong>tttttttttttt</strong>
<strong name="name111">复合条件都要成立。</strong>
<hr>
<!-- 表单选择器 -->
<form action="">
<input type="text" disabled="disabled">
<input type="text" enabled="enabled">
<input type="text" enabled="enabled"><br>
<select name="" id="">
<option value="">中国</option>
<option value="" selected>俄罗斯</option>
<option value="">印度尼西亚</option>
<option value="">日本</option>
</select>
爱好：
<label for=""><input type="checkbox">游泳</label>
<label for=""><input type="checkbox">上网</label>
<label for=""><input type="checkbox" checked>乒乓球</label>
</form>
</body>
</html>