jQuery 项目常用函数
Posted wjcbk
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery 项目常用函数相关的知识，希望对你有一定的参考价值。
jQuery html() 方法
定义和用法
html() 方法设置或返回被选元素的内容（innerHTML）。
当该方法用于返回内容时，则返回第一个匹配元素的内容。
当该方法用于设置内容时，则重写所有匹配元素的内容。
提示：如只需设置或返回被选元素的文本内容，请使用 text() 方法
语法
返回内容：
设置内容：
使用函数设置内容：
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").html("Hello <b>world!</b>"); }); }); </script> </head> <body> <button>修改所有P元素的内容</button> <p>这是一个段落。</p> <p>这是另一个段落。</p> </body> </html>
运行结果
点击以上按钮(修改所有p元素的内容)，结果为
更多可参考jquery官网 https://jquery.com/
jQuery prop() 方法
定义和用法
prop 函数为jquary中的一个获取属性值的函数，其语法为prop（key[,value]）,key为属性名。value为属性值
prop函数中假如只有key，则为取值
prop函数中假如有key和value则为属性赋值，详情参考官网
prop() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时，则返回第一个匹配元素的值。
当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。
注意：prop() 方法应该用于检索属性值，例如 DOM 属性（如 selectedIndex, tagName, nodeName, nodeType, ownerDocument, defaultChecked, 和 defaultSelected）。
提示：如需检索 HTML 属性，请使用 attr() 方法代替。
提示：如需移除属性，请使用 removeProp() 方法。
语法
返回属性的值：
设置属性和值：
使用函数设置属性和值：
设置多个属性和值：
| 参数 | 描述 |
|---|---|
| property | 规定属性的名称。 |
| value | 规定属性的值。 |
| function(index,currentvalue) | 规定返回要设置的属性值的函数。
|
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var $x = $("div"); $x.prop("color","FF0000"); $x.append("color 属性值为: " + $x.prop("color")); $x.removeProp("color"); $x.append("<br>现在 color 属性值为: " + $x.prop("color")); }); }); </script> </head> <body> <button>添加和删除属性</button> <br><br> <div></div> </body> </html>
点击按钮运行结果为
jQuery.data()方法
定义和用法
data函数为jquery中的一个数据绑定函数，其语法为data(key[,value]);,假如只有key表示取值，两个都有表示值的绑定
data函数为jquery中的一个数据存储函数,每个dom对象都有一个这样的函数。
data函数语法:data(key[,value]),key和value由自己指定
data函数只有key时表示取值，既有key,又有value表示存储值
$.data() 函数用于在指定的元素上存取数据，返回设置值。
提示： 1.这是一个底层方法，.data() 方法更方便使用。
2.通过 data() 函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将被移除。
3. 该方法目前并不提供在XML文档上跨平台设置，Internet Explorer不允许在XML文档中通过自定义属性附加数据。
语法
用法一
注意： 1.通过data()函数存取的数据都是临时数据，一旦页面刷新，之前存放的数据都将被移除。
2. undefined 是一个没有被识别数据值。调用 jQuery.data( el, "name", undefined ) 将返回对应的 "name" 数据，等价于 jQuery.data(el, "name" ) 。
我们可以在一个元素上设置不同的值，并获取这些值：
jQuery.data(document.body,\'foo\',52); jQuery.data(document.body,\'bar\',\'test\');
用法二
我们可以在一个元素上设置不同的值，并获取这些值：
alert(jQuery.data( document.body,\'foo\')); alert(jQuery.data( document.body ));
| 参数 | 描述 |
|---|---|
| element | Element类型 要存储数据的DOM对象 |
| key | 可选。String类型 指定的键名字符串。 |
| value | 可选。 Object类型 需要存储的任意类型的数据。 |
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> <style> div { color:blue; } span { color:red; } </style> </head> <body> <div> 存储的值为 <span></span> 和 <span></span> </div> <script> $(function () { var div = $( "div" )[ 0 ]; jQuery.data( div, "test", { first: 16, last: "pizza!" }); $( "span:first" ).text( jQuery.data( div, "test" ).first ); $( "span:last" ).text( jQuery.data( div, "test" ).last ); }) </script> </body> </html>
运行结果为
jQuery empty() 方法
定义和用法
empty() 方法移除被选元素的所有子节点和内容。
注意：该方法不会移除元素本身，或它的属性。
提示：如需移除元素，但保留数据和事件，请使用 detach() 方法。
提示：如需移除元素及它的数据和事件，请使用 remove() 方法。
语法
实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ $("div").empty(); }); }); </script> </head> <body> <div style="height:100px;background-color:yellow"> 这是一些文本。 <p>这是div块中的一个段落。</p> </div> <p>这是div块外部的一个段落。</p> <button>移除div块中的内容</button> </body> </html>
点击按钮 运行结果为
以上是关于jQuery 项目常用函数的主要内容，如果未能解决你的问题，请参考以下文章