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'})
attr删除属性前面必须加上你要删除的属性的值: 如果里面的括号写一个选项就是获取一个值 如果是两个选项就是增加 即覆盖,它增加的值就是覆盖了以前的值
$('要删除的选项').attr('要删除的选项', '具体的值');
removeAttr()
移除属性
//删除单个属性 $('#box').removeAttr('name'); $('#box').removeAttr('class');//删除多个属性 $('#box').removeAttr('name class');
removeAttr是删除 你的属性(‘要删除的class/id’,'具体的值')
prop()
prop() 方法设置或返回被选元素的属性和值。
当该方法用于返回属性值时,则返回第一个匹配元素的值。
当该方法用于设置属性值时,则为匹配元素集合设置一个或多个属性/值对。
语法:
返回属性的值:
$(selector).prop(property)
设置属性和值:
$(selector).prop(property,value)
设置多个属性和值:
$(selector).prop({property:value, property:value,...})
关于attr()和prop()的区别
prop是可以检测它的本身的固有属性就是style 它喝attr相比 比attr多了可以判断正确的方法,所以一般只有判判true和false的时候才会用到prop
什么时候使用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/zhaoyunlong/p/9122767.html
jQuery的属性操作相关推荐
- 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('属性名','值') & ...
- JavaWeb开发 前端语言:jQuery(二)属性操作、DOM的增删改、CSS样式操作、动画、事件操作
JavaWeb开发 前端语言:jQuery(二) 1.jQuery的属性操作 2.jQuery练习:使用jQuery完成全选.全不选.反选和提交功能 3.DOM的增删改 3.1 DOM的增操作 3.1 ...
- jQuery(六)元素属性操作和jQuery循环
文章目录 jQuery元素属性操作 jQuery循环 练习-手风琴式展示图片 jQuery元素属性操作 html() //取出或设置元素内包裹的内容 var $box = $('.box');aler ...
- 二、属性操作,文本属性值,元素操作,尺寸、位置操作
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 ...
最新文章
- 用GDB调试程序(五)
- python导入模块报错syntaxerror_SyntaxError: invalid syntax python错误解决方法
- 关于service层、dao层,以及O/R Mapping之间的思考
- 11年架构AI技术江湖,李彦宏:1块钱还是100亿,都会投进技术里
- python字符串与列表的相互转换
- java.lang.RuntimeException: can not run elasticsearch as root
- 开发安卓app游戏_电竞直播APP软件定制开发,游戏直播APP开发方案
- 要兼容ie时注意事项
- 有血有肉,汇报年终总结
- 在Java编程中,为什么char类型数组可以直接用数组名打印,而其他类型数组打印结果而是地址值。
- SAP ABAP搜狗输入法注释删除注释快捷键设置(未解决)
- TCP三次握手中SYN,ACK,Seq含义
- Go 初识微信订阅号(测试号)
- 激光雷达核心技术及行业格局梳理
- 音视频开发: ffmpeg采集桌面屏幕、摄像头保存为视频
- 剧中人的2018年终总结
- 超越MRT无数倍的MODIS在线拼接AppEERAS
- 201671010458 种兴达 实验三作业互评与改进报告
- html5独立钻石棋,自制独立钻石棋
- 产品读书《极简管理法则》
热门文章
- class路径快捷 xml配置_SpringBoot 配置文件详解(告别XML)-class文件
- win10虚拟机下载安装安全狗(Apache版本)
- gin redis 链接不上_php + redis 高并发商品秒杀 完整业务模拟流程 实现方案
- SQL中Case when 方法的使用
- 浅谈面向对象开发原则:高内聚,低耦合
- react脚手架快速创建react项目
- Arduino MEGA 2560找不到驱动怎么办
- hdoj - 1258 Sum It Up hdoj - 1016 Prime Ring Problem (简单dfs)
- CentOS6.2 自定义系统调用
- QT5.10.0安装教程图文教程以及安装成功QT5.10.0后环境配置图文步骤