How to operate JQuery elements
This time I will show you how to operate JQuery elements and what are the precautions for operating JQuery elements. The following is a practical case, let's take a look.
First, let’s take a look at how to find the desired node in jquery.
Step one: sizzle selector
"Find" (or select) HTML elements based on the element's id, class, type, attribute, attribute value, etc., simple It is said to be based on css selectors, in addition to some specific selectors.
Step 2: Query ancestors
parent()
Returns the direct parent element of the selected element. This method will only go up one level. DOM tree traversal
parents()
Optional parameters can be used to filter the search for parent elements
Returns all ancestor elements of the selected element, all the way up to the root of the document Element
parentsUntil()
Returns all ancestor elements between two given elements. The following is an example:
$(document).ready(function(){ //会返回span开始到p为止的祖先元素 $("span").parentsUntil("p"); });
Step 3: Query Descendants
children()
You can use optional parameters to filter the search for child elements
Returns all direct child elements of the selected element. This method only The DOM tree will be traversed to the next level
find()
You can use optional parameters to filter the search for elements
Returns the descendant elements of the selected element. All the way down to the last descendant
Step 4: Query siblings
siblings()
Return all sibling elements of the selected element
next()
Returns the next sibling element of the selected element
nextAll()
Returns all sibling elements after the selected element
nextUntil()
Returns all following sibling elements between the two given arguments
$(document).ready(function(){ //返回介于 <h2>与<h6>元素之间的所有同胞元素 $("h2").nextUntil("h6"); });
prev(), prevAll() and prevUntil()
The prev(), prevAll() and prevUntil() methods work similarly to the above methods, except in the opposite direction: they return the previous sibling elements (traversing along the previous sibling elements in the DOM tree, and Not after element traversal).
Step 5: Add filtering when querying
first()
Return the first element among the selected elements
last()
Returns the last element among the selected elements
eq()
Returns the element with the specified index number among the selected elements. This is easy to understand. , an example is: $(element[flag]) has the same result as element.eq(flag)
filter()
Filters the query results, similar to not() below, but has the opposite effect
not()
Return all elements that do not match the standard
$(document).ready(function(){ //返回不带有类名"target"的所有p元素 $("p").not(".target"); });
After the element is found, we then need to operate on the found node according to the requirements.
Step 6: text(), html(), val() and attr()
text(), html(), val() and attr (), has a callback function. The callback function takes two parameters: the index of the current element in the selected element list, and the original (old) value. Then return the string you wish to use as the function's new value
1.text() - Sets or returns the text content of the selected element
2.html() - Sets or returns the selected element The content of the element (including HTML tags)
3.val() - Sets or returns the value of a form field
4.attr() - Sets or returns the value of an attribute
$("#btn1").click(function(){ $("#test1").text(function(i,origText){ return "旧文本: " + origText + " 新文本: index: " + i; }); });
Step 7: Add elements
append() - Insert content at the internal end of the selected element
prepend() - Insert content at the internal beginning of the selected element Content
after() - Insert content after the selected element
before() - Insert content before the selected element
Step 8: Delete the element
remove() accepts one parameter, allowing you to filter deleted elements. empty() cannot
remove() - delete the selected element (and its sub-elements) )
empty() - removes child elements from the selected elements
//等同于$("p.target").remove(); $("p").remove(".target");
第九步:替换元素
replaceAll()和replaceWith()功能类似,但是目标和源相反
replaceWith() - 用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
replaceAll() - 用集合的匹配元素替换每个目标元素
第十步:class操作
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
hasClass() - 判断一个元素是否存在该class
第十一步:css()方法
设置或返回被选元素的一个或多个样式属性
css("propertyname"); - 返回propertyname属性的值
css("propertyname","value"); - 设置propertyname属性的值
css({"propertyname":"value","propertyname":"value",...}); - 设置多个值
第十二步:元素尺寸
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)
innerWidth() 方法返回元素的宽度(包括内边距)
innerHeight() 方法返回元素的高度(包括内边距)
outerWidth() 方法返回元素的宽度(包括内边距和边框)
outerHeight() 方法返回元素的高度(包括内边距和边框)
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
The above is the detailed content of How to operate JQuery elements. For more information, please follow other related articles on the PHP Chinese website!

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



LinuxDeploy operating steps and precautions LinuxDeploy is a powerful tool that can help users quickly deploy various Linux distributions on Android devices, allowing users to experience a complete Linux system on their mobile devices. This article will introduce the operating steps and precautions of LinuxDeploy in detail, and provide specific code examples to help readers better use this tool. Operation steps: Install LinuxDeploy: First, install

With the popularity of smartphones, the screenshot function has become one of the essential skills for daily use of mobile phones. As one of Huawei's flagship mobile phones, Huawei Mate60Pro's screenshot function has naturally attracted much attention from users. Today, we will share the screenshot operation steps of Huawei Mate60Pro mobile phone, so that everyone can take screenshots more conveniently. First of all, Huawei Mate60Pro mobile phone provides a variety of screenshot methods, and you can choose the method that suits you according to your personal habits. The following is a detailed introduction to several commonly used interceptions:

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: <

PHP String Operation: A Practical Method to Effectively Remove Spaces In PHP development, you often encounter situations where you need to remove spaces from a string. Removing spaces can make the string cleaner and facilitate subsequent data processing and display. This article will introduce several effective and practical methods for removing spaces, and attach specific code examples. Method 1: Use the PHP built-in function trim(). The PHP built-in function trim() can remove spaces at both ends of the string (including spaces, tabs, newlines, etc.). It is very convenient and easy to use.

Ele.me is a software that brings together a variety of different delicacies. You can choose and place an order online. The merchant will make it immediately after receiving the order. Users can bind WeChat through the software. If you want to know the specific operation method , remember to check out the PHP Chinese website. Instructions on how to bind WeChat to Ele.me: 1. First open the Ele.me software. After entering the homepage, we click [My] in the lower right corner; 2. Then in the My page, we need to click [Account] in the upper left corner; 3. Then come to the personal information page where we can bind mobile phones, WeChat, Alipay, and Taobao. Here we click [WeChat]; 4. After the final click, select the WeChat account that needs to be bound in the WeChat authorization page and click Just [Allow];

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:

Table of Contents Astar Dapp Staking Principle Staking Revenue Dismantling of Potential Airdrop Projects: AlgemNeurolancheHealthreeAstar Degens DAOVeryLongSwap Staking Strategy & Operation "AstarDapp Staking" has been upgraded to the V3 version at the beginning of this year, and many adjustments have been made to the staking revenue rules. At present, the first staking cycle has ended, and the "voting" sub-cycle of the second staking cycle has just begun. To obtain the "extra reward" benefits, you need to grasp this critical stage (expected to last until June 26, with less than 5 days remaining). I will break down the Astar staking income in detail,

Discuz Domain Name Modification Operation Guide In the process of using the Discuz forum system, sometimes we need to modify the domain name of the forum. It may be because the domain name needs to be changed, or some domain name resolution problems need to be repaired. This article will introduce in detail how to modify the domain name in the Discuz forum system, and give some specific code examples. 1. Back up data Before performing any operation, we must back up the data to prevent data loss due to operational errors. In Discuz, you can use the background data backup
