jQuery选择器的使用

Original 2019-02-10 01:36:21 280
abstract:通过本章内容学习知道了jQuery选择器主要有:基本选择器($('#id','.classname','element')、顺序选择器($(':first',':last',':odd',':gt(x)')、属性选择器('$('[属性名]'),$('[属性

通过本章内容学习知道了jQuery选择器主要有:基本选择器($('#id','.classname','element')、顺序选择器($(':first',':last',':odd',':gt(x)')、属性选择器('$('[属性名]'),$('[属性名^/$/!/*=value]',)、内容选择器($('tagname:contains(text)','tagname:has(selector)',('tagname:parent')、表单选择器($('input:enabled'),$(':selected'),$(':checked'),)、层级选择器($('父级element >子级element'))

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<title>jQuery选择器的使用</title>
</head>
<body>
<div id="cont">
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class='sec'>
<p>first</p>
<p>second</p>
<p>third</p>
<p>fourth</p>
</div>
</div>
<form>
<label>
user <input type="text" name="user"><br>
pass <input type="password"><br>
name <input type="text" disabled><br>
sexs <input type="radio" value="">男<input type="radio" value="" checked>女 <br>
adds <select name="" id="">
<option value="">a</option>
<option value="" selected>b</option>
<option value="">c</option>
<option value="">d</option>
</select>
<br>
hobby<br>
<div class="hob">
<input type="checkbox">reading
<input type="checkbox" checked>whrite
<input type="checkbox">watching
</div>
<input type="button" value="登录"><br>
</label>
</form>
</div>
<script>
$(document).ready(function () {
$('#cont').css('border', '1px solid pink');
$('.box').css('background', '#ccc');
$('.sec').css('background', 'pink');
$('ul li').css('list-style', 'none');
$('li:odd').css('background', 'white');
$('li:first').css('color', 'red');
$('li:last').css('color', 'blue');
$('.sec>p:first').css('color', 'yellow');
$('.sec>p:even').css('background', 'green');
$('input:enabled').css('color', 'white');
$('input:enabled').css('background', 'blue');
$(':checked').css('color', 'orange');
$(':checked').parents('.hob').css('color', '#444');
$('div.hob:has(input)').css('color', 'brown');

})
</script>
</body>
</html>


Correcting teacher:查无此人Correction time:2019-02-11 09:51:33
Teacher's summary:完成的不错。jQuery就是选择器很重要,其他的都是操作方法。继续加油。

Release Notes

Popular Entries