What are the main functions of jquery

The main functions of jquery are: 1. Access parts of the page frame; 2. Modify the performance of the page; 3. Change the page content; 4. Respond to events; 5. Add animation to the page; 6. Asynchronously with the server Interaction; 7. Simplify commonly used JavaScript operations.

The operating environment of this tutorial: Windows 10 system, jquery3.2.1, Dell G3 computer.

What are the main functions of jquery?

The main functions of jQuery

1: Accessing parts of the page frame

jQuery greatly simplifies the DOM to obtain a node or a certain page Method for fixing a type of node;

2: Modify the performance of the page

Because each browser has different support for the CSS3 standard, many CSS3 styles are not well reflected. The emergence of jQuery solves this problem very well. It encapsulates JavaScript code so that various browsers can use the CSS3 standard well.

3: Change the content of the page

Through the powerful and comprehensive API, jQuery can easily modify the content of the page, and even the frame of the entire page;

4: Respond to events

You don’t need to consider browser compatibility issues, you can handle events more easily;

5: Add animation to the page

jQuery’s library provides a large number of customizable Define the animation effect of parameters,

6: Asynchronous interaction with the server

jQuery provides a complete set of Ajax-related operations, which greatly facilitates the development and use of asynchronous interaction;

7: Simplify common JavaScript operations

jQuery provides many additional functions to simplify common JavaScript operations, such as array operations, iteration operations, etc.;

Basic functions of jQuery

#jQuery encapsulates DOM functions, making the use of DOM functions very simple and convenient. Whether it is the acquisition of web page elements or "addition, deletion, modification and query", it has been encapsulated in a more humane way. Let's take a brief look at the basic functions of jQuery and the excellence of jQuery design.

1. Obtain web page elements

The result obtained by jQuery is an object

• Some basic methods

$(document); // 选择整个文档对象
$("#myId"); // 选择id = 'myId' 的元素
$(".myClass"); // 选择class = 'myClass' 的元素
$("div.myClass"); // 选择class = 'myClass' 的div元素
$("input[name=first]"); // 选择name = 'first' 的 input 元素

• jQuery-specific expression

$("a:first"); // 选择网页中第一个a元素
$("tr:odd"); // 选择表格中的奇数行
$("#myFrom:input"); // 选择表单中的id='myFrom'的input元素
$("div:visible"); // 选择可见的div元素
$("div:gt(2)"); // 选择所有的div元素，除了前3个
$("div:animated"); // 选择当前处于动画状态的div元素

• Further filter the selection result object of the div

$("div").has("p"); // 选择包含p元素的div元素
$("div").not(".myClass"); //选择class != 'myClass' 的div元素
$("div").filter(".myClass"); // 选择class = 'myClass' 的div元素
$("div").first(); // 选择第1个div元素
$("div").eq(5); // 选择第6个div元素

• Select other elements through div

$("div").next("p"); // 选择div元素后面的第1个p元素
$("div").parent(); // 选择div元素的父元素
$("div").closest("from"); // 选择离div最近的from父元素
$("div").children(); // 选择div的所有子元素
$("div").siblings(); // 选择div同级的其他兄弟元素（不包括自己）

2. Chain operation

jQuery’s most commendable Part

jQuery can perform continuous function operations on the same object

Example:

$("div").find("p").addClass("first").removeClass("second").html("third");
// 分解
$("div") // 找到div元素
  .find("p") // 选择其中的p元素
  .addClass("first") // 添加一个class = 'first'
  .removeClass("second") // 删除一个class = 'second'
  .text("third"); // 将文本改为 third

Chain operation is the most convenient feature of jQuery, because jQuery executes one function operation each time The return value is still the jQuery object of the original operation, so you can continue the operation directly later.

.end() method

.end() method returns the return value to the previous jQuery object

Example:

$("div") // 找到div元素
  .find("p") // 选择其中的p元素
  .addClass("first")
  .removeClass("second")
  .text("third")
  .end() // 将jQuery对象从p退回到div
  .addClass("myDiv"); // 给div添加一个class = 'myDiv'

3. Add, delete, modify and check

1. Add

Create a new element: Directly pass in a string that conforms to the html format in jQuery

let $myDiv = $("<div class=&#39;myDiv&#39;><p>Derek</p></div>"); // 创建新的元素，用变量$myDiv储存
$("body").append($myDiv); // 把$myDiv储存的新元素插入到body中
$("ul").append("<li>list</li>"); // 把新创建的li插入到ul中

Copy element

.clone()

Returns a clone copy of the current jQuery object

Includes all matching elements, subordinate elements of matching elements, and text nodes

2 Parameters:

withDataAndEvents Whether to copy the data and binding events of the element at the same time, the default value is false

deepWithDataAndEvents Whether to copy the data and binding events of all sub-elements of the element at the same time, the default value is the first parameter (withDataAndEvents) value

2. Delete

Delete element

.remove() 不保留被删元素的事件
.detach() 保留被删元素的事件，便于在重新插入文档时使用
.empty() 清空元素内容，但不删除该元素（即删除元素里面的所有节点）

3. Change

Insert/Move element

$("div").insertAfter($("p")); // 把div元素移动到p元素的后面
$("p").after($("div")); // 把p元素移动到div元素的前面

above The effect of the two methods is the same

But their return values ​​are different, which are $('div') and $('p'), so you need to choose based on the subsequent operations

The other two methods of inserting/moving elements

// 在div内部的 末端 插入内容
$("div").append("插入的部分");
$("插入的部分").appendTo("div");
// 在div内部的 顶端 插入内容
$("div").prepend("插入的部分");
$("插入的部分").prependTo("div");

4. Change and check in one getter/setter

The same function can realize the change/check function by passing different parameters

$("h1").html(); // html没有传参，实现取出h1的值
$("h1").html("Hello"); // html传参'Hello'，实现对h1进行赋值

jQuery common value/assignment functions

.html() Check/change html content

.text() Check/change text content

. attr() Check/Change the value of an attribute

.width() Check/Change the width of an element

.heigth() Check/Change the height of an element

.val() Check/change the value of a form element

Note:

If the result object contains multiple elements, then when assigning a value, all the elements will be assigned

When taking the value, only the value of the first element is taken out

.text() is an exception, it takes out the text content of all elements

Recommended learning: "jQuery Video tutorial》

The above is the detailed content of What are the main functions of jquery. For more information, please follow other related articles on the PHP Chinese website!