一 jQuery DOM操作

1 jQuery元素属性操作

这里主要是两个方法

  • prop( ) 操作元素固有属性

    1.       prop( 属性名, 属性值)  设置<br />            prop( 属性名)  获取

  • attr( ) 操作元素自定义的属性

    1.       attr(属性名,属性值) 设置<br />        attr(属性名)  获取<br />prop更适用于表单属性, 如：disabled / checked / selected 等
    1. <body>
    2.   <a href="http://www.baidu.com" title="百度一下">百度</a>
    3.   <input type="checkbox"> 选择
    4.   <div index="1" data-index="2" >我是div</div> <!-- 自己加的属性 index="1" data-index="2" -->
    5.   <script>
    7.       //prop 一般用于操作元素固有的属性
    8.       console.log($('a').attr('href')); //一个参数就是获取
    9.       console.log($('a').prop('href')); 
    11.       //attr一般用于操作给元素自定义的属性
    12.       console.log($('div').attr('index')); 
    13.       console.log($('div').prop('index')); //获取不到index属性的值
    15.       //将超链接跳转的路径改成中地的官网
    16.       $('a').prop('href','https://www.mapgis.com/') //两个参数就是设置
    18.       //将复选框默认选中
    19.       $('input').prop('checked','checked') 
    21.       //将div中data-index的值改成10
    22.       $('div').attr('data-index','10')
    24.   </script>
    25. </body>

    2 jQuery文本操作

    主要涉及三个方法

  • html( )

    1.          html() 获取<br />        html(内容) 设置

  • text( )

    1.          text() 获取<br />        text(内容) 设置

  • val( )

    1.          val() 获取<br />        val(内容) 设置<br />html相当于原生的innerHTML<br />text相当于原生的innerText<br />val相当于原生的value

    语法

  1. // 不带参数, 获取值
  2. $('选择器').html()
  4. // 带参数, 设置值
  5. $('选择器').html('值')

示例

  1.     <div>
  2.         <span>中国移动</span>
  3.     </div>
  5.     <input type="text" name="" id="">
  7.     <script>
  8.         //1,html():操作元素div标签体的内容 
  9.         console.log($('div').html());//一个参数是获取
  10.         $('div').html('<h1>中国联通</h1>') //两个参数就是设置
  12.         //2,text():操作元素div标签体的内容(纯文本)
  13.         console.log($('div').text());
  14.         $('div').text('<h1>中国联通</h1>')//没有样式,h1标签就变成了纯文本
  16.         //3,val():操作input文本框的内容
  17.         console.log($('input').val());
  18.         $('input').val('王五')
  20.     </script>

3 jQuery元素操作(操作节点)

1) 创建元素

  1. $('字符串类型的元素')
  1. //创建一个li元素
  2.         var li = $('<li>中国联通</li>')
  3.         console.log(li);

2) 添加元素

有4个方法

  • append() - 在被选元素的内部插入子元素, 在最后
  • prepend() - 在被选元素的内部插入子元素, 在最前
  • after() - 在被选元素的外部插入兄弟元素, 在后面

  • before() - 在被选元素的外部插入兄弟元素, 在前面

    1. <body>
    2.   <ul>
    3.       <li>中国移动</li>
    4.   </ul>
    6.   <div>我是div</div>
    8.   <script>
    9.       //创建一个li元素
    10.       var li = $('<li>中国联通</li>')
    11.       console.log(li);
    13.       //添加
    14.       $('ul').append(li)//在子元素的后面添加
    16.       //添加到子元素的前面
    17.       var li1 = $('<li>中国电信</li>')
    18.       $('ul').prepend(li1)
    19. </body>

    3) 删除元素

    如需删除元素和内容，一般可使用以下两个方法：

  • remove() - 删除被选元素（及其子元素）

  • empty() - 从被选元素中删除子元素

    1. //删除
    2. $('div').remove()//可以直接用要删除的元素区调用

    二 jQuery 效果

    1 显示与隐藏

    三个方法

  • show( ) 显示

  • hide( ) 隐藏
  • toggle( ) 切换

    语法

  1. // 不带参数, 直接显示
  2. $('选择器').show()
  4. // 带一个参数, 在time(毫秒)内显示
  5. $('选择器').show(time)
  7. // 带二个参数, 在time(毫秒)内显示, 显示完后执行回调
  8. $('选择器').show(time, callback)

示例

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  7.     <style>
  8.         div{
  9.             width: 150px;
  10.             height: 300px;
  11.             background: pink;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <button>显示</button>
  17.     <button>隐藏</button>
  18.     <button>切换</button>
  19.     <div></div>
  21.     <script>
  22.         //show可以不带参数,没有动画效果
  23.         //可以带一个参数,动画执行的时间
  24.         //后面还可以跟一个匿名函数(回调函数),可以在动画完成之后执行
  25.         //显示
  26.         $('button').eq(0).click(function(){
  27.             $('div').show(500,function(){
  28.                 alert(1)
  29.             })
  30.         })
  32.         //隐藏
  33.         $('button').eq(1).click(function(){
  34.             $('div').hide(500)
  35.         })
  37.         //切换
  38.         $('button').eq(2).click(function(){
  39.             $('div').toggle(500)
  40.         })
  41.     </script>
  42. </body>

2 滑入滑出

三个方法

  • slideDown( ) 下拉滑动
  • slideUp( ) 上拉滑动
  • slideToggle( ) 切换

语法跟show()一样

  1. <head>
  2.     <meta charset="UTF-8">
  3.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  4.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5.     <title>Document</title>
  6.     <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  7.     <style>
  8.         div{
  9.             width: 150px;
  10.             height: 300px;
  11.             background: pink;
  12.         }
  13.     </style>
  14. </head>
  15. <body>
  16.     <button>下拉滑动</button>
  17.     <button>上拉滑动</button>
  18.     <button>切换</button>
  19.     <div></div>
  21.     <script>
  22.         //slideDown可以不带参数,没有动画效果
  23.         //可以带一个参数,动画执行的时间
  24.         //后面还可以跟一个匿名函数(回调函数),可以在动画完成之后执行
  25.         //显示
  26.         $('button').eq(0).click(function(){
  27.             $('div').slideDown(1000,function(){
  28.                 alert(111)
  29.             })
  30.         })
  32.         //上拉滑动
  33.         $('button').eq(1).click(function(){
  34.             $('div').slideUp(1000)
  35.         })
  37.         //切换
  38.         $('button').eq(2).click(function(){
  39.             $('div').toggle(500)
  40.         })
  41.     </script>
  42. </body>

3 淡入淡出

四个方法

  • fadeIn( ) 淡入
  • fadeOut( ) 淡出
  • fadeToggle( ) 切换

  • fadeTo( ) 透明度

    1. <head>
    2.   <meta charset="UTF-8">
    3.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.   <title>Document</title>
    6.   <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    7.   <style>
    8.       div{
    9.           width: 150px;
    10.           height: 300px;
    11.           background: pink;
    12.           display: none;
    13.       }
    14.   </style>
    15. </head>
    16. <body>
    17.   <button>淡入</button>
    18.   <button>淡出</button>
    19.   <button>切换</button>
    20.   <button>修改透明度</button>
    21.   <div></div>
    23.   <script>
    24.       //淡入
    25.       $('button').eq(0).click(function(){
    26.           $('div').fadeIn(1000)
    27.       })
    29.       //淡出
    30.       $('button').eq(1).click(function(){
    31.           $('div').fadeOut(1000)
    32.       })
    34.       //切换
    35.       $('button').eq(2).click(function(){
    36.           $('div').fadeToggle(1000)
    37.       })
    39.       //透明度
    40.       $('button').eq(3).click(function(){
    41.           $('div').fadeTo(1000,0.5)//速度和透明度必须要写!!!  第一个参数是透明度变化的速度
    42.       })
    44.   </script>
    45. </body>

    4 停止动画

    stop( )
    如果不停止动画就会出现存在时间上的延迟(需要前面动画执行玩才能继续执行后面的动画), 可以使用stop停止动画
    注意: stop一定要加在动画的前面,表示要先停止之前的正在执行到动画,然后再开始现在的动画

    1. <script>
    2.       $(function() {
    3.           $('.wrap li').hover(function(){
    4.                //鼠标进入的时候,其他的li标签透明度：0.5
    5.               $(this).siblings().stop().fadeTo(500,0.5)
    6.           },function(){
    7.               // 鼠标离开，其他li 透明度改为 1
    8.               $(this).siblings().stop().fadeTo(500,1)
    9.           })    
    10.       });
    11.   </script>

    三 jQuery 遍历

    如果针对于同一类元素做不同操作，需要用到遍历元素

    each( )

    1. <head>
    2.   <meta charset="UTF-8">
    3.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.   <title>Document</title>
    6.   <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    7. </head>
    8. <body>
    9.   <div>1</div><!-- red -->
    10.   <div>2</div><!-- green -->
    11.   <div>3</div><!-- purple -->
    13.   <script>
    14.       //$('div').css('color','red')
    16.       //如果需要针对同一类的元素做不同的操作,就需要用到遍历元素
    18.       //最简单的遍历
    19.       $('div').each(function(){
    20.           console.log(this);//this就代表里面的每一个dom对象
    21.       })
    23.       //完整的遍历方式
    24.       $('div').each(function(i,e){//这两个参数名字随便起,但是第一个永远代表索引,第二个永远代表元素
    25.          console.log(i,e);
    26.       })
    27.       //完成需求
    28.       var arr = ['red','green','purple']
    29.       $('div').each(function(i,e){
    30.           //拿到每一个div设置样式
    31.           $(e).css('color',arr[i])
    32.       })
    33.   </script>
    34. </body>

    $.each( )

    1. <head>
    2.   <meta charset="UTF-8">
    3.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.   <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    6.   <title>Document</title>
    7. </head>
    8. <body>
    9.   <div>1</div>
    10.   <div>2</div>
    11.   <div>3</div>
    13.   <script>
    14.       //$.each(要遍历的对象,回调函数)
    15.       $.each($('div'),function(i,e){
    16.           console.log(i,e);
    17.       })
    18.   </script>
    19. </body>

    字面量对象遍历

    1. <script>
    3.       //$.each可以直接遍历字面量对象,i代表属性名,e代表属性值
    4.       $.each({
    5.           name:'张三',
    6.           age:23
    7.       },function(i,e){
    8.           console.log(i);//属性名 name age
    9.           console.log(e);//属性值 张三 23
    10.       })
    12.   </script>
    13. </body>

    四 事件

    绑定 on

    在选择元素上绑定一个或多个事件的事件处理函数。
    可以绑定1个或者多个事件处理程序
    可以实现动态绑定

    1. <head>
    2.   <meta charset="UTF-8">
    3.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.   <title>Document</title>
    6.   <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    7.   <style>
    8.       div{
    9.           width: 100px;
    10.           height: 100px;
    11.           background: pink;
    12.       }
    13.   </style>
    14. </head>
    15. <body>
    16.   <div></div>
    18.   <ul>
    19.       <p>111</p>
    20.       <p>222</p>
    21.       <p>333</p>
    22.   </ul>
    24.   <script>
    25.       //1,之前注册事件方式: 一次只能添加一个事件
    26.       /* $('div').click(function(){
    27.           $(this).css('background','red')
    28.       })
    30.       $('div').mouseenter(function(){//鼠标指针穿过事件
    31.           $(this).css('background','purple')
    32.       }) */
    34.       //2,on:一次可以添加若干个事件
    35.       $('div').on({
    36.           click : function(){
    37.               $(this).css('background','red')
    38.           },
    39.           mouseenter :function(){
    40.               $(this).css('background','purple')
    41.           }
    42.       })
    44.       //3.on可以实现动态绑定
    45.       //这个传统的绑定方式只能对于已经存在的元素进行绑定事件,如果这个p标签是动态生成的,那就没办法实现
    46.       /* $('ul p').click(function(){
    47.           alert($(this).text())
    48.       }) */
    50.       $('ul').on('click','p',function(){//一定要注意,调用的对象是p的父元素  第二个参数传选择器,将来就会选择ul下面的p元素
    51.           alert($(this).text())
    52.       })
    54.   </script>
    55. </body>

    解绑 off

    在选择元素上移除一个或多个事件的事件处理函数。

    1. <head>
    2.   <meta charset="UTF-8">
    3.   <meta http-equiv="X-UA-Compatible" content="IE=edge">
    4.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
    5.   <title>Document</title>
    6.   <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    7.   <style>
    8.       div{
    9.           width: 100px;
    10.           height: 100px;
    11.           background: pink;
    12.       }
    13.   </style>
    14. </head>
    15. <body>
    16.   <div></div>
    18.   <script>
    20.       //on:一次可以添加若干个事件
    21.       $('div').on({
    22.           click : function(){
    23.               $(this).css('background','red')
    24.           },
    25.           mouseenter :function(){
    26.               $(this).css('background','purple')
    27.           }
    28.       })
    30.       //off
    31.       //$('div').off() //解除div上的所有事件
    32.       $('div').off('click') //解除div上的点击事件
    34.   </script>
    35. </body>