常用jQuery函数总结(Summary of common jQuery functions)

今天学习了jQuery,便想总结一下常用的jQuery函数,供大家参考,也供自己备用

1、$()获取指定对象

$()里面可以写标签名,也可以写id名,例如$(“#id名”) ,还可以写class名

2、.click()单击事件

点击此元素所触发的事件

3、.blur()离焦事件

焦点离开元素所触发的事件

4、.focus()聚焦事件

焦点进入元素所触发的事件

5、.css()获取或设置元素的css样式

函数可以有一个或两个参数,当参数为一个时,可以获取css指定属性的值,例如.css(“background-color”),可以获取指定元素的背景颜色。当参数有两个时,可以修改css指定属性的值,例如.css(“background-color”,”red”),可以将指定元素的背景颜色修改为红色

6、.html()返回或设置被选元素的内容,包括其中的标签

例如,则调用$(“#a1”).html()会返回 ,如果函数里写上参数,则可以给元素设置内容(不止是设置纯文本内容,标签也可以)。刚才的例子如果调用$(“#a1”).html(“abc”),则会将元素修改为

<a href="#" id="a1"><strong>这是文本内容</strong></a>
<strong>这是文本内容</strong>
<a href="#" id="a1">abc</a>

7、.text()返回或设置被选元素的纯文本内容

例如,则调用$(“#a1”).text()会返回 这是文本内容,如果函数里写上参数,则可以给元素设置内容(不止是设置纯文本内容,标签也可以),刚才的例子如果调用$(“#a1”).text(“abc”),则会将元素修改为

<a href="#" id="a1"><strong>这是文本内容</strong></a>
<a href="#" id="a1">abc</a>

8、.val()返回或设置被选元素的value值(貌似只能作用在表单元素上)

例如,调用$(“#input1”).val()则会返回 元素内容 ,如果函数里写上参数,则可以给元素设置内容,刚才的例子如果调用$(“#input1”).val(“abc”),则会将元素修改为

<input type="text" value="元素内容" id="input1"/>
<input type="text" value="abc" id="input1"/>

9、attr()设置或返回元素的属性值(推荐在获取或设置元素的非固有属性时使用)

例如,则调用$(“#div1”).attr(“name”)会返回name的值aaa,如果调用$(“#div1”).attr(“name”,”bbb”)则会将name的值设置为bbb

<div id="div1" name="aaa">div1</div>

10、.removeAttr()删除指定元素的属性

例如,则调用$(“#div1”).removeAttr(“name”)会删除name属性

<div id="div1" name="aaa">div1</div>

11、prop()设置或返回元素的属性值(推荐在获取或设置元素的固有属性时使用)

例如 ,则调用$(“#b1”).prop(“type”)会返回type的值button,如果调用$(“#b1”).attr(“type”,”radio”)则会将type的值设置为radio

<input type="button" value="点我" id="b1" />

12、.removeProp()删除指定元素的属性

例如 ,则调用$(“#b1”).removeProp(“value”)会删除value属性

<input type="button" value="点我" id="b1" />

13、.addClass()为元素添加类选择器

例如,则调用$(“#div1”).addClass(“div4”)可以将div的class设置为.div4

<div id="div1" name="aaa">div1</div>

14、.removeClass()删除元素的类选择器

例如,则调用$(“#div1”).removeClass(“div4”)可以删除div的名叫div4的class

<div id="div1" name="aaa" class="div4">div1</div>

15、.append()将某个元素添加到指定元素的里面,并且排在最后

例如

    <ul id="city">
        <li id="bj" name="beijing">北京</li>
        <li id="tj" name="tianjin">天津</li>
        <li id="cq" name="chongqing">重庆</li>
    </ul>

    <ul id="love">
        <li id="fk" name="fankong">反恐</li>
        <li id="xj" name="xingji">星际</li>
    </ul>

$(“#city”).append($(“#fk”))会将反恐放置到city的后面

16、.prepend()将某个元素添加到指定元素的里面,并且排在最前面

例如刚才那个例子 $(“#city”).prepend($(“#fk”)) 将反恐放置到city的最前面

17、.after()将某个元素添加到指定元素之后,他们是同级兄弟关系

例如刚才那个例子 $(“#tj”).after($(“#fk”)) 将反恐插入到天津后面

18、.before()将某个元素添加到指定元素之前,他们是同级兄弟关系

例如刚才那个例子 $(“#tj”).before($(“#fk”)) 将反恐插入到天津前面

19、.remove()将某个元素删除

例如刚才那个例子 $(“#fk”).remove(),则可以将这个元素删除

20、.empty()将后代的所有元素清空,但是保留当前对象及其属性节点

例如刚才那个例子 $(“#city”).empty(),则可以将其后代的所有li都清空,但是其自身ul保留了下来

————————

After learning jQuery today, I want to summarize the commonly used jQuery functions for your reference and for your own use

1. $() get the specified object

You can write a signature or an ID name in $(). For example, $(“#id name”) or a class name

2. . click() click event

Event triggered by clicking this element

3. . blur() defocus event

Event triggered when the focus leaves the element

4. . focus() focus event

The event triggered by the focus entry element

5. . css() gets or sets the CSS style of the element

The function can have one or two parameters. When the parameter is one, you can get the value of the attribute specified by CSS, for example. CSS (“background color”), you can get the background color of the specified element. When there are two parameters, you can modify the value of the CSS specified attribute, for example. CSS (“background color”, “red”), you can modify the background color of the specified element to red

6. . HTML () returns or sets the content of the selected element, including its label

For example, calling $(“#a1”). HTML () will return < strong > < / strong >. If the parameter is written in the function, you can set the content of the element (not only the plain text content, but also the label). In the previous example, if $(“#a1”). HTML (“ABC”) is called, the element will be modified to < strong > < / strong >

<a href="#" id="a1"><strong>这是文本内容</strong></a>
<strong>这是文本内容</strong>
<a href="#" id="a1">abc</a>

7. . text() returns or sets the plain text content of the selected element

For example, calling $(“#a1”). Text() will return < strong > this is the text content < / strong >. If the parameter is written in the function, the content can be set for the element (not only the plain text content, but also the label). In the example just now, if calling $(“#a1”). Text (“ABC”), the element will be modified to < strong > < / strong >

<a href="#" id="a1"><strong>这是文本内容</strong></a>
<a href="#" id="a1">abc</a>

8. . val() returns or sets the value value of the selected element (it seems that it can only act on form elements)

For example, calling $(“#input1”). Val() will return < strong > element content < / strong >. If parameters are written in the function, you can set the content of the element. In the example just now, if you call $(“#input1”). Val (“ABC”), the element will be modified to < strong > < / strong >

<input type="text" value="元素内容" id="input1"/>
<input type="text" value="abc" id="input1"/>

9. Attr() sets or returns the attribute value of an element (recommended when getting or setting non intrinsic attributes of an element)

For example, calling $(“#div1”). Attr (“name”) will < strong > return the value of name AAA < / strong >, and calling $(“#div1”). Attr (“name”, “BBB”) will < strong > set the value of name to BBB < / strong >

<div id="div1" name="aaa">div1</div>

10. . removeattr() deletes the attribute of the specified element

For example, calling $(“#div1”). Removeattr (“name”) deletes the name attribute

<div id="div1" name="aaa">div1</div>

11. Prop() sets or returns the attribute value of an element (recommended when getting or setting the inherent attribute of an element)

For example, calling $(“#b1”). Prop (“type”) will < strong > return the value of type button < / strong >, and calling $(“#b1”). Attr (“type”, “radio”) will < strong > set the value of type to radio < / strong >

<input type="button" value="点我" id="b1" />

12. . removeprop() deletes the attribute of the specified element

For example, calling $(“#b1”). Removeprop (“value”) deletes the value attribute

<input type="button" value="点我" id="b1" />

13. . addclass() adds a class selector for the element

For example, call $(“#div1”). Addclass (“div4”) to set the class of div to. Div4

<div id="div1" name="aaa">div1</div>

14. . removeclass() deletes the class selector of the element

For example, call $(“#div1”). Removeclass (“div4”) to delete div’s class named div4

<div id="div1" name="aaa" class="div4">div1</div>

15. . append() adds an element to the specified element and ranks last

for example

    <ul id="city">
        <li id="bj" name="beijing">北京</li>
        <li id="tj" name="tianjin">天津</li>
        <li id="cq" name="chongqing">重庆</li>
    </ul>

    <ul id="love">
        <li id="fk" name="fankong">反恐</li>
        <li id="xj" name="xingji">星际</li>
    </ul>

$(“#city”). Append ($(“#fk”)) will put counter-terrorism after city

16. . prepend() adds an element to the specified element and ranks first

For example, $(“#city”). Prepend ($(“#fk”)) places counter-terrorism at the front of the city

17. After () adds an element to the specified element, they are siblings

For example, $(“#tj”). After ($(“#fk”)) inserts anti-terrorism into Tianjin

18. . before () adds an element to the specified element, they are siblings

For example, $(“#tj”). Before ($(“#fk”)) inserts counter-terrorism in front of Tianjin

19. . remove() deletes an element

For example, in the example $(“#fk”). Remove(), you can delete this element

20. . empty() empties all elements of descendants, but retains the current object and its attribute nodes

For example, in the example $(“#city”). Empty(), you can clear all li of its descendants, but its own UL remains