Learn Jquery with Jquery API Selector_jquery
With Jquery's selector, you can eat well and feel better...
1. Basics
We know that the most commonly used selector in jquery is the selector. Let's take a look at the selection in jqueryAPI - There are basically 5 situations: class, id, element, *, and a multi-selector. Here we think about how to write css styles
There are also several situations in css styles: 1. Class style 2. ID style 3 .Tag style,
If there is an aa class, then the style we define aa must be written as .aa{}
If there is an id of bb, then the style we define bb must be written #bb{}
If there is a tag
If we want to define all tag styles, then we write it as *{} (of course, this is not abbreviated Great)
If we want to define multiple tags, use semicolons to separate them. For example, .aa,#bb,div{} will define the style with class as aa, id as bb, and tag as div.
We see the above 5 ifs, compare them with the 5 basic selectors of jquery
If we want to select an aa class, write it as $(".aa")
If we want to select The id of a bb is written as $("#bb")
If we want to select the tag of the div, it is written as $("div")
If we want to select all, it is written as $("*")
If we want to select multiple objects, we can write it as $ (".aa, #bb,div")
By comparison, we find that the basic selector is completely operated according to the syntax of CSS. Isn’t it very easy?
2 levels
Now that we know how to write the above 5 selectors, let’s consider how to make selectors for levels.
First think about what level is, which is actually HTML. The DOM structure is layer by layer, or the structure level of XML
Then we open jquery's Api and find that there are 4 selectors about levels.
To summarize, it is a space b, a>b, a b, a~b. Of course, I am just here to save a few words.
For example, there is the following structure
< span>12
3
We now want to select all span nodes under the node with id aa, just use $("#aa span")
We now want to select the span with the ID of the first layer under the aa node, which is the span with the text 3 and 4, so use $("#aa >span")
We now want to get The span following class bb is the one with the text 3 in the span, so use $(“.bb span”)
Now if we want to get all the spans after class bb, use $(“.bb~span ”)
To summarize: the first one is written in the same way as the CSS style, using spaces to represent the elements under the node
The second one uses > to represent child nodes. The difference with spaces is that it only works on the first The third and fourth layers of
are used to represent following nodes, but the difference is that the symbol is used to represent the following node, and ~ is used to represent all following nodes. We need to remember (space>~) four symbols That’s it
3 Simple
We know the basic selectors and hierarchical selectors. Sometimes we select multiple ones, such as
- 1
- 2
- 3
- 4
We want to get the first (first), last (last), base row (odd), even row (even) of ul li to match the third (eq(2)), match more than 2 rows (gt( 1)), matches less than the third line (lt(2)), there are 7 mentioned here. So how do we write this selector, such as matching the first $("ul li:first"), matching the third $("ul li:eq(2)"), and I won't write the rest
Here we think about several styles of writing a link in css a:hover a:link...are they the same?
Okay, here we have looked at 7 types. Let’s take a look at the API and what are the other 3 types.
1 :not removes all elements matching the given selector. The syntax is the same $(“ul li:not( #aa)") means to remove the elements with ID aa in ul li. We can use $("ul li") to get 4 li. Use $("ul li:not(#aa)") to remove them. The first li only got three
2:header, which is just used to select h1 h2 h3... Such a title
3:animated matches the elements that execute animation
Let’s summarize the above. In fact, it is to screen the ones that have been selected at once. Built on foundations and layers.
4 Text Visibility
Continue to look down at the API. There are 4 functions in the text. Of course, the function is to filter the selected content again
The above is for the nodes. Filter, now we need to filter the content
Contains the specified text $("div:contains(xxiu)") We hope that the text of the div we selected contains the string xxiu
Matches empty text $(" div:empty") There is nothing under the fourth div node, so it matches it
Matches the element containing a certain node. Matches the div containing the a node $("div:has(a)")
Matches The non-empty text is just the opposite of 2. $("div:parent") matches the first three divs
To summarize, text matching mainly does text (1) and node matching (3), and matches no text. Or node (2) matches text node (4), two sentences: Is there any text or node, what text and node are there?
Then we look at the visibility. Visibility is easy to understand. It can be seen in two situations: hidden selects visible nodes or invisible: visible selects invisible nodes, nothing to say
5 Attribute Selector
Let’s first look at the most basic attribute selector
Like the node above, we want to select the node containing the id. What should we do if we use the previous method.
Using the multi-selection method $("#aa,#bb") we got what we want, but if there are N, wouldn't it take a long time? We are all very lazy, so we have attributes. The selector $("div[id]") will get the result we want, select name $("div[name]") But we only want to get the name xxiu, then we use $("div[ name ='zhang']")
Get $("div[name !='zhang']") that is not zhang, get $("div[name ^='zh']") starting with zh
$ that ends with xxiu ("div[name $='zhang']"), $ that contains ang ("div[name *='ang']")
or it has an id and contains xxiu $("div[id][name *='xxiu']")
Okay, after reading the above pair of things, I must be a little dizzy. Let me summarize
1 What [id] is equal to [id ='aa'] is not equal to what [id!='aa']
2 What starts with ^= What does it end with $= What does it match *= (Is it completely the syntax of regular expressions)
3 Multiple attributes Select $("div[id][name *='xxiu']")
6 child elements
1 match the first $("ul li:first-child") the last $ in the child elements ("ul li:last-child")
2 matches the only element in the child element $("ul li:only-child")
3 matches the element $("ul li:nth-child (2)") is the same as $("ul li:eq(1)"). The former starts counting from 1, and the latter starts counting from 0
7 form
Look at it and you will know the number in the input Kind of form $(":text") Get text form$(":checkbox") Get check form Wait and see the API to know what's going on
We can write like this $( using the previous selection method "input[type='text']") But it is better to type less words than to type more words. Isn’t it much more refreshing to write $(":text") like this?
8 Form attributes
1 Available enabled and unavailable disabled
Find out
2 checked and selected
It’s good that all the APIs have been gone through here, and the selector is basically the same. The only difference is to write a few by yourself. Play with the sentence code. There is no code in this article, just a summary of the API. If you want to see the code, just read the Jquery documentation.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Detailed explanation of jQuery reference methods: Quick start guide
Feb 27, 2024 pm 06:45 PM
Detailed explanation of jQuery reference method: Quick start guide jQuery is a popular JavaScript library that is widely used in website development. It simplifies JavaScript programming and provides developers with rich functions and features. This article will introduce jQuery's reference method in detail and provide specific code examples to help readers get started quickly. Introducing jQuery First, we need to introduce the jQuery library into the HTML file. It can be introduced through a CDN link or downloaded
How to remove the height attribute of an element with jQuery?
Feb 28, 2024 am 08:39 AM
How to remove the height attribute of an element with jQuery? In front-end development, we often encounter the need to manipulate the height attributes of elements. Sometimes, we may need to dynamically change the height of an element, and sometimes we need to remove the height attribute of an element. This article will introduce how to use jQuery to remove the height attribute of an element and provide specific code examples. Before using jQuery to operate the height attribute, we first need to understand the height attribute in CSS. The height attribute is used to set the height of an element
How to use PUT request method in jQuery?
Feb 28, 2024 pm 03:12 PM
How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u
jQuery Tips: Quickly modify the text of all a tags on the page
Feb 28, 2024 pm 09:06 PM
Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: <
Use jQuery to modify the text content of all a tags
Feb 28, 2024 pm 05:42 PM
Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:
How to tell if a jQuery element has a specific attribute?
Feb 29, 2024 am 09:03 AM
How to tell if a jQuery element has a specific attribute? When using jQuery to operate DOM elements, you often encounter situations where you need to determine whether an element has a specific attribute. In this case, we can easily implement this function with the help of the methods provided by jQuery. The following will introduce two commonly used methods to determine whether a jQuery element has specific attributes, and attach specific code examples. Method 1: Use the attr() method and typeof operator // to determine whether the element has a specific attribute
Understand the role and application scenarios of eq in jQuery
Feb 28, 2024 pm 01:15 PM
jQuery is a popular JavaScript library that is widely used to handle DOM manipulation and event handling in web pages. In jQuery, the eq() method is used to select elements at a specified index position. The specific usage and application scenarios are as follows. In jQuery, the eq() method selects the element at a specified index position. Index positions start counting from 0, i.e. the index of the first element is 0, the index of the second element is 1, and so on. The syntax of the eq() method is as follows: $("s
Summary of commonly used file operation functions in PHP
Apr 03, 2024 pm 02:52 PM
目录1：basename()2：copy()3：dirname()4：disk_free_space()5：disk_total_space()6：file_exists()7：file_get_contents()8：file_put_contents()9：filesize()10：filetype()11：glob()12：is_dir()13：is_writable()14：mkdir()15：move_uploaded_file()16：parse_ini_file()17：
