如果你的基础扎实,那么你将爬的更高,能接触到的东西更加深
Basics
${'tag'}
标签选择器
${'#id'}
id选择器
${'.class'}
类选择器
${'.class,#id,tag'}
或选择器
${'*'}
全部选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>JQuery Selectors</title>
</head>
<body>
<div>JQuery Selectors</div>
<div class="lei"> JQuery Selectors</div>
<p id="test">JQuery Selectors</p>
<button>Click me</button>
<script src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('button').on('click', function() {
//tag选择器
// $('div').css('backgroundColor', 'yellow');
//id选择器
// $('#test').css('background', 'yellow');
//类选择器
// $('.lei').css('background-color', 'red');
//或选择器
// $('.test,#test,div').css('background-color','blue');
//全部选择器
// $('*').css('background-color','yellow');
})
});
</script>
</body>
</html>
Hierarchy
${'div code'}
div
下的code
(不关心是否直系子元素)
${'li > ul'}
直系子元素
${'strong + em'}
兄弟选择器(只选中下一个(next))
${'strong ~ em'}
兄弟选择器(选中后面全部(nextAll))
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JQuery Selectors</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="test">test</div>
<div class="aa">
<div class="list">
<div class="test" id="first">1</div>
<div class="even">2</div>
<div>3</div>
<div class="even">4</div>
<div>5</div>
</div>
</div>
<button>Click Me</button>
</body>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('button').on('click', function() {
//全部class为test都设置成yellow
// $('.test').css('background-color','yellow');
//只有div下class为test(不关心是否为直接子元素)的设置成yellow
// $('.aa .test').css('background-color', 'yellow');
//子元素选择器
// $('.list > .test').css('background-color', 'yellow');
//因为不是直接子元素 ,不会起到任何作用
// $('.aa > .test').css('background-color', 'yellow');
//只有2被设置为yellow
// $('#first + div').css('background-color','yellow');
//2到5全部设置成黄色
// $('#first ~ div').css('background-color','yellow');
});
})
</script>
</html>
Basic Filters
$('li:first')
第一个li
$('li:last')
最后一个li
$('li:not(ul li)')
不是ul
下的li
$('li:even')
选中li
index
为偶数
$('li:odd')
选中li
index
为奇数
$('li:eq(4)')
选中li
index
为4
$('li:gt(4)')
选中li
index
大于4
$('li:lt(4)')
选中li
index
大于4
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<li>Test</li>
<button>Click Me</button>
</body>
<script src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('button').on('click', function() {
// $('li:first').css('background-color','yellow');
// $('li:last').css('background-color','yellow');
// $('li:not(ul li)').css("background-color",'yellow');
// $('li:even').css("background-color",'yellow');
// $('li:odd').css("background-color",'yellow');
// $('li:eq(4)').css("background-color", 'yellow');
// $('li:gt(4)').css("background-color", 'yellow');
// $('li:lt(4)').css('background-color','yellow');
});
})
</script>
</html>
Content Filters
$(li:contians(second-level))
检查子元素是否包含选择内容
$(':empty')
内容为空
$('div:has(span)')
是否用span
标签
$('div:parent')
内容不为空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div>Hello World</div>
<div>Rc</div>
<div>LRc</div>
<div>User
<div><p>Rc</p></div>
</div>
<div>
<span>Hello</span>
</div>
<div style="height: 50px;width: 50px;background-color: red"></div>
<button>Click Me</button>
<script src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('button').on('click', function () {
//包含,div User Rc LRc被选中
// $('div:contains(Rc)').css('backgroundColor', 'yellow');
//内容是否为空
// $('div:empty').css('backgroundColor', 'yellow');
//span heloo被选中
// $('div:has(span)').css('backgroundColor', 'yellow');
//div:parent 和div :empty的作用是相反的,内容不为空
// $('div:parent').css('backgroundColor', 'yellow');
})
})
</script>
</body>
</html>