06-jQuery属性操作
选择器
:empty
:empty
选择器是选择符合条件的没有节点(包括文本节点)的元素。
与:parent
是相反的。
:empty和
:parent`都是包含文本节点的。
:parent
:parent
选择器是选择符合条件的有节点(包括文本节点)的元素。
与:empty
是相反的。
:parent
是jQuery衍生出来的,不是原有css的规范的一部分,使用:parent
不能利用原生DOM提供的querySelectorAll()
来提高性能,为了在现代浏览器中提高性能,应该先使用纯css然后使用.filter(":parent")
.
:contains(text)
:contains()
选择器是选择所有包含指定文本的元素。
:contains()
匹配的文本可以出现在所选择的元素,或其子元素,或者二者都有。匹配的文字可以是纯文字,也可以加引号。
:has(selector)
:has()
选择器是选择元素其中至少包含指定选择器匹配的一个种元素。
:parent
是jQuery衍生出来的,不是原有css的规范的一部分,使用:parent
不能利用原生DOM提供的querySelectorAll()
来提高性能,为了在现代浏览器中提高性能,建议使用$("your-pure-css-selector").has(selector/DOMElement)
;
<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery属性操作</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script><style>.red{background: red;}.black{background: black;}</style>
</head><table><tr><td>this is content</td><td></td><td>:contains</td></tr><tr><td></td><td>this is content</td><td></td></tr><tr><td></td><td><span>:has</span></td><td>this is content</td></tr></table>
<body>
</body>
<script>$(function () {$("td:empty").css("background","rgb(186,231,255)");$("td:parent").css("background","rgb(255,204,199)");$("td:contains(contains)").css("background","rgb(181,245,236)");$("td:has(span)").css("background","rgb(217,247,190)");});
</script></html>
相关方法
attr && prop
attr()
和prop()
相似,都是关于jQuery对象的属性(或特性)的操作,
attr()
和prop()
有两个不同的传参方法,只传入属性名称的话,作用是返回属性的值,但是如果你传入了属性名称和属性值的话,他的作用就是设置属性。
当然如果传入属性名称与属性值一一对应的对象,或者生成这样对象的方法也是可以设置多个属性的。
如果传入的属性没有设置时会返回undefined
.
若要检索和更改DOM属性,比如元素的checked
, selected
, 或 disabled
状态,请使用.prop()方法。
Attributes vs. Properties
attributes和properties之间的差异在特定情况下是很重要。jQuery 1.6之前 ,
.attr()
方法在取某些 attribute 的值时,会返回 property 的值,这就导致了结果的不一致。从 jQuery 1.6 开始,.prop()
方法 方法返回 property 的值,而.attr()
方法返回 attributes 的值。例如,
selectedIndex
,tagName
,nodeName
,nodeType
,ownerDocument
,defaultChecked
, 和defaultSelected
应使用.prop()
方法进行取值或赋值。 在jQuery1.6之前,这些属性使用.attr()
方法取得,但是这并不是元素的attr
属性。他们没有相应的属性(attributes),只有特性(property)。例如,考虑一个DOM元素的HTML标记中定义的
<input type="checkbox" checked="checked" />
,并假设它是一个JavaScript变量命名的elem
:
elem.checked
true
(Boolean) 将随着复选框状态的改变而改变$(elem).prop("checked")
true
(Boolean) 将随着复选框状态的改变而改变elem.getAttribute("checked")
"checked"
(String) 复选框的初始状态;不会改变$(elem).attr("checked")
(1.6)"checked"
(String) 复选框的初始状态;不会改变$(elem).attr("checked")
(1.6.1+)"checked"
(String) 将随着复选框状态的改变而改变$(elem).attr("checked")
(pre-1.6)true
(Boolean) 将随着复选框状态的改变而改变根据W3C的表单规范 ,在
checked
属性是一个布尔属性, 这意味着,如果这个属性(attribute)是目前存在, 即使,该属性没有对应的值,或者被设置为空字符串值,或甚至是"false",相应的属性(property)为true。 这才是真正的所有布尔属性(attributes)。然而,要记住的最重要的概念是
checked
特性(attribute)不是对应它checked
属性(property)。特性(attribute)实际对应的是defaultChecked
属性(property),而且仅用于设置复选框最初的值。checked
特性(attribute)值不会因为复选框的状态而改变,而checked
属性(property)会因为复选框的状态而改变。因此, 跨浏览器兼容的方法来确定一个复选框是否被选中,是使用该属性(property):
if ( elem.checked )
if ( $(elem).prop("checked") )
if ( $(elem).is(":checked") )
对于其他的动态属性,同样是true,比如
selected
和value
.如果你使用jQuery 1.6 ,代码
if ( $(elem).attr("checked") )
,将获得一个属性(attribute) ,它不改变该复选框被选中和选中。它只是用来存储默认或选中属性的初始值。为了保持向后兼容,.attr()
方法从 jQuery 1.6.1+ 开始除了返回属性值外,还会更新 property 属性,因此 boolean attribute(布尔属性)不需要通过.prop()
来改变其值。推荐使用上述方法之一,来取得 checked 的值。要想知道在最新的 jQuery 版本中,它们是如何工作的,请点击下例中的 check。
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery属性操作</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script><style>.red {background: #ffccc7;}.black {background: #bfbfbf;}td {background-color: rgb(186,231,255);width: 200px;height: 20px;text-align: center;}</style>
</head>
<table><tr><td class="prop">prop</td><td id="prop">prop</td><td>prop</td></tr><tr><td></td><td></td><td></td></tr><tr><td class="attr">attr</td><td id="attr">attr</td><td>attr</td></tr>
</table><body>
</body>
<script>$(function () {var props = $("td:contains(prop)");console.log("第一个prop的class 是:" + props.prop("class"));props.prop("class","prop red");var attrs = $("td:contains(attr)");console.log("第一个attr的class 是:" + attrs.attr("class"));attrs.attr({class: "attr black",name: "attr"});});
</script></html>
类操作相关方法
addClass()
.hasClass()
.removeClass()
.toggleClass()
案例 - 简单编辑器
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery属性操作</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script><style>* {margin: 0;padding: 0;}header {height: 64px;position: absolute;top: 0;left: 0;right: 0;padding: 8px;bottom: auto;}header button{width: 108px;height: 48px;outline: none;line-height: 48px;border: none;border-radius: 4px;color: #333333;background-color: #ffffff80;}footer {height: 32px;position: absolute;top: auto;left: 0;right: 0;bottom: 0;background-color: #5a5a5a;}#content {position: absolute;top: 64px;left: 0;right: 0;bottom: 32px;}#content-textarea {position: absolute;width: 60%;top: 10%;left: 20%;right: 20%;bottom: 10%;padding: 32px;border: none;outline: none;border-radius: 20px 20px 0px 20px;}#content-textarea:focus {box-shadow: 0px 0px 6px 2px #33333330;}.read-only {box-shadow: inset 0px 0px 6px 2px #FFFFFF80;}.read-only:focus {box-shadow: inset 0px 0px 6px 2px #FFFFFF80 !important;}.header-red {background-color: #ff4d4f;}.content-red {background-color: #fff1f0;}.textarea-red {background-color: #ffccc7;}.header-blue {background-color: #40a9ff;}.content-blue {background-color: #e6f7ff;}.textarea-blue {background-color: #bae7ff;}</style>
</head>
<table><header class="header-red"><button id="is-read-only">只读</button><button id="change-skin">换肤</button></header><div id="content" class="content-red"><textarea id="content-textarea" class="textarea-red"></textarea></div><footer></footer>
</table><body>
</body>
<script>$(function () {var isReadOnly = $("#is-read-only");var changeSkin = $("#change-skin");var header = $("header");var content = $("#content");var contentTextarea = $("#content-textarea");var contentTextareaBackgroundColor = contentTextarea.css("background-color");isReadOnly.click(function () {var readonly = contentTextarea.prop("readonly");if (readonly) {contentTextarea.removeClass("read-only");contentTextarea.prop("readonly", "")} else {var contentCss = content.css("background-color");contentTextarea.addClass("read-only");contentTextarea.prop("readonly", "readonly")}});changeSkin.click(function () {var readonly = contentTextarea.prop("readonly");if (readonly) {header.toggleClass("header-blue header-red");content.toggleClass("content-blue ontent-red");contentTextarea.toggleClass("textarea-blue textarea-red");} else {// 未只读header.toggleClass("header-blue header-red");content.toggleClass("content-blue content-red");contentTextarea.toggleClass("textarea-blue textarea-red");}});contentTextarea.click(function () {var readonly = contentTextarea.prop("readonly");if (readonly) {alert("只读状态")}});});
</script></html>
文本操作相关方法
样式操作相关
尺寸位置操作相关
scrollTop 方法
<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>jQuery属性操作</title><script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.js"></script><style>* {margin: 0;padding: 0;}header {height: 64px;position: absolute;top: 0;left: 0;right: 0;padding: 8px;bottom: auto;transition: 0.75s;}header button {width: 108px;height: 48px;outline: none;line-height: 48px;border: none;border-radius: 4px;color: #333333;background-color: #ffffff80;transition: 0.75s;}footer {height: 32px;position: absolute;top: auto;left: 0;right: 0;bottom: 0;background-color: #5a5a5a;}#content {position: absolute;top: 64px;left: 0;right: 0;bottom: 32px;transition: 0.75s;}#content-textarea {padding: 32px;border: none;outline: none;resize: none;transition: 0.75s;}.content-textarea {position: absolute;width: 60%;top: 10%;left: 20%;right: 20%;bottom: 10%;border-radius: 4px;}.content-textarea-full-screen {position: absolute;width: calc(100% - 64px);top: 0%;left: 0%;right: 0%;bottom: 0%;border-radius: 0px;}#content-textarea:focus {box-shadow: 0px 0px 6px 2px #33333330;}::-webkit-scrollbar {/* padding: 20px; *//*滚动条整体样式*/width: 2px;/*高宽分别对应横竖滚动条的尺寸*/height: 1px;}::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius: 10px;/* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); */background: #33333380;}::-webkit-scrollbar-track {/*滚动条里面轨道*//* box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2) ; */border-radius: 10px;background: #ededed;}.read-only {box-shadow: inset 0px 0px 6px 2px #FFFFFF80;}.read-only:focus {box-shadow: inset 0px 0px 6px 2px #FFFFFF80 !important;}.header-red {background-color: #ff4d4f;}.content-red {background-color: #fff1f0;}.textarea-red {background-color: #ffccc7;}.header-blue {background-color: #40a9ff;}.content-blue {background-color: #e6f7ff;}.textarea-blue {background-color: #bae7ff;}</style>
</head>
<table><header class="header-red"><button id="is-read-only">只读</button><button id="change-skin">换肤</button><button id="preset">预设文章</button><button id="full-screen">全屏</button><button id="set-top">返回顶部</button></header><div id="content" class="content-red"><textarea id="content-textarea" class="textarea-red content-textarea"></textarea></div><footer></footer>
</table><body>
</body>
<script>$(function () {var header = $("header");var isReadOnly = $("#is-read-only");var changeSkin = $("#change-skin");var preset = $("#preset");var fullScreen = $("#full-screen");var content = $("#content");var setTop = $("#set-top");var contentTextarea = $("#content-textarea");var contentTextareaBackgroundColor = contentTextarea.css("background-color");isReadOnly.click(function () {var readonly = contentTextarea.prop("readonly");if (readonly) {contentTextarea.removeClass("read-only");contentTextarea.prop("readonly", "")} else {var contentCss = content.css("background-color");contentTextarea.addClass("read-only");contentTextarea.prop("readonly", "readonly")}});changeSkin.click(function () {var readonly = contentTextarea.prop("readonly");if (readonly) {header.toggleClass( "header-red header-blue");content.toggleClass("content-red content-blue");contentTextarea.toggleClass("textarea-red textarea-blue");} else {// 未只读header.toggleClass( "header-red header-blue");content.toggleClass("content-red content-blue");contentTextarea.toggleClass("textarea-red textarea-blue");}});contentTextarea.click(function () {var readonly = contentTextarea.prop("readonly");if (readonly) {alert("只读状态")}});contentTextarea.scroll(function () {scrollTop = contentTextarea.scrollTop;if (contentTextarea.scrollTop() < 500) {setTop.hide();} else {setTop.show();}});preset.click(function () {var readonly = contentTextarea.prop("readonly");if (readonly) {alert("只读状态");} else {// 未只读var htmlText = `评《我不是药神》——我们只想活着
《我不是药神》是由文牧野执导,徐峥、王传君、周一围等主演的电影,该片由真实社会事件改编,讲述了一位药店店主从印度代购治疗慢粒白血病的药获得极大利润,开始贩药敛财之道后良心发现的故事,该片获得第十四届中国长春电影节金鹿奖最佳故事片奖、第四十二届蒙特利尔国际电影节主竞赛单元最佳剧本奖等,《我不是药神》,“药”你笑、也“药”你哭,渡己还是渡人;人有一种病治不好,那就是穷病;我不想死,我想活着,行吗?一个是只想努力挣钱获得孩子抚养权的程勇,一个是为女儿治病不惜委身风尘的单亲妈妈,一个是身处水深火热当中的重疾患者……文牧野用独特的眼光抓住了观众的笑点、泪点、痛点,故事情节、镜头交替、蒙太奇的运用等,把观众从影片外拉入影片当中,“你敢保证你一辈子不得病?”纯粹、直接、有力。电影并不只是电影,他更是现实生活的反映。影片中徐峥的演技不只是炸裂,更是一种掏心肺放脱自我的表现,有时候你会发现,影片越贴近真实,真实就会越荒诞。这部影片用它最真实、最贴近生活的剧情和演员撕心裂肺的表演让观众的内心与剧情相互交融,药物在中国绝对是“不可说”的,但是这部影片说了它能说的,也不显山不露水的说了它不能说的,讲的是荒诞,看过以后才发现现实不就是如此荒诞吗?影片的现实主义特色还体现在了模糊的道德界限上,到底是真卖药、还是卖假药,是非对错是混淆的,道德根本我从评判,这种亦正亦邪的主角以及界限模糊的道德观足够反应真实,以致于能揭露人生苍凉的底色,人性的自私与利他,并教人感同身受泪流满面。《我不是药神》这个片名很合适,因为在程勇身上展现的不是神性,而是人性。这部现实主义电影中,没有非黑即白的道德观,只有不同立场的针锋相对,于是更加贴近这个充满矛盾的复杂世界。影片最后众人摘掉口罩送行,这样的一种仪式感直戳观众内心,跟《辛德勒的名单》片尾一样,有异曲同工之妙。影片通过扎实流畅的叙事和层层递进的激励事件,让人物的每一次选择和前后的巨大转变都合情合理。观众也会通过这个立体的人物,体会到他身上迸发的情感力量,感受到他身上承载的沉重社会现实问题带来的刺痛感。我不是药神,治不好这世界,但能改变一点,总归是会好的
————————————————
版权声明:本文为CSDN博主「柔软的一元梦想家」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/qq_43388254/article/details/106840339`;contentTextarea.val(htmlText);}});fullScreen.click(function () {contentTextarea.toggleClass("content-textarea content-textarea-full-screen");});setTop.click(function (params) {contentTextarea.scrollTop(0);});});
</script></html>
06-jQuery属性操作相关推荐
- jQuery属性操作以及一些实用方法
目录 一.jQuery属性操作 1.prop() a.获取属性值 b.设置属性值 c.自定义属性值获取 2.数据缓存 3.jQuery内容文本值 a.普通元素内容 b.普通元素文本内容 c.获取设置表 ...
- jQuery—常用API(jQuery 属性操作、jQuery 文本属性值、jQuery 元素操作)
1. jQuery 属性操作 1.1 设置或获取元素固有属性值 prop() 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元素里面的 href,比如 <input> ...
- web前端----jQuery属性操作
知识点总结 1.属性 属性(如果你的选择器选出了多个对象,那么默认只会返回出第一个属性). attr(属性名|属性值) - 一个参数是获取属性的值,两个参数是设置属性值 - 点击加载图片示例 remo ...
- Mr.J-- jQuery学习笔记(三十二)--jQuery属性操作源码封装
扫码看专栏 jQuery的优点 jquery是JavaScript库,能够极大地简化JavaScript编程,能够更方便的处理DOM操作和进行Ajax交互 1.轻量级 JQuery非常轻巧 2.强大的 ...
- [jQuery原理] jQuery属性操作相关方法
属性操作相关方法 attr() 设置或者获取元素的属性节点值 attr: function (attr, value) {// 1.判断是否是字符串if(njQuery.isString(attr)) ...
- jQuery 属性操作——案例:购物车案例模块
案例:购物车案例模块-全选 <!DOCTYPE html> <html lang="zh-CN"><head><meta charset= ...
- jQuery 属性操作attr().prop().text().html().val()
这些方法用于获取和设置 DOM 元素的属性. 一.attr(): <!--样式:在style里面写的,用css来操作.--> <!--属性:在元素里面写的,用attr方法操作.--& ...
- jQuery 属性操作 - addClass() 和 removeClass() 方法
实例 向第一个 p 元素添加一个类: $("button").click(function(){$("p:first").addClass("intr ...
- jQuery属性操作之.val()
文章目录 .val()实例方法的三种用法 .val()函数源码 调用形式:$('xxx').val(); 调用形式:$('xxx').val(value); 调用形式:$('xxx').val(fun ...
- 46 jQuery属性操作
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.设置或获取元素固有属性值prop() 所谓的固有属性就是指元素本身自带的属性.如< ...
最新文章
- Pandas 多层级索引的数据分析案例,超干货!
- python matplotlib pyplot title_Matplotlib pyplot.title(字符串)返回
- 【机器视觉】 dev_update_window算子
- 关于VS2012连接MySql数据库时无法选择数据源
- find函数常见错误_终于找到你,查找函数,find必不可少
- 苹果查询水货苹果笔记本(Mac Book)验机流程
- mysql acid介绍_InnoDB ACID模型介绍
- 简单复制粘贴个linux红帽6
- 【攻防世界】九、ext3
- 留言板php数据库_PHP 留言板教程数据库表设计
- 如何阅读一本书?阅读的高效方法
- python爬去新浪微博_python 爬取新浪微博信息
- Python中字典(dict)和集合(set)区别与联系
- 按ASC码对字符串排序
- MySQL语句—DDL语句
- openldap用法
- 电脑投屏到电视android,电脑怎么投屏到电视?看完这篇文章你就懂了
- 用python构建多只股票日收益率直方图_用Python分析多股票的投资组合
- 吾心,吾思,吾语,吾记
- 计算机还原默认的配置,如何恢复IE浏览器的默认设置?如何还原IE浏览器的默认设置...
热门文章
- 汉语语法与人工智能--NLP哈工大
- 如何解决chrome浏览器地址栏变黑色(chrome搜索栏变黑)(mac电脑)
- GIS应用水平考试2009年度第一次全国统一考试
- Learn Git Branching 学习笔记(Git 技术、技巧与贴士集合篇)
- 建议更新IE浏览器的版本
- 7个实用有效的shopify运营策略,跨境电商卖家必知
- CG标准函数库——数学函数(GPU编程与CG语言之阳春白雪下里巴人)
- 1209: 【入门】数字走向II
- mac接收gmail邮件_如何从您的Gmail帐户发送和接收Hotmail
- DOSBox 0.74 汇编 out of memery test.asm(2):out of memory