Modify Text and HTML

The text() and HTML () methods of the JQuery object retrieve the text of the node and the original HTML text respectively, for example, the following HTML structure:

<!--HTML structure-->
<ul id="test-ul">
   <li class="js">JavaScript</li>
   <li name="book">Java &amp;JavaScript</li>
</ul>

Get text and HTML:

$('#test-ul li[name=book]').text();//'Java & JavaScript'
$('#test-ul li[name=book]').html();//'Java &JavaScript'

A JQuery object can contain 0 or any DOM object, and its methods actually work on each DOM node. In the example above, try:

$('#test-ul li').test('JS');//Are both nodes changed?JS?

So another advantage of JQuery objects is that we can perform an operation on the corresponding set of DOM nodes. Even if the selector does not have any DOM nodes, the method invoking the JQuery object still does not report errors:

//If no node with id not-exist exists
$('#not-exist').text('Hello');//The code is error-free and no nodes are set to'Hello'

This means that JQuery saves you a lot of if statements.

Modify CSS

JQuery objects have the feature of "batch operation", which is very convenient for modifying CSS. Consider the following HTML structure:

<!-- HTML structure -->
<ul id="test-css">
    <li class="lang dy"><span>JavaScript</span></li>
    <li class="lang"><span>Java</span></li>
    <li class="lang dy"><span>Python</span></li>
    <li class="lang"><span>Swift</span></li>
    <li class="lang dy"><span>Scheme</span></li>
</ul>

To highlight the dynamic language, we call the css('name','value') method of the JQuery object, which is implemented in one line statement:

'use strict';
$('#test-css li.dy>span').css('background-color','#ffd351').css('color','red');

Note: All methods of a JQuery object return a JQuery object (possibly new or self) so that we can make chain calls, which is very convenient.
The css () method of the JQuery object can be used as follows:

var div=$('#test-div');
div.css('color');//'# 000033', get CSS attributes
div.css('color','#336699');//Setting CSS Properties
div.css('color','');//Clear CSS attributes

To be consistent with JavaScript, CSS attributes can be formatted in'background-color'and'backgroundColor'.
The css() method acts on the style attribute of the DOM node with the highest priority. If you want to modify the class attribute, you can use the following methods provided by JQuery:

var div=$('#test-div');
div.hasClass('highlight');//false,classDoes it containhighlight
div.addClass('highlight');//Add to highlight thisclass
div.removeClass('highlight');//delete highlight thisclass

Display and hide DOM

To hide a DOM, we can set the display attribute of CSS to none, which can be achieved by using the CSS () method. However, to display this DOM, you need to restore the original display attribute, which first needs to note whether the original display attribute is a block or an inline or something else.

Considering the widespread use of display and hide DOM elements, JQuery directly provides show () and hide () methods. We don't care how it modifies display () attributes. In short, it works properly:

var a=$('a[target=_blank]');
a.hide();//hide
a.show();//display

Note: Hiding DOM nodes does not change the structure of the DOM tree, it only affects the display of DOM nodes. This is different from deleting DOM nodes.

Getting DOM information

Using several methods of JQuery object, we can directly obtain the information of DOM's height and so on without writing specific code for different browsers:

//Browser Visual Window Size:
$(window).width();//800
$(window).height();//600

//HTML document size
$(document).width();//800
$(document).height();//3500

//The size of a div
var div=$('#test-div');
div.width();//600
div.height();//300
div.width(400);//Setting CSS attribute width: 400px depends on whether CSS is valid or not.
div.height('200px');//Setting CSS attribute height: 200px depends on whether CSS is valid or not.

attr() and removeAttr () methods are used to manipulate the attributes of DOM nodes:

// <div id="test-div" name="Test" start="1">...</div>
var div = $('#test-div');
div.attr('data'); // undefined, attribute does not exist
div.attr('name'); // 'Test'
div.attr('name', 'Hello'); // The name attribute of div becomes'Hello'
div.removeAttr('name'); // Delete name attribute
div.attr('name'); // undefined

The prop() method is similar to attr (), but HTML5 specifies that an attribute can have no value in a DOM node as long as there are two kinds of attr (), for example:

<input id="test-radio" type="radio" name="test" checked value="1">

Equivalent to:

<input id="test-radio" type="radio" name="test" checked="checked" value="1">

attr() and prop() have different checked processing for attributes:

var radio=$('#test-radio');
radio.attr('checked');//'checked'
radio.prop('checked');//true

The return value of prop() is more reasonable. However, it is better to use is() method to judge:

var radio=$('#test-radio');
radio.is(':checked');//true

Similar attributes are selected, and is(': selected') is preferred for processing.

Operation form

For form elements, JQuery objects uniformly provide val() methods to obtain and set the corresponding value attributes:

/*
    <input id="test-input" name="email" value="">
    <select id="test-select" name="city">
        <option value="BJ" selected>Beijing</option>
        <option value="SH">Shanghai</option>
        <option value="SZ">Shenzhen</option>
    </select>
    <textarea id="test-textarea">Hello</textarea>
*/
var
    input = $('#test-input'),
    select = $('#test-select'),
    textarea = $('#test-textarea');

input.val(); // 'test'
input.val('abc@example.com'); // The content of the text box has changed to abc@example.com

select.val(); // 'BJ'
select.val('SH'); // Selection box has changed to Shanghai

textarea.val(); // 'Hello'
textarea.val('Hi'); // The text area has been updated to'Hi'

It can be seen that a val () unifies the selection and assignment of various input boxes.

Add DOM

To add a new DOM node, you can use append () in addition to the violent method of using JQuery's html (), for example:

<div id="test-div">
    <ul>
        <li><span>JavaScript</span></li>
        <li><span>Python</span></li>
        <li><span>Swift</span></li>
    </ul>
</div>

How to add a new language to the list? First we need to get the node:

var ul=$('#test-div>ul');

Then, append () is called to pass in the HTML fragment:

ul.append('<li><span>Haskell</span></li>');

In addition to accepting strings, append () can also pass in original DOM objects, JQuery objects and function objects:

// Create DOM objects:
var ps = document.createElement('li');
ps.innerHTML = '<span>Pascal</span>';
// Add DOM objects:
ul.append(ps);

// Add jQuery objects:
ul.append($('#scheme'));

// Add function objects:
ul.append(function (index, html) {
    return '<li><span>Language - ' + index + '</span></li>';
});

When a function is passed in, a string, DOM object, or JQuery object is required to be returned. Because JQuery's append () may act on a set of DOM nodes, only the incoming function can generate different child nodes for each DOM. Appnd () adds DOM to the end, and prepend () adds DOM to the front.
Also note that if the DOM node to be added already exists in the HTML document, it will first be removed from the document and then added, that is to say, with append(), you can move a DOM node.
If you want to insert a new node into a specified location, for example, between JavaScript and Python, you can first locate it in JavaScript, and then use the after() method:

var js = $('#test-div>ul>li:first-child');
js.after('<li><span>Lua</span></li>');

That is to say, peer nodes can use after() or before() methods.

Delete node

To delete the DOM node, call the remove() method directly after you get the jQuery object. If the jQuery object contains several DOM nodes, you can actually delete more than one DOM node at a time:

var li = $('#test-div>ul>li');
li.remove(); // All < li > have been deleted