亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

jQuery中的總結(jié)

asal 2019-01-14 17:39:07 319
abstrak：1、基本選擇器語法$('#id名') 根據(jù)給定的id來匹配到元素$('.class') 根據(jù)給定的clss來匹配到元素$('element') 根據(jù)給定的標簽名來匹配到元素$('*') 匹配所有元素$('#id,.class,element') 匹配到頁面中多個選擇器下面是基本選擇器的一些用法<!DOC

1、基本選擇器

語法

$('#id名') 根據(jù)給定的id來匹配到元素

$('.class') 根據(jù)給定的clss來匹配到元素

$('element') 根據(jù)給定的標簽名來匹配到元素

$('*') 匹配所有元素

$('#id,.class,element') 匹配到頁面中多個選擇器

下面是基本選擇器的一些用法

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery中的選擇器</title>
<style>
div {width: 100px;height: 100px;background: #ccc;margin-top: 20px;}
</style>
<script src="jquery/jquery-3.3.1.js"></script>
<script>
$(document).ready(function() {
$('#box').css('background','red');
$('.box').css('background','blue');
$('span').css('font-size','30px');
$('*').css('font-family','宋體')
$('#box,.box,span').css('color','pink');
});
</script>
</head>
<body>
<div id="box">測試1</div>

<div>測試2</div>
<span>PHP中文網(wǎng)</span>
</body>
</html>

下面是測試結(jié)果圖

微信截圖_20190114153953.png

2、層級選擇器

給定的符集元素匹配所有的子元素：$('父級元素 > 子集元素')

給定的祖先元素下匹配所有的后代元素: $('祖先元素 后代元素')

匹配緊跟在prev元素后面的next元素：$('prev + next') (同級的元素)

匹配prev元素后面所有的siblings元素: $('prev ~ siblings')

$(document).ready(function() {
			// $('ul > li').css({'color':'red','list-style':'none'});
			$('ul li').css('list-style','none');
			$('input+button').css('height','50px');
			$('label~input').css('background','pink');
		});
<ul>
		<li>1</li>
		<li>2</li>
		<div>
			<li>div里面的li
				<div><li>多層嵌套里的li</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">
		<button>按鈕</button>
		<input type="text"><input type="text">
	</form>

微信截圖_20190114165201.png

3、順序選擇器

1、順序

$(':first') 第一個元素

$(':last') 第二個元素

2、比較

$(':gt(x)') 表示大于值x的元素

$(':lt(x)') 表示小于值x的元素

$(":eq(x)") 表示等于值x的元素

3、奇偶數(shù)

$(':odd') 奇數(shù)順序

$(':even') 偶數(shù)順序

4、非

$(':not(selector)') 匹配不是selector的所有元素

4、內(nèi)容選擇器

語法：

$(':contains(text)') 匹配包含給定文本(text)的元素

$(':has(selector)') 匹配包含特定選擇器元素的元素

$('empty()') 匹配不包含內(nèi)容的元素 (即 不包含子元素或者文本的空元素)

$(':parent') 匹配含有子元素或者文本的元素

5、屬性選擇器

語法：

$('[屬性名]') 匹配包含給定屬性的元素

$('[attribute=value]') 匹配給定屬性是某個特定值的元素

$('[attribute!=value]') 匹配所有不含有指定值的屬性，或者屬性不等于特定值的元素

$('[attribute ^= value]') 匹配給定屬性是以某些值開始的元素

$('[attribute $= value]') 匹配給定屬性是以某些值結(jié)尾的元素

$('[attribute *= value]') 匹配給定屬性包含某些值結(jié)尾的元素

$('attrSel[1] attrSel[1] attrSel[1]') 復合選擇器，需要同時滿足多個條件時使用


6、表單選擇器

語法：

$(':enabled') 所有激活的input元素 (可以使用的input元素)

$(':disabled') 所有禁用的input元素 (不可以使用的input元素)

$(':selected') 所有被選取的元素，針對于select元素

$(':checked') 所有被選中的input元素



Guru membetulkan：滅絕師太Masa pembetulan：2019-01-14 16:42:12
Rumusan guru：完成的很好！很用心，jQuer核心部分就是選擇器，一定要好好掌握

Nota Keluaran

Penyertaan Popular