Understand jquery's basic operations on elements in ten minutes

This article brings you a summary of jquery’s common functions, including how to obtain, move, create and modify elements. I hope it will be helpful to everyone.

Introduction to jQuery

jQuery is a class library for JS that provides certain functions in JS Encapsulation makes DOM operations simple, the code is concise and easy to use, and it supports chain writing and has good compatibility.

The design idea and main usage of jQuery is: select a web page element and then perform some operations on it.

The special thing about jQuery is that after using jQuery to obtain the corresponding elements, it does not return these corresponding elements. Instead, it returns jQuery objects (objects constructed by jQuery), and this object can operate on these corresponding elements. Elements.

The functions that jQuery can achieve can definitely be achieved by JS, but not necessarily vice versa.

Let window.jQuery = window.$, and abbreviate jQuery as $.

How to get elements with jQuery

Just put a selection expression into the constructor $(), and then get the selected element. The selection expression can be a CSS selector or a jQuery-specific expression.

// CSS选择器
$(document) // 选择整个文档对象
$('#xxxID') // 选择ID为xxx的元素
$('div.xxxClass') // 选择Class为xxx的元素
$('input[name=first]') // 选择类名属性为first的元素

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

How jQuery creates elements

Just pass the new element directly into the jQuery constructor.

The new element created will not be automatically inserted into the page. We also need to explicitly specify the location where it is inserted into the page.

For example: Create a pair of 4a249f0d628e2318394fd9b75b4636b1473f0a7621bec819994bb5020d29372a tags

$(function(){
let $h1 = $(&#39;<h1></h1>&#39;) // 创建元素h1
$(&#39;body&#39;).append($h1) // 将元素h1放入到body里（用append表示成为body的最后一个子元素）
}

Use div for example:

$('div').prepend('') // 给div添加一个大儿子（即添加到最前）
$('div').append(选择器/jQuery对象) // 给div添加一个小儿子（即添加到最后）
$(&#39;<h2>xxx</h2>&#39;).appendTo(选择器/jQuery对象) // 在选择器选中的元素的子元素里，将“xxx”添加到最后

How to move elements with jQuery

Method 1: Move the element directly

$('div').insertAfter($('p')) // 将元素div移动到元素p后面

Method 2: Move other elements so that the target function reaches the position we want

$('p').after($('div')) // 把元素p放到元素div前

These two methods The difference: the returned objects are different. The object returned by method one is div, and the object returned by method two is p.

Different ways of moving elements:

.insertAfter()和.after() // 在现存元素的外部，从后面插入元素
.insertBefore()和.before() // 在现存元素的外部，从前面插入元素
.appendTo()和.append() // 在现存元素的内部，从后面插入元素
.prependTo()和.prepend() // 在现存元素的内部，从前面插入元素

How jQuery modifies element attributes

Use attr() to modify element attributes and their content, attr is The abbreviation of attribute is the abbreviation of setAttribute&getAttribute in JS. Whether attr takes a value or assigns a value is determined by the parameters of the function.

For example:

$('img').attr('width','100px') // 为属性'width'赋值'100px'

Usage method:

$(selector).attr(attribute) // 返回被选元素的属性值
$(selector).attr(attribute.value) // 返回被选元素的属性&值
$(selector).attr(attribute,function(index,oldvalue)) // 用函数返回值设置被选元素的属性&值
$(selector).attr({attribute1:value,attribute2:value...}) // 为被选一个及以上的元素设置属性&值，可一次修改多个属性的属性值

Supplement: The third usage method above means: use the return value of the function to assign attribute values ​​to attributes. This function receives and uses the selector's index value and the current attribute value. For example:

$('button').click(function(){
    $('img').attr('width',function(n,v){
     return v-50;  // 点击按钮图片宽度减少50
    })
})

jQuery's chain operation

After selecting a web page element, perform a series of operations on it, and all operations can be connected together and Written in the form of a chain, this is jQuery's chain operation.

For example: $('div').find('h3').eq(2).html('Hello'); This line of code can be split as follows

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

jQuery also provides the back operation .end(), which allows the operation results to go back one step.

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

Recommended related video tutorials: jQuery video tutorial

The above is the detailed content of Understand jquery's basic operations on elements in ten minutes. For more information, please follow other related articles on the PHP Chinese website!