js、jquery、h5 类\属性操作的笔记总结

发布时间：2018-12-06 10:51:31 修改时间：2019-01-03 14:51:46 阅读：15444 评论：0 0

一、 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() 从元素中移除指定属性。

.box{ width: 100px;height: 100px;}  

.aa{background-color: red;}

var box=document.getElementsByClassName("box")[0];   

box.setAttribute("width","200px");        

box.setAttribute("id","你好");     

box.index=1;      

box.className+=" aa";




总结 在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                                                                 

 样式操作（）


   $(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"));})





 类操作（）

添加样式不重叠
    $(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");

        });

})


 

  属性操作


    $(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（）设置和获取

 http://blog.csdn.NET/it_surfer" rel="nofollow">http://blog.csdn.NET/it_surfer">

 

 则利用$("#a_one").attr("href")可以获取到id为a_one的a标签的连接地址：

 利用$("#a_two").attr("href","http://blog.csdn.net/it_surfer" rel="nofollow">http://blog.csdn.net/it_surfer")，就可以设置id为a_two    的a标签的连接地址

对于自定义数据属性：attr（）和data（）都可以设置获取

 http://blog.csdn.net/it_surfer" rel="nofollow">http://blog.csdn.net/it_surfer" data-num=50>

利用$("#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的值获取值

removeAttr() 从所有匹配的元素中移除指定的属性。val() 设置或返回匹配元素的值。

自定义数据属性是为了保存页面或者应用程序的私有自定义数据，这些自定义数据属性保存进DOM中，对于整个DOM的布局和表现无任何影响，但是却可以方便操控整个网页的交互以及想要表达的效果。

三、 h5                                                                    

类操作
      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'); }


 

自定义属性


   

     是一个div">div

 

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);）


 

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);}

---