jquery選擇器連續選擇
It's time to write some JQuery now. Do check out the introductory article on JQuery first in case you haven't. Before we move to Selectors in JQuery, let's talk a bit about the general syntax first.
現在該寫一些JQuery了。 如果沒有，請先查看有關JQuery的介紹性文章 。 在轉到JQuery中的Selectors之前，讓我們先談談常規語法。
陳述 (Statements)
Almost everything in JQuery is a statement. This may not be the first time you're hearing this because most programming languages conceive every distinguishable line of code as a statement. In JQuery, all statements are preceded with a $ (dollar sign). This is also known as the JQuery keyword. For instance,
JQuery中的幾乎所有內容都是一個語句 。 這可能不是您第一次聽到此消息，因為大多數編程語言將每條可區分的代碼行都視為一條語句。 在JQuery中，所有語句都以$(美元符號)開頭。 這也稱為JQuery關鍵字 。 例如，
document.getElementById("#sub-text");
$("#sub-text");
We have used a CSS selector above using JQuery. You can see how easy it is to select an element using a CSS selector in JQuery. You just write the JQuery keyword ($ sign) followed by a pair of parentheses ( () ) and put the CSS selector inside those parentheses.
我們在上面使用JQuery使用了CSS選擇器 。 您可以看到在JQuery中使用CSS選擇器選擇元素有多么容易。 您只需編寫JQuery關鍵字( $ sign )，然后加上一對括號(()) ，然后將CSS選擇器放在這些括號內。
The above two statements, the former in Vanilla JS and the later in JQuery essentially do the same thing however there is a small, subtle yet important difference to note. Before we understand that and start coding some JQuery let's create a simple HTML page that we can play around with. I'm taking this boilerplate from the introductory article. All I have done till now is added materialize CDN for writing cool styles quickly and link to our local stylesheet,
上面的兩個語句，在Vanilla JS中的前者和在JQuery中的后一個本質上是做相同的事情，但是要注意一個小的，微妙的但重要的區別。 在我們了解這一點并開始編寫一些JQuery代碼之前，讓我們創建一個可以使用的簡單HTML頁面。 我將從介紹性文章中摘錄該樣板。 到目前為止，我所做的只是添加了實現CDN，以便快速編寫酷炫的樣式并鏈接到我們的本地樣式表，
Index.html
Index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
Let's add some content quickly so we can start using JQuery
<div class="container">
<h1 class="title">Explaining JQuery to Spongebob</h1>
<p id="intro-text">Can I say one word or two about Spongebob first?</p>
<div class="row">
</div>
<div class="card">
<div class="card-content">
<h5 class="sub-title">List of names of spongebob's buddies are</h5>
<ul class="center collection" id="list">
<li>Mr Krabs</li>
<li>Garry</li>
<li>Squidward Tentacles</li>
<li>Mrs Puff</li>
</ul>
</div>
</div>
</div>
Output
輸出量
Now that we have the template setup, let's first see that subtle difference we spoke about,
現在我們有了模板設置，讓我們首先看看我們談到的細微差別，
console.log(document.querySelector('.title'));
console.log($('.title'));
The above two statements should essentially do the same thing, and they actually do. They both get us a reference to the HTML element with a class name of the title. However,
上面的兩個語句在本質上應該做同樣的事情，并且實際上是在做。 它們都為我們提供了帶有標題類名HTML元素的引用。 然而，
Output
輸出量
<h1 class="title">Explaining JQuery to Spongebob >/h1>
k.fn.init [h1.title, prevObject: k.fn.init(1)]
The second statement returns us somewhat an array wrapped around the element. It looks a lot like an array however, to be accurate it's a JQuery Object. No matter what you reference to, a JQuery statement always returns a JQuery Object. You can also verify this,
第二條語句返回一些包裹在元素周圍的數組。 它看起來很像一個數組，但準確地說，它是一個JQuery對象。 無論引用什么，JQuery語句始終返回JQuery對象。 您也可以驗證
typeof(title);
Output
輸出量
"Object"
Why JQuery wraps elements in a JQuery object wrapper is simply because we have loads of different properties and methods available to us then? This becomes very useful when we're animating elements using JQuery.
為什么JQuery在JQuery對象包裝器中包裝元素僅僅是因為我們擁有大量可用的不同屬性和方法呢？ 當我們使用JQuery為元素設置動畫時，這將非常有用。
title.animate;
Output
輸出量
? (t,e,n,r){var i=k.isEmptyObject(t),o=k.speed(e,n,r),a=function(){var e=dt(this,k.extend({},t),o);(i||Q.get(this,"finish"))&&e.stop(!0)};return a.finish=a,i||!1===o.queue?this.each(a):this.queue(o.que...
However, we also have the freedom to unwrap our element and return a regular Vanilla JS object and use the common Vanilla JS methods available on it.
但是，我們也可以自由地展開元素并返回常規的Vanilla JS對象，并使用其上可用的常見Vanilla JS方法。
title[0];
Output
輸出量
<h1 class="title">Explaining JQuery to Spongebob</h1>
Notice how the 0th element inside the JQuery object is actually that HTML element so we can simply obtain it using the indexing method. However, now we don't have access to the animation methods,
注意，JQuery對象中的第0個元素實際上是那個HTML元素，因此我們可以簡單地使用索引方法來獲取它。 但是，現在我們無法訪問動畫方法，
title[0].animate;
Output
輸出量
? animate() { [native code] }
Selectors are used to grab content from the web page. We can use simple CSS selectors to grab elements from the DOM using JQuery.
選擇器用于從網頁中獲取內容。 我們可以使用簡單CSS選擇器通過JQuery從DOM中獲取元素。
const title=$('.container h1');
console.log(title);
Output
輸出量
k.fn.init [h1.title, prevObject: k.fn.init(1)]
We can also target ids.
我們還可以定位ID。
const list=$('#list');
console.log(list);
Output
輸出量
k.fn.init [ul#list.center.collection]
0: ul#list.center.collection
length: 1
__proto__: Object(0)
If you know CSS, using JQuery selectors will come super easy to you.
如果您知道CSS，那么使用JQuery選擇器對您來說將非常容易。
list[0];
Output
輸出量
<ul class="center collection" id="list">...</ul>
We can also get the first <li> using,
我們還可以使用第一個<li>
const firstFriend=$('ul li:first')[0];
console.log(firstFriend);
Output
輸出量
<li>Mr. Krabs</li>
The *is the universal selectors and grabs the whole HTML of the page.
*是通用選擇器，可獲取頁面的整個HTML。
const everything=$('*')[0];
console.log(everything);
Output
輸出量
<html lang="en"><head>…</head><body cz-shortcut-listen="true">...</body></html>
翻譯自: https://www.includehelp.com/code-snippets/selectors-in-jquery.aspx
jquery選擇器連續選擇
和線程終止方式)
