JQuery中的DOM操作（1）

最新推荐文章于 2024-02-28 16:51:01 发布

木易一

最新推荐文章于 2024-02-28 16:51:01 发布

阅读量1.2k

点赞数 1

分类专栏： JQuery

本文链接：https://blog.csdn.net/weixin_43684713/article/details/90411306

版权

JQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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>

木易一

关注

1
点赞
踩
20

收藏

觉得还不错? 一键收藏
2
评论
JQuery中的DOM操作（1）

DOM树在访问页面时，需要与页面中的元素进行交互式的操作。在操作中，元素的访问是最频繁、最常用的，主要包括对元素属性、内容、值CSS的操作。一、操作元素的属性attr() prop() 获取或设置元素的属性值两者区别：简单来说，对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。对于H...
复制链接

扫一扫