js和jq对内容、属性、样式进行修改的区别

最新推荐文章于 2022-05-10 16:51:33 发布

qq_43102118

最新推荐文章于 2022-05-10 16:51:33 发布

阅读量314

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/qq_43102118/article/details/107398232

版权

一、内容（3种）
1.原始的html内容
(1)DOM中：元素.innerHTML
(2)jq中： $元素 . h t m l (" 新内容 ") 2 . 纯文本内容 : (1) D O M 中 : 元素 . t e x t C o n t e n t (2) j q 中：$ 元素.text(“新内容”)
3.表单元素的值
(1)DOM中: 元素.value
(2)jq中: $元素.val(“新值”)
二、属性（3种）
1.字符串类型的HTML标准属性:
（1）DOM中: 2种:
1). 核心DOM 4个函数: 元素.getAttribute() or 元素. setAttribute() …
2). HTML DOM: 元素.属性名
（2） jq中: 2种:
1). $元素.attr(“属性名”, “新值”) 代替元素.getAttribute() setAttribute() …
2).问题: jQuery是函数库，不能用".属性名"方式访问
解决: jQuery中封装了一个新函数.prop(“属性名”, “新值”)，专门代替".属性名"方式来获取或修改元素的属性值
2.bool类型的HTML标准属性
（1）. DOM中: 元素.属性名，不能用核心DOM getAttribute()和setAttribute()
（2） $元素.prop(“属性名”, bool) 代替".属性名" ，因为在DOM中不能用getAttribute()和setAttribute()，所以在jq中也不能用attr()
3.自定义扩展属性:
（1）DOM中: 2种:
1). 核心DOM4个函数: 元素.getAttribute() 元素.setAttribute()
2). HTML5: 元素.dataset.自定义属性名
（2）jq中: 1种: $元素.attr() 代替元素.getAttribute() 元素.setAttribute()
强调: 因为自定义属性在DOM中就不能用".属性名"方式访问，所以jq中自然也就不能用.prop()来访问！因为prop()代替的就是".属性名"

<body>
  <h1>点击图片切换下一张</h1>
  <img src="img/1.jpg" alt="1">
  <script src="js/jquery-1.11.3.js"></script>
  <script>
    //单击图片，切换下一张
    //本例中: 用户点img触发变化
    $("img") .click(function(){
      //本例中: 就是要修改当前img自己
      var $img=$(this);
      //先获取当前img中alt属性的值转为整数
      var i=parseInt($img.attr("alt"));
      if(i<4){
      //如果alt值<4，则alt+1
           i++;
      }else{//否则如果alt值==4，则alt=1
        i=1;
      }
      //最后将alt的值拼成新的src路径，设置到img的src属性上，同时，将alt值再放回img的alt属性中，为下次点击做准备
      $img.attr({ src:`img/${i}.jpg`, alt:i })
    })

  </script>
</body>

三、样式
(1). DOM中:
a. 如果只修改一个css属性: 元素.style.css属性=值
b. 获取一个元素的css属性: var style=getComputedStyle(元素)
c. 如果批量修改一个元素的多个css属性: 元素.className=“class名”
(2). jq中:
a. 将修改css属性和获取css属性统一为一个: $元素.css(“css属性名”,“属性值”)
一个函数两用:
如果没传入新属性值，则自动执行读取旧属性值的操作，相当于getComputedStyle
如果传入新属性值，则自动切换为执行修改属性值的操作，相当于元素.style.css属性
b. 如果批量修改一个元素的多个css属性，依然使用class的方式。
1). 问题: DOM中的className如果只想操作一个class名而不影响当前元素上其它class名，非常不方便！因为className是一个完整的字符串，只能整体替换所有class。
2). 解决: jq定义两个4个函数，专门对class执行不同的操作：
i. $元素.addClass(“class名”) =》添加class
ii. $元素 . r e m o v e C l a s s (" c l a s s 名 ") = 》移除 c l a s s i i i . v a r b o o l =$ 元素.hasClass(“class名”) =》判断是否包含某个class
iv. $元素.toggleClass(“class名”) =》切换有没有一个class
①等效于:
if(有这个class hasClass()){
就移除class removeClass()
}else{
就添加class addClass()
}
②不能用toggleClass完全代替前边的addClass和removeClass 。因为addClass永远是添加class， removeClass永远是移除class，但是toggleClass没准: 一次添加，一次移除，再一次才是添加，再一次又是移除！
③总结: 只有确实在有和没有一个class之间来回切换时，才用toggleClass
例如：

<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    .btn {
      padding: 5px 10px;
      border-radius: 3px;
      border: 1px solid #aaa;
      outline: none;
    }
    /* 按钮抬起时的样式 */
    .up {
      background: #fff;
      color: #333;
    }
    /* 按钮按下时的样式 */
    .down {
      background: #ddd;
      color: #fff;
    }
  </style>
</head>
<body>
  <button class="btn up">双态按钮</button>
  <script src="js/jquery-1.11.3.js"></script>
  <script>
  //双态按钮: 让按钮的class在up和down之间切换
  //本例中: 用户点按钮触发变化
  $("button").click(function(){
    //本例中: 要修改的就是当前按钮自己
    var $btn=$(this);
    //本例中: 如果有down class，就移除down class，否则如果没有down class，就添加down class
     if($btn.hasClass("down")){
        $btn.removeClass("down")
     }else{
        $btn.addClass("down");
     }
  })
  </script>
</body>

qq_43102118

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js和jq对内容、属性、样式进行修改的区别

一、内容（3种）1.原始的html内容(1)DOM中：元素.innerHTML(2)jq中：元素.html("新内容")2.纯文本内容:(1)DOM中:元素.textContent(2)jq中:∗∗元素.html("新内容")2. 纯文本内容: (1)DOM中: 元素.textContent (2) jq中: **元素.html("新内容")2.纯文本内容:(1)DOM中:元素.textContent(2)jq中:∗∗元素.text(“新内容”)**3.表单元素的值(1)DOM中
复制链接

扫一扫