首先,我们先搞清楚属性与属性节点是什么?
属性:
在对象中,我们说属性就是对象存储的数据,或则说对象身上保存的变量就是属性。在CSS的样式中,因为它也是键值对的形式,所以我们也称CSS样式属性。
操作属性的方法:
1、点语法: 对象.属性 = 属性值; (赋值)
对象.属性 (取值)
2、字符串语法: 对象[‘属性名称’] = 属性值; (赋值)
对象[‘属性名’] (取值)
属性节点:
一、在编写HTML的时候,我们写在HTML标签里面的属性就是属性节点。
html
<input type="checkbox" indexnum="{{ value.id }}">
//两个属性 type 和 indexnum
二、分类:
2.1标签属性分为四类:
// (1)行内标准属性:
// 比如: id class style
<h3 class="name">布头儿</h3>
//(2)行内自定义属性
// 比如:自定义的index属性,属性值是1
<li index="1" >导航菜单</li>
// (3)js动态添加属性
//点语法添加,既可以添加自定义也可以添加行内标准属性
div.className = "box"; //类名是行内标准
div.style.display = "none"; //设置显示模式
div.dataNum = "1"; //自定义属性dataNum
// (4)行外属性
//行外属性就是不在html标签中书写的属性,比如:内嵌式、外联式
<style>
th,td {
max-width: 420px;
}
</style>
三、操作属性的方法:
3.1 原生JS操作属性的方法:
3.1.1 点语法操作属性
//点语法操作属性:
//可以获取到属性:标准的行内属性/点语法动态添加的属性
div.ClassName = "box1"; //可以获取或修改
div.dataNum = '1'; //动态添加dataNum属性
div.dataNum; //打印出来是1,这是获取
//不可以获取属性:行外属性/行内自定义的属性
//如果是行内的自定义点语法拿不到
<div index="123" ></div>
document.querySelector('div').index; //这样获取不到内容
注意点:点语法动态添加属性是显示在行内的。
3.1.2 attribute方式
/* 获取属性:元素.getAttribute('属性名')
添加属性:元素.setAttribute('属性名',属性值);
* 用setAttribute方式添加只能用getAttribute获取
删除属性: 元素.removeAttribute('属性名');
* a.属性名属性值全部删除,更加彻底
* b.点语法只能删除属性值,不能删除属性名
* /
/*
利用attribute属性
* 可以获取的内容: 行内标准,行内自定义,以及利用setAttribute方法设置的属性。
* 不可以获取的内容: 行外属性,JS点语法动态添加的属性
*/
3.1.3 获取所有的样式方法:
使用window.getComputedStyle(‘要获取的元素’,null)
* 既能获取行内,也能获取内嵌(外联),是string
* 能获取任何属性,但是不能设置
* IE8及之前无法使用(浏览器兼容问题)
* IE8及之前使用 元素名.currentStyle[属性名] ,这种方式谷歌和火狐都不支持
3.1.4 点语法自定义的属性和attribute自定义属性的区别
//点语法设置的自定义属性是标签的一个属性,不会显示在行内
//attribute设置的属性会显示在行内
<div id="box1"></div>
<div id="box2"></div>
document.getElementById('box1').index = 1;
document.getElementById('box2').setAttribute('index', 1);
上面代码编译后的结果:
现在执行结果:
发现点语法添加的属性没有出现在行内,而attribute添加的却出现在行内:
现在打印各自的元素节点可以观察到:
console.dir(document.getElementById('box1'));
console.dir(document.getElementById('box2'));
我们发现:
box1的元素节点打印结果:
点语法动态添加的属性,作为元素节点的一个属性添加到元素上面,不显示在行内.
box2的元素节点打印结果:
arrtibute设置的属性作为元素节点里的attributes属性对象里的属性添加的.
总结: 两者的根本不同在于底层的不同.
3.1.5 两者添加属性不同的实例
<input type="text" value="哈哈哈">
<script>
var input = document.querySelector('input');
input.addEventListener('change', function() {
//获取你一开始在标签上写的value属性值
console.log(input.getAttribute('value'));
//获取一开始在标签上写的type属性的值
console.log(input.getAttribute('type'));
// 但是表单输入的时候没有改变input标签上的value 改的是input js对象上的value
// 取表单输入的值使用input.value 不能使用getAttribute
console.dir(input.value);
//对应jQuery的方法
// $(input).val()
// $(input).attr('value')
});
</script>
3.2 jQuery里面获取属性的方法:
3.2.1 attr方法:
//1.1 设置单个属性
// 第一个参数:需要设置的属性名
// 第二个参数:对应的属性值
$obj.attr(name, value);
//1.2 获取单个属性
$obj.attr(name);
//2.1 设置多个属性(传入一个对象)
$obj.attr({
name1 :value1,
name2 :value2,
.......
});
//3. 移出属性
// 参数:需要移除的属性名,
$obj.removeAttr(name);
3.2.2 jQuery针对CSS属性的操作,有专门的方法
//1. 设置单个属性
// name:需要设置的样式名称
// value:对应的样式值
$obj.css(name, value);
//2. 设置多个属性(传入一个对象)
$obj.css({
name1 :value1,
name2 :value2,
.......
})
//3. 获取属性
$obj.css(name);
注意:获取样式操作只会返回第一个元素对应的样式值。
隐式迭代:
设置操作的时候,如果是多个元素,那么给所有的元素设置相同的值
获取操作的时候,如果是多个元素,那么只会返回第一个元素的值。
3.2.3 jQuery针对class属性的操作,有专门的方法
//1. 添加类样式
// name:需要添加的样式类名,注意参数不要带点.
$obj.addClass(name);
//2.移出类样式
// name:需要移除的样式类名
$obj.removeClass('name');
//3.判断是否有类样式
// name:用于判断的样式类名,返回值为true false
$obj.hasClass(name)
//4.切换类样式
// name:需要切换的样式类名,如果有,移除该样式,如果没有,添加该样式。
$obj.toggleClass(name);
下面介绍一个案例,获取input标签里面的自定义属性,用来拼接字符串。
input标签是由模板引擎art-template生成:
<!-- 准备一个内容模板 -->
<script type="text/html" id="tpl2">
/*循环遍历生成下面的模板*/
{{ each list value key }}
{{ if value.status == "held" }}
<tr class="danger">
{{ else }}
<tr>
{{ /if }}
/*indexnum里放入的就是id*/
<td class="text-center"><input type="checkbox" indexnum="{{ value.id }}"></td>
<td>{{ value.author }}</td>
<td>{{ value.content }}</td>
<td>《{{ value.title }}》</td>
<td>{{ value.created.slice(0,10).split("-").join('/') }}</td>
{{ if value.status == "approved" }}
<td>已批准</td>
{{ else if value.status == "held" }}
<td>未批准</td>
{{ else }}
<td>已拒绝</td>
{{ /if }}
<td class="text-center">
{{ if value.status == "approved" }}
/* a标签的点击事件里放入的也是id */
<a href="javascript:changecommentStatus( 'approved',{{ value.id }});" class="btn btn-warning btn-xs">批准</a>
{{ else if value.status == "held" }}
<a href="javascript:changecommentStatus( 'held',{{ value.id }});" class="btn btn-info btn-xs">拒绝</a>
{{ /if }}
<a href="javascript:changecommentStatus( 'trashed',{{ value.id }});" class="btn btn-danger btn-xs">删除</a>
</td>
</tr>
{{ /each }}
</script>
部分JQuery代码:
$('tbody :checked').each(function(index,ele){
//第一种直接给input自定义的属性,使用它需要改模板里面的内容
// console.log(ele.value);
// str += ele.value + ",";
//第二种利用Jquery的attr方法来获取,注意each遍历出来的是原生的DOM,
//使用的时候要用$包起来
console.log($(ele).attr('indexnum'));
str += $(ele).attr('indexnum') + ',';
//第三种是使用原生的getAttribute方法来实现
// console.log(ele.getAttribute('indexnum'));
// str += ele.getAttribute('indexnum') + ",";
});
这里特别注意jQuery里面的each方法是用来是显式迭代的,但是遍历出来的是DOM元素。
四、H5里面关于属性的操作:
在H5新增一个自定义属性的写法:
//自定义属性:不是标签自带的属性,我们开发者自己定义的
//这里就是自定义属性index,但是不是H5的
<li index="1" >导航菜单</li>
//H5新增属性的语法:data-属性名,属性名必须为小写
//这里面的data-index就是H5自定义的属性
<li id="li" data-index="1" >导航菜单</li>
//H5推出了一个专门取自定义属性的方法
//JS取值:元素.dataset.属性名
document.getElementById('li').dataset.index; //1
//jquery也为之设立了专门的方法
$(ele).data('属性名')
$('#li').data('index');