What parts does the jquery syntax structure consist of?

The jquery syntax structure consists of 3 parts: 1. The factory function "$()" will search and select elements in the HTML document based on the parameters in "()", and return the jquery object containing the elements; 2. Selector, which is the parameter in the factory function "()"; 3. Built-in method (function), used to operate the selected function.

The operating environment of this tutorial: windows7 system, jquery1.10.2 version, Dell G3 computer.

The jQuery statement mainly contains three parts: $(), document and action() are called factory function, selector and method respectively.

Syntax:

$(selector).action();

• selectorselector

$（selector）

• Method action()

jQuery对象.addClass（[样式名]）

$() in jquery

in jQuery $ represents the meaning of acquisition, which is equivalent to document.getElemenById("id name"); of course, it is also equivalent to document.getElementsByClassName("class name"), etc. Same as above reason. The

$ symbol is mainly used to obtain the element object. By obtaining the object, you can use the jquery method to operate it.

$ is actually another name for jQuery, which refers to the jQuery object, and jQuery is a function provided by the jQuery library

The function of this function is to search and select html based on the parameters in () For elements in the document, one of the function functions is to replace GetElementByID, but () can not only be ID, but also various selectors

For example:

$(document )It is to select the entire document object

Can it only be replaced by $? No. To prevent naming conflicts, the jQuery library provides additional mechanisms to give jQuery functions additional aliases.

For example:

var jq = jQuery.noConflict();
// Do something with jQuery
j("div p").hide();
// Do something with another library's $()
$("content").style.display = 'none';

You can use jq instead of jQuery and $ in the code.

To put it simply, $ is the jquery object, $() is jQuery(), in which parameters can be passed, and the function is to obtain elements.

Selectors in jquery

jQuery selectors allow operations on groups of HTML elements or individual elements.

jQuery selectors "find" (or select) HTML elements based on the element's id, class, type, attributes, attribute values, etc. It is based on existing CSS selectors, in addition to some custom selectors.

1.Basic selector

$("#test")             　　　　   选择id值为test的元素，id值是唯一的所以返回单个元素。
$("div")               　　　　   选择所有的div标签元素，返回div元素数组
$(".myclass")          　　　　   选择使用myclass类的css的所有元素
$("*")                 　　　　   选取所有元素。
$("#test,div,.myclass")  　　    选取多个元素。

2.Hierarchical selector

$("div span") 　　　　　　　　　　  选取<div>里的所有<span>元素
$("div >span")   　　　　　　　　  选取<div>元素下元素名是<span>的子元素
$("#one +div")   　　　　　　　　  选取id为one的元素的下一个<div>同辈元素    　　　　等同于$("#one").next("div")
$("#one~div")    　　　　　　　　  选取id为one的元素的元素后面的所有<div>同辈元素    等同于$("#one").nextAll("div")
$("#one").siblings("div") 　　   获取id为one的元素的所有<div>同辈元素（不管前后）
$("#one").prev("div") 　　 　　 　获取id为one的元素的前面紧邻的同辈<div>元素

所以 获取元素范围大小顺序依次为：
$("#one").siblings("div")>$("#one~div")>$("#one +div")
或是
$("#one").siblings("div")>$("#one").nextAll("div")>$("#one").next("div")

3.Basic filter selection Filter

$("div:first")               　　选取所有<div>元素中第1个<div>元素
$("div:last")                   选取所有<div>元素中最后一个<div>元素
$("input:not(.myClass)")        选取class不是myClass的<input>元素
$("input:even")                 选取索引是偶数的<input>元素(索引从0开始)
$("input:odd")                  选取索引是基数的<input>元素(索引从0开始)
$("input:eq(2)")                选取索引等于2的<input>元素
$("input:gt(4)")                选取索引大于4的<input>元素
$("input:lt(4)")                选取索引小于4的<input>元素
$(":header")                    过滤掉所有标题元素，例如：h1、h2、h3等
$("div:animated")               选取正在执行动画的<div>元素
$(":focus")                     选取当前获取焦点的元素

4. Content filter selector

$("div:contains(&#39;Name&#39;)")       选取所有<div>中含有&#39;Name&#39;文本的元素

$("div:empty")                  选取不包含子元素（包括文本元素）的<div>空元素

$("div:has(p)")                 选取所有含有<p>元素的<div>元素

$("div:parent")                 选取拥有子元素的（包括文本元素）<div>元素

5. Visibility filter selector

$("div:hidden")                 选取所有不可见的<div>元素

$("div:visible")                选取所有可见的<div>元素

6. Attribute filter selector

$("div[id]")              　　　　选取所有拥有属性id的元素
$("input[name=&#39;test&#39;]")     　　 选取所有的name属性等于&#39;test&#39;的<input>元素

$("input[name!=&#39;test&#39;]")  　　　　选取所有的name属性不等于&#39;test&#39;的<input>元素

$("input[name^=&#39;news&#39;]")        选取所有的name属性以&#39;news&#39;开头的<input>元素
$("input[name$=&#39;news&#39;]")        选取所有的name属性以&#39;news&#39;结尾的<input>元素
$("input[name*=&#39;news&#39;]")        选取所有的name属性包含&#39;news&#39;的<input>元素
$("div[title|=&#39;en&#39;]")           选取属性title等于&#39;en&#39;或以&#39;en&#39;为前缀(该字符串后跟一个连字符&#39;-&#39;)的<div>元素
$("div[title~=&#39;en&#39;]")           选取属性title用空格分隔的值中包含字符en的<div>元素

$("div[id][title$=&#39;test&#39;]")     选取拥有属性id,并且属性title以&#39;test&#39;结束的<div>元素

7. Sub-element filter selector

$("div .one:nth-child(2)")       选取class为&#39;one&#39;的<div>父元素下的第2个子元素

$("div span:first-child")        选取每个<div>中的第1个<span>元素

$("div span:last-child")         选取每个<div>中的最后一个<span>元素

$("div button:only-child")       在<div>中选取是唯一子元素的<button>元素

8. Form object attribute filter selector

$("#form1 :enabled")             选取id为'form1'的表单内所有可用元素
$("#form2 :disabled")            选取id为'form2'的表单内所有不可用元素
$("input :checked")              选取所有被选中的<input>元素
$("select option:selected")      选取所有的select 的子元素中被选中的元素

9. Form selector

$(":input")                      选取所有<input>,<textarea>,<select> 和 <button>元素
$(":text")                    　　选取所有的单行文本框
$(":password")                   选取所有的密码框
$(":radio")                      选取所有单的选框
$(":checkbox")                   选取所有的多选框
$(":submit")                     选取所有的提交按钮
$(":image")                      选取所有的图像按钮
$(":reset")                      选取所有的重置按钮
$(":button")                     选取所有的按钮
$(":file")                       选取所有的上传域
$(":hidden")                     选取所有不可见元素

Methods in jquery

jquery's built-in method (function), used to operate the selected function

For example:

Method to directly operate the element style

CSS Properties	Description
css()	Set or return the style attribute of the matching element.
height()	Sets or returns the height of the matching element.
offset()	Returns the position of the first matching element relative to the document.
position()	Returns the position of the first matching element relative to the parent element.
scrollLeft()	Set or return the offset of the matching element relative to the left side of the scroll bar.
scrollTop()	Sets or returns the offset of the matching element relative to the top of the scroll bar.
width()	Sets or returns the width of the matching element.

Methods to indirectly manipulate element styles

In jquery, you can indirectly manipulate element styles by manipulating element attributes.

Method	Description
addClass()	Add the specified element to the matched element class name.
attr()	Sets or returns the attributes and values ​​of the matching element.
prop()	Set or return the attribute/value of the selected element
removeAttr()	Remove the specified attribute from all matching elements.
removeClass()	Remove all or specified classes from all matching elements.
toggleClass()	Adds or removes a class from the matched element.

Expand knowledge:

DOM model

There are many different types of nodes in the DOM, usually divided into There are three types: element nodes, text nodes and attribute nodes.

DOM object

In JavaScript, you can use getElementsByTagName() or getElementsById() to get element nodes. The result is a DOM object, which can be used in JavaScript Methods.

jQuery object

The object generated by wrapping the DOM object with jQuery can use the methods in jQuery.

Example: $("#title").html(); //Get the html code in the element whose id is title

[Equivalent to document.getElementsById("title"). innerHTML】

Mutual conversion between jQuery objects and DOM objects

1) Conversion of jQuery objects into DOM objects

①The jQuery object is an array-like object , the corresponding DOM object can be obtained through the [index] method.

②Get the corresponding DOM object through the get(index) method.

2) Convert DOM object into jQuery object

You need to use the $() function to wrap the DOM object to get a jQuery object.

[Recommended learning: jQuery video tutorial, web front-end video]

The above is the detailed content of What parts does the jquery syntax structure consist of?. For more information, please follow other related articles on the PHP Chinese website!