jQuery系列（四）：jQuery的属性操作

jquery的属性操作模块分为四个部分：html属性操作，dom属性操作，类样式操作和值操作

html属性操作：是对html文档中的属性进行读取，设置和移除操作。比如attr()、removeAttr()
DOM属性操作：对DOM元素的属性进行读取，设置和移除操作。比如prop()、removeProp()
类样式操作：是指对DOM属性className进行添加，移除操作。比如addClass()、removeClass()、toggleClass()
值操作：是对DOM属性value进行读取和设置操作。比如html()、text()、val()

1、attr()

设置属性值或者返回被选元素的属性值

//获取值：attr()设置一个属性值的时候 只是获取值

let id = $('div').attr('id');

console.log(id)

let cla = $('div').attr('class');

console.log(cla)

//设置值

//1.设置一个值 设置div的class为box

$('div').attr('class','box');

//2.设置多个值，参数为对象，键值对存储

$('div').attr({name:'hahaha',class:'happy'});

2、removeAttr()

移除属性

//删除单个属性

$('#box').removeAttr('name');

$('#box').removeAttr('class');

//删除多个属性

$('#box').removeAttr('name class');

3、prop()

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

语法：

返回属性的值：

$(selector).prop(property)

设置属性和值：

$(selector).prop(property,value)

设置多个属性和值：

$(selector).prop({property:value, property:value,...})

4、关于attr()和prop()的区别

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

</head>

<body>

男<input type="radio" id='test' name="sex"  checked/>

女<input type="radio" id='test2' name="sex" />

<button>提交</button>

<script type="text/javascript" src="../jquery-3.3.1.min.js"></script>

<script type="text/javascript">

    $(function(){

        //获取第一个input

        let el = $('input').first();

        //undefined  因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefined

        console.log(el.attr('style'));

        // 输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象

        console.log(el.prop('style'));

        console.log(document.getElementById('test').style);

        $('button').click(function(){

            alert(el.prop("checked") ? "男":"女");

        })

    })

</script>

</body>

</html>

5、什么时候使用attr()，什么时候使用prop()

(a):只有true，false两个属性使用prop();

(b):其他使用attr()

6、addClass（添加多个类名）

为每个匹配的元素添加指定的类名。

$('div').addClass("box");//追加一个类名到原有的类名

匹配多个类名。

$('div').addClass("box box2");//追加多个类名

7、removeClass

从所有匹配的元素中删除全部或者指定的类。

移除指定的类（一个或多个）

$('div').removeClass('box')；

移除全部

$('div').removeClass();

可以通过添加删除类名，来实现元素的显示隐藏。

示例代码：

let tag = false;

$('span').click(function () {

    if (tag) {

        $('span').removeClass('active');

        tag = false;

    } else {

        $('span').addClass('active');

        tag = true;

    }

});

8、一个实例

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style type="text/css">

        .active{

            color: red;

        }

    </style>

</head>

<body>

     <ul>

         <li class="item">张三</li>

         <li class="item">李四</li>

         <li class="item">王五</li>

     </ul>

     <script type="text/javascript" src="jquery-3.3.1.js"></script>

     <script type="text/javascript">

         $(function(){

             $('ul li').click(function(){

                 // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象

                 $(this).addClass('active').siblings('li').removeClass('active');

             })

         })

     </script>

</body>

</html>

9、toggleClass

如果存在（不存在）就删除（添加）一个类。

语法：toggleClass('box')

$('span').click(function(){

    //动态的切换class类名为active

    $(this).toggleClass('active')

})

10、html

获取值：

语法;

html() 是获取选中标签元素中所有的内容

$('#box').html();

设置值：设置该元素的所有内容会替换掉标签中原来的内容

$('#box').html('<a href="https://www.baidu.com">百度一下</a>');

11、text

获取值：

text() 获取匹配元素包含的文本内容

语法：

$('#box').text();

设置值：
设置该所有的文本内容

$('#box').text('<a href="https://www.baidu.com">百度一下</a>');

注意：值为标签的时候不会被渲染为标签元素只会被当做值渲染到浏览器中

12、val

获取值：

val()用于表单控件中获取值，比如input textarea select等等

设置值：

$('input').val('设置了表单控件中的值')；

jQuery系列（四）：jQuery的属性操作的更多相关文章

jQuery 第四章实例方法 DOM操作之data方法
jquery 里面的 data 方法比较重要, 所以成一个模块写: 首先, 得知道 data() 干嘛用的, 看淘宝上有自定义的属性, 为data - 什么什么, 这是为了dom 跟数据有 ...
【Jquery系列】之DOM属性
1 概述本章将结合JQuery官方API,对Jquery属性进行分析与讲解.主要讲.addClass(),.attr(),,hasClass(),,html(),.prop(),.removeA ...
jQuery学习之旅 Item3 属性操作与样式操作
本节将Dom元素的操作:属性操作.样式操作.设置和获取HTML,文本和值.Css-Dom操作. 1.属性操作 <input type="text" name="us ...
jQuery（八）：属性操作
一.获取或设置元素的属性值 attr()获取或设置匹配元素的属性值,语法如下: 获取元素属性值示例: <!DOCTYPE html> <html lang="en" ...
jQuery-1.9.1源码分析系列（八）属性操作
jQuery的属性操作主要包括 jQuery.fn.val jQuery.fn.attr jQuery.fn.removeAttr jQuery.fn.prop jQuery.fn.removePro ...
jQuery 第四章实例方法 DOM操作_基于jQuery对象增删改查相关方法
.next() .prev() .nextAll() .prevAll() .prevUntil() .nextUntli() .siblings() .children() .parent() .p ...
深入理解javascript对象系列第二篇——属性操作
× 目录 [1]查询 [2]设置 [3]删除[4]继承前面的话对于对象来说,属性操作是绕不开的话题.类似于“增删改查”的基本操作,属性操作分为属性查询.属性设置.属性删除,还包括属性继承.本文是对 ...
[jQuery学习系列四 ]4-Jquery学习四-事件操作
前言:今天看知乎偶然看到中国有哪些类似于TED的节目, 回答中的一些推荐我给记录下来了, 顺便也在这里贴一下: 一席云集听道推酷青年中国说 SELF格致论道参考:http://www.365 ...
jQuery属性操作（四）
通过阅读jQuery为属性操作封装的基本方法和为处理兼容性问题提供的hooks,发现jQuery在属性操作方面并没有做过多的设计,只是处理一下兼容性问题,然后调用基础的DOM操作方法.以下是对JQue ...

随机推荐

【规律】Growing Rectangular Spiral
Growing Rectangular Spiral 题目描述 A growing rectangular spiral is a connected sequence of straightline ...
【AC自动机】最短母串
[题目链接] https://loj.ac/problem/10061 [题意] 给定 n 个字符串 S1-Sn,要求找到一个最短的字符串 T,使得这 n 个字符串都是 T 的子串. [题解] 类似于 ...
element-ui 中 table 鼠标悬停时背景颜色修改
样式穿透: /deep/ .el-table tbody tr:hover>td { background-color: #颜色 }
路由组件传参-props解耦方式（主要）
在组件中使用 $route 会使之与其对应路由形成高度耦合,从而使组件只能在某些特定的 URL 上使用,限制了其灵活性. 使用 props 将组件和路由解耦: 取代与 $route 的耦合 const ...
JS基础_变量的声明提前、函数的声明提前
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
loj 2292「THUSC 2016」成绩单
loj 看着就很区间dp,所以考虑求$f_{i,j}$表示区间$[i,j]$的答案.注意到贡献答案的方式是每次选一个连续段,拿走后剩下的段拼起来继续段,所以转移就考虑从最后一次选的方法转移过来 ...
css流程图
图片链接:https://mp.processon.com/view/link/5da65435e4b0ea86c2b1fb05 之前是图片链接是有点问题,不知道什么原因被删除了,现在已经更新了,如 ...
CHD-5.3.6集群上hive安装
解压过后: [hadoop@master CDH5.3.6]$ ls -rlttotal 8drwxr-xr-x. 17 hadoop hadoop 4096 Jun 2 16:07 hadoop- ...
linux下安装db2
最近研究了一下在 ubuntu下安装db2的过程,很快就完成安装,特贴出来供大家讨论,如有错误请多多指教. 注意:安装过程请使用root用户,否则会出现安装失败的情况: 安装过程: 准备工作: 准备安 ...
Linux特殊权限及ACL权限
一.SetUID与SGID 只能用于二进制程序,脚本不能设置执行者需要有该二进制程序的x权限执行具有SUID权限的二进制程序,那么执行者将具有该二进制程序所有者的权限. 举例来说,/etc/pas ...

jQuery系列（四）：jQuery的属性操作

jQuery系列（四）：jQuery的属性操作的更多相关文章

随机推荐

热门专题