jQuery学习之旅 Item3 属性操作与样式操作

2022-01-24 00:26:12

本节将Dom元素的操作:属性操作、样式操作、设置和获取HTML,文本和值、Css-Dom操作。

1、属性操作

<input  type=”text”  name=”username”  value=”jack”  class=”apple”>

方法：attr() attribute属性

使用：

  • 1、 attr(名称); 获得元素节点对应的属性信息
$(“input”).attr(‘class’);    //apple

$(“input”).attr(‘type’);     //text
  • 2、 attr(名称，值) 设置元素节点的属性信息
$(“input”).attr(‘name’,’useremail’);

$(“input”).attr(‘value’,’tom’);
  • 3、 attr(json对象) 同时可以修改多个属性信息
var jn = {name:’userqq’, value:’123987’, class:’pear’};

$(“input”).attr(jn);
  • 4、 attr(key,function(){}) 通过函数返回值，设置属性信息
$("#usernm").attr('value',function(){

        //相关程序

        return "linken";

});
  • 5、 removeAttr(name) 删除指定的属性（type属性特殊一般不允许删除）
$("#usernm").removeAttr('class');

$("#usernm").removeAttr('value');

具体实例：

<script>

    function f1(){

        //获得元素节点对应的属性信息

        console.log($("#usernm").attr('type'));  //text

        console.log($("#usernm").attr('name'));  //username

        console.log($("#usernm").attr('class'));  //apple

        //修改元素的属性信息attr(name,value)

        $("#usernm").attr('name','useremail');

        $("#usernm").attr('id','user');//本身可以修改，但是后边的选择器就失效了

        $("#usernm").attr('value','tom');

        $("#usernm").attr('class','orange');

        //console.log($("#usernm").attr('value'));

        //同时修改多个属性信息

        var jn = {name:'userqq',value:'987345',class:'pear'};

        $("#usernm").attr(jn);

        //通过函数返回值设置属性信息

        $("#usernm").attr('value',function(){

            //相关程序

            return "linken";

        });

        //修改type属性(低版本火狐允许修改type属性)

        //$("#usernm").attr('type','radio');

        //删除指定属性

        $("#usernm").removeAttr('class');

        $("#usernm").removeAttr('value');

        $("#usernm").removeAttr('name');

        //$("#usernm").removeAttr('type');

        $("#usernm").removeAttr('id');

    }

</script>

<body>

    <h2>属性操作</h2>

    <input id="usernm" type="text" name="username" value="jack" class="apple" />

    <input type="button" value="触发" onclick="f1()">

</body>

2、class类别快捷操作方法

可以用上面的方法来修改class属性：

<div  class=”apple”>

$(“div”).attr(“class”);   //apple  获得属性信息

$(“div”).attr(“class”,’pear’)     //修改属性信息

另外也有单独操作class 属性的方法：

  • 1、 addClass() ——给元素设置class属性信息
  • 2、 removeClass() ——把元素对应的class指定属性值给删除 ,
  • 3、 toggleClass(class) ——开关class设置属性，有就给删除，没有就给添加上
  • 4、hasClass()——检查匹配的元素是否含有某个特定的类

和attr 和removeAttr(class)有区别，这里只能全部修改，而addClass 和removeClass可以操作多个class中的一个。

<sccript>

    function f1(){

        //$("div").attr('class','apple');

        //添加class属性

        //addClass()

        $("div").addClass('pear');

    }

    function f2(){

        //删除class属性

        $("div").removeClass("banana");  //删除指定的class属性值

        //$("div").removeAttr("class");

        //$("div").attr("class","banana");

    }

    function f3(){

        //开关效果

        $("div").toggleClass('apple');

    }

</script>

<body>

    <h2>class快捷操作方法</h2>

    <div class="banana">this is computer</div>

    <input type="button" value="添加class" onclick="f1()">

    <input type="button" value="删除class" onclick="f2()">

    <input type="button" value="开关class" onclick="f3()">

</body>

PS: addClass()和attr()方法设置样式的不同，attr方法把元素的属性名对应的属性值设为方法中的参数值，addClass()则把属性值

添加到属性名对应的属性值中。例：已有元素<p class='class1'>元素样式</p>,使用attr()和addClass()分别添加新样式。

$("p").attr("class","another").结果是<p class='another'>元素样式</p>

$("p").addClass("class","another")结果是<p class='class1 another'>元素样式</p>

3、html()获取或设置一个元素包含的内容

<div id=”one”>hello</div>

document.getElementById(‘one’).innerHTML;  //可以获得元素标签包含的内容：hello

innerHTML不是w3c标准的内容，在有的地方改属性不起作用 例如操作 xml

  • 1、 html() 获取元素包含的内容
  • 2、 html(参数) 设置元素包含的内容

    特点：

    ① 可以设置元素包含的文本内容

    ② 也可以设置元素包含的html标签内容
<script>

    function f1(){

        console.log($("div").html()); //<span>this</span> is <a>computer</a>

    }

    function f2(){

        //可以同时设置元素包含的“文本”和“html”标签内容

        $("div").html("<a href='http://www.baidu.com'>hello world</a>");

    }

</script>

<body>

    <h2>html快捷操作方法</h2>

    <div class="banana"><span>this</span> is <a>computer</a></div>

    <input type="button" value="获得元素包含的内容" onclick="f1()">

    <input type="button" value="设置元素包含的内容" onclick="f2()">

</body>

PS：该方法可以用于XHTML文档，不能用于XML文档。

4、text()方法获取或设置元素包含的内容

text ——-针对文本发生作用

<div><a>hello world</a>milk</div>

  1. 获取内容：

    • html() 获取 : hello worldmilk
    • text() 获取 : hello worldmilk

  2. 设置内容

    • 内容1：百度
html(内容):  <div>百度</div>

    text(内容):  <div>百度</div>    
html(内容):  <div><a href=’http://www.baidu.com’>百度</a></div>

text(内容):  <div>&lt;a href=’http://www.baidu.com’&gt;百度&lt;/a&gt;</div>

              // text(参数)作用参数html标签会被转化为符号实体

text和html方法区别

  • 获取内容：text:获取内容只关心文本内容，不理会html标签; html:获取内容html和文本内容都起作用

  • 设置内容：text:设置内容，html标签内容转化为符号实体内容；html: html标签和普通文本内容都可以设置

<script>

    function f1(){

        //文本和元素标签内容都可以获得<span>this</span> is <a>computer</a>

        //console.log($("div").html());

        //获取纯文本内容this is computer

        //console.log($("div").text());

        $("div").html($("div").html()+'abc');

    }

    function f2(){

        //可以同时设置元素包含的“文本”和“html”标签内容

        //$("div").html("<a href='http://www.baidu.com'>hello world</a>");

        //$("div").text("<span>百度</span>"); //&lt;span&gt;百度&lt;/span&gt;

    }

</script>

<body>

     <h2>text快捷操作方法</h2>

     <div class="banana"><span>this</span> is <a>computer</a></div>

     <input type="button" value="获得元素包含的内容" onclick="f1()">

     <input type="button" value="设置元素包含的内容" onclick="f2()">

</body>

　PS: 该方法对html和XML文档都适用。

5、操作value属性快捷方法val()

  1. val() 获得指定元素的value信息
  2. val(参数) 设置指定元素的value信息

    attr()

    form表单会经常操作value属性：密码框、下拉列表、复选框、单选按钮、文本域、隐藏域
function f1(){

    //textarea与普通input框一样可以使用value属性

    //$("#username").attr('value');

    //console.log($("#username").val());  //获得value属性信息

    console.log($("#introduce").val());   //获得textarea的value值

}

function f2(){

    //修改value属性信息

    //$("#username").val('tom');

    $("#introduce").val('very good');  //设置textarea的value值

}

<body>

    <h2>val快捷操作方法</h2>

    <input type="text" name="username" id="username" value="linken" />

    <!--密码框、下拉列表、复选框、单选按钮、文本域、隐藏域、普通按钮-->

    <textarea id="introduce">I am linken</textarea>

    <input type="button" value="获得" onclick="f1()">

    <input type="button" value="设置" onclick="f2()">

</body>

6、CSS-Dom操作css()操作样式属性信息

  1. css(name) 获取样式信息
  2. css(name,value) 设置样式属性信息
  3. css(json对象) 同时设置多个样式属性信息
<script>

    function f1(){

        //获取样式信息

        console.log($("div").css("width"));

        console.log($("div").css("background-color"));

    }

    function f2(){

        //$("div").css('width',"200px");

        //$("div").css('height',"100px");

        //$("div").css('background-color',"pink");

        //利用json对象同时设置多个样式信息

        var jn = {width:"300px",height:"200px;",fontSize:"30px","background-color":"lightgreen"};

        $("div").css(jn);

    }

</script>

<body>

    <h2>css快捷操作方法</h2>

    <div>this is computer</div>

    <input type="button" value="获得" onclick="f1()">

    <input type="button" value="设置" onclick="f2()">

</body>

另附：offset()、position()、scrollTop()和scrollLeft()

  • offset()方法——用于获取元素相对当前窗体的偏移量，其返回对象包括两个属性：top和left。方法如下：$(selector).offset() 
\\该示例用于获得元素p的偏移量。

var offset= $("p").offset();

var left=offset.left;

var top=offset.top;

PS: offset()只对可见元素有效。

  • position()方法——用于获取元素于最近的个position样式属性设置为relative或者absolute的祖交节点的相对偏移量。方法如下：$(selector).position(); 
\\该示例用于获得元素p的位置。

var postion = $("p").positon();

var left=positon.left;

var top=positon.top;
  • scrollTop()和scrollLeft()方法用于获取元素的滚动条距顶端的距离和距左侧的距离。方法如下:$(selector).scrollTop();$(selector).scrollLeft();例：
\\该示例用于获得元素的滚动条的位置。

var scrollTop=$("p").scrollTop();

var scrollLeft=$("p").scrollLeft();

也可以添加参数将元素滚动到指定的位置。例：

$("textarea").scrollTop(300);

$("textarea").scrollLeft(300);

版权声明：本文为小平果原创文章，转载请注明：http://blog.csdn.net/i10630226

上一篇：Windows Git+TortoiseGit简易使用教程


下一篇：002：IPC与system函数简介