jQuery selectors, DOM operations, events, animations

There are quite a few things about

jquery, so writing them down will help with future reference. This is also quite convenient.

JquerySelector

$(document).ready(function(){})
$(function(){})

If the obtained object is a jQuery object, then in Variables are preceded by $, For example: var $variable=jQueryObject

Selector

1, Determine whether an element exists on the page: if($(“#tt”).length>0){} Or if($(“#tt”)[0]){};

2, Basic Selector

whose id is test

$(“#test”) 选择id为test的元素

$(“.test”)选择class为test的所有元素

$(“p”)选择所有的e388a4556c0f65e1904146cc1a846bee标签

$(“*”)选择页面上的所有元素

$(“span ,#two”)选择页面上所有的45a2772a6b6107b401db3c9b82c049c2标签和id为two的元素

$("#test") Select the element

$(".test")SelectAll elements for test /td>

$("p") Select all e388a4556c0f65e1904146cc1a846beetags

$("*")Select all elements on the page

$(“span ,#two”)Select all 45a2772a6b6107b401db3c9b82c049c2

with the 🎜> tag and id is two

3， 层次选择器

$(“p span”)表示选取

$(“p span”)表示选取p中的所有的span元素

$(“parent>children”)选取parent下所有children的子元素

$(‘.one span')选取class为one的下一个span元素

$(‘.one~p')选取class为one的后面的所有的p兄弟元素

p中的所有的span元素

$(“parent>children”)选取parent下所有children的子元素

$(‘.one span')选取class为one的下一个span元素

$(‘.one~p')选取class为one的后面的所有的p兄弟元素

$('.one span') is equivalent to $(".one").next("span")

$('one~p')Equivalent to $(“.one”).nextAll(“p”)

$(“.one”).siblings(“p”) Select all sibling elements p of class as one, regardless of

4, Filter Selector

(1)BasicFilter

$( "input:even")Select the index$ ("input:odd")Select odd-numbered input$("input:eq (1)")Select the inputinput element whose index is greater than 1animation

$(“p:first”)Select all pThe first p element in the element

$(“p:last”)Select allpThe lastpelement

$(“input:not(.myClass)”)Select the input element

that is an even number

input element

elements at index

element

$( "input:gt(1)")

Selects the

(greater than

1 does not include 1)

$("input:lt(1)")Select the input element1 > (less than 1 excluding 1)

$(":

header”)Select all h1, h2...

$( "p:animated")

Select the p element

🎜>(

2)Content Filter

$("p:contains('I

$(“p:contains(‘我')”)选取含有文字“我”的p元素

$(“p:empty”)选取不包含子元素（包含文本元素）的p空元素

$(“p:has(p)”)选取含有p元素的p元素

$(“p:parent”)选取拥有子元素（包含文本元素）的p元素

')")Select pElement$(“p:empty”)Selects elements that do not contain child elements (including text elements) pEmpty element$(“p:has(p)”)Select containing p The p element of the element $(“p:parent”) selects the owning child element ( p element containing a text element)

(3)Visibility filter selector

$(“:hidden”)

$(“:hidden”)选取所有不可见的元素。包括b36110a7fe5a79730b35a3506f95a3b4,6f943d4c784aa7acf613167b36fd38d7和949ab30bebc0876d788c24b8c95c515a等元素。如果只想选取d5fd7aea971a85678ba271703566ebfd元素，可以使用$(“input:hidden”)

$(“p:visible”)选取所有可见的e388a4556c0f65e1904146cc1a846bee元素

Select all invisible elements. Including b36110a7fe5a79730b35a3506f95a3b4,6f943d4c784aa7acf613167b36fd38d7 and 949ab30bebc0876d788c24b8c95c515a and other elements. If you only want to select the d5fd7aea971a85678ba271703566ebfd element, you can use $("input:hidden")

$("p:visible")Select all visible e388a4556c0f65e1904146cc1a846bee elements

 （4）属性过滤选择器

$(“p[id]”)

$(“p[id]”)选取拥有属性id的元素

$(“p[title=test]”)选取属性title为test的p元素

$(“p[title!=test]”)选取属性title不是test的p元素（没有属性title的p也会被选取）

$(“p[title^=test]”)选取属性title以test开始的p元素

$(“p[title$=test]”)选取属性title以test结束的p元素

$(“p[title*=test]”)选取属性title包含test的p元素

$(“p[id][title$='test']”)选取拥有属性id，并且属性title以test结束的p元素

选取拥有属性id的元素

$(“p[title=test]”)选取属性title为test的p元素

$(“p[title!=test]”)选取属性title不是test的p元素（没有属性title的p也会被选取）

$(“p[title^=test]”)选取属性title以test开始的p元素

$(“p[title$=test]”)选取属性title以test结束的p元素

$(“p[title*=test]”)选取属性title包含test的p元素

$(“p[id][title$='test']”)选取拥有属性id，并且属性title以test结束的p元素

(5)Child element filter selector

:eq(index)

:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index是从1开始的，而:eq(index)是从0算起的

:first只返回单个元素，而:first-child选择符将为每个父元素匹配第一个子元素。

例如$(“ul li:first-child”)选取每个ul中第一个li元素

:last只返回单个元素，而:last-child选择符将为每个父元素匹配最后一个子元素

$(“ul li:only-child”)在ul中选取是唯一子元素的li元素

will only match one element, while :nth-child will match every parent element Match child elements, and the index of :nth-child(index) starts from 1, and :eq(index) It is calculated from 0

:first only returns a single element, while :first-child selector will match the first child element of each parent element.

For example, $("ul li:first-child")selects the first liul >Element

:last only returns a single element, while the :last-child selector will match the last child element

$("ul li:only-child")在 Select the li element that is the only child element in ul

The

:nth-child() selector is a very commonly used child element filtering selector. The detailed functions are as follows:

1.:nth-child(even) can Select elements whose index value under each parent element is an even number

2. :nth-child(odd)can select elements whose index value under each parent element is an odd number

3.:nth-child(2)can select the element whose index value is equal to 2 under each parent element

4.nth -child(3n) can select elements (n starting from 0 whose index value under each parent element is a multiple of 3 )

5.nth-child(3n 1) can select the element (n whose index value under each parent element is (3n 1) Starting from 0)

(6) Form object attribute filter selector

$("#form1 :enabled ”)

$(“#form1 :enabled”)选取id为form1的表单内的所有可用元素

$(“#form2 :disabled”)选取id为“form2”的表单内的所有不可用元素

$(“input:checked”)选取所有被选中的input元素

$(“select :selected”.text())选取所有被选中的选项元素

Select all available elements in the form with id being form1

$("#form2 :disabled")Selectid as "form2” All unavailable elements in the form

$("input:checked")Select all selected input elements

$("select :selected".text())Select All selected option elements

5．表单选择器

$(“:input”)选取所有input、textarea、select和button元素

$(“:text”)选取所有的单行文本框

$(“:password”)选取所有的密码框

$(“:radio”)选取所有的单选框

$(“:checkbox”)选取所有的复选框

$(“:submit”)选取所有的提交按钮

$(“:image”)选取所有的图像按钮

$(“:reset”)选取所有的重置按钮

$(“:button”)选取所有的按钮

$(“:file”)选取所有的上传域

$(“:hidden”)选取所有不可见元素

$(“:input”)选取所有input、textarea、select和button元素

$(“:text”)选取所有的单行文本框

$(“:password”)选取所有的密码框

$(“:radio”)选取所有的单选框

$(“:checkbox”)选取所有的复选框

$(“:submit”)选取所有的提交按钮

$(“:image”)选取所有的图像按钮

$(“:reset”)选取所有的重置按钮

$(“:button”)选取所有的按钮

$(“:file”)选取所有的上传域

$(“:hidden”)选取所有不可见元素

DomOperation

Dom core(core), HTML-DOM and CSS-DOM

1. Method to insert nodes

append()	$(“p”) .append(“a4b561c25d9afb9ac8dc4d70affff419You0d36329ec37a2cc24d42c7229b69747a”) e388a4556c0f65e1904146cc1a846beetest a4b561c25d9afb9ac8dc4d70affff419You0d36329ec37a2cc24d42c7229b69747a94b3e26ee717c64999d7867364b1b4a3
appendTo()	$(“a4b561c25d9afb9ac8dc4d70affff419You0d36329ec37a2cc24d42c7229b69747a”).appendTo(“p” ) e388a4556c0f65e1904146cc1a846beetest a4b561c25d9afb9ac8dc4d70affff419you0d36329ec37a2cc24d42c7229b69747a94b3e26ee717c64999d7867364b1b4a3
prepend()	$(“p”). prepend ( “ a4b561c25d9afb9ac8dc4d70affff419You0d36329ec37a2cc24d42c7229b69747a”) e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419 You0d36329ec37a2cc24d42c7229b69747atest 94b3e26ee717c64999d7867364b1b4a3
prependTo()	$(“p”). prependTo ( “a4b561c25d9afb9ac8dc4d70affff419you0d36329ec37a2cc24d42c7229b69747a”) e388a4556c0f65e1904146cc1a846beea4b561c25d9afb9ac8dc4d70affff419You0d36329ec37a2cc24d42c7229b69747atest 94b3e26ee717c64999d7867364b1b4a3
After()	$(“p”). after ( “a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747a”) e388a4556c0f65e1904146cc1a846beetest 94b3e26ee717c64999d7867364b1b4a3a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747a
insertAfter()	$( “a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747a”). insertAfter (“p”) e388a4556c0f65e1904146cc1a846beetest 94b3e26ee717c64999d7867364b1b4a3a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747a
Before()	$(“p”). before ( “a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747a”) a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beetest 94b3e26ee717c64999d7867364b1b4a3
insertBefore()	$( “a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747a”). insertBefore (“p”) a4b561c25d9afb9ac8dc4d70affff419你0d36329ec37a2cc24d42c7229b69747ae388a4556c0f65e1904146cc1a846beetest 94b3e26ee717c64999d7867364b1b4a3

2.       删除节点

Remove()方法    empty()清空节点

3.       复制节点

Clone()           $(this).clone(true).appendTo(“body”)

复制元素的同时复制元素中所绑定的事件

4.       替换节点

replaceWith():$(“p”).replaceWith(“<a>test</a>”);
replaceAll():$(“<a>test</a>”). replaceAll (“p”);

5.       包裹节点

Wrap()	$(“strong”).wrap(“a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a”);a4b561c25d9afb9ac8dc4d70affff4198e99a69fbe029cd4e2b854e244eab143ssss128dba7a3a77be0113eb0bea6ea0a5d00d36329ec37a2cc24d42c7229b69747a
wrapAll()	$(“strong”). wrapAll (“a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a”);a4b561c25d9afb9ac8dc4d70affff4198e99a69fbe029cd4e2b854e244eab143ssss128dba7a3a77be0113eb0bea6ea0a5d0 8e99a69fbe029cd4e2b854e244eab143ssss128dba7a3a77be0113eb0bea6ea0a5d00d36329ec37a2cc24d42c7229b69747a
wrapInner()	$(“strong”).wrapInner (a4b561c25d9afb9ac8dc4d70affff4190d36329ec37a2cc24d42c7229b69747a”);8e99a69fbe029cd4e2b854e244eab143a4b561c25d9afb9ac8dc4d70affff419ssss0d36329ec37a2cc24d42c7229b69747aac614297babda07451c2ac7bdedd5452

 

6.       属性操作

Attr();    设置多个$(“p”).attr({“title”:”dd”,”name”:”myp”})

removeAttr()移除属性

7.       样式操作

获取和设置样式	Attr()
追加样式	addClass()
移除样式	removeClass()    removeClass(“one two”)
切换样式	toggle()主要控制行为上的重复切换 toggleClass()样式上的重复切换

判断是否含有某个样式

hasClass()等价于is(“.one”)

8.设置和获取html、文本和值

html()	读取或者设置某个元素中的HTML内容
text()	读取或者设置某个元素中文本内容
val()	设置和获取元素的值defaultValue初始值

html()

读取或者设置某个元素中的HTML内容

text()

读取或者设置某个元素中文本内容

val()

设置和获取元素的值defaultValue初始值

9.遍历节点

Children()	取得匹配元素的子元素的集合，只考虑子元素不考虑后代元素
Next()	取得匹配元素后面紧邻的同辈元素
Prev()	取得匹配元素前面紧邻的同辈元素
Siblings()	取得匹配元素前后所有的同辈元素
Closest()	取得最近的匹配元素
还有很多遍历方法：find(),filter(),nextAll(),prevAll(),parent(),parents()等

Children()

取得匹配元素的子元素的集合，只考虑子元素不考虑后代元素

Next()

取得匹配元素后面紧邻的同辈元素

Prev()

取得匹配元素前面紧邻的同辈元素

Siblings()

取得匹配元素前后所有的同辈元素

Closest()

取得最近的匹配元素

还有很多遍历方法：find(),filter(),nextAll(),prevAll(),parent(),parents()等

CSS-DOMOperations

Get style	$(“.one”).css(“color”)
Set style	$(“.one”).css(“color”, "red") $(".one").css({"opacity":"0.5","background-color":"blue" })
Height()	$(" .one").height(),Settings: $(".one").height("20px")
Width()	$(“.one”).width(), Settings: $(“.one”).width(“200px”)
Offset()	Get the relative offset of the element in the current window, including top and left
Position()	Get the element relative to the nearest position style attribute set to relative or The relative offset of the grandparent node of absolute. The object it returns also includes two attributes, namely top and left
ScrollTop()	Get and Set the distance between the element's scroll bar and the top
ScrollLeft()	Gets and sets the distance between the scroll bar of the element and the left side

事件和动画

事件

（1）       绑定事件

bind(type[,data],fn);

参数：type：事件类型，也可以自定义名称

      data:作为event.data属性值传递给事件对象的额外数据对象

      fn：用来绑定的处理函数

绑定多个事件类型

Ex：$(“p”).bind(“mouseover mouseout”,function(){
$(this).toggleClass(“over”);
})

（2）       合成事件

Hover(enter,leave);

用于模拟光标悬停事件。当光标移动到元素上时，会触发指定的第一个函数（enter）；当光标移除这个元素时，会触发指定的第二个函数（leave）

toggle(fn1,fn2,….fnN);

用户模拟鼠标连续单击事件。第一次单击元素，触发指定的第一个函数；当在次单击同一个元素时，则触发指定的第二个函数（fn2）；如果有更多的函数，则依次触发，知道最后一个。

（3）       冒泡事件

假设网页上有2个元素，其中一个元素嵌套在另一个元素里，并且都被绑定了click事件，同时body元素也绑定了click事件，当点击最里面元素的事件时，同时其它事件也会触发。从内向外

停止事件冒泡的方法：

stopPropagation()
Ex:$(‘span').bind(“click”,function(event){
Var txt=$().html()+”<p>内层span元素被单击</p>”;
$(‘#msg&#39;).html(txt);
Event.stopPropagation(); 停止事件冒泡
})

停止表单默认提交：event.preventDefault()==return false;

（4）       移除事件

Unbind([type][,data]);

Type:事件类型

Data：将要移除的函数

（5）       触发一次函数

One（type，[data],fn）;

事件触发后立即解除

动画

Show()	Slow: 600ms, normal: 400 milliseconds, fast: 200milliseconds
Hide()
Fadeln()	Reduces the opacity of an element for a specified period of time until the element completely disappears
fadeout()	The opposite of the above
slideUp()	Contrary to the following
slideDown()	The element will be displayed extending from top to bottom

Custom animationanimate

Grammar structure: animate(params, speed, callback);

The parameter description is as follows:

1. Params: A mapping containing style attributes and values, such as {property1: "value1", property2: "value2",…}

2． Speed:Speed ​​parameter, optional.

Callback: Function executed when the animation is completed, optional

Just add this for now Click it and improve it slowly in the future!

The above is the content of jQuery selectors, DOM operations, events, and animations. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!