摘要：<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JQuery选择器</title>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JQuery选择器</title>
<!-- 引用线上JQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
/*清除浏览器边距*/
*{margin: 10px 20px;padding: 0;}
/*添加文本及测试用样式*/
div{width: 100px;height: 100px;background:#ccc;}
h1{color: red;margin-bottom: 20px;}
h3{margin-bottom: 20px;}
pre{font-size: 1.5rem;}
</style>
</head>
<body>
<!-- 1.基本选择器 -->
<h1>1.基本选择器</h1>
<pre>
$('#id名') 根据给定的id来匹配到元素
$('.class名') 根据给定的class名来匹配到元素
$('element') 根据给定的标签来匹配到元素
$('*')匹配所有的元素
$('选择器1,选择器2...选择器n') 多项选择器，每个选择器用逗号隔开
</pre>
<!-- 1.测试 -->
<h3>测试</h3>
<div id="demo01">成功背景变红</div>
<div class="demo01">成功背景变蓝</div>
<div></div>
<p>成功字体变红</p>
<script type="text/javascript">
$(function(){
// id选择
$('#demo01').css('background','red')
// class选择
$('.demo01').css('background','blue')
// 标签选择器
$('p').css('color','red')
// 全部选中,变宽
$('*').css('width','200px')
// 选中的变回去
$('#demo01,.demo01').css('width','100px')
})
</script>
<br>
<hr>
<br>
<!-- 2.层级选择器 -->
<h1>2.层级选择器</h1>
<pre>
$('父级元素 > 子级元素'):给定的父级元素下匹配所有的子元素：
$('祖先元素 后代元素'):给定的祖先元素下匹配所有的后代元素：
$('前一个元素 + 后一个元素')(同级的元素):匹配紧跟在前一个元素后面的next元素：
$('prev ~ siblings'):匹配prev元素后面所有的siblings元素：
</pre>
<!-- 2.测试 -->
<h3>测试</h3>
<ul>
<li>1</li>
<li>1</li>
<div>
<li>2
<div>
<li>3</li>
</div>
</li>
</div>
<li>1</li>
<li>1</li>
</ul>
<form>
<label>姓名</label>
<input type="" name="">
<button>按钮</button>
<input type="" name="">
<input type="" name="">
</form>
<script type="text/javascript">
$(function(){
// 父级选子级
$('ul>li').css('list-style','none')
// 祖先选后代
$('ul li').css('list-style','none')
// 前一个选后一个
$('input+button').css('height','100px')
// 前一个选后面所有
$('label~input').css('background','pink')
})
</script>
<br>
<hr>
<br>
<!-- 3.顺序选择器 -->
<h1>3.顺序选择器</h1>
<pre>
1、顺序
$(':first') 第一个元素
$(':last') 最后一个元素
2、比较(x的顺序是从0开始)
$(':gt(x)')表示大于值x的元素
$(':lt(x)')表示小于值x的元素
$(':eq(x)')表示等于值x的元素
3、奇偶数
$(':odd')奇数顺序
$(':even')偶数顺序
4、非
$(':not(selector)')匹配不是selector的所有元素
</pre>
<!-- 3.测试 -->
<h3>3.测试</h3>
<p id="box">one</p>
<p>two</p>
<p>tree</p>
<p>4</p>
<p>5</p>
<p>6</p>
<script type="text/javascript">
$(function(){
// 第一个
$('p:first').css('color','black')
// 最后一个
$('p:last').css('color','blue')
// 大于第四个的元素
$('p:gt(4)').css('font-size','30px')
// 小于第三个的元素
$('p:lt(3)').css('font-size','50px')
// 等于值1的元素
$('p:eq(1)').css('color','blue')
// 所有奇数元素
$('p:odd').css('background','#ccc')
// 所有偶数元素
$('p:even').css('background','red')
// 所有不是id为box的元素
$('p:not(#box)').css('background','pink')
})
</script>
<br>
<hr>
<br>
<!-- 4.内容选择器 -->
<h1>4.内容选择器</h1>
<pre>
$(':contains(text)') 匹配包含给定文本（text）的元素
$(':has(selector)')匹配包含特定选择器元素的元素
$(':empty')匹配不含有内容的元素（即 不包含子元素或者文本的空元素）
$(':parent')匹配含有子元素或者文本的元素
</pre>
<!-- 4.测试 -->
<h3>4.测试</h3>
<div >jack</div>
<div>jun</div>
<div>jack cheng</div>
<div>jion</div>
<div><span>PHP中文网</span></div>
<div></div>
<div><b></b></div>
<script type="text/javascript">
$(function(){
// 带有文本jun的div
$('div:contains(jun)').css('color','blue')
// 带有span标签选择器的元素
$('div:has(span)').css('color','red')
// 不含有内容的元素
$('div:empty').css('background','pink')
// 含有子元素或文本的元素
$('div:parent').css('background','red')
})
</script>
<br>
<hr>
<br>
<!-- 5.属性选择器 -->
<h1>5.属性选择器</h1>
<pre>
$('[属性名]')匹配包含给定属性的元素
$('[attribute=value]')匹配给定属性是某个特定值的元素
$('[attribute！=value]')匹配所有不含有指定值的属性，或者说是属性不等于特定值的元素
$('[attribute ^= value]')匹配给定属性是以某些值开始的元素
$('[attribute $= value]')匹配给定属性是以某些值结尾的元素
$('[attribute *= value]')匹配给定属性包含某些值的元素
$('attrSel[1] attrSel[1] attrSel[1]')复合选择器，需要同时满足多个条件时使用
</pre>
<!-- 5.测试 -->
<h3>5.测试</h3>
<form>
<label>1</label> <input type="text" name="new" id="woman" value="1"><br>
<label>2</label> <input type="password" name="new1" id="man" value="2"><br>
<label>3</label> <input name="new"id="new"><br>
<label>4</label> <input type="button" value="按钮" =""><br>
</form>
<script type="text/javascript">
$(function(){
// 包含type属性的元素
$('input[type]').css('color','#fff')
// 所有type属性是button的值
$('input[type=button]').css('background','blue')
// 所有type属性不是text的元素
$('input[type!=text]').css('background','red')
// type值是以t开始的
$('input[type ^=t ]').css('background','pink')
// type值是以n结尾的
$('input[type $=n ]').css('background','red')
// type值是包含o的
$('input[type *=o ]').css('background','blue')
// 需同时满足有id，name含有n的值
$('input[id][name*=n]').css('height','100px')
})
</script>
<br>
<hr>
<br>
<!-- 6.表单选择器 -->
<h1>6.表单选择器</h1>
<pre>
$(':enabled')所有激活的input元素（可以使用的input元素）
$(':disabled')所有禁用的input元素（不可以使用的input元素）
$(':selected')所有被选取的元素，针对于select元素
$(':checked')所有被选中的input元素
</pre>
<!-- 6.测试 -->
<h3>6.测试</h3>
<form>
输入框1<input type="text" name=""><br>
输入框2<input type="text" name=""><br>
输入框3<input type="text" name="" disabled><br>
输入框4<input type="text" name=""><br>
<select>
<option>摩羯座</option>
<option selected>双鱼座</option>
<option>射手座</option>
<option>天蝎座</option>
</select>
<br>
爱好：
<label><input type="checkbox" name="">看书</label>
<label><input type="checkbox" name="" checked>游泳</label>
<label><input type="checkbox" name="">游戏</label>
</form>
<script type="text/javascript">
$(function(){
// 所有激活的input元素
$(':enabled').css('background','pink')
// 所有禁用的input元素
$(':disabled').css('background','red')
// 所有被选取的元素，针对于select元素
$(':selected').css('color','blue')
// 所有被选中的元素
$(':checked').parent().css('color','red')
})
</script>
<br>
<br>
</body>
</html>
批改老师：韦小宝批改时间：2019-03-01 16:30:12
老师总结：写的很不错 选择器是很基础的东西 以后干啥基本上都需要用到 一定要好好掌握
