1. CSS Simple Selectors
Tag Selector
ID Selector
Class Selector
Grouping the CSS Selectors
p, h1, #my_id, .style {
font-weight: bold;
text-decoration: underline;
}
Universal Selector
*
Specific Class Selector
h1.my_class
2. CSS Combinator Selectors
Descendant Selector
div p
Child Selector
div > h3
Adjacent Sibling Selector
div + h3
General Sibling Selector
div ~ h3
3. CSS Pseudo-Class Selectors
a:link
a:visited
a:hover
:hover
:active
:checked
4. CSS Pseudo Element Selectors
::first-line
::first-letter
::before
::after
li::marker
::selection
5. CSS Attribute Selectors
p[lang]
p[lang = "hi"]
6. jQuery Basic Selectors
7. jQuery Basic Filter Selectors
:first | $("p:first") | Selects the first <p> element. |
:last | $("p:last") | Selects the last <p> element. |
:even | $("tr:even") | Selects all even <tr> elements, zero-indexed. |
:odd | $("tr:odd") | Selects all odd <tr> elements, zero-indexed. |
8. jQuery Child Filter Selectors
:first-child | $("p:first-child") | Selects all <p> elements that are the first child of their parent. |
9. jQuery Content Filter Selectors
:contains() | $('p:contains("Hello")') | Selects all <p> elements that contains the text "Hello". |
10. jQuery Form Selectors
:radio | $(":radio") | Selects all input elements with type="radio" . |
:checkbox | $(":checkbox") | Selects all input elements with type="checkbox" . |
11. jQuery Attribute Selectors
12. jQuery Hierarchy Selectors
Selector | Example | Description |
---|---|---|
parent > child | $("ul > li") | Selects all <li> elements that are direct child of their parent <ul> element. |
ancestor descendant | $("form label") | Selects all <label> elements that are descendant of their ancestor <form> element. |
prev + next | $("h1 + p") | Selects all <p> elements that are next i.e. immediately preceded to the <h1> elements. |
prev ~ siblings | $("h1 ~ p") | Selects all <p> elements that are siblings and follow after the <h1> elements. |
13. jQuery Visibility Filter Selectors
References
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a</title>
<link rel="stylesheet" href="css/style.css">
<style>
p::before{
content: "««+*&¥#!@#¥%……&*()";
font-size: 25px;
}
p::after{
content: "^^^";
font-size: 25px;
}
</style>
</head>
<body>
<div>
<div id="first">
<p>子元素</p>
<p>子元素</p>
<div id="second">
<p>jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于
2006年1月由John Resig发布。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更
多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件
处理、动画设计和Ajax交互。</p>
<p>jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器,并且可
对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、
Safari 2.0+、Opera 9.0+等。</p>
</div>
<p>子元素</p>
<p>子元素</p>
</div>
</div>
</body>
<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
var divDom = document.getElementById("mydiv");
console.log(divDom);
var divsDom = document.getElementsByTagName("div");
console.log(divsDom);
var spanDom = document.getElementsByTagName("span");
console.log(spanDom);
var s1 = $("#first p")
console.log(s1[3].innerText)
var s2 = $("#first>p")
console.log(s2[2].innerHTML)
var s3 = $("#second~p")
console.log(s3)
var s3 = $("#second+p")
console.log(s3)
console.log("========")
</script>
</html>