jQuery 项目常用函数

jQuery html() 方法

定义和用法

html() 方法设置或返回被选元素的内容（innerHTML）。

当该方法用于返回内容时，则返回第一个匹配元素的内容。

当该方法用于设置内容时，则重写所有匹配元素的内容。

提示：如只需设置或返回被选元素的文本内容，请使用 text() 方法

语法

返回内容：

$(selector).html()

设置内容：

$(selector).html(content)

使用函数设置内容：

$(selector).html(function(index,currentcontent))

实例

<!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() 方法。

语法

返回属性的值：

$(selector).prop(property)

设置属性和值：

$(selector).prop(property,value)

使用函数设置属性和值：

$(selector).prop(property,function(index,currentvalue))

设置多个属性和值：

$(selector).prop({property:value, property:value,...})

参数	描述
property	规定属性的名称。
value	规定属性的值。
function(index,currentvalue)	规定返回要设置的属性值的函数。 index - 检索集合中元素的 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文档中通过自定义属性附加数据。

语法

用法一

$.data( element, key, value )

注意： 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');

用法二

$.data( element, key )

我们可以在一个元素上设置不同的值，并获取这些值：

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() 方法。

语法

$(selector).empty()

实例

<!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>

点击按钮运行结果为