昨日内容回顾

  1. jQuery   宗旨：write less do more
  2. 就是js的库，它是javascript的基础上封装的一个框架
  3. 在前端中，一个js文件就是一个模块
  5.  一、用法：
  6.     1.引入包
  7.     2.入口函数  $(fn(){});
  8.     3.事件处理  处理dom（文档中的所有的元素）
  10. 二、筛选选择器（重点）
  12. 三、动画
  13.     $('div').show(3000)/hide()/toggle()
  15.     slideDown/slideUp/slideToggle()
  17.     fadeOut()隐藏/fadeIn()/fadeTo(3000,0.5,fn)/fadeToggle
  19.     自定义动画
  20.     animate({},3000,fn)
  22.     用的非常多
  23.     stop(false,false);默认是false,false
  24.     第一个参数  后续动画继续执行
  25.     第二个参数  立即停止当前动画
  27. jquery都是方法
  28. $()
  30. 链式编程 因为jquery的，每个方法 返回的都是jquery对象
  31. $('div').click(function(){
  32.     this指的jsDOM对象
  33.     <!--
  34.     JSdom==>jquery     $(jsDom)
  35.     jquery===>jsDom    $('div')[index];  $('div').get(index);
  36.      -->
  38. }).css()............

一、jQuery 的属性操作

jquery 的属性操作模块分为四个部分：html 属性操作，dom 属性操作，类样式操作和值操作

  • html 属性操作：是对 html 文档中的属性进行读取，设置和移除操作。比如 attr()、removeAttr()
  • DOM 属性操作：对 DOM 元素的属性进行读取，设置和移除操作。比如 prop()、removeProp()
  • 类样式操作：是指对 DOM 属性 className 进行添加，移除操作。比如 addClass()、removeClass()、toggleClass()
  • 值操作：是对 DOM 属性 value 进行读取和设置操作。比如 html()、text()、val()

attr()

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

  1. //获取值：attr()设置一个属性值的时候 只是获取值
  2. var id = $('div').attr('id')
  3. console.log(id)
  4. var cla = $('div').attr('class')
  5. console.log(cla)
  6. //设置值
  7. //1.设置一个值 设置div的class为box
  8. $('div').attr('class','box')
  9. //2.设置多个值，参数为对象，键值对存储
  10. $('div').attr({name:'hahaha',class:'happy'})

举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         .app{
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div id="box" class="app" title="123">
  16.     </div>
  17.     <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  18.     <script type="text/javascript">
  19.         $(function () {
  20.             //获取属性值
  21.             var idValue = $('div').attr('id');
  22.             console.log(idValue);
  23.             //设置值
  24.             $('div').attr('title','890');
  25.         })
  26.     </script>
  27. </body>
  28. </html>

查看网页的代码，发现已经更改过来了

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图1

removeAttr()

移除属性

  1. //删除单个属性
  2. $('#box').removeAttr('name');
  3. $('#box').removeAttr('class');
  5. //删除多个属性
  6. $('#box').removeAttr('name class');

举例：点击按钮时，隐藏 div。

隐藏 div，通过移除 class 来实现

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         .app{
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <button>隐藏</button>
  16.     <div id="box" title="123">
  17.     </div>
  18.     <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  19.     <script type="text/javascript">
  20.         $(function () {
  21.             //获取属性值
  22.             var idValue = $('div').attr('id');
  23.             console.log(idValue);
  24.             //设置多个值
  25.             $('div').attr({'title':'890','class':'app'});
  26.             //点击时,移除属性
  27.             $('button').click(function () {
  28.                 //移除一个
  29.                 // $('div').removeAttr('class');
  30.                 //移除多个
  31.                 $('div').removeAttr('class title id');
  32.             })
  33.         })
  34.     </script>
  35. </body>
  36. </html>

网页效果：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图2

prop()

prop() 方法设置或返回被选元素的属性和值。

当该方法用于返回属性值时，则返回第一个匹配元素的值。

当该方法用于设置属性值时，则为匹配元素集合设置一个或多个属性/值对。

语法：

返回属性的值：

  1. $(selector).prop(property)

举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         .app{
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div id="box" title="123">
  16.         <p class="item1">1</p>
  17.         <p class="item2">2</p>
  18.         <p class="item3">3</p>
  19.         <p>4</p>
  20.     </div>
  21.     <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  22.     <script type="text/javascript">
  23.         $(function () {
  24.             // 返回属性的值
  25.             console.log($('p').prop('class'));  //item1
  26.         })
  27.     </script>
  28. </body>
  29. </html>

网页查看 console，返回 item1

设置属性和值：

  1. $(selector).prop(property,value)

举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         .app{
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div id="box" title="123">
  16.         <p class="item1">1</p>
  17.         <p class="item2">2</p>
  18.         <p class="item3">3</p>
  19.         <p>4</p>
  20.     </div>
  21.     <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  22.     <script type="text/javascript">
  23.         $(function () {
  24.             //设置属性的值，将最后一个p设置class为item4
  25.             $('p').eq(3).prop('class','item4');
  26.         })
  27.     </script>
  28. </body>
  29. </html>

网页查看 html 代码，发现 p 标签多了 class

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图3

设置多个属性和值：

  1. $(selector).prop({property:value, property:value,...})

举例：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         .app{
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <div id="box" title="123">
  16.         <p class="item1">1</p>
  17.         <p class="item2">2</p>
  18.         <p class="item3">3</p>
  19.         <p>4</p>
  20.     </div>
  21.     <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  22.     <script type="text/javascript">
  23.         $(function () {
  24.             //设置多个属性和值
  25.             $('p').eq(3).prop({'class':'item4','id':'it','title':'last'});
  26.         })
  27.     </script>
  28. </body>
  29. </html>

网页查看 html 代码，发现 p 标签多了一些属性

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图4

关于 attr()和 prop()的区别

先来一个小例子：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <style type="text/css">
  7.         .app{
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15.     <lable>男</lable><input type="radio" id='test1' name="sex" checked="checked"/>
  16.     <lable>女</lable><input type="radio" id='test2' name="sex" />
  17.     <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  18.     <script type="text/javascript">
  19.         $(function () {
  20.             //使用attr获取checked的值
  21.             console.log($('input').eq(0).attr('checked'));
  22.             //使用prop获取checked的值
  23.             console.log($('input').eq(0).prop('checked'));
  24.         })
  25.     </script>
  26. </body>
  27. </html>

网页查看 console

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图5

从结果中，可以看出 prop 返回的是 true，那么就可以进行 if 判断。

看下面的例子

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6. </head>
  7. <body>
  8.     男<input type="radio" id='test' name="sex"  checked/>
  9.     女<input type="radio" id='test2' name="sex" />
  10.     <button>提交</button>
  13.     <script type="text/javascript" src="jquery-3.3.1.js"></script>
  14.     <script type="text/javascript">
  15.         $(function(){
  16.             //获取第一个input
  17.             var el = $('input').first();
  18.             //undefined  因为attr是获取的这个对象属性节点的值，很显然此时没有这个属性节点，自然输出undefined
  19.             console.log(el.attr('style'));
  20.             // 输出CSSStyleDeclaration对象，对于一个DOM对象，是具有原生的style对象属性的，所以输出了style对象
  21.             console.log(el.prop('style'));
  22.             console.log(document.getElementById('test').style);
  25.             $('button').click(function(){
  26.                 alert(el.prop("checked") ? "男":"女");
  27.             })
  33.         })
  34.     </script>
  36. </body>
  37. </html>

网页效果：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图6

什么时候使用 attr()，什么时候使用 prop()？

1.是有 true,false 两个属性使用 prop();

2.其他则使用 attr();

addClass（添加多个类名）

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

  1. $('div').addClass("box");//追加一个类名到原有的类名

举例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         .box{
  8.             width: 100px;
  9.             height: 100px;
  10.             background-color: red;
  11.         }
  12.     </style>
  13. </head>
  14. <body>
  15. <div></div>
  16. <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  17. <script type="text/javascript">
  18.     $(function(){
  19.         // 添加指定的类名
  20.         $('div').addClass('box');
  21.     })
  22. </script>
  25. </body>
  26. </html>

网页效果：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图7

还可以为匹配的元素添加多个类名

  1. $('div').addClass("box box2");//追加多个类名

举例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         .box{
  8.             width: 200px;
  9.             height: 200px;
  10.             background-color: red;
  11.             line-height: 200px;
  12.             text-align: center;
  13.         }
  14.         .box2{
  15.             /*display: none;*/
  16.             border-radius: 10px;
  17.             border: 1px solid green;
  18.         }
  19.         .box3{
  20.             color: green;
  21.         }
  22.         .box4{
  23.             border-radius: 50%;
  24.         }
  27.     </style>
  28. </head>
  29. <body>
  30. <button>圆角</button>
  31. <button>变圆</button>
  32. <br/><br/>
  33. <div>高圆圆
  34. </div>
  35. <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  36. <script type="text/javascript">
  37.     $(function(){
  38.         //直接设置类名
  39.         $('div').addClass("box");
  42.         // 后执行操作  异步 ===>不等待
  43.         $('button').first().click(function(){
  44.             $('div').addClass("box2 box3");
  45.         })
  46.         //变圆
  47.         $('button').last().click(function(){
  48.             $('div').addClass('box3 box4');
  49.         })
  50.     })
  51. </script>
  54. </body>
  55. </html>

网页效果：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图8

removeClass

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

移除指定的类（一个或多个）

  1. $('div').removeClass('box')；

移除全部的类

  1. $('div').removeClass();

可以通过添加删除类名，来实现元素的显示隐藏

代码如下：

  1. var tag  = false;
  2. $('span').click(function(){
  3.     if(tag){
  4. $('span').removeClass('active')
  5. tag=false;
  6.     }else{
  7. $('span').addClass('active')
  8. tag=true;
  9.     }
  10. })

案例：

代码如下：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         .active{
  8.             color: red;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13. <ul>
  14.     <li class="item">张三</li>
  15.     <li class="item">李四</li>
  16.     <li class="item">王五</li>
  17. </ul>
  18. <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  19. <script type="text/javascript">
  20.     $(function(){
  21.         $('ul li').click(function(){
  22.             // this指的是当前点击的DOM对象 ,使用$(this)转化jquery对象
  23.             $(this).addClass('active').siblings('li').removeClass('active');
  24.         })
  25.     })
  26. </script>
  29. </body>
  30. </html>

网页效果：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图9

toggleClass

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

语法：toggleClass(‘box’)

  1. $('span').click(function(){
  2.     //动态的切换class类名为active
  3.     $(this).toggleClass('active')
  4. })

操作样式 3 种方式

第一种：通过修改 style

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         .active{
  8.             color: red;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13. <ul>
  14.     <li>舒畅</li>
  15.     <li>唐嫣</li>
  16.     <li>戚薇</li>
  17.     <li>韩雪</li>
  18. </ul>
  19. <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  20. <script type="text/javascript">
  21.     $(function(){
  22.         $('ul li').click(function(){
  23.             //通过修改style样式
  24.             $(this).css('color','red').siblings('li').css('color','black');
  25.         })
  26.     })
  27. </script>
  30. </body>
  31. </html>

网页效果：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图10

第二种：修改类名

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         .active{
  8.             color: red;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13. <ul>
  14.     <li>舒畅</li>
  15.     <li>唐嫣</li>
  16.     <li>戚薇</li>
  17.     <li>韩雪</li>
  18. </ul>
  19. <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  20. <script type="text/javascript">
  21.     $(function(){
  22.         $('ul li').click(function(){
  23.             //修改类名
  24.             $(this).addClass('active').siblings('li').removeClass('active');
  25.         })
  26.     })
  27. </script>
  30. </body>
  31. </html>

效果同上

第三种：使用 toggleClass 修改

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         .active{
  8.             color: red;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13. <ul>
  14.     <li>舒畅</li>
  15.     <li>唐嫣</li>
  16.     <li>戚薇</li>
  17.     <li>韩雪</li>
  18. </ul>
  19. <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  20. <script type="text/javascript">
  21.     $(function(){
  22.         $('ul li').click(function(){
  23.             //使用toggleClass
  24.             $(this).toggleClass('active').siblings('li').removeClass('active');
  25.         })
  26.     })
  27. </script>
  30. </body>
  31. </html>

效果同上

html

获取值：

语法;

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

  1. $('#box').html();

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

  1. $('#box').html('<a href="https://www.baidu.com">百度一下</a>');

举例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         /*.box{*/
  8.             /*color: red;*/
  9.         /*}*/
  10.     </style>
  11. </head>
  12. <body>
  13. <div class="box">
  14. </div>
  15. <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  16. <script type="text/javascript">
  17.     $(function(){
  18.         //设置值
  19.         var name = '张韶涵';
  20.         // 模板字符串 tab键上面的反引号 插入变量使用${变量名}
  21.         $('.box').html(`<p style="color: red;">${name}</p>`);
  22.         //使用加号比较麻烦
  23.         // $('.box').html('<p style="color: red;">'+name+'</p>');
  24.         //获取值
  25.         console.log($('.box').html());
  26.     })
  27. </script>
  30. </body>
  31. </html>

查看网页：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图11

查看 console

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图12

text

获取值：

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

语法：

  1. $('#box').text();

举例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  7.         /*.box{*/
  8.             /*color: red;*/
  9.         /*}*/
  10.     </style>
  11. </head>
  12. <body>
  13. <div class="box">
  14.     田馥甄
  15. </div>
  16. <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  17. <script type="text/javascript">
  18.     $(function(){
  19.         //获取text
  20.         console.log($('.box').text());
  21.         console.log($('.box').text().trim());  //去除左右空格
  22.     })
  23. </script>
  26. </body>
  27. </html>

网页效果：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图13

上面是默认的，下面是去除空格的，使用 trim()

设置值：

设置该所有的文本内容

  1. $('#box').text('<a href="https://www.baidu.com">百度一下</a>');

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

举例：

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style type="text/css">
  9.     </style>
  10. </head>
  11. <body>
  12. <div id="box">
  13.     田馥甄
  14. </div>
  15. <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
  16. <script type="text/javascript">
  17.     $(function(){
  18.         //设置值
  19.         $('#box').text('<a href="https://stackoverflow.com/">stackoverflow</a>');
  20.     })
  21. </script>
  24. </body>
  25. </html>

网页访问：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图14

val

获取值：

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

设置值：

$('input').val('设置了表单控件中的值')；

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">


    </style>
</head>
<body>
<input type="text" name="username" value="">
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        //设置值
        $('input').val('叶炫清');
    })
</script>


</body>
</html>

网页查看

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图15

二、使用 jQuery 操作 input 的 value 值

表单控件是我们的重中之重，因为一旦牵扯到数据交互，离不开 form 表单的使用，比如用户的注册登录功能等

那么通过上节知识点我们了解到，我们在使用 jquery 方法操作表单控件的方法：

$(selector).val()//设置值和获取值

看如下 HTML 结构：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <form action="">
            <input type="radio" name="sex"  value="112" />男
            <!-- 设置cheked属性表示选中当前选项 -->
            <input type="radio" name="sex"  value="11" checked="" />女
            <input type="radio" name="sex"  value="11" />gay


            <input type="checkbox" value="a" checked=""/>吃饭
            <input type="checkbox" value="b" />睡觉
            <input type="checkbox" value="c" checked=""/>打豆豆

    <!-- 下拉列表 option标签内设置selected属性 表示选中当前 -->
            <select name="timespan" id="timespan" class="Wdate"   >  
                <option value="1">8:00-8:30</option>  
                <option value="2" selected="">8:30-9:00</option>  
                <option value="3">9:00-9:30</option>  
            </select>  
            <input type="text" name="" id="" value="111" />
    </form>

</body>
</html>

页面展示效果：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图16

操作表单控件代码如下：

<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        // 一、获取值
        //1.获取单选框被选中的value值
        console.log($('input[type=radio]:checked').val());  //11


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


        //3.下拉列表被选中的值


        var obj = $("#timespan option:selected");
        // 获取被选中的值
        var  time  = obj.val();
        console.log(time); //2
        // 获取文本
        var  time_text  = obj.text();
        console.log("val:"+time+" text"+ time_text );  //val:2 text8:30-9:00


        //4.获取文本框的value值,不是输入框中的文字
        console.log($("input[type=text]").val()) //111


        // 二.设置值
        //1.设置单选按钮和多选按钮被选中项
        $('input[type=radio]').val(['112']);
        $('input[type=checkbox]').val(['a','b']);


        //2.设置下拉列表框的选中值，必须使用select
        /*因为option只能设置单个值，当给select标签设置multiple。
        那么我们设置多个值,就没有办法了，但是使用select设置单个值和多个值都可以
        */
        $('select').val(['3','2'])


        //3.设置文本框的value值
        $('input[type=text]').val('试试就试试')
    })
</script>

网页访问：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图17

查看 console

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图18

三、jQuery 的文档操作

之前 js 中咱们学习了 js 的 DOM 操作,也就是所谓的增删改查 DOM 操作。通过 js 的 DOM 的操作，大家也能发现，大量的繁琐代码实现我们想要的效果。那么 jQuery 的文档操作的 API 提供了便利的方法供我们操作我们的文档。

看一个之前我们 js 操作 DOM 的例子：

var oUl = document.getElementsByTagName('ul')[0];
var oLi = document.createElement('li');
oLi.innerHTML = '赵云';
oUl.appendChild(oLi);

1.插入操作

知识点 1：

语法：

父元素.append(子元素)

解释：追加某元素，在父元素中添加新的子元素。子元素可以为：stirng | element（js 对象） | jquery 元素

代码如下：

var oli = document.createElement('li');
oli.innerHTML = '哈哈哈';
$('ul').append('<li>1233</li>');
$('ul').append(oli);
$('ul').append($('#app'));

PS:如果追加的是 jquery 对象那么这些元素将从原位置上消失。简言之，就是一个移动操作。

追加操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul></ul>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        //追加某元素
        $('ul').append('<li class="item1">苏东坡</li>');
    })
</script>
</body>
</html>

访问网页：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图19

移动操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul></ul>
    <ol>
        <li class="li1">张碧晨</li>
        <li></li>
    </ol>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        //将.li1元素移动到ul里面
        $('ul').append($('.li1'));
    })
</script>
</body>
</html>

网页查看 html 代码：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图20

知识点 2：

语法：

子元素.appendTo(父元素)

解释：追加到某元素 子元素添加到父元素

$('<li>天王盖地虎</li>').appendTo($('ul')).addClass('active')

PS:要添加的元素同样既可以是 stirng、element(js 对象) 、jquery 元素

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul></ul>
    <ol>
        <li class="li1">张碧晨</li>
        <li></li>
    </ol>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        //追加某元素，将<li>王菲</li>添加到ul父元素，增加class和css样式
        $('<li>王菲</li>').appendTo($('ul')).addClass('itme2').css('color','red');
    })
</script>
</body>
</html>

网页访问：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图21

使用 for 循环添加元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul></ul>
    <ol>
        <li class="li1">张碧晨</li>
        <li></li>
    </ol>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        //追加某元素，将<li>王菲</li>添加到ul父元素，增加class和css样式
        for (var i = 1;i < 5;i++){
            $(`<li>王菲${i}</li>`).appendTo($('ul')).addClass('itme2').css('color','red');
        }
    })
</script>
</body>
</html>

网页访问：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图22

知识点 3：

语法：

父元素.prepend(子元素)；

解释：前置添加， 添加到父元素的第一个位置

$('ul').prepend('<li>我是第一个</li>')

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul></ul>
    <ol>
        <li class="li1">张碧晨</li>
        <li></li>
    </ol>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        //前置添加,添加到父元素的第一个位置
        $('ul').prepend('<li>我是第一个</li>');
    })
</script>
</body>
</html>

访问网页：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图23

知识点 4：

语法：

子元素.prependTo(父元素)；

解释：前置添加， 添加到父元素的第一个位置

$('<a href="#">路飞学诚</a>').prependTo('ul');

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul></ul>
    <ol>
        <li class="li1">张碧晨</li>
        <li></li>
    </ol>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        //前置添加,添加到父元素的第一个位置
        $('<li>我是第一个</li>').prependTo('ul');
    })
</script>
</body>
</html>

访问网页：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图24

和知识点 3 效果是一样的，代码顺序不一样而已。

知识点 5：

语法：

父元素.after(子元素)；
子元素.inserAfter(父元素);

解释：在匹配的元素之后插入内容 

$('ul').after('<h4>我是一个h3标题</h4>');
$('<h5>我是一个h2标题</h5>').insertAfter('ul');

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul></ul>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        //在匹配的元素之后插入内容
        $('ul').after('<h4>我是陈欧,我为自己代言</h4>');
        // $('<h4>我是陈欧,我为自己代言</h4>').insertAfter('ul');  //效果同上
    })
</script>
</body>
</html>

访问网页：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图25

知识点 6：

语法：

父元素.before(子元素)；
子元素.inserBefore(父元素)；

解释：在匹配的元素之前插入内容 

$('ul').before('<h3>我是一个h3标题</h3>');
$('<h2>我是一个h2标题</h2>').insertBefore('ul');

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul></ul>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        //在匹配的元素之后插入内容
        $('ul').before('<h4>一直被模仿,从未被超越</h4>');
        // $('<h4>一直被模仿,从未被超越</h4>').insertBefore('ul');  //效果同上
    })
</script>
</body>
</html>

访问网页：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图26

2.克隆操作

语法：

$(选择器).clone();

解释：克隆匹配的 DOM 元素

$('button').click(function() {

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

举例 1：克隆自己，不克隆事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button>操作</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('button').click(function () {
            //克隆匹配的DOM元素
            $(this).clone().insertAfter(this); //这里是克隆自己，不克隆事件
        })
    })
</script>
</body>
</html>

网页效果：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图27

举例 2：克隆自己，同时克隆事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button>操作</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('button').click(function () {
            //克隆匹配的DOM元素
            $(this).clone(true).insertAfter(this); //true表示克隆自己，副本具有与真身一样的事件处理能力
        })
    })
</script>
</body>
</html>

网页效果：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图28

在西游记里面，六耳猕猴拥有孙悟空所有的能力。这也是一样的！

3.修改操作

知识点 1：

语法：

$(selector).replaceWith(content);

将所有匹配的元素替换成指定的 string、js 对象、jquery 对象。

//将所有的h5标题替换为a标签
$('h5').replaceWith('<a href="#">hello world</a>')
//将所有h5标题标签替换成id为app的dom元素
$('h5').replaceWith($('#app'));

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h5>11</h5>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        //将所有的h5标题替换为a标签
        $('h5').replaceWith('<a href="#">hello world</a>');
    })
</script>
</body>
</html>

网页效果：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图29

知识点 2：

语法：

$('<p>哈哈哈</p>').replaceAll('h2');

解释：替换所有。将所有的 h2 标签替换成 p 标签。

$('<br/><hr/><button>按钮</button>').replaceAll('h4')

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h2>11</h2>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        //将所有的h2标签替换成p标签。
        $('<button>按钮</button>').replaceAll('h2')
    })
</script>
</body>
</html>

访问网页：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图30

4、删除操作

知识点 1：

语法：

$(selector).remove();

解释：删除节点后，事件也会删除（简言之，删除了整个标签）

$('ul').remove();

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button>操作</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('button').click(function () {
            var btn = $('button').eq(0).remove();   //删除节点后，事件也会删除
            $('body').append(btn);  //将删除的标签添加到body中
            //克隆匹配的DOM元素
            $(this).clone(true).insertAfter(this); //true表示克隆自己，副本具有与真身一样的事件处理能力
        })
    })
</script>
</body>
</html>

网页效果：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图31

发现事件没有了

知识点 2：

语法：

$(selector).detach();

解释：删除节点后，事件会保留

var $btn = $('button').detach();
//此时按钮能追加到ul中
$('ul').append($btn);

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button>操作</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('button').click(function () {
            var btn = $('button').eq(0).detach();   //删除节点后，事件会保留
            $('body').append(btn);  //将删除的标签添加到body中
            //克隆匹配的DOM元素
            $(this).clone(true).insertAfter(this); //true表示克隆自己，副本具有与真身一样的事件处理能力
        })
    })
</script>
</body>
</html>

网页效果：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图32

发现事件还存在

知识点 3：

语法：

$(selector).empty();

解释：清空选中元素中的所有后代节点

//清空掉ul中的子元素，保留ul
$('ul').empty();

举例：清除 body 所有元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<ul>
    <li>舒畅</li>
    <li>唐嫣</li>
    <li>戚薇</li>
    <li>韩雪</li>
</ul>
<button>操作</button>
<button>清屏</button>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $('button').eq(1).click(function () {
            $('body').empty();  //清理body所有元素
        })
    })
</script>
</body>
</html>

网页效果：

Day54 jQuery的属性操作,使用jQuery操作input的value值,jQuery的文档操作 - 图33

周末作业：

继续做小米官网