常用jQuery函数总结

2024-02-06 14:01:40

今天学习了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()返回或设置被选元素的内容，包括其中的标签

例如<a href="#" id="a1"><strong>这是文本内容</strong></a>，则调用$("#a1").html()会返回 <strong>这是文本内容</strong>，如果函数里写上参数，则可以给元素设置内容(不止是设置纯文本内容，标签也可以)。刚才的例子如果调用$("#a1").html("abc")，则会将元素修改为<a href="#" id="a1">abc</a>

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

例如<a href="#" id="a1"><strong>这是文本内容</strong></a>，则调用$("#a1").text()会返回 这是文本内容，如果函数里写上参数，则可以给元素设置内容(不止是设置纯文本内容，标签也可以)，刚才的例子如果调用$("#a1").text("abc")，则会将元素修改为<a href="#" id="a1">abc</a>

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

例如<input type="text" value="元素内容" id="input1"/>，调用$("#input1").val()则会返回 元素内容 ，如果函数里写上参数，则可以给元素设置内容，刚才的例子如果调用$("#input1").val("abc")，则会将元素修改为<input type="text" value="abc" id="input1"/>

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

例如<div id="div1" name="aaa">div1</div>，则调用$("#div1").attr("name")会返回name的值aaa，如果调用$("#div1").attr("name","bbb")则会将name的值设置为bbb

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

例如<div id="div1" name="aaa">div1</div>，则调用$("#div1").removeAttr("name")会删除name属性

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

例如<input type="button" value="点我" id="b1" /> ，则调用$("#b1").prop("type")会返回type的值button，如果调用$("#b1").attr("type","radio")则会将type的值设置为radio

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

例如<input type="button" value="点我" id="b1" /> ，则调用$("#b1").removeProp("value")会删除value属性

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

例如<div id="div1" name="aaa">div1</div>，则调用$("#div1").addClass("div4")可以将div的class设置为.div4

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

例如<div id="div1" name="aaa" class="div4">div1</div>，则调用$("#div1").removeClass("div4")可以删除div的名叫div4的class

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保留了下来

码农公寓