jquery选择器 2019-8-9
1.基本选择器
id选择器:$('id名')
class选择器:$('class名')
标签选择器:$('element')
*选择器:$('*')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基本选择器</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
></script>
</head>
<body>
<p id="box">php中文网</p>
<p>php中文网</p>
<div>php中文网</div>
<script>
$(document).ready(function(){
$('#box').css('background','red');
$('.container').css('background','green');
$('div').css('background','blue');
$('*').css('width','100px');
$('*').css('height','100px');
$('*').css('color','#fff');
})
</script>
</body>
</html>
2.层级选择器
子元素:$('父级元素>子元素')
后代元素:$('祖先元素 后代元素')
相邻兄弟元素:$('prev + next')
兄弟元素:$('prev ~ siblings')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
></script>
</head>
<body>
<div>
<li>PHP中文网</li>
<li>PHP中文网</li>
<ul>
<li>PHP中文网</li>
<li>PHP中文网</li>
<li>PHP中文网</li>
<li>PHP中文网</li>
<li>PHP中文网</li>
</ul>
<li>PHP中文网</li>
<li>PHP中文网</li>
</div>
<script>
$(document).ready(function(){
$('div>li').css('font-size','30px');
$('div li').css('color','red');
$('li + ul').css('background','blue');
$('ul~li').css('border','1px solid #ccc');
})
</script>
</body>
</html>
3.顺序选择器
第一个:$(':first')
最后一个:$(':last')
大于值x的元素 $(':gt(x)')
等于值x的元素 $(':lt(x)')
小于值x的元素 $(':eq(x)')
奇偶数
奇数顺序 $(':odd')
偶数顺序 $(':even')
匹配非该元素的所有元素 $(':not(selsctor)')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>顺序选择器</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
></script>
</head>
<body>
<li id="title">标题</li>
<li>PHP中文网00</li>
<li>PHP中文网01</li>
<li>PHP中文网02</li>
<li>PHP中文网03</li>
<li>PHP中文网04</li>
<li>PHP中文网05</li>
<li>PHP中文网06</li>
<li>PHP中文网07</li>
<script>
$(document).ready(function(){
$('li:first').css('font-size','30px');
$('li:last').css('color','yellow');
$('li:gt(3)').css('color','red');
$('li:lt(3)').css('color','green');
$('li:eq(3)').css('color','blue');
$('li:odd').css('background','#000');
$('li:even').css('background','#888');
$('li:not(#title)').css('font-size','20px');
})
</script>
</body>
</html>
4.内容选择器
匹配文本内容为text的元素:$(':contains(text)')
匹配包含特定选择器的元素:$(':has(selector)')
匹配不包含内容的元素:$(':empty')
匹配包含内容的元素:$(':parent')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>内容选择器</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
></script>
<style>
div{
height: 100px;
width: 100px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div><span href="">1</span></div>
<div><span href="">1</span></div>
<div>2</div>
<div>2</div>
<div></div>
<div></div>
<script>
$(document).ready(function(){
$('div:contains(2)').css('background','red');
$('div:has(span)').css('background','green');
$('div:empty').css('background','blue');
$('div:parent').css('color','#fff');
})
</script>
</body>
</html>
5.属性选择器
匹配包含该属性的元素 $('[属性名]')
匹配属性值为特定值的元素 $('[attribute = value]')
匹配属性值非特定值的元素 $('[attribute != value]')
匹配属性值以某些值开始的元素 $('[attribute ^= value]')
匹配属性值以某些值结尾的元素 $('[attribute $= value]')
匹配属性值包含某些值的元素 $('[attribute *= value]')
同时满足多条件的元素 $('attrSel[1] attrSel[1] attrSel[1]')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
></script>
</head>
<body>
<p id="box">php中文网</p>
<p>php中文网</p>
<div id="box2">php中文网</div>
<script>
$(document).ready(function(){
$('p[id]').css('background','red');
$('p[id=box]').css('width','100px');
$('p[id != box]').css('background','blue');
$('p[class ^= c]').css('width','100px');
$('div[id $= 2]').css('background','green');
$('div[id *= 2]').css('width','100px');
$('p[id][id=box]').css('height','100px');
})
</script>
</body>
</html>
6.表单选择器
所有激活的input元素 $(':enabled')
所有禁用的input元素 $(':disabled')
所有被选取的元素,针对于select元素 $(':selected')
所有被选中的input元素 $(':checked')
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表单选择器</title>
<script
src="https://code.jquery.com/jquery-3.4.1.js"
></script>
</head>
<body>
输入框1:<input type="text"><br>
输入框2:<input type="text"><br>
输入框3:<input type="text"><br>
输入框4:<input type="text" disabled><br>
输入框5:<input type="text"><br>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
爱好:
<label for="hobby"><input type="checkbox" name="hobby" id="hobby">运动</label>
<label for="hobby1"><input type="checkbox" name="hobby1" id="hobby1">看书</label>
<label for="hobby2"><input type="checkbox" name="hobby2" id="hobby2" checked>打游戏</label>
<script>
$(document).ready(function(){
$(':enabled').css('background','green');
$(':disabled').css('background','#ccc');
$(':selected').css('background','blue');
$(':checked').parent().css('background','red');
})
</script>
</body>
</html>
