摘要：总结：总结基本都在代码的注释里。感觉这个东西得多练，要不容易忘。代码：<!DOCTYPE html><html><head> <title>jQuery选择器</title> <script type="text/javascript" src="jq_3.3.1_mi.js"><
总结：
总结基本都在代码的注释里。感觉这个东西得多练，要不容易忘。
代码：
<!DOCTYPE html>
<html>
<head>
<title>jQuery选择器</title>
<script type="text/javascript" src="jq_3.3.1_mi.js"></script>
<style type="text/css">
div{
width:100px;
height: 100px;
margin-bottom: 20px;
background-color:grey;
}
</style>
</head>
<body>
<script type="text/javascript">
//基本选择器
//语法
// $('#id') id选择器
// $('.class') class选择器
// $(''element) 标签选择器
// $('*') 匹配所有元素
// $('#id, .class, element')匹配到页面中多个选择器
// $(document).ready(function(){
// $("#box").css('background-color','red');
// $('.box').css('background-color', 'blue');
// $('span').css('color', 'red');
// $('#box, .box, span').css('font-size', '30px');
// })
// 层级选择器（相当于父类和子类的关系）
// 子元素选择器：给定的父级元素下匹配所有的子元素： $('父级元素 > 子级元素')
// 后代选择器：给定的祖先元素下匹配所有的后代元素： $('祖先元素 后代元素')
// 相邻选择器：匹配紧跟在prev元素后面的next元素： $('prev + next')（同级的元素）
// 兄弟选择器：匹配prev元素所有的siblings元素： $('prev ~ siblings')
// 顺序选择器
// 1.顺序
// $(':first')
// $(':last')
// 2.比较(x的顺序从0开始)
// $(':gt(x)') 表示大于x的元素
// $(':lt(x)') 表示小于x的元素
// $(':eq(x)') 表示等于x的元素
// 3.奇偶数
// $(':odd') 奇数排序
// $(':even') 偶数排序
// 4.非
// $(':not(selector)') 匹配不是selector的所有元素
// $(document).ready(function(){
// // $('p:first').css('background-color', 'red');
// // $('p:last').css('background-color', 'blue');
// // $('p:gt(1)').css('color', 'pink');
// // $('p:lt(2)').css('background-color', 'blue');
// // $('p:eq(2)').css('color', 'red');
// $('p:odd').css('background-color', 'lightgreen');
// $('p:even').css('background-color', 'lightblue');
// $('p:not(#box)').css('color', 'red');
// })
// 内容选择器
// 语法：
// $(':contains(text)') 匹配包含给定文本（text） 的元素
// $(':has(selector)') 匹配包含特定选择器的元素
// $(':empty') 匹配不含有内容的元素 （即 不包含子元素或者文本的空元素）
// $(':parent') 匹配含有子元素或者文本的元素
// $(document).ready(function(){
// $('div:contains(wjh)').css('background-color', 'blue');
// $('div:has(b)').css('background-color', 'red');
// $('div:empty').css('background-color', 'yellow')
// $('div:parent').css('background-color', 'green');
// })
// 属性选择器
// 语法：
// $('[attribute]') 匹配包含给定属性的元素
// $('[attribute=value]') 匹配给定属性是某个特定值的元素
// $('[attribute!=value]') 匹配所有不含有给定值的属性，或者说属性不等于特定值的元素
// $('[attribute ^= value]') 匹配给定元素是以某些值开始的元素
// $('[attribute $= value]') 以某些值结束的元素
// $('[attribute *= value]') 包含某些值的元素
// $('attrSel[1] attrSel[1] attrSel[1]') 复合选择器，需要同时满足多个条件时使用
// $(document).ready(function(){
// $('input[type]').css('background-color', 'lightyellow');
// $('input[type=text]').css('background-color', 'red');
// $('input[type!=password]').css('background-color', 'blue');
// $('input[type^=b]').css('background-color', 'green');
// $('input[type$=l]').css('background-color', 'yellow');
// $('input[type*=t]').css('background-color', 'red');
// $('input[type][name=new1][id]').css('background-color', 'green');
// // $('[name]').css('background-color', 'red');
// })
// 表单选择器
// 语法：
// $(':enabled') 所有激活的 input 元素
// $(':disabled') 所有禁用的 input 元素
// $(':selected') 所有被选取的元素，针对于select元素
// $(':checked') 素有被选中的 input 元素
$(document).ready(function(){
$('input:enabled').css('background-color', 'yellow');
$('input:disabled').css('background-color', 'red');
$(':selected').css('background-color', 'red');
$('input:checked').parent().css('background-color', 'blue');
})
</script>
<!-- <div id="box"> i </div>
<div class="box"> love </div>
<span>wjh小别墅</span> -->
<!-- <p id="box">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p> -->
<!-- <div class="wjh">jack</div>
<div>wjh</div>
<div>jack cheng</div>
<div>join</div>
<div><b>php中文网</b></div>
<div></div>
<div><span></span></div> -->
<!-- <label>1</label><input type="text" name="new1" id="box"><br>
<label>2</label><input type="password" name="new" id="12"><br>
<label>3</label><input name=""><br>
<label>4</label><input type="email" name=""><br>
<label>5</label><input type="button" value="按钮" ><br>
</body>
-->
<form>
输入框1 <input type="" name=""><br>
输入框2 <input type="" name=""><br>
输入框3 <input type="" name="" disabled=""><br>
输入框4 <input type="" 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>
</html>
批改老师：灭绝师太批改时间：2019-02-13 16:35:16
老师总结：确实需要多多练习,用特定的时候用特定的选择器会方便很多
