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 ...
随机推荐
- selenium弹框元素定位-冻结界面
有些网站上面的元素,我们鼠标放在上面,会动态弹出一些内容. 比如,百度首页的右上角,有个更多产品选项,如下图所示: 如果我们把鼠标放在上边,就会弹出下面的百度营销.音乐.图片等图标. 如果我们要用se ...
- 20190804-Python基础 第二章 列表和元组
容器,Python支持一种数据结构的基本概念(容器,基本上就是可包含其他对象的对象.) 两种主要的容器是:序列(如列表和元组)和映射(如字典) Ps: 列表与元组区别,列表可修改,元组不能. 对序列的 ...
- kube-dns和coreDNS的使用
内部服务发现 前面我们给大家讲解了 Service 的用法,我们可以通过 Service 生成的 ClusterIP(VIP)来访问 Pod 提供的服务,但是在使用的时候还有一个问题:我们怎么知道某个 ...
- MySQL 聚合函数（二）Group By的修饰符——ROLLUP
原文为MySQL 5.7 官方手册:12.20.2 GROUP BY Modifiers 一.ROLLUP 修饰符的意义 GROUP BY子句允许添加WITH ROLLUP修饰符,该修饰符可以对分组后 ...
- eclipse导入maven空项目,eclipse导入时不识别maven项目
经常我们在网上下载的一些开源项目中,想要导入eclipse中,却发现eclipse不识别这个项目,这时候怎么办呢? 解决办法多种多样,我这里举例出最实用的2种: 1.在项目的根目录中加入.classp ...
- 调研task_struct结构体
进程的描述PCB task_struct——PCB的一种,在linux中描述进程的结构体叫做task_struct. task_struct内容分类: 标识符:描述本进程的唯一标识符,用来区别其他进程 ...
- ES6用来判断数值的相关函数
最近在学习ES6的基础知识,整理了一下ES6用来判断数值的相关函数 Math.sign() =>判断正负数的函数 Math.trunc() =>取整函数 Number.isInteger( ...
- Javascript中的事件二
<!------------------示例代码一---------------------><!DOCTYPE html PUBLIC "-//W3C//DTD XHTM ...
- Git忽略已追踪文件或文件夹
今天拉取代码,用vs生成后发现obj文件夹下自动生成的文件被同事提交了,这个本应该加入到ignore的 我就需要把这个文件夹加入到gitignore, 不过已经追踪的文件和文件夹,直接添加到gitig ...
- Maven基本概念——根目录、项目创建、坐标
转载来自:https://www.cnblogs.com/zjfjava/p/6817793.html 尊重原创! (一)Maven 基本概念——根目录.项目创建.坐标 1. MavenProj ...