JQ DOM属性操作
DOM属性操作
一、常见的属性操作
- 属性列表
属性 | 版本 | 说明 |
---|---|---|
attr() | 1.0 | 设置或返回文档节点的属性。 |
removeAttr() | 1.0 | 移除文档节点的属性。 |
prop() | 1.6 | 设置或返回DOM元素的属性。 |
removeProp() | 1.6 | 移除每个匹配元素的属性。 |
addClass() | 1.0 | 添加CSS类名。 |
removeClass() | 1.0 | 移除CSS类名。 |
toggleClass() | 1.2 | 切换CSS类名(存在就删除,不存在就添加)。 |
html() | 1.0 | 设置或返回元素的html内容(即innerHTML)。 |
text() | 1.0 | 设置或返回元素的文本内容(已过滤掉HTML标签,即IE中的innerText )。 |
val() | 1.0 | 设置或返回元素的值(主要是表单元素的value值)。 |
语法格式
1.获取第一个匹配元素class属性 $("selector").attr("class"); 2. 设置所有匹配元素的class属性为"code" $("selector").attr("class", "code"); 3.移除所有匹配元素的class属性 $("selector").removeAttr("class");4.获取第一个匹配元素的checked属性值 $("selector").prop("checked"); 5.设置所有匹配元素的checked属性值为true(意即选中所有匹配的复选框或单选框) $("selector").prop("checked", true);6.移除所有匹配元素的className属性 $("selector").removeProp("className");7.获取第一个匹配元素的value值(一般用于表单控件) $("selector").val(); 8.设置所有匹配元素的value值为"xiaoming" $("selector").val("xiaoming"); 9.获取第一个匹配元素的innerHTML值 $("selector").html();10.设置所有匹配元素的innerHTML值为"呵呵" $("selector").html("呵呵"); 11.获取第一个匹配元素的innerText值(jQuery已进行兼容处理) $("selector").text();12.设置所有匹配元素的innerText值为"哈哈" $("selector").text("哈哈");
二、val()方法
1、作用
设置或者返回JQuery对象所匹配的DOM对象value的值
2、语法格式:
$(“selector”).val( [ values ] )
3、参数
参数 | 说明 |
---|---|
values | 可选/String/Array/Function类型用于设置的value值 |
4、返回值
val()函数的返回值是String/Array/jQuery类型,返回值的实际类型取决于val()函数所执行的操作。
如果val()函数执行的是设置操作,将返回当前jQuery对象本身。如果执行的是获取操作,将返回第一个匹配元素的value属性值,该值一般为字符串类型;如果该元素是多选的<select>元素,则返回包含所有选中值的数组。
5、示例代码
- HTML代码
<form id="form_id" name="answer_form" method="post"><label for="username_id">用户名</label><input id="username_id" class="normal" name="username" type="text"><br><label for="password_id">密 码</label><input id="password_id" class="normal" name="password" type="password"value="123456"><br><input id="user_normal_id" class="normal" name="username_id" type="hidden" disabled="disabled" value="1"><br><input id="men_id" name="gender" type="radio" checked="checked" value="men"><label for="men_id">男</label><input id="women_id" name="gender" type="radio" value="women"><label for="women_id">女</label><br><label for="text_id">自我介绍</label> <br><textarea id="text_id" name="content" rows="3" cols="80">这个是文本区域的内容</textarea><br><label for="answer_id">您喜欢的明星</label><br><select id="answer_id" name="answer"><option value="A">上原亚衣</option><option value="B">天海翼</option><option value="C">美祢藤</option><option value="D">长泽梓</option><option value="E" selected="selected">呵呵</option></select>
</form>
JS代码
$(function () {//获取元素值var $user_value = $("#username_id").val(); // alert($user_value);//设置元素值 返回对象var $user_input = $("#username_id").val("abcd"); // alert($user_value);var select_val = $("#answer_select_id:selected").val();$("#submit_id").click(function () {var $checks = $("input:checkbox:checked");$checks.each(function () {var val = $(this).val();})})});
三、html()
1、作用
函数用于设置或返回当前jQuery对象所匹配的DOM元素内的html内容。
该函数的用途相当于设置或获取DOM元素的innerHTML属性值。
2、语法格式
$(“selector”).html( [ htmlString ] )
3、参数
参数 | 描述 |
---|---|
htmlString | 可选/String/Function类型用于设置的html字符串。 |
4、参数说明
如果没有指定htmlString参数,则表示获取第一个匹配元素的html内容;如果指定了htmlString参数,则表示设置所有匹配元素的html内容。
jQuery 1.4 新增支持:参数htmlString可以为函数。html()将根据匹配的所有元素遍历执行该函数,函数中的this将指向对应的DOM元素。
html()还会为函数传入两个参数:第一个参数就是该元素在匹配元素中的索引,第二个参数就是该元素当前的html内容。函数的返回值就是需要为该元素设置的html内容。
如果参数htmlString不是字符串或函数类型,则会被转换为字符串类型( toString() )。如果参数为null或undefined,则将其视作空字符串("")。
5、返回值
- html()函数的返回值是String/jQuery类型,返回值的实际类型取决于html()函数所执行的操作。
- 如果html()函数执行的是设置操作,将返回当前jQuery对象本身。如果执行的是获取操作,将返回第一个匹配元素的html内容,该值为字符串类型。
6、示例代码
HTML代码
<div id="div1"><p id="p1">呵呵</p><p id="p2"><span id="p3">为全栈工程狮而奋斗</span><span id="p4"></span></p> </div>
js代码
$(function () {var $html = $("#p1").html();console.log($html);var $html2 = $("#p2").html();console.log($html2);//设置内容$("#p4").html("哈哈");$("p").html(function (index, currentHtml) {// 函数内的this指向当前迭代的p元素return "第" + (index + 1) + "个p元素,id为" + this.id;});});
四、text()
1、作用
- 函数用于设置或返回当前jQuery对象所匹配的DOM元素内的text内容。所谓text内容,就是在该元素的html内容(即innerHTML属性值)的基础上过滤掉所有HTML标记后的文本内容(即IE浏览器的DOM元素特有的innerText属性值)。
- 如果jQuery对象匹配的元素不止一个,则text()返回合并了每个匹配元素(包含其后代元素)中的文本内容后的字符串。该函数属于jQuery对象(实例)。
2、语法
$(“selector”).text( [ textString ] )
3、参数
参数 | 描述 |
---|---|
textString | 可选/String/Function类型用于设置的text字符串。 |
4、参数说明
如果没有指定textString参数,则表示获取合并了每一个匹配元素中的内容后的text内容;如果指定了textString参数,则表示设置所有匹配元素的text内容。
jQuery 1.4 新增支持:参数textString可以为函数。text()将根据匹配的所有元素遍历执行该函数,函数中的this将指向对应的DOM元素。
如果参数textString不是字符串或函数类型,则会被转换为字符串类型( toString() )。如果参数为null或undefined,则将其视作空字符串("")。
5、返回值
- text()函数的返回值是String/jQuery类型,返回值的实际类型取决于text()函数所执行的操作。
- 如果text()函数执行的是设置操作,将返回当前jQuery对象本身。如果执行的是获取操作,将返回合并了每一个匹配元素中的内容后的text内容,该值为字符串类型。
6、示例代码
HTML代码
<div id="d1"><p id="p2"><span id="p2">青春就像一张破裂的网,遗落了我太多年轻的时候梦想,大哥能不能给我QQ冲个会员</span><span id="p3"></span></p><ul><li>JAVA</li><li>H5</li><li>Android</li></ul> </div>
js代码
$(function () {/* 实例化p标签 */var $p1 = $("#p1");/* 设置文本内容*/$p1.text("跟哥玩感情我会让你哭的很有节奏!!!");var text = $("p").text();console.log(text);var $p2 = $("#p2");/*返回的是过滤掉HTML标记的文本内容*/console.log($p2.text());var $s2 = $("#s2");$s2.text('<h1>Hello World</h1>');console.log($s2.text());//清空所有匹配的元素的文本内容$("span").text("");/** index 将所有li元素的text内容修改成索引* text 每个li的文本内容*/$("li").text(function (index, text) {console.log(text);return index;});});
五、attr()
1、作用
函数用于设置或返回当前jQuery对象所匹配的元素节点的属性值。该函数属于jQuery对象(实例)。如果需要删除DOM元素节点的属性,请使用[removeAttr()]函数
2、语法
$(selector).attr(attribute)
3、参数
参数 | 描述 |
---|---|
attributeName | String类型指定的属性名称。 |
value | 可选/String/Function类型指定的属性值,或返回属性值的函数。 |
object | Object类型指定的对象,用于封装多个键值对,同时设置多项属性 |
4、参数说明
为被选元素设置一个以上的属性和值
$(selector).attr({attribute:value, attribute:value ...}) 以对象形式同时设置任意多个属性的值。对象object的每个属性对应attributeName,属性的值对应value。 注意:attr()函数的所有"设置属性"操作针对的是当前jQuery对象所匹配的每一个元素;所有"读取属性"的操作只针对第一个匹配的元素。
设置被选元素的属性和值。
$(selector).attr(attribute,function(index,oldvalue)) 注:如果参数value既不是函数类型,也不是字符串类型,则会调用toString()方法,将其转为字符串
参数 描述 attribute 规定属性的名称。 function(index,oldvalue) 规定返回属性值的函数。该函数可接收并使用选择器的 index 值和当前属性值。
5、返回值
- attr()函数的返回值是任意类型,返回值的类型取决于当前attr()函数执行的是"设置属性"操作还是"读取属性"操作。
- 如果attr()函数执行的是"设置属性"操作,则返回当前jQuery对象本身;如果是"读取属性"操作,则返回读取到的属性值。
- 如果当前jQuery对象匹配多个元素,返回属性值时,attr()函数只以其中第一个匹配的元素为准。如果该元素没有指定的属性,则返回undefined。
6、示例代码
HTML代码
<div id="d1"><p id="p_id" >这个是网站内容</p><input id="name_id" name="name" type="text" label="姓名" ><img id="img_id" alt="提示" src="/image/blank.gif" ><img id="login_id" alt="logo" title="测试" src="/img/logo" ><ul id="ul_id"><li id="l1_id" uid="1">1</li><li id="l2_id" uid="2">2</li><li id="l3_id" uid="3">3</li></ul> </div>
jq代码
$(function () {//改变img的src属性$("#logo").attr("src", "img/22.jpg");//获取src属性的值 注意只会获取第一个的值,var $attr = $("#logo").attr("src");/*** 如果要获取多个值 可以直接添加函数* 函数的参数1 属性的索引* 函数的参数2 属性的值* @type {string|any|JQuery<TElement>|jQuery|HTMLElement|*}*/var $attr = $("#logo").attr("src", function (index, value) {if (value !== undefined) {// 获取value的值操作}});//遍历title属性 如果有属性这个属性改变值 没有就设置值$("img").attr('alt', function (index, attrValue) {return attrValue === undefined ? this.alt = "呵呵" : "还是呵呵";});//如果使用attr获取返回boolean类型的属性时返回undefinedvar $disabled_attr = $("#i1").attr("disabled");var $checked_attr = $("#div").find(":checkbox").attr("checked");});
六、prop()
1、作用
函数用于设置或返回当前jQuery对象所匹配的元素的属性值。该函数属于
jQuery
对象(实例)。如果需要删除DOM元素的属性,请使用[removeProp()]函数。
2、语法格式
返回属性的值:
$(selector).prop(property)
设置属性和值:
$(selector).prop(property,value)
使用函数设置属性和值:
$(selector).prop(property,function(index,currentvalue))
设置多个属性和值:
$(selector).prop({property:value, property:value,...})
3、参数
参数 | 描述 |
---|---|
property | 属性的名称。 |
value | 属性的值。 |
function(index,currentvalue) | 返回要设置的属性值的函数。index - 检索集合中元素的 index 位置。currentvalue - 检索被选元素的当前属性值。 |
4、示例代码
HTML代码
<div><span id="s1">prop操作针对的是元素(Element对象)的属性,而不是元素节点(HTML文档)的属性</span><form><label for="boy">男</label><input id="boy" disabled="disabled" name="sex" type="checkbox" checked value="1"><label for="girl">女</label><input id="girl" name="sex" type="checkbox" value="2"></form> </div>
jq代码
$(function () {var $sp = $("#s1");//prop操作针对的是元素(Element对象)的属性,而不是元素节点(HTML文档)的属性$sp.prop("prop1", "test1");$sp.attr("attr1", "test2");var $girl = $("#girl");$girl.change(function () {var attr1 = $girl.attr("checked");console.log(attr1);var attr2 = $girl.prop("checked");console.log(attr2);console.log($("#boy").prop("disabled"))console.log($("#boy").attr("disabled"))});});
5、与attr主要区别
- prop()函数针对的是DOM元素(JS Element对象)的属性
- attr()函数针对的是DOM元素所对应的文档节点的属性
- 官方建议:具有 true 和 false 两个属性的属性,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
七、常见的取值和赋值函数
- html() 返回或设置被选元素的内容 (inner HTML)
- text() 取出或设置text内容
- attr() 取出或设置某个属性的值
- width() 取出或设置某个元素的宽度
- height() 取出或设置某个元素的高度
- val() 取出或设置html内容 取出某个表单元素的值
JQ DOM属性操作相关推荐
- jQuery的属性操作
jquery的属性操作模块分为四个部分:html属性操作,dom属性操作,类样式操作和值操作 html属性操作:是对html文档中的属性进行读取,设置和移除操作.比如attr().removeAttr ...
- 【JS笔记】JS中的DOM对象以及通过JS获取DOM结点,操作DOM属性、DOM增删改查
这篇文章,主要介绍JS中的DOM对象以及通过JS获取DOM结点,操作DOM属性.DOM增删改查. 目录 一.JS中的DOM 1.1.什么是DOM 1.2.获取DOM结点 (1)获取htm ...
- DOM进阶之CSS属性操作
CSS操作属性,指的是使用JavaScript来操作一个元素的CSS样式.在JavaScript中,CSS属性操作同样有两种, 获取CSS属性值 设置CSS属性值 1.获取CSS属性值 语法: get ...
- DOM属性的增删改、属性的其他操作及DOM事件
一.BOM属性的增删改 Ⅰ.获取标签document.getElementById() Ⅱ.获取属性值 方法一:document.write(inObj.value); 方法二:document.wr ...
- DOM操作 (创建、增、删、改、查、属性操作、事件操作)
关于dom操作,我们主要针对于元素的操作.主要有创建.增.删.改.查.属性操作.事件操作. 1.创建 1.document.write 2.innerHTML 3.createElement 2.增加 ...
- JavaScript基础: DOM中操作属性以及自定义属性
上一篇聊了一些常用的事件以及演示其如何使用,演示的时候发现一件事情,那就是DOM操作不单是得到元素,还可以修改元素的属性.现在开始如何操作其属性. 普通自带的属性 这些属性是某些标签自带的属性比如sr ...
- JavaWeb开发 前端语言:jQuery(二)属性操作、DOM的增删改、CSS样式操作、动画、事件操作
JavaWeb开发 前端语言:jQuery(二) 1.jQuery的属性操作 2.jQuery练习:使用jQuery完成全选.全不选.反选和提交功能 3.DOM的增删改 3.1 DOM的增操作 3.1 ...
- js第7章DOM案例:获取操作的元素、元素内容操作、元素属性操作、classList的使用、获取节点、节点追加、删除节点和节点属性
目录 1.获取操作的元素 document对象的方法 document对象的属性 Element对象的方法和属性 2. 元素内容操作 3.元素属性操作 4.classList的使用 5. 获取节点 6 ...
- JQuery-jq属性操作、jq文本属性值、jq元素(创建、添加、移除)操作、jq尺寸、位置操作
属性操作 jQuery 常用属性操作有三种:prop() / attr() / data() ; 元素固有属性值 prop() - 所谓元素固有属性就是元素本身自带的属性,比如 <a> 元 ...
最新文章
- 华为提出基于进化算法和权值共享的神经网络结构搜索,CIFAR-10上仅需单卡半天 | CVPR 2020...
- c语言:找出1到4000中,数字的各位数之和能被4整除的数有多少个?
- 来自51CTOHCNP3期一位技术小白的内心独白
- QPainter使用整理
- Linux 监控命令 iostat
- 值不值 | 三分钟搞定jpa?值不值!
- 较老版本 AFNetworking 使用心得
- 如何在Linux上录制你的终端操作
- 精心收集17套电子课件
- 我从华为身上学到的项目管理经验 -- 测试篇
- 计算机基础知识(免费、全面)
- html 列表 表格 form表单 文本域 label
- Mysql数据库学习笔记[完结]
- 那个被“爱”刺伤的30岁女孩,在这款游戏里完成了自我“救赎”
- proteus仿真的过程中,经常会不小心把示波器关掉,导致无法查看波形。那么如何调出示波器呢?
- 垃圾回收器判断对象是否存活
- 12.6学习笔记 HTML5表单元素/嵌入图片/视频(未完)
- php 图片上加文字,php使用GD库实现图片上添加文字的方法(代码)
- 使用sklear.metrics计算precision等指标
- 乘积取中法matlab,Matlab常用算法集合