Sharing examples of jQuery design ideas

No matter what language, thinking is very important. Before understanding the details of jQuery, you need to have a general understanding of jQuery's design ideas. When you encounter a problem, know which function of jQuery you should use, and then quickly find the specific usage from the manual. This article will introduce the design ideas of jQuery in detail. Let’s take a look with the editor below.

Select elements

The basic design idea and main usage of jQuery is to "select a web page element and then perform some operation on it." This is the fundamental feature that distinguishes it from other JavaScript libraries.

The first step in using jQuery is often to put a selection expression into the constructor jQuery() (abbreviated as $), and then get the selected Element

[Simulated CSS selection element]

$(document) //选择整个文档对象
$('#myId') //选择ID为myId的网页元素
$('p.myClass') // 选择class为myClass的p元素
$('input[name=first]') // 选择name属性等于first的input元素

[Special expression selection]

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

[Multiple filtering methods]

$('p').has('p'); // 选择包含p元素的p元素
$('p').not('.myClass'); //选择class不等于myClass的p元素
$('p').filter('.myClass'); //选择class等于myClass的p元素
$('p').first(); //选择第1个p元素
$('p').eq(5); //选择第6个p元素

Writing method

[Method Functionalization]

In native javascript, assignment operators are often used. In jQuery, the method of passing function parameters is mostly used, that is, method functionalization

//原生
window.onload = function(){};
//jQuery
$(function(){});
//原生
p.onclick = function(){};
//jQuery
p.click(function(){});
//原生
p.innerHTML = '123';
//jQuery
p.html('123');

[Chained Operation]

After selecting a web page element, a series of operations can be performed on it, and All operations can be connected together and written in the form of a chain

$('p').find('h3').eq(2).html('Hello');

Broken down, it looks like this:

$('p') //找到p元素
.find('h3') //选择其中的h3元素
.eq(2) //选择第3个h3元素
.html('Hello'); //将它的内容改为Hello

This is the most commendable and convenient feature of jQuery. Its principle is that each jQuery operation returns a jQuery object, so different operations can be connected together

jQuery also provides the .end() method, so that the result set can take one step back

$('p')
.find('h3')
.eq(2)
.html('Hello')
.end() //退回到选中所有的h3元素的那一步
.eq(0) //选中第一个h3元素
.html('World'); //将它的内容改为World

【Getting and assigning values】

When operating web page elements, the most common requirement is to obtain their values ​​or assign values ​​to them. jQuery uses the same function to complete value (getter) and assignment (setter), that is, the "getter" and "assignor" are combined into one. Whether to get a value or assign a value is determined by the parameters of the function

$('h1').html(); //html()没有参数，表示取出h1的值
$('h1').html('Hello'); //html()有参数Hello，表示对h1进行赋值

The common value taking and assignment functions are as follows

.html() 取出或设置html内容
.text() 取出或设置text内容
.attr() 取出或设置某个属性的值
.width() 取出或设置某个元素的宽度
.height() 取出或设置某个元素的高度
.val() 取出某个表单元素的值

It should be noted that if the result set contains multiple elements, then the assignment When the value is obtained, only the value of the first element is taken out.

[Note] The exception is .text(), which takes out the text content of all elements.

Hope this article is useful to you.

Related recommendations:

The practice of proxy mode and separation of reading and writing in PHP design ideas

Complete jQuery design ideas_jquery

Sharing design ideas of Javascript inheritance mechanism_javascript skills

The above is the detailed content of Sharing examples of jQuery design ideas. For more information, please follow other related articles on the PHP Chinese website!