jquery选择器连续选择_JQuery中的选择器
jquery選擇器連續(xù)選擇
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.
現(xiàn)在該寫(xiě)一些JQuery了。 如果沒(méi)有，請(qǐng)先查看有關(guān)JQuery的介紹性文章 。 在轉(zhuǎn)到JQuery中的Selectors之前，讓我們先談?wù)劤Ｒ?guī)語(yǔ)法。
陳述 (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中的幾乎所有內(nèi)容都是一個(gè)語(yǔ)句 。 這可能不是您第一次聽(tīng)到此消息，因?yàn)榇蠖鄶?shù)編程語(yǔ)言將每條可區(qū)分的代碼行都視為一條語(yǔ)句。 在JQuery中，所有語(yǔ)句都以$(美元符號(hào))開(kāi)頭。 這也稱為JQuery關(guān)鍵字 。 例如，
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.
我們?cè)谏厦媸褂肑Query使用了CSS選擇器 。 您可以看到在JQuery中使用CSS選擇器選擇元素有多么容易。 您只需編寫(xiě)JQuery關(guān)鍵字( $ sign )，然后加上一對(duì)括號(hào)(()) ，然后將CSS選擇器放在這些括號(hào)內(nèi)。
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,
上面的兩個(gè)語(yǔ)句，在Vanilla JS中的前者和在JQuery中的后一個(gè)本質(zhì)上是做相同的事情，但是要注意一個(gè)小的，微妙的但重要的區(qū)別。 在我們了解這一點(diǎn)并開(kāi)始編寫(xiě)一些JQuery代碼之前，讓我們創(chuàng)建一個(gè)可以使用的簡(jiǎn)單HTML頁(yè)面。 我將從介紹性文章中摘錄該樣板。 到目前為止，我所做的只是添加了實(shí)現(xiàn)CDN，以便快速編寫(xiě)酷炫的樣式并鏈接到我們的本地樣式表，
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,
現(xiàn)在我們有了模板設(shè)置，讓我們首先看看我們談到的細(xì)微差別，
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,
上面的兩個(gè)語(yǔ)句在本質(zhì)上應(yīng)該做同樣的事情，并且實(shí)際上是在做。 它們都為我們提供了帶有標(biāo)題類(lèi)名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,
第二條語(yǔ)句返回一些包裹在元素周?chē)臄?shù)組。 它看起來(lái)很像一個(gè)數(shù)組，但準(zhǔn)確地說(shuō)，它是一個(gè)JQuery對(duì)象。 無(wú)論引用什么，JQuery語(yǔ)句始終返回JQuery對(duì)象。 您也可以驗(yàn)證
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對(duì)象包裝器中包裝元素僅僅是因?yàn)槲覀儞碛写罅靠捎玫牟煌瑢傩院头椒?#xff1f; 當(dāng)我們使用JQuery為元素設(shè)置動(dòng)畫(huà)時(shí)，這將非常有用。
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.
但是，我們也可以自由地展開(kāi)元素并返回常規(guī)的Vanilla JS對(duì)象，并使用其上可用的常見(jiàn)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對(duì)象中的第0個(gè)元素實(shí)際上是那個(gè)HTML元素，因此我們可以簡(jiǎn)單地使用索引方法來(lái)獲取它。 但是，現(xiàn)在我們無(wú)法訪問(wèn)動(dòng)畫(huà)方法，
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.
選擇器用于從網(wǎng)頁(yè)中獲取內(nèi)容。 我們可以使用簡(jiǎn)單CSS選擇器通過(guò)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.collectionlength: 1__proto__: Object(0)If you know CSS, using JQuery selectors will come super easy to you.
如果您知道CSS，那么使用JQuery選擇器對(duì)您來(lái)說(shuō)將非常容易。
list[0];Output
輸出量
<ul class="center collection" id="list">...</ul>We can also get the first <li> using,
我們還可以使用第一個(gè)<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.
*是通用選擇器，可獲取頁(yè)面的整個(gè)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選擇器連續(xù)選擇
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的jquery选择器连续选择_JQuery中的选择器的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： python重载运算符乘法_Python
- 下一篇： 线性代数向量内积_向量的外积| 使用Py