JQuery中的DOM操作(1) - 蓝蓝设计_UI设计公司

JQuery中的DOM操作(1)

2019-5-24 释然 前端及开发文章及欣赏

如果您想订阅本博客内容,每天自动发到您的邮箱中,

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.thriveonsite.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务

标签: JQuery中的DOM操作(1)


Powered by sitemap
秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网 秒速赛车官网