jquery之html属性和dom属性操作

1>html属性修改

attr

设置属性值或者返回被选元素的属性值

removeAttr

从每一个匹配的元素中删除一个属性

prop

prop()获取在匹配的元素集中的第一个元素的属性值.它是对当前匹配到的dom对象设置属性。

removeProp

用来删除由.prop()方法设置的属性集

addClass（添加多个类名）

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

removeClass

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

toggleClass

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

html
获取值：
html() 是获取选中标签元素中所有的内容

设置值：设置该元素的所有内容会替换掉标签中原来的内容

text
获取值：

text() 获取匹配元素包含的文本内容

设置值：
设置该所有的文本内容

注意：值为标签的时候不会被渲染为标签元素只会被当做值渲染到浏览器中

val
获取值：
val()用于表单控件中获取值，比如input textarea select等等

<script src="./jquery-3.3.1.min.js"></script>
<script type="text/javascript">


   $(function(){

      $('button').click(function(){
         //jquery的属性操作  html属性操作 attr()
         //attr()如果有一个参数，表示获取值
               console.log($('#box').attr('id'));
         $('#box p').text()
      });
           
      //attr()如果设置两个值 表示设置属性
      $('#box').attr('class','foo');
           
      //设置多个值 使用对象存储，如果设置多个类名 不能使用attr()
      $('#box').attr({'class':'foo2',name:'huang'});

      //删除一个属性
      $('#box').removeAttr('name');
      $('#box').removeAttr('class');
           
      //删除多个属性
      $('#box').removeAttr('name class');

      //DOM属性操作
      //若获取结果有多个元素，则返回第一个元素的属性值
      console.log($('li').prop('class'));

      //设置值
      $('li').first().prop({'name':'app','name2':'app2'});
      console.log($('li').first());
           console.log($('li').prop('name'));

      //删除dom对象的name属性
      $('li').first().removeProp('name','name2');
      console.log($('li').prop('name'));

      //3.addClass() removeClass() 添加类 和删除类，对class属性操作
      $('span').addClass('span2 span3');
      $('span').removeClass('span2');
           
           //增加外部样式，实现动态效果
      var isBig = true;
      $('span').click(function(){

         if(isBig){
            $(this).addClass('active');
            isBig = false;
         }else{
            $(this).removeClass('active');
            isBig = true;
         }

      });

      //4.值属性的操作 text() html() val()

      //仅仅是获取文本
      console.log($('#box2').text());
           
      //获取的所有
      console.log($('#box2').html());
           
      //设置值
           // 标签当普通文本
      $('#box2').text("<a>baidu</a>");
           
           //解析成标签
      $('#box2').html("<a href='#'>baidu</a>");
           
      //获取值
      console.log($('input').val());
      $('input').val('写入的值');

    $('#btn').click(function(){
      var val = $('input').val();

      $("#box2").text(val);
   });

   //表单控件使用的一个方法
          //实时获取输入框的内容
   $('input').change(function(){
      console.log($(this).val());
   })


})

2>input属性操作

<script src="./jquery-3.3.1.min.js"></script>
<script type="text/javascript">

      $(function(){

          console.log($(':radio'));
          console.log($(':checkbox'));

          /*
           input
           *:button
           * :submit
           * :file
           * :text
           * :disabled
           *
           * */

          //1.获取单选框中的value值
          console.log($('input[type=radio]:checked').val());

          //2.复选框中value值 仅仅获取第一个值
          console.log($('input[type=checkbox]:checked').val());

          //3.下拉列表被选中的值
      var obj = $('#timespan option:selected');
      console.log(obj.val());

      //设置单选的值
              // 单选默认设置为value=113的选项
      $('input[type=radio]').val(['11']);

              // 多选默认设置为value=b和value=c的选项
      $('input[type=checkbox]').val(['a','c']);

      //设置下拉列表选中的值  这里面必须要用select
              // 设置下拉框的默认值，默认为一个参数，因为下拉框只展示一个，传多个则最后一个生效
      $('select').val(['3','2']);

      //文本框 设置值 和获取值
           $('input[type=text]').val(['455555555555555','6666666666']);
              console.log($('input[type=text]').val())

       })

3>DOM属性修改

3.1>插入操作
1.父元素.append(子元素) 父元素中添加新的元素
2.子元素.appendTo(父元素) 追加到某元素子元素添加到父元素
3.prepend() 前置添加，添加到父元素的第一个位置
4.prependTo() 后置添加，第一个元素添加到父元素中
5.父.after(子) 在匹配的元素之后插入内容与子.insertAfter(父)

6.父.before(子) 在匹配的元素之前插入内容与子.insertBefor(父)

3.2>复制操作
1.clone() 克隆匹配的DOM元素并且选中这些克隆的副本

2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)

3.3>替换操作
1.replaceWith()：将所有匹配的元素替换成指定的HTML或DOM元素。

2.replaceAll():用匹配的元素替换掉所有 selector匹配到的元素

3.4>删除操作
1.remove() 删除节点后，事件也会删除（简言之，删除了整个标签）
2.detach() 删除节点后，事件会保留
3.empty(): 清空元素中的所有后代节点

<script src="./jquery-3.3.1.min.js"></script>
<script type="text/javascript">

   $(function(){

      var oLi = document.createElement('li');
      oLi.innerHTML = 'dom创建的li';

      //追加元素
      $('ul').append('<li><a href="#">百度</a></li>');
      $('ul').append(oLi);
      //如果追加的内容是当前页面中已存在的元素，那么这些元素将从原位置上消失
      $('ul').append($('span'));

      //appendTo()
      $('<a href="#">hao123</a>').appendTo($('ul'));

      //prepend 插入到被选中的元素的第一个位置
      $('ul').prepend('<li>我是第一个元素</li>');
      $('<li>我是第0个元素</li>').prependTo($('ul'));

      //after  before
      $('ul').after('<h3>标题1，在ul后</h3>');

      //insertAfter
      $('<a href="#">在ul标签后2</a>').insertAfter($('ul'));

      $('ul').before('<h2>在ul标签前面1</h2>');

      //insertBefore
      $('<a href="#">在ul标签前面2</a>').insertBefore($('ul'));

      //复制操作 clone()
      $('button').click(function(){

               //注意带参数和不带参数的区别
               //默认不带参数，只克隆dom元素，带参数true，克隆元素的事件
         //副本具有与真身一样的事件处理能力-----完全克隆
         $(this).clone(true).text('我是克隆的').insertAfter($(this));

      });

jquery之html属性和dom属性操作

    //替换
   $('h3').replaceWith('<button>h3换成按钮</button>');

   $('<a href="#">所有按钮换成超链接</a>').replaceAll('button');

   //删除
   //empty() 清空了被选的元素的所有子元素（不含本身）
   $('ul').empty();

   //remove() 被选元素及所有子元素都很删除（包括自己）
   $('ul').remove();

   //detach()  移除匹配的节点元素并返回值

   var $btn = $('button').detach();
   console.log($btn[0]);
          // 用变量接收返回值（dom元素），可以再添加到其他地方，
   $('ul').append($btn[0]);

})

jquery之html属性和dom属性操作

相关推荐