# JQ 的 DOM 操作
如何对 HTML+CSS 进行增删改查，jQuery 的设计思路：赋值和取值合体
1 |
|
# JQ 操作 HTML 的属性和方法
-
attr 方法
attr==Attribute 属性。作用：给标签添加或删除指定的属性
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="box" >
这里是文字
</div>
JQ:需求：给div添加HTML属性
$("div").attr("属性名",["属性值"]);
//比如：
$("div").attr("id");//box,获取
//设置
$("div").attr("id","mydiv");//box改为mydiv
$("div").attr("title","提示文字");//
$("div").attr("id","");//只是把属性值清空TIPS：技巧
1
2
3
4
5
6
7
8
9
10
11
12
//批量一次性给div添加多个属性
$("div").attr({
id:"box",
class:"box2",
title:"提示文字"
});
//JS
odiv.id="box";
odiv.className="div2";
odvi.title="提示文字" -
removeAttr () 作用：
彻底删除标签的指定的属性名
1
2
3
4
5
6
7
<div id="box">
</div>
JQ:
$("div").removeAttr("id");//彻底删除，只要写一个参数就可以了 -
jQ.prop (“属性名”,[‘属性值’])
作用：同 attr，只是该方法适用于表单控件的属性值，而不是普通元素的属性值
面试：prop 和 attr 有什么区别，分别用于哪些元素中？？
-
removeProp()
用法含义同 removeAttr ()
-
jq 对象.html ()
js 对象.innerHTML
作用：获取或设置标签的内容（标签）
1
2
3
4
5
6
7
8
<div>
<p>这是原本的内容</p>
</div>
$("div").html();//获取div中的所有的内容，包含标签
$("div").html("<h1>新增的内容</h1>");//设置div中的所有的内容，包含标签
总结：不加参数就是获取，添加参数就是设置 -
text()
相当于是 JS 中的 innerText, 用来设置或获取标签的文本内容。
特点：会过滤标签，只留下纯文本。
用法同 html ();
-
val()
相当于是 JS 中的 控件对象.value;
1
2
3
4
5
6
<input value="123">
JQ:
$("input").val();//获取
$("input").val(456);//设置 -
$.trim()
作用：去掉字符串的首尾空格。该方法不是去选择元素然后做什么事情，该方法为工具方法，区别于前面的 1-7 的方法，叫对象方法。
1
2
3
4
5
6
7
var str=" agdasdg gasdg "
JQ:
$.trim(str);//'agdasdg gasdg'
//用于表单验证中
之前在JS中是没有这个现成的方法的JS 去首尾空的方法
1
2
3
4
5
6
7
function trim(str){
var reg=/^\s+|\s+$/g;
return str.replace(reg,'');
}
trim(" asdgasdg agasdg "); -
遇到的第一个 JQ 属性： .length
1
2
3
4
$("div").length;//10
//可以统计标签的使用数量
# CSS 操作
-
css()
相当于是 JS 中的
style.样式名，用来添加行内样式的1
2
3
4
5
6
7
8
9
10
11
121. 添加单个样式
$("div").css("样式名","样式值")
//注意：样式名即为css的写法，样式值也为css的写法
//又给我们减轻了负担
//js---> background-color 要改蛇形
//JQ--->不需要改
2. 添加多行样式
$("div").css({
"样式名1":"样式值1",
"样式名2":"样式值2"
})
-
addClass()
作用：给指定的标签添加 className，可以连续添加多个。
1
2
3
4
5
6
<div class="box"></div>
$("div").addClass("box2");//如果标签没有，则添加，如果有则新增一个
//反观JS：
odiv.className="box2";//有没有问题？？会替换老的class -
removeClass (“要删除的 class”)
上面的只能添加，如果要删除一个或多个，则需要使用删除的方法进行操作
-
toggleClass (“要切换的 class 名”);
-
hasClass (“有没有指定的 class”);//true,false
-
width()
1
2
3
4
5
6
7
8// 指的是样式宽，即style.width，可读写
<div style="width:100px">
</div>
//jQ
// 不管有没有写行内样式，都可以读出它的样式宽
$("div").width();//读
$("div").width(200);//设置它的宽度为200px -
innerWidth()；
可视宽，包括 padding，只读
-
outerWidth()
1
2
3
4
5
6
只读属性
a. 占位宽：包括padding+border
b. 如果参数为true，则还包括左右margin
outerWidth(true);//width+左右padding+左右border+左右margin
# DOM 操作实例
# 实例 1
1 |
|
# 实例 2
1 |
|
