[Web front-end | jQuery] jQuery operation

One: jQuery attribute operation

1: Set or get the intrinsic property value of the element prop()

//1. 获取属性语法
prop(''属性'');

//2. 设置属性语法
prop(''属性'', ''属性值'');

2: Set or get element custom attribute value attr()

//1. 获取属性语法
attr(''属性'');

//2. 设置属性语法
attr(''属性'', ''属性值'');   // 类似原生 setAttribute()

This method can also get H5 custom attributes

3: Data cache data()

The data() method can access data on the specified element without modifying the DOM element structure. Once the page is refreshed, all previously stored data will be removed.

//1. 附加数据语法
data(''name'',''value'');   // 向被选元素附加数据
   
//2. 获取数据语法
date(''name'');            //   向被选元素获取数据

At the same time, you can also read the HTML5 custom attribute data-index, and the result is a number

Two: jQuery content text value

1: Common element content html() (equivalent to native inner HTML)

html()             // 获取元素的内容
html(''内容'')     // 设置元素的内容

2: Normal element text content text() (equivalent to native innerText)

text();              // 获取元素的文本内容
text(''文本内容'')   // 设置元素的文本内容

3: The value of the form val() (equivalent to the original value)

val()              // 获取表单的值
val(''内容'')      // 设置表单的值

Three: jQuery element operation

1: Traverse the elements

//方法一
$("div").each(function (index, domEle) {
    
     xxx; })      

1. The each() method iterates through each matched element. Mainly use DOM processing. each each
2. The callback function inside has 2 parameters: index is the index number of each element; demEle is each DOM element object, not a jquery object
3. So if you want to use the jquery method, you need to convert this dom element to a jquery object $(domEle)

//方法二
$.each(object，function (index, element) {
    
     xxx; })       

1. The $.each() method can be used to traverse any object. Mainly used for data processing, such as arrays, objects
2. The function inside has 2 parameters: index is the index number of each element; element traverses the content

2: Create elements

$(''  '');

3: Add elements

//内部添加
element.append(''内容'')  //把内容放入匹配元素内部最后面，类似原生 appendChild。

element.prepend(''内容'')  //把内容放入匹配元素内部最前面。

//外部添加
element.after(''内容'')        //  把内容放入目标元素后面
element.before(''内容'')    //  把内容放入目标元素前面 

1. Elements are added internally, and after generation, they have a parent-child relationship.
2. Externally add elements, after generation, they are brothers.

4: Delete elements

element.remove()   //  删除匹配的元素（本身）
element.empty()    //  删除匹配的元素集合中所有的子节点
element.html('''')   //  清空匹配的元素内容

1. remove removes the element itself.
2. empt() and html('''') are equivalent, both can delete the content inside the element, but html can also set the content.

Four: jQuery size

Attributes	description
width() / height()	Obtaining the width and height of the matched element is only width / height
innerWidth () / innerHieght ()	Get the width and height of the matched element including padding
outerWidth() / outerHeight()	Get the width and height of the matched element including padding. border
outerWidth(true)/ outerHeight(true)	Get the width and height of the matched element including padding, borde, margin

1. If the above parameter is empty, the corresponding value is obtained, and the returned value is numeric.
2. If the parameter is a number, modify the corresponding value.
3. The parameter does not need to write the unit

Five: jQuery position operation

1: offset() set or get the element offset

1. The offset coordinate relative to the document has nothing to do with the parent.
2. This method has two attributes left and top. offset().top is used to get the distance from the top of the document, offset().left is used to get the distance from the left of the document.
3. You can set the offset of the element: offset({ top: 10, left: 30 });
4. Parent box plus positioning, still based on the distance of the document

2: position() Get the element offset

1. Offset coordinates relative to the parent with positioning. If the parent is not positioned, the document shall prevail.
2. This method has two attributes left and top. position().top is used to obtain the distance from the top of the positioning parent, and position().left is used to obtain the distance from the left of the positioning parent.
3. This method can only be obtained, not set.

3: scrollTop()/scrollLeft() set or get the head and left side of the element being rolled

1. The scrollTop() method sets or returns the scrolled head of the selected element.
2. If the parameter is not followed by the acquisition, if the parameter is a number without a unit, it will set the head to be rolled.