首页 > 代码库 > js、jquery、h5 类\属性操作的笔记总结
js、jquery、h5 类\属性操作的笔记总结
① js操作
/var div = document.getElementById(‘d1‘);
/两种方式不能交换使用，赋值和获取值必须使用用一种方法。
var div = document.getElementById("box");
//元素节点.属性（元素节点[属性]）:绑定的属性值不会出现在标签上，能获取。
div.aaaa = "1111";
console.log(div.aaaa);
//get/set/removeAttribut: 绑定的属性值会出现在标签上，能获取。
div.setAttribute("bbbb","2222");
div.setAttribute("width","200px");
console.log(div.getAttribute("aaaa"));
console.log(div.bbbb);
自定义的对象属性和方法仅在Javascript是可以见有效的. 不影响HTML.
第一种 div.setAttribute("className", "abc");
第二种 div.className = ‘abc‘;
第三种 div.index=1;
element.setAttribute() 把指定属性设置或更改为指定值。
element.getAttribute() 返回元素节点的指定属性值。
element.removeAttribute() 从元素中移除指定属性。
<style>
.box{ width: 100px;height: 100px;}
.aa{background-color: red;}
</style>
<div class="box"></div>
<script>
var box=document.getElementsByClassName("box")[0];
box.setAttribute("width","200px");
box.setAttribute("id","你好");
box.index=1;
box.className+=" aa";</script>
总结 在js里面
DOM元素节点属性
方式1: box.setAttribute("id","你好"); 能获取值，属性会显示在html结构中
用该种方式设置的值就要用该种方式获取box.setAttribute("id");
方式2: box.index=1; 能获取值，属性不会显示在html结构中
用该种方式设置的值就要用该种方式获取console.log(box.index);
这两种方式都不会影响html元素的属性外观，仅仅在js中可见
元素外观属性（样式操作）可以：
方式1: ele.style.width=“20px” 能也获取值 console.log(box.style["width"]);
方式2: box.style["width"]="150px";获取值 console.log(box.style.width);
方式3: ele.className+=“ cur”）style标签里面 .cur{width:20px};
② jquery
样式操作（）
<script>
$(function () {
样式操作方法1(设置样式)： css(json);
$("div").css({"width":100,"height":100,"background-color":"pink"});
样式操作方法2(设置样式)： css(属性，值);
$("div").css("background-color","red");
样式操作方法2(获取样式)： css(属性);
//获取的时候如果有很多对象，那么获取jquery对象中的第一个
alert($("div").css("width"));})
</script>
类操作（）
<script>
添加样式不重叠
$(function () {
$("button").eq(0).click(function () {
//添加类$("div").addClass("current");
//判断类alert($("div").hasClass("current"));
});
$("button").eq(1).click(function () {
//删除类$("div").removeClass("current");
//判断类alert($("div").hasClass("current"));
/alert($("div").hasClass("current"));//jquery对象中有一个带
有类名的也是true，所有都不带才是false；
});
$("button").eq(1).click(function () {
//切换类$("div").toggleClass("current");
});
})
</script>
属性操作
<script>
$(function () {
jqbtn.click(function () {
方式一、绑定到jquery的衣服上，标签上没有
jqinp.title = 111;
console.log(jqinp.title);
方式二、绑定到标签上 正确 ！！
jqinp.attr("aaa",111);// //两个参数是绑定属性并赋值
console.log(jqinp.attr("aaa"));//一个参数是获取属性值
jqinp.attr("class","aaa");
console.log(jqinp.attr("class"));
jqinp.removeAttr("class");
console.log(jqinp.attr("class"));
form中的特殊属性，用prop
jqinp2.prop("checked",true);
// jqinp2.attr("checked",true);//一次性的
});
}
数据属性的值的获取和设置，JQ提供了两种方法attr（）和data（）。
对于原生的属性: attr（）设置和获取
<a id="a_one" href="http://blog.csdn.NET/it_surfer"></a>
<a id="a_two"></a>
则利用$("#a_one").attr("href")可以获取到id为a_one的a标签的连接地址：
利用$("#a_two").attr("href","http://blog.csdn.net/it_surfer")，就可以设置id为a_two 的a标签的连接地址
对于自定义数据属性：attr（）和data（）都可以设置获取
<a id="a_one" href="http://blog.csdn.net/it_surfer" data-num=50></a>
利用$("#a_one").attr("data-num",80)来给id为a_one的a标签来给data-num赋值
利用$("#a_one").attr("data-num")来获取id为a_one的a标签的data-num的值获取值
利用$("#a_one").data("num",80)来给id为a_one的a标签来给data-num赋值
利用$("#a_one").data("num")获取id为a_one的a标签的data-num的值获取值
</script>
removeAttr() 从所有匹配的元素中移除指定的属性。val() 设置或返回匹配元素的值。
自定义数据属性是为了保存页面或者应用程序的私有自定义数据，这些自定义数据属性保存进DOM中，对于整个DOM的布局和表现无任何影响，但是却可以方便操控整个网页的交互以及想要表达的效果。
③ h5
<script>
类操作
var box1= document.querySelector(‘.box1‘);h5获取单个元素
添加类名 box1.classList.add(‘active‘);//
删除类名 box1.classList.remove(‘active‘);////
判断是否包含类 var f=box1.classList.contains(‘active‘);contains:包含判断是否包含某个类名 返回结果 true/false
切换类名 box1.classList.toggle(‘active‘)
document.querySelector(‘button‘).onclick=function(){
document.querySelector(‘.box3‘).classList.toggle(‘active‘); }
</script>
自定义属性
<!-- 给标签添加自定义属性 必须以data-开头 -->
<div class="box" title="盒子" data-my-name="zs" data-content="
是一个div">div</div>
<script>
var box=document.querySelector(‘.box‘);
赋值 box.dataset[‘content‘]=‘aaaa‘;
获取值 console.log(box.dataset[‘content‘]);
自定义的属性需要通过 dateset[]方式来获取
data-my-name="zs" 如何获取？
驼峰命名法获取：console.log(box.dataset[‘myName‘]);
（js里面的自定义属box.index=100;console.log(box.className);）
</script>
CSS3/CSS2 函数取值attr()
插入元素的属性值。
在CSS2.1中attr()总是返回一个字符串。在CSS3中attr()可以返回多种不同的类型。
写本文档时尚无浏览器支持该CSS3定义的attr()。
在CSS2.1中可以这样使用：
示例代码：
div:after{content:attr(title);}
在CSS3中甚至可以这样：
a::after {content: attr(href) ;}
示例代码：
div{width:attr(width, px, auto);}
js、jquery、h5 类\属性操作的笔记总结