2019-5-24 seo达人
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
DOM树
在访问页面时，需要与页面中的元素进行交互式的操作。在操作中，元素的访问是最频繁、最常用的，主要包括对元素属性、内容、值CSS的操作。
一、操作元素的属性
attr() prop() 获取或设置元素的属性值
两者区别：简单来说，对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
针对属性对象不同
prop( )是针对Dom元素属性，attr( )针对HTML元素属性，和attribute与property区别一样。
用于设置的属性值类型不同
attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。
prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型。
应用版本不同
attr()是jQuery 1.0版本就有的函数，prop()是jQuery 1.6版本新增的函数。毫无疑问，在1.6之前，你只能使用attr()函数；1.6及以后版本，你可以根据实际需要选择对应的函数。
其他不同
对于表单元素的checked、selected、disabled等属性，Attr()方法拿不到值，请使用prop()函数来设置或获取checked、selected、disabled等属性。对于其它能够用prop()实现的操作，也尽量使用prop()函数。如下图代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="button" id="btn1" value="按钮">
<input type="button" id="btn2" value="按钮">
<script>
//操作元素的属性
//attr() prop()获取或设置元素的属性值
$("#btn1").attr("value","按钮1");//将#btn1的value值改为按钮1
$("#btn1").prop("value","按钮2");//将#btn1的value值改为按钮2
console.log( $("input[type='button']").prop("value"));//获取#btn1的value值,输出为按钮2
console.log($("#btn2").attr("value"));//获取#btn1的value值,输出为按钮
//设置多个属性值
$("input[type='button']").prop({
width:"200px",
value:"hello"
});//同时设置宽度为100px,value值为hello
//根据输出结果，width值设置失败，value值设置成功
console.log($("input[type='button']").prop("width"));//0
console.log($("input[type='button']").attr("width"));//0
$("input[type='button']").attr({
width:"200px",
value:"HELLO"
})//同时设置宽度为200px,value值为HELLO
//根据输出结果可以看到，width和value均设置成功
console.log($("input[type='button']").prop("width"));//0
console.log($("input[type='button']").attr("width"));//200px
// var btn=$("input[type='button']");
// btn.attr("data-src","pink");
// console.log(btn.attr("data-src"));//pink
// console.log(btn.prop("data-src"));//undefined
var btn=$("input[type='button']");
btn.prop("data-src","pink");
console.log(btn.attr("data-src"));//undefined
console.log(btn.prop("data-src"));//pink
</script>
二、删除元素的属性
removeAttr( name ) ,其中name为元素属性的名称
removeProp( name ) ,其中name为元素属性的名称
三、元素内容的操作
在JQuery中，操作元素内容的方法包括html( )和text( )。前者与JavaScript中的innerHTML属性类似，即获取或设置元素的HTML内容；后者类似于JavaScript中的innerText属性，即获取或设置元素的文本内容。区别如下：
语法格式 参数说明 功能描述
html() 无参数 用于获取元素的HTML内容
html(val) val参数为元素的HTML内容 用于设置元素的HTML内容
text() 无参数 用于获取元素 的文本内容
text(val) val参数为元素的文本内容 用于设置元素的文本内容
<script>
//js中的写法 innerHTML innerText
var sd=document.getElementById("block");
sd.innerText="小猫吃鱼";
console.log(sd.innerHTML);//小猫吃鱼
console.log(sd.innerText);//小猫吃鱼
// //jquery html() text() 和js一致 获取或设置元素的html值或文本值
console.log($("#block").html());//小猫吃鱼
console.log($("#block").text());//小猫吃鱼
$("#block").text("小猫抓老鼠");//修改innerText内容
console.log($("#block").html());//小猫抓老鼠
console.log($("#block").text());//小猫抓老鼠
$("#block").html("小猫吃肉肉");//修改innerHTML内容
console.log($("#block").html());//小猫吃肉肉
console.log($("#block").text());//小猫吃肉肉
</script>
四、操作表单元素的值
val() 获取或设置表单元素的value值
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<input type="text" id="txt" value="请输入...">
<script>
console.log( $("#txt").val());// 获取#txt的value值 输出为：请输入...
$("#txt").val("12345");//修改#txt的value值为12345
console.log( $("#txt").val());//12345
</script>
</body>
</html>
五、元素样式的操作
1.直接设置元素样式值
在JQuery中，通过css()方法为某个指定的元素设置样式值，语法格式如下：
css(name,value) ,其中name为样式名称，value为样式的值
css()可以设置样式也可以获取样式
2.增加CSS类别
通过addClass()方法增加元素类别的名称，语法格式如下：
addClass(class) ,其中参数class为类名称，可以同时增加多个，用空格隔开即可，如addClass(class0 class1 class2 ...)
3.删除CSS类别
与addClass()方法相对应，removeClass()方法用于删除类别，语法格式与addClass()相同，如果不设定参数，则删除元素中的所有类名称
4.类别切换
通过toggleClass()方法切换不同的元素类别，语法格式如下:
toggleClass(class) ,其中参数class为类别名称，其功能是当元素中含有名称为class的CSS类别时，删除该类别，若没有，则增加该类别
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<button id="btn" class="btndata">按钮</button>
<script>
$("#btn").addClass("btn1");//追加一个类名称
$("#btn").addClass("btn2 btn3");//追加多个类名称
$("#btn").removeClass("btn2 btn1");//移除类名称
$("#btn").removeClass();//移除所有类名称
$("#btn").toggleClass("btn1");//类的切换 toggleClass() 如果有类名称则替换 如果没有就添加
</script>
</body>
</html>
六、jquery操作子父节点
children() 找父元素里面的子节点
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
</head>
<body>
<ul>
<li class="lilist">1</li>
<li class="lidata">2</li>
<span>6</span>
<li class="lilist">3</li>
<span>5</span>
<li class="lilist">4</li>
<span>7</span>
</ul>
<script>
console.log($("ul").children());//输出ul 下的所有子节点
console.log($("ul").children()[0]);//输出ul下索引为0的子节点
console.log($("ul>li").first());//输出ul里面第一个li
console.log($("ul>li").last());//输出ul里面最后一个li
console.log($("ul>li").eq(2));//eq() 根据索引找元素
console.log($("ul>li").first().siblings(".lilist"));//找同胞元素 输出和first()相同类名称的元素
console.log($("ul>li").eq(1).prev());//找当前元素的前一个元素
console.log($("ul>li").eq(2).prevAll("span"));//当前元素前面的所有指定元素
console.log($("ul>li").eq(2).prevAll());//当前元素前面的所有元素
console.log($("ul>li").eq(1).next());//找当前元素的下一个元素
console.log($("ul>li").eq(1).nextAll("li"));//当前元素后面的所有指定元素
console.log($("ul>li").eq(1).nextAll());//当前元素后面的所有元素
console.log($("ul>li").eq(0).is(".qq"));//is() 判断当前对象是谁 输出true or false 当前元素与类名称相符 输出true
</script>
</body>
</html>
七、JQuery中的尺寸问题
下面以高度为例进行说明
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.9.1.min.js"></script>
<style>
.ss{
width: 200px;
height: 200px;
margin: 10px 10px;
padding: 20px 20px;
}
</style>
</head>
<body>
<div class="ss"></div>
<script>
console.log($(".ss").height());//200 可视区域 不包括内外边距
console.log($(".ss").innerHeight());//240 包括内边距的距离
console.log($(".ss").outerHeight());//240 包括内边距的距离
</script>
</body>
</html>
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。