jQuery选择器大全-基本选择器,层级选择器,顺序选择器,内容选择器,属性选择器和表单选择器

原创2019-07-29 15:39:5613
摘要:<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>选择器大全</title> <script type="text/javascript" src="static
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选择器大全</title>
<script type="text/javascript" src="static/jQuery/jquery-3.4.1.js"></script>
<style type="text/css">
div{width:200px;height:200px;background:#666;margin-top:10px;}

</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
// 1.$('#id名') $('.class名')  $('element') $('*')   $('#id,.claclass名')
$('#box').css('background','red');
$('.box').css('background','blue');
$('span').css('font-size','30px');
$('*').css('font-family','宋体');
$('#box,.box,span').css('color','pink');


//2.$('#id名') $('.class名')  $('element') $('*')   $('#id,.claclass名')
// 给定的父级元素下匹配所有的子元素:$('父级元素 > 子级元素')
// 给定的祖先元素下匹配所有的后代元素:$('祖先元素  后代元素')
// 匹配紧跟在prev元素后面的next元素:$('prev + next')(同级的元素)
// 匹配prev元素后面所有的siblings元素:$('prev ~ siblings')
$('ul li').css('list-style','none');
$('input+button').css('height','50px');
// $('label~input').css('background','pink');

// 3.顺序选择器
// 1、顺序
// $(':first') 第一个元素
// $(':last')  最后一个元素
// 2、比较(x的顺序是从0开始)
// $(':gt(x)')表示大于值x的元素
// $(':lt(x)')表示小于值x的元素
// $(':eq(x)')表示等于值x的元素
// 3、奇偶数
// $(':odd')奇数顺序
// $(':even')偶数顺序
// 4、非
// $(':not(selector)')匹配不是selector的所有元素
// $('p:first').css('color','red');
// $('p:last').css('color','blue');
// $('p:gt(1)').css('font-size','30px');
// $('p:lt(3)').css('color','blue');
// $('p:eq(3)').css('color','blue');
// $('p:odd').css('color','red');
// $('p:even').css('color','red');
$('p:not(#box)').css('background','#ccc');


// 4.内容选择器
// 语法:
// $(':contains(text)') 匹配包含给定文本(text)的元素
// $(':has(selector)')匹配包含特定选择器元素的元素
// $(':empty')匹配不含有内容的元素(即 不包含子元素或者文本的空元素)
// $(':parent')匹配含有子元素或者文本的元素
$('div:contains(jun)').css('background','blue');
$('div:has(span)').css('color','red');
$('div:empty').css('background','green');
// $('div:parent').css('background','red');

// 5.属性选择器
// 语法:
// $('[属性名]')匹配包含给定属性的元素
// $('[attribute=value]')匹配给定属性是某个特定值的元素
//$('[attribute!=value]')匹配所有不含有指定值的属性,或者说是属性不等于特定值的元素
// $('[attribute ^= value]')匹配给定属性是以某些值开始的元素
// $('[attribute $= value]')匹配给定属性是以某些值结尾的元素
// $('[attribute *= value]')匹配给定属性包含某些值的元素
//$('attrSel[1] attrSel[1] attrSel[1]')复合选择器,需要同时满足多个条件时使用
// $('input[type]').css('background','pink');
// $('input[type=button]').css('background','blue');
// $('input[type!=text]').css('background','blue');
// $('input[type^=p]').css('background','red');
// $('input[type$=n]').css('background','green');
// $('input[type*=t]').css('background','coral');
$('input[id][name*=liu]').css('background','red');


// 6.表单选择器
// 语法:
// $(':enabled')所有激活的input元素(可以使用的input元素)
// $(':disabled')所有禁用的input元素(不可以使用的input元素)
// $(':selected')所有被选取的元素,针对于select元素
// $(':checked')所有被选中的input元素
$(':enabled').css('background','pink');
$(':disabled').css('background','red');
$(':selected').css('color','blue');
$(':checked').parent().css('color','red');//parent()会印象下拉列表选项
})
</script>
<!-- 1.基本选择器 -->
<div id="box">大家好</div>
<div>我是peter</div>
<span>PHP中文网</span>
<br>
<hr>

<!-- 2.层级选择器 -->
<ul>
<li>1</li>
<li>2</li>
<div>
<li>2_1
<!-- <div>
<li>2_2</li>
</div> -->
</li>
</div>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<form action="">
<label for="">姓名:</label>
<input type="text" name="">
<button>提交</button>
<input type="text" name="">
</form>
<br>
<hr>

<!-- 3.顺序选择器 -->
<p id="box">1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<br>
<hr>

<!-- 4.内容选择器 -->
<div>jack</div> 
<div>jun</div> 
<div>jack cheng</div> 
<div>jion</div> 
<div><span>php中文网</span></div> 
<div></div>
<div><b></b></div>
<br>
<hr>

<!-- 5.属性选择器 -->
<form>
<label for="">1</label><input type="text" name="new" id="woman"><br>
<label for="">2</label><input type="password" name="new1" id="man"><br>
<label for="">3</label><input name="liu" id="new"><br>
<label for="">4</label><input type="button" name="" value="按钮"><br>
</form>
<br>
<hr>


<!-- 6.表单选择器 -->
<form action="">
输入框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>



</body>
</html>


批改老师:Peter-Zhu批改时间:2019-07-30 09:32:53
老师总结:jQ中的选择器众多, 但常用的并不多, 建议把学习重点放在一些最基本的选择器上

发布手记

热门词条