04-jQuery的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作
html属性操作:是对html文档中的属性进行读取,设置和移除操作。比如attr()、removeAttr()
DOM属性操作:对DOM元素的属性进行读取,设置和移除操作。比如prop()、removeProp()
类样式操作:是指对DOM属性className进行添加,移除操作。比如addClass()、removeClass()、toggleClass()
值操作:是对DOM属性value进行读取和设置操作。比如html()、text()、val()
attr()
设置属性值或者 返回被选元素的属性值
//获取值:attr()设置一个属性值的时候 只是获取值var id = $('div').attr('id')console.log(id)var cla = $('div').attr('class')console.log(cla)//设置值//1.设置一个值 设置div的class为box$('div').attr('class','box')//2.设置多个值,参数为对象,键值对存储$('div').attr({name:'hahaha',class:'happy'})
removeAttr()
移除属性
//删除单个属性 $('#box').removeAttr('name'); $('#box').removeAttr('class');//删除多个属性 $('#box').removeAttr('name class');
prop()
prop() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时,则返回第一个匹配元素的值。
当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。
语法:
返回属性的值:
$(selector).prop(property)
设置属性和值:
$(selector).prop(property,value)
设置多个属性和值:
$(selector).prop({property:value, property:value,...})
关于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.js"></script><script type="text/javascript">$(function(){//获取第一个inputvar el = $('input').first();//undefined 因为attr是获取的这个对象属性节点的值,很显然此时没有这个属性节点,自然输出undefinedconsole.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>
什么时候使用attr(),什么时候使用prop()?
1.是有true,false两个属性使用prop();
2.其他则使用attr();
addClass(添加多个类名)
为每个匹配的元素添加指定的类名。
$('div').addClass("box");//追加一个类名到原有的类名
还可以为匹配的元素添加多个类名
$('div').addClass("box box2");//追加多个类名
removeClass
从所有匹配的元素中删除全部或者指定的类。
移除指定的类(一个或多个)
$('div').removeClass('box');
移除全部的类
$('div').removeClass();
可以通过添加删除类名,来实现元素的显示隐藏
代码如下:
var tag = false;$('span').click(function(){if(tag){$('span').removeClass('active')tag=false;}else{$('span').addClass('active')tag=true;} })
案例:
代码如下:
<!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>
toggleClass
如果存在(不存在)就删除(添加)一个类。
语法:toggleClass('box')
$('span').click(function(){//动态的切换class类名为active$(this).toggleClass('active') })
html
获取值:
语法;
html() 是获取选中标签元素中所有的内容
$('#box').html();
设置值:设置该元素的所有内容 会替换掉 标签中原来的内容
$('#box').html('<a href="https://www.baidu.com">百度一下</a>');
text
获取值:
text() 获取匹配元素包含的文本内容
语法:
$('#box').text();
设置值:
设置该所有的文本内容
$('#box').text('<a href="https://www.baidu.com">百度一下</a>');
注意:值为标签的时候 不会被渲染为标签元素 只会被当做值渲染到浏览器中
val
获取值:
val()用于表单控件中获取值,比如input textarea select等等
设置值:
$('input').val('设置了表单控件中的值');
转载于:https://www.cnblogs.com/bai-max/p/9135712.html
04-jQuery的属性操作相关推荐
- jQuery的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...
- jQuery之属性操作
文章目录 1.jQuery属性操作 1.1 元素固有属性值 prop() 1.2 元素自定义属性值 attr() 1.3 数据缓存 data() 2. jQuery 文本属性值 3. jQuery 元 ...
- [jQuery基础] jQuery对象 -- 属性操作
属性操作 属性和属性节点 1.什么是属性? 对象身上保存的变量就是属性 2.如何操作属性? 对象.属性名称 = 值 对象.属性名称 对象["属性名称"] = 值 对象[" ...
- JQuery的属性操作及事件
一.属性操作 1.固有属性 (1)获取:选中元素.prop('属性名') console.log($('img').prop('src')); (2)设置:选中元素.prop('属性名','值') & ...
- jQuery(六)元素属性操作和jQuery循环
文章目录 jQuery元素属性操作 jQuery循环 练习-手风琴式展示图片 jQuery元素属性操作 html() //取出或设置元素内包裹的内容 var $box = $('.box');aler ...
- JavaWeb开发 前端语言:jQuery(二)属性操作、DOM的增删改、CSS样式操作、动画、事件操作
JavaWeb开发 前端语言:jQuery(二) 1.jQuery的属性操作 2.jQuery练习:使用jQuery完成全选.全不选.反选和提交功能 3.DOM的增删改 3.1 DOM的增操作 3.1 ...
- 二、属性操作,文本属性值,元素操作,尺寸、位置操作
1.1. jQuery 属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ; 1.1.1 元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属 ...
- JQuery-jq属性操作、jq文本属性值、jq元素(创建、添加、移除)操作、jq尺寸、位置操作
属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ; 元素固有属性值 prop() - 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元 ...
- jQuery源码分析系列:属性操作
属性操作 1.6.1相对1.5.x最大的改进,莫过于对属性.attr()的重写了.在1.6.1中,将.attr()一分为二: .attr()..prop(),这是一个令人困惑的变更,也是一个破坏性的升 ...
- web前端----jQuery属性操作
知识点总结 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性值 - 点击加载图片示例 remo ...
最新文章
- 梯度消失、梯度爆炸、过拟合问题之神经网络应对方案:数据预处理、批量归一化、非饱和激活函数、梯度缩放和梯度裁剪、权重初始化、提前终止、集成学习、l1l2、Dropout
- HTTP 请求包/回复包格式数据分析
- 前目的地罗伯森是谁_前目的地谁演的,前目的地的扮演者罗伯森先生资料介绍-易看TV...
- 计算机网络知识点3——数据交换(报文交换、分组交换)
- linux怎么打开云硬盘,Linux系统云服务器如何挂在磁盘
- memcached学习笔记6--浅谈memcached的机制 以及 memcached细节讨论
- python写appium_案例分享,Python +appium做登录功能
- log4j配置以及logback配置
- 在字符串中找出第一个只出现一次的字符,Python实现
- 8.6 归纳式迁移学习
- SQLSERVER函数判断当天是星期几
- poj1054The Troublesome FrogDP
- mysql adodb_指南从MySQL转向ADODB的方法_MySQL
- 超好用的mac虚拟机软件:VM虚拟机 mac中文版
- 一文了解DeFi主经济商,为何说它是DEX主导市场的关键
- 2017年深圳积分入户分值表(精简版)
- Axure8 全选控制中继器里的checkbox
- 笑过后值得思考的一些编程语录----------搞笑却真实
- 计算机硬件故障智能检测软件,电脑硬件故障检测方法和检测工具推荐
- STM32G473CBT6关于ADC采集的总结
热门文章
- 使用案例_Excel中LOOKUP函数的使用案例
- 单片机 自动更改日期_自动螺丝机不可或缺之功能
- 查看docker镜像内部端口号_Docker 安装部署
- 2021-09-0884. 柱状图中最大的矩形 栈
- 2021-09-02Hive 未被external修饰的是内部表,被external修饰的是外部表
- linux运行彩虹猫,如何在在 Linux 命令行中观看彩虹猫
- arduino的esp32程序无法上传_【arduino】arudino开发ESP32 SPIFFS文件上传方法
- python列表删除会出现一个错误 list index out of range
- 《Web漏洞防护》读书笔记——第2章,SQL注入防护
- 使用CefSharp在.NET中嵌入Google kernel