首页 > 其他分享> 文章详细

常用jQuery函数总结

2021-11-24 22:04:28 阅读：166 来源： 互联网

标签：jQuery 总结调用函数例如元素设置 div1 属性

今天学习了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保留了下来

标签：jQuery,总结,调用,函数,例如,元素,设置,div1,属性
来源： https://www.cnblogs.com/zoufh/p/15600385.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9