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/">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) | 规定返回要设置的属性值的函数。
|
实例
<!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>
点击按钮 运行结果为
