一、基本操作
1.html() - 类似于原生DOM的innerHTML属性
*获取 - html();
*设置 - html("html代码");
2.val() - 类似于原生DOM的value属性
*获取 - val();
*设置 - val(value);
3.text() - 类似于原生DOM的textContent属性
*获取 - text();
*设置 - text("文本内容");
4.attr() - 获取或设置指定元素的属性
*获取 - attr(attrName) - 类似于getAttribute()
*设置 - attr(attrName,attrValue) - 类似于setAttribute()
*removeAttr(attrName) - 类似于removeAttribute()
示例：
1 <ul id="city"> 2 <li id="bj" name="beijing">北京</li> 3 <li id="tj" name="tianjin">天津</li> 4 <li id="nj" name="nanjing">南京</li> 5 </ul> 6 <input type="text" id="user" value="请输入你的用户名">
1 //html()
2 $("#bj").html("纽约");//则北京被替换为纽约
3 $("#city").html("<li>中国</li>");//ul下的所有元素被删除替换
4
5 //val()
6 console.log($("#user").val());//获得value值
7 $("#user").val("请输入密码");//设置value值
8
9 //text()
10 console.log($("#bj").text());//获得节点中的文本
11 $("#bj").text("长春");//修改节点中的文本
12 console.log($("#city").text());//只获得标签中的文本节点内容
13 $("#city").text("你好");//等价于$("#city").html("你好");
14
15 //attr()
16 console.log($("#bj").attr("name"));//beijing
17 $("#bj").attr("name","bj");//修改name属性为bj
18 $("#tj").attr({name:"tj","data-i":2});//批量修改|设置属性 (data-i 不带引号SyntaxError: Unexpected token -)
19 $("#tj").removeAttr("name");//删除name属性
二、样式操作
1.attr("class",classValue) - 设置样式|属性
2.addClass("className") - 追加样式
3.removeClass() - 删除样式
*不传参 - 删除所有样式
*传参 - 删除指定样式
4.toggleClass() - 切换样式
*只接受一个参数
*在没有样式与指定样式之间切换
5.hasClass() - 判断样式
*判断指定元素是否包含指定样式
6.css() - 操作样式
*设置
*css(name,value)
*css(options)
*options - 选项
{
name:value,
name2:value2,
...
}
*获取 - css(name);
示例：
1 <style>
2 div {
3 width : 100px;
4 height : 100px;
5 border : solid 1px black;
6 background : pink;
7 float : left;
8 margin-right : 10px;
9 }
10 .one {
11 width : 50px;
12 height : 50px;
13 background : yellow;
14 }
15 .two {
16 width : 150px;
17 height : 150px;
18 background : green;
19 }
20 </style>
21 </head>
22
23 <body>
24 <button id="btn1">attr()</button>
25 <button id="btn2">addClass()</button>
26 <button id="btn3">removeClass()</button>
27 <button id="btn4">toggleClass()</button>
28 <button id="btn5">hasClass()</button>
29 <button id="btn6">css()</button>
30 <br></br>
31 <div id="d1"></div>
32 <div id="d2"></div>
1 //attr()
2 $("#d1").attr("class","one");//设置class属性
3
4 //addClass()
5 $("#d1").addClass("two");//追加|叠加
6
7 //removeClass()
8 $("#d1").removeClass();//删除所有 相当于 .class=""
9 $("#d1").removeClass("two");//有two则删除
10
11 //toggleClass()
12 $("#d1").toggleClass("one");//有则删除，无则添加
13
14 //hasClass()
15 console.log($("#d1").hasClass("one"));//返回布尔值
16
17 //css()
18 $("#d2").css({
19 "background" : "red",//如果设置为空则为删除当前属性
20 "width" : 50,
21 "height" : 50
22 });
23 console.log($("#d2").css("float"));//获取当前节点的属性值(所有)