1

jQuery 选择器

jquery使用

jQuery的官网地址: https://jquery.com/,官网即可下载最新版本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>

</head>
<body>
<div></div>
<script>
    $(function () {
        $('div').hide()
    })

</script>



</body>
</html>
jq基本使用

JQ对象和DOM对象相互转换

DOM对象转换为JQ对象

  • var jQueryObject = $(DOM)

JQ对象转换为DOM对象

  1. jQuery对象[索引值]
  2. jQuery对象.get(索引值)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>

</head>
<body>
 <video src="mov.mp4" muted></video>
<script>
    // DOM对象转换为jq对象
    var myvideo = document.querySelector('video');
    var jQueryObject = $(myvideo);  // 把DOM对象转换为 jQuery 对象


    // JQ对象转换为DOM对象,两种方式
    // 1. jq对象[索引值]
    $('video')[0].play();

    // 2. jQuery对象.get(索引值)
    $('video').get(0).play()


</script>



</body>
</html>
示例代码

jQuery选择器

基础选择器
$('选择器')

image

层级选择器

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <script src="jquery.min.js"></script>
</head>
<body>
    <div>1</div>
    <div class="nav">2</div>
    <p>3</p>
    <ol>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ol>

    <ul>
        <li>ul1</li>
        <li>ul2</li>
        <li>ul3</li>
    </ul>

    <script>
        $(function () {
            console.log('div');
            console.log('.nav');
            console.log('ul li'); // 层级选择器
        })

    </script>


</body>
</html>
示例代码
筛选选择器

image

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ul>
    <ol>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ol>

    <script>
        $(function () {
            $('ul li:first').css('color', 'red');
            $('ul li:last').css('color', 'red');
            $('ul li:eq(2)').css('color', 'blue');

            $('ol li:odd').css('color', 'blue');
            $('ol li:even').css('color', 'red');

        })


    </script>

</body>
</html>
示例代码
筛选找其他节点

image

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="yeye">
        <div class="father">
            <div class="son">儿子</div>
        </div>

        <div class="fatherto">
            <p>fatherto</p>
        </div>
    </div>

    <div class="nav">
        <p>我是屁</p>
        <p>我是屁</p>
        <p>我是屁</p>
        <div>
            <p>我是p</p>
        </div>
    </div>
    <script>

        $(function () {
            // 查找父级别

            console.log($('.father').parent());
            console.log($('.son').parent());

            // 查找最亲的儿子
            console.log($('.yeye').children());
            console.log($('.father').children());

            // find
            console.log($('.yeye').find('div'));

            // 查找兄弟节点, 不包括自己
            console.log($('.father').siblings());

            // 查找当前元素之后的所有同级别元素
            console.log($('.father').nextAll());

            // 查找当前元素之前的所有同级别元素
            console.log($('.fatherto').prevAll());

            // 检查某个元素是否存在某个类 返回布尔值
            console.log($('div').hasClass('fatherto'));

            // 根据下标获取
            console.log($('.nav').children('p').eq(2));

        })

    </script>
</body>

</html>
示例代码
其他知识
  • jQuery 设置样式
$('div').css('属性', '值')
  • jQuery 里面的排他思想
// 想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);
  • 隐式迭代
$('div').hide();  // 页面中所有的div全部隐藏,不用循环操作
  • 链式编程
// 链式编程是为了节省代码量,看起来更优雅。
$(this).css('color', 'red').sibling().css('color', '');
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: red;
        }
    </style>
</head>

<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <div></div>
    <script>
        $(function () {
            // 1. 设置样式
            $('div').css('height', '200px')

            // 2. 排他思想
            $('button').click(function () {
                // 2. 当前的元素变化背景颜色
                $(this).css("background", "red");
                // 3. 其余的兄弟去掉背景颜色 隐式迭代
                $(this).siblings("button").css("background", "");
            })

            // 3. 隐式编程
            $('button').click(function () {
                $(this).css("background", "red").siblings('button').css('background', 'black')
            })

        })

    </script>

</body>

</html>
示例代码
 <script src="jquery.min.js"></script>
    <script>
        $('#left li').mouseover(function () {
            var index = $(this).index();
            $("#content div").eq(index).show().siblings().hide();

        })
</script>
案例-淘宝精品图

jquery样式操作

操作属性
  • 只写属性名,返回值
$('div').css('height')
  • 设置属性
$('div').css('height', '200px')
  • 对象的方式设置属性
$('div').css({
                "backgroundColor": "red",
                "width": "50px"
            })
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: yellow;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div></div>
    <script>
        $(function () {
            // 1. 只写属性,返回值
            height = $('div').css('height')
            console.log(height);

            // 2. 设置属性
            $('div').css('height', '200px')

            // 3. 对象的形式,设置属性
            $('div').css({
                "backgroundColor": "red",
                "width": "50px"
            })
        })
    </script>


</body>

</html>
示例代码
操作类样式
  • 添加类样式
$("div").addClass("current");
  • 删除类样式
$("div").removeClass("current");
  • 切换类样式
$("div").toggleClass("current");
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 150px;
            background-color: pink;
            margin: 100px auto;
            transition: all 0.5s;
        }

        .current {
            background-color: red;
            transform: rotate(360deg);
        }

        .current2 {
            width: 300px;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="current"></div>
    <script>
        $(function () {
            // 这个会影响原有的类,直接覆盖了
            // var div = document.querySelector('div')
            // div.className = current2;

            // 1. 添加样式  这个addClass相当于追加类名 不影响以前的类名
            $('div').addClass('current2')

            // 2 移除样式
            $('div').removeClass('current');

            $('div').click(function () {
                // 切换样式
                $(this).toggleClass('current')
            })
        })

    </script>


</body>

</html>
示例代码
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style-type: none;
        }

        .tab {
            width: 978px;
            margin: 100px auto;
        }

        .tab_list {
            height: 39px;
            border: 1px solid #ccc;
            background-color: #f1f1f1;
        }

        .tab_list li {
            float: left;
            height: 39px;
            line-height: 39px;
            padding: 0 20px;
            text-align: center;
            cursor: pointer;
        }

        .tab_list .current {
            background-color: #c81623;
            color: #fff;
        }

        .item_info {
            padding: 20px 0 0 20px;
        }

        .item {
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div class="tab">
        <div class="tab_list">
            <ul>
                <li class="current">商品介绍</li>
                <li>规格与包装</li>
                <li>售后保障</li>
                <li>商品评价(50000)</li>
                <li>手机社区</li>
            </ul>
        </div>
        <div class="tab_con">
            <div class="item" style="display: block;">
                商品介绍模块内容
            </div>
            <div class="item">
                规格与包装模块内容
            </div>
            <div class="item">
                售后保障模块内容
            </div>
            <div class="item">
                商品评价(50000)模块内容
            </div>
            <div class="item">
                手机社区模块内容
            </div>

        </div>
    </div>
    <script>
        $(function () {
            // 1. 点击自己,添加current 类,其他兄弟隐藏
            $('.tab_list li').click(function () {
                $(this).addClass('current').siblings('li').removeClass('current');
                // 2. 点击的同时得到自身的index
                var index = $(this).index();

                // 3. 让当前详情页显示,其他的隐藏
                $('.tab_con .item').eq(index).show().siblings().hide()

            })
        })
    </script>
</body>

</html>
案列-tab栏

jQuery效果动画

  • 显示隐藏:show() / hide() / toggle()
  • 划入画出:slideDown() / slideUp() / slideToggle() ;
  • 淡入淡出:fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
  • 自定义动画:animate() ;

注意:

动画或者效果一旦触发就会执行,如果多次触发,就造成多个动画或者效果排队执行。

jQuery为我们提供另一个方法,可以停止动画排队:stop() ;

显示隐藏
  1. show(speed, [easing], [fn])
  2. hide(speed, [easing], [fn])
  3. toggle(speed, [easing], [fn])
  • 参数都可以省略
  • speed, 显示速度的字符串,有(’slow’, ‘normal’, ‘fast’)或者动画的时长,单位为毫秒,如1000
  • easing, 指切换的效果,默认’swing’, 可用参数 ‘linear’
  • fn: 回调函数,动画执行完后会执行这个函数
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
    <style>
        div {
            height: 100px;
            width: 100px;
            background-color: red;
            display: none;
        }
    </style>
</head>

<body>
    <div></div>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <script>
        $(function () {
            // 显示,’slow’, ‘normal’, ‘fast’ 或者毫秒
            $('button').eq(0).click(function () {
                $('div').show('slow', 'linear', function () {
                    alert(111)
                })
            });

            $('button').eq(1).click(function () {
                $('div').hide('slow');
            });

            $('button').eq(2).click(function () {
                $('div').toggle(1000)
            })
        })

    </script>

</body>

</html>
示例代码
滑入滑出
  1. slideDown(speed, [easing], [fn])   下滑
  2. slideUp(speed, [easing], [fn])        上滑
  3. slideToggle(speed, [easing], [fn])  滑动切换
  • 参数都可以省略
  • speed, 显示速度的字符串,有(’slow’, ‘normal’, ‘fast’)或者动画的时长,单位为毫秒,如1000
  • easing, 指切换的效果,默认’swing’, 可用参数 ‘linear’
  • fn: 回调函数,动画执行完后会执行这个函数
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            width: 150px;
            height: 300px;
            background-color: pink;
            display: none;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        $(function () {
            // 下滑
            $('button').eq(0).mouseover(function () {
                $('div').slideDown(1000);
            })
            // 上滑
            $('button').eq(1).mouseover(function () {
                $('div').slideUp();
            })

            // 切换滑动
            $('button').eq(2).mouseover(function () {
                $('div').slideToggle();
            })

        })

    </script>
</body>

</html>
示例代码
淡入淡出
  1. fadeIn(speed, [easing], [fn])      淡入
  2. fadeOut(speed, [easing], [fn])    淡出
  3. fadeToggle(speed, [easing], [fn])  淡入出切换
  • 参数都可以省略
  • speed, 显示速度的字符串,有(’slow’, ‘normal’, ‘fast’)或者动画的时长,单位为毫秒,如1000
  • easing, 指切换的效果,默认’swing’, 可用参数 ‘linear’
  • fn: 回调函数,动画执行完后会执行这个函数
  1. fadeTo(speed, opacity,[easing], [fn])  渐进方式调整到指定不透明
  • opacity 透明度必须写,取值 0~ 1 之间
  • speed, 显示速度的字符串,有(’slow’, ‘normal’, ‘fast’)或者动画的时长,单位为毫秒,如1000
  • easing, 指切换的效果,默认’swing’, 可用参数 ‘linear’
  • fn: 回调函数,动画执行完后会执行这个函数
      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          <style>
              div {
                  width: 150px;
                  height: 300px;
                  background-color: pink;
                  display: none;
              }
          </style>
          <script src="jquery.min.js"></script>
      </head>
      
      <body>
          <button>淡入效果</button>
          <button>淡出效果</button>
          <button>淡入淡出切换</button>
          <button>修改透明度</button>
          <div></div>
          <script>
              $(function () {
                  // 淡入
                  $('button').eq(0).click(function () {
                      $('div').fadeIn(1000)
                  })
      
                  // 淡出
                  $('button').eq(1).click(function () {
                      $('div').fadeOut(1000)
                  })
      
                  // 淡入淡出切换
                  $('button').eq(2).click(function () {
                      $('div').fadeToggle(1000)
                  })
      
                  // 修改透明度
                  $('button').eq(3).click(function () {
                      $('div').fadeTo(1000, 0.5)
                  })
              })
      
          </script>
      </body>
      
      </html>
      示例代码
      stop()阻止动画排队现象
      • stop() 阻止动画排队现象
      • hover 事件切换 复合写法
      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          <style>
              * {
                  margin: 0;
                  padding: 0;
              }
      
              li {
                  list-style-type: none;
              }
      
              a {
                  text-decoration: none;
                  font-size: 14px;
              }
      
              .nav {
                  margin: 100px;
              }
      
              .nav>li {
                  position: relative;
                  float: left;
                  width: 80px;
                  height: 41px;
                  text-align: center;
              }
      
              .nav li a {
                  display: block;
                  width: 100%;
                  height: 100%;
                  line-height: 41px;
                  color: #333;
              }
      
              .nav>li>a:hover {
                  background-color: #eee;
              }
      
              .nav ul {
                  display: none;
                  position: absolute;
                  top: 41px;
                  left: 0;
                  width: 100%;
                  border-left: 1px solid #FECC5B;
                  border-right: 1px solid #FECC5B;
              }
      
              .nav ul li {
                  border-bottom: 1px solid #FECC5B;
              }
      
              .nav ul li a:hover {
                  background-color: #FFF5DA;
              }
          </style>
          <script src="jquery.min.js"></script>
      </head>
      
      <body>
          <ul class="nav">
              <li>
                  <a href="#">微博</a>
                  <ul>
                      <li>
                          <a href="">私信</a>
                      </li>
                      <li>
                          <a href="">评论</a>
                      </li>
                      <li>
                          <a href="">@我</a>
                      </li>
                  </ul>
              </li>
              <li>
                  <a href="#">微博</a>
                  <ul>
                      <li>
                          <a href="">私信</a>
                      </li>
                      <li>
                          <a href="">评论</a>
                      </li>
                      <li>
                          <a href="">@我</a>
                      </li>
                  </ul>
              </li>
              <li>
                  <a href="#">微博</a>
                  <ul>
                      <li>
                          <a href="">私信</a>
                      </li>
                      <li>
                          <a href="">评论</a>
                      </li>
                      <li>
                          <a href="">@我</a>
                      </li>
                  </ul>
              </li>
              <li>
                  <a href="#">微博</a>
                  <ul>
                      <li>
                          <a href="">私信</a>
                      </li>
                      <li>
                          <a href="">评论</a>
                      </li>
                      <li>
                          <a href="">@我</a>
                      </li>
                  </ul>
              </li>
          </ul>
          <script>
              $(function () {
                  // 第一种
                  // 鼠标经过nav下的亲li 显示他的ul儿子们
                  // $('.nav>li').mouseover(function () {
                  //     $(this).children('ul').slideDown()
                  // })
      
                  // // 鼠标离开,隐藏他的ul儿子们
                  // $('.nav>li').mouseout(function () {
                  //     $(this).children('ul').slideUp();
                  // })
      
                  // 第二钟
                  // 事件切换 hover 就是鼠标经过和离开的复合写法
                  // $('.nav>li').hover(function () {
                  //     $(this).children('ul').slideDown(200);
                  // }, function () {
                  //     $(this).children('ul').slideUp(200);
                  // })
      
                  // 这里发现快速移动的话,其他的ul也显示
      
                  // 第三种,阻止这个bug  stop阻止
                  $('.nav>li').hover(function () {
                      $(this).children('ul').stop().slideToggle(200)
                  })
      
              })
      
      
          </script>
      </body>
      
      </html>
      示例代码
      自定义动画
      1. animate(params, opacity,[easing], [fn])  
      • speed, 显示速度的字符串,有(’slow’, ‘normal’, ‘fast’)或者动画的时长,单位为毫秒,如1000
      • easing, 指切换的效果,默认’swing’, 可用参数 ‘linear’
      • fn: 回调函数,动画执行完后会执行这个函数
      • params 想要更改样式的属性,以对象的形式,必须写,属性名可以不带引号,如果符合属性,采用驼峰命名,其他后面的参数可以省略
      <!DOCTYPE html>
      <html lang="en">
      
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>Document</title>
          <script src="jquery.min.js"></script>
          <style>
              div {
                  position: absolute;
                  width: 200px;
                  height: 200px;
                  background-color: pink;
              }
          </style>
      </head>
      
      <body>
          <button>动起来</button>
          <div></div>
          <script>
              $(function () {
                  $("button").click(function () {
                      $("div").animate({
                          left: 500,
                          top: 300,
                          opacity: .4,
                          width: 500
                      }, 500);
                  })
              })
          </script>
      
      </body>
      
      </html>
      示例代码
      事件切换
      1. hover([over, ], out)  其中over和out为两个函数
      • over:鼠标移到元素上要触发的函数(相当于mouseenter)
      • out:鼠标移出元素要触发的函数(相当于mouseleave)
      • 如果只写一个函数,则鼠标经过和离开都会触发它
      $(".nav>li").hover(function() {
              // stop 方法必须写到动画的前面
              $(this).children("ul").stop().slideToggle();
      });
      示例代码
      <!doctype html>
      <html>
      
      <head>
          <meta charset="utf-8">
          <title>手风琴案例</title>
      
          <style type="text/css">
              * {
                  margin: 0;
                  padding: 0;
              }
      
              img {
                  display: block;
              }
      
              ul {
                  list-style: none;
              }
      
              .king {
                  width: 852px;
                  margin: 100px auto;
                  background: url(images/bg.png) no-repeat;
                  overflow: hidden;
                  padding: 10px;
              }
      
              .king ul {
                  overflow: hidden;
              }
      
              .king li {
                  position: relative;
                  float: left;
                  width: 69px;
                  height: 69px;
                  margin-right: 10px;
              }
      
              .king li.current {
                  width: 224px;
              }
      
              .king li.current .big {
                  display: block;
              }
      
              .king li.current .small {
                  display: none;
              }
      
              .big {
                  width: 224px;
                  display: none;
              }
      
              .small {
                  position: absolute;
                  top: 0;
                  left: 0;
                  width: 69px;
                  height: 69px;
                  border-radius: 5px;
              }
          </style>
      
      </head>
      
      <body>
          <script src="js/jquery.min.js"></script>
          <script type="text/javascript">
              $(function () {
                  // 1. 鼠标经过某个小li, 两步操作
                  $('.king li').mouseover(function () {
                      // 1.1 当前小li 宽度变为 224px, 同时里面的小图片淡出,大图片淡入
                      $(this).stop().animate({
                          width: 224
                      }).find('.small').stop().fadeOut().siblings('.big').stop().fadeIn();
      
                      // 1.2 其他兄弟li 变成69px, 小图片淡入,大图片淡出
                      $(this).siblings('li').stop().animate({
                          width: 69
                      }).find('.small').stop().fadeIn().siblings('.big').stop().fadeOut();
                  })
              })
          </script>
          <div class="king">
              <ul>
                  <li class="current">
                      <a href="#">
                          <img src="images/m1.jpg" alt="" class="small">
                          <img src="images/m.png" alt="" class="big">
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <img src="images/l1.jpg" alt="" class="small">
                          <img src="images/l.png" alt="" class="big">
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <img src="images/c1.jpg" alt="" class="small">
                          <img src="images/c.png" alt="" class="big">
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <img src="images/w1.jpg" alt="" class="small">
                          <img src="images/w.png" alt="" class="big">
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <img src="images/z1.jpg" alt="" class="small">
                          <img src="images/z.png" alt="" class="big">
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <img src="images/h1.jpg" alt="" class="small">
                          <img src="images/h.png" alt="" class="big">
                      </a>
                  </li>
                  <li>
                      <a href="#">
                          <img src="images/t1.jpg" alt="" class="small">
                          <img src="images/t.png" alt="" class="big">
                      </a>
                  </li>
              </ul>
      
          </div>
      
      
      
      
      </body>
      
      </html>
      案列-手风琴


      相关资料: https://github.com/1515806183/html-code/tree/master/jQuery-01

      posted @ 2020-03-18 16:40  小白森  阅读(116)  评论(0编辑  收藏