获取/设置 DOM 元素内容
JQuery提供了3个方法用于获取,设置DOM的内容:
以下是使用示例:
1
<p>Are you OK</p>
2
<input type="text" value="Some for test">
1
//获取内容
2
var text = $("p").text(); //返回text = "Are you Ok"
3
var html = $("p").html(); //返回html = "<p>Are you OK</p>"
4
var value = $("input").val(); //范湖value = "Some for test"
5
6
//设置内容
7
$("p").text("Hello world");
8
$("p").html("<h2>Hello world</h2>");
9
$("input").val("Hello world");
获取/设置 DOM 元素属性
JQuery 提供了用于获取,修改 DOM 元素属性的方法:
以下使用示例:
1
<a href="http://iogame.assad.site">Site</a>
2
3
//获取元素属性
4
var href = $("a").attr("href"); //返回 href = "http://iogame.assad.site"
5
//设置元素属性
6
$("a").attr("href","https://www.baidu.com");
添加 DOM 元素
Jquery提供了4个方法用于添加 DOM 元素:
示例,在<p>标签之后添加一个<button>元素,使用 after() 方法,其他方法使用方式类似;
1
$("p").after("<buton>A </button>")
删除 DOM 元素
Jquery提供了2个方法用于删除 DOM 元素:
以下示例:
1
<ul>
2
<li>item1</li>
3
<li class="special">item2</li>
4
<li>item3</li>
5
</ul>
1
//删除<ul>元素及其所有子元素
2
$("ul").remove();
3
//清空<ul>元素下的所有元素
4
$("ul").empty();
5
//清空<ul>元素下所有符合过滤器的元素(在例子中删除<ul>下所有class="special"的子元素)
6
$("ul").empty(".special");
对CSS的操作
JQuery对于CSS的操作,提供了以下的方法:
以下示例:
1
//示例用css表
2
.style1{
3
.....
4
}
5
.style2{
6
.....
7
}
8
.style{
9
background-color:#ff0000;
10
color: #0000ff;
11
}
12
//示例用元素
13
<p class=".style">Are you ok ?</p>
1
//对元素添加css类
2
$("button").click(function(){
3
$("p").addClass("style1 style2") ;
4
});
5
//对元素删除css类
6
$("p").removeClass("style1 style2");
7
//对元素切换css类
8
$("p").toggleClass("style1");
9
10
//获取元素css
11
var color = $("p").css("color"); //color=" #0000ff"
12
//设置元素css
13
$("p").css("color","#00ff00");