02. JQuery 对HTML/CSS的操作

获取/设置 DOM 元素内容

JQuery提供了3个方法用于获取，设置DOM的内容：

text()	设置或返回 所选元素的文本内容
html()	设置或返回 所选元素的内容（包括 HTML 标记）
val()	设置或返回 表单字段的 value 属性值

以下是使用示例：

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 元素属性的方法：

attr()

用于获取/设置 属性值

以下使用示例：

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 元素：

append()	在被选元素 内部的结尾插入指定内容
prepend()	在被选元素 内部的开头插入指定内容
after()	在被选元素 之后插入内容
before()	在被选元素 之前插入内容

示例，在<p>标签之后添加一个<button>元素，使用 after() 方法，其他方法使用方式类似；

1

$("p").after("<buton>A </button>")

删除 DOM 元素

Jquery提供了2个方法用于删除 DOM 元素：

remove()	删除被选元素（及其子元素）
empty()	从被选元素中删除子元素

以下示例：

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的操作，提供了以下的方法：

addClass()	向被选元素添加一个或多个类
removeClass()	从被选元素删除一个或多个类
toggleClass()	对被选元素进行 添加/删除类 的切换操作，使用该方法，元素会在原来的css类和参数指定的css类之间进行切换
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");