Web前端最新jQuery学习之旅 Item3 属性操作与样式操作_jq 。item，前端面试题大厂

2401_84447297

于 2024-05-17 09:05:20 发布

阅读量366

点赞数 4

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84447297/article/details/138992103

版权

程序员专栏收录该内容

149 篇文章 0 订阅

订阅专栏

最后

资料过多，篇幅有限

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。

$(“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>

获取内容：
- html() 获取 : hello worldmilk
- text() 获取 : hello worldmilk
设置内容
- 内容1：百度

html(内容):  <div>百度</div>
    text(内容):  <div>百度</div>

内容2：http://www.baidu.com’>百度

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>


### 最后

![前15.PNG](https://img-blog.csdnimg.cn/img_convert/ad7b3ca2ab1da49fdb43210b6b2eb16e.webp?x-oss-process=image/format,png)

![前16.PNG](https://img-blog.csdnimg.cn/img_convert/44c74a87c1c61e985434caf2b5f907cb.webp?x-oss-process=image/format,png)

>由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容
>
>**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**



is</span> is <a>computer</a>


### 最后

[外链图片转存中...(img-PLerZmXB-1715907897514)]

[外链图片转存中...(img-twPzyQge-1715907897514)]

>由于文档内容过多，为了避免影响到大家的阅读体验，在此只以截图展示部分内容
>
>**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

2401_84447297

关注

4
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Web前端最新jQuery学习之旅 Item3 属性操作与样式操作_jq 。item，前端面试题大厂

资料过多，篇幅有限开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】自古成功在尝试。不尝试永远都不会成功。勇敢的尝试是成功的一半。//apple//text2、 attr(名称，值) 设置元素节点的属性信息3、 attr(json对象) 同时可以修改多个属性信息4、 attr(key,function(){}) 通过函数返回值，设置属性信息//相关程序});5、 removeAttr(name) 删除指定的属性（type属性特殊一般不允许删除）
复制链接

扫一扫