- JavaScript:Moving to ES2015
- Ved Antani Simon Timms Narayan Prusty
- 311字
- 2021-07-09 19:07:42
Traversal and manipulation
We discussed various methods of element selection using jQuery. We will discuss several DOM traversal and manipulation methods using jQuery in this section. These tasks would be rather tedious to achieve using native DOM manipulation. jQuery makes them intuitive and elegant.
Before we delve into these methods, let's familiarize ourselves with a bit of HTML terminology that we will be using from now on. Consider the following HTML:
<ul> <-This is the parent of both 'li' and ancestor of everything in <li> <-The first (li) is a child of the (ul) <span> <-this is the descendent of the 'ul' <i>Hello</i> </span> </li> <li>World</li> <-both 'li' are siblings </ul>
Using jQuery traversal methods, we select the first element and traverse through the DOM in relation to this element. As we traverse the DOM, we alter the original selection and we are either replacing the original selection with the new one or we are modifying the original selection.
For example, you can filter an existing selection to include only elements that match a certain criterion. Consider this example:
var list = $( 'li' ); //select all list elements // filter items that has a class 'highlight' associated var highlighted = list.filter( '.highlight ); // filter items that doesn't have class 'highlight' associated var not_highlighted = list.not( '.highlight );
jQuery allows you to add and remove classes to elements. If you want to toggle class values for elements, you can use the toggleClass()
method:
$( '#usename' ).addClass( 'hidden' ); $( '#usename' ).removeClass( 'hidden' ); $( '#usename' ).toggleClass( 'hidden' );
Most often, you may want to alter the value of elements. You can use the val()
method to alter the form of element values. For example, the following line alters the value of all the text
type inputs in the form:
$( 'input[type="text"]' ).val( 'Enter usename:' );
To modify element attributes, you can use the attr()
method as follows:
$('a').attr( 'title', 'Click' );
jQuery has an incredible depth of functionality when it comes to DOM manipulation—the scope of this module restricts a detailed discussion of all the possibilities.
- 軟件安全技術(shù)
- Mastering JavaScript Functional Programming
- Python 深度學(xué)習(xí)
- Mastering Entity Framework
- Python程序設(shè)計(jì)(第3版)
- 計(jì)算機(jī)應(yīng)用基礎(chǔ)案例教程
- Swift語(yǔ)言實(shí)戰(zhàn)晉級(jí)
- TypeScript 2.x By Example
- C++程序設(shè)計(jì)
- 分布式架構(gòu)原理與實(shí)踐
- 視窗軟件設(shè)計(jì)和開發(fā)自動(dòng)化:可視化D++語(yǔ)言
- 精通Spring:Java Web開發(fā)與Spring Boot高級(jí)功能
- SAS編程演義
- JavaScript語(yǔ)法簡(jiǎn)明手冊(cè)
- R High Performance Programming