jquery教程之属性操作函数

老雷PHP全栈开发

发布于 2020-07-02 15:14:52

7870

发布于 2020-07-02 15:14:52

文章被收录于专栏：老雷PHP全栈开发老雷PHP全栈开发

jquery教程之属性操作函数

一、html 取得第一个匹配元素的html内容

获取

  $('p').html();

设置

  $('p').html('设置html内容');

二、text 取得所有匹配元素的内容

  $('p').text();

三、val 获得匹配元素的当前值,主要是表单元素

  $('textarea').val();
  $('textarea').val('设置val');

四、类名class

  <p class="selected"></p>

addClass 为每个匹配的元素添加指定的类名

    $("p").addClass("selected")

removeClass 从所有匹配的元素中删除全部或者指定的类。

    $("p").removeClass("selected");

toggleClass 如果存在（不存在）就删除（添加）一个类。

    $("p").toggleClass("selected");

五、属性

1.attr 推荐使用

attr(k,v)

attr 设置或者获取属性

      var title=$("p").attr("title")
      $("p").attr("title", "设置title");
      $("check").attr("checked",true);

removeAttr 删除属性

$("p").removeAttr("title")

2.prop 不推荐

prop 是针对元素本身就带有的固有属性，比如id class title name checked等

prop 设置或者获取属性

      var title=$("p").prop("title")
      $("p").prop("title","设置title");
      $("#check").prop("checked",true)
      $("#check").proQp("checked",false)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      .a{
        color: #0F8E82;
      }
      .b{
        color: #E51400;
      }
      [title]{
        color: red;
      }
      [tt]{
        font-size: 36px;
      }
</style>
  </head>
  <body>
    <div id="el">
      <p>第一段</p>
      <p>第二段</p>
      <textarea>val内容</textarea>
      <div>
        <button onclick='$("#el").addClass("a")'>addClass</button>
        <button onclick='$("#el").removeClass("a")'>removeClass</button>
        <button onclick='$("#el").toggleClass("a")'>toggleClass</button>
      </div>
      <div>
        <input type="checkbox" id="check" />
      </div>
      <div>
        <button onclick='$("#check").attr("checked",true)'>checked true</button>
        <button onclick='$("#check").attr("checked",false)'>checked false</button>
        <button onclick='$("#check").removeAttr("checked")'>checked remove</button>  
        <button onclick='$("#el").attr("tt","增加attr")'>add tt </button>
        <button onclick='$("#el").removeAttr("tt")'>remove tt</button>
        <button onclick='$("#el").attr("title","aaa")'>add title</button>
        <button onclick='$("#el").removeAttr("title")'>remove title</button>
      </div>
      <div>
        
        <button onclick='$("#check").prop("checked",true)'>checked true</button>
        <button onclick='$("#check").prop("checked",false)'>checked false</button>     
        
      </div>
      
    </div>
    <script src="../jquery.min.js"></script>
    <script>
      console.log($('#el').html())
      $('#el p:first').html('p first')
      console.log($('p').text())
      $('textarea').val('设置咯')
      console.log($('textarea').val());
      $('#el').addClass("a")
</script>
  </body>
</html>

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2019-12-04，如有侵权请联系 cloudcommunity@tencent.com 删除

html