JQ01

1、使用js的缺点
在这里插入图片描述
innerText的兼容性问题：低版本火狐浏览器不支持
textContent：火狐支持，ie678不支持

2、JQ初体验
1）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      height: 200px;
      margin-bottom: 10px;
      background-color: #a43035;
      display: none;
    }
  </style>
  
  <!--1. 需要引入jQuery文件-->
  <script src="jquery-1.12.4.js"></script>
  <script>
    
    //2. 入口函数的标准
    $(document).ready(function(){
      //注册事件，把on去掉，是一个方法
      $("#btn1").click(function () {
        //隐式迭代：偷偷的遍历，jQuery会自动的遍历，不需要我们遍历。
        $("div").show(1000);
      });
      
      $("#btn2").click(function () {
        $("div").text("我是内容");
      });
    });
  </script>
  
</head>
<body>


<input type="button" value="btn1" id="btn1">
<input type="button" value="设置内容" id="btn2">

<div></div>
<div></div>
<div></div>




</body>
</html>

在这里插入图片描述
2）什么是jq?
js库：把一些常用到的方法写到一个单独的js文件，使用时直接去引用就可以了。学习jq，就是学习其中封装的方法。
3）jq的版本
版本繁多。
1.x版本：能兼容ie678
2.x版本：不兼容ie678
上述版本已不再更新
3.x版本：非常精简，不兼容ie678
压缩版，适用于生产环境，文件较小，删除了注释，换行，空格等，但基本没有阅读性
未压缩版：
适用于学习与开发环境，源码清晰，方便阅读
在这里插入图片描述
4）jq的入口函数
入口函数的目的是等待jq文件加载完成。引入jq文件的script标签推荐写在body标签的最后面，这样可以省去入口函数，但还是建议写上入口函数。

//引入jq文件
  <script src="jquery-1.12.4.js"></script>
 //写入口函数
 第一种写法:
 $(document).ready(function(){...
 });
 第二种写法(jq不存在覆盖问题)：
 $(function(){
 //里面可以写js代码
 });
 js的入口函数：JS的window.onload事件必须要等到所有内容，以及外部图片之类的文件加载完之后，才会去执行。
 window.onload=function(){
};
jq与js的入口函数之间的先后关系：js的入口函数要比jq的入口函数执行得要晚一些

在这里插入图片描述
5）jq对象与DOM（js）对象的区别：
js对象：使用js的方式获取到的元素就是js对象
例如通过document.getElementById该方法
jq对象：使用jq的方式获取到的元素就是jq对象
例如$(“li”);//获取所有的li，可自行用美元符标识
jq对象与js对象间的联系：
jq对象就是js对象的一个集合，是一个伪数组，里面存放了大量的js对象
在这里插入图片描述
jq对象与js对象间的区别：
js对象不能调用jq对象的方法
jq对象也无法调用js对象的方法

只要通过以下方式就可以把js对象转为jq对象

$(js对象名).text("hh");//用美元符即可

jq对象转为js对象

var $li=$("li");
$li[0].style.backgroundColor="red";//通过数组的方式取出
或get方法：
$li.get(0)

总结：
在这里插入图片描述
6）$符号的实质
在取名时，仅是为了区分这是jq对象。
$其实是一个函数，在使用它时须跟小括号
参数不同，它的功能也不同
①参数是一个函数，将被作为入口函数使用

$(function(){...});

②参数为一js对象，将会把该对象转换为jq对象

$(domObj);

③参数为一字符串，用于找对象

$("div")
$("#id")
$(".className")

3、JQ的基本选择器
1）
在这里插入图片描述

与css中的用法一样。

交集选择
并集选择

层级选择器

过滤选择器：jq特有，冒号打头

筛选选择器

2）mouseenter与mouseseover的区别
mouseover：鼠标经过事件
mouseout：鼠标离开事件
jq专属事件:
mouseenter:鼠标进入事件
mouseleave鼠标离开事件
在这里插入图片描述

案例：下拉菜单
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    
    ul {
      list-style: none;
    }
    
    .wrap {
      width: 330px;
      height: 30px;
      margin: 100px auto 0;
      padding-left: 10px;
      background-image: url(imgs/bg.jpg);
    }
    
    .wrap li {
      background-image: url(imgs/libg.jpg);
    }
    
    .wrap > ul > li {
      float: left;
      margin-right: 10px;
      position: relative;
    }
    
    .wrap a {
      display: block;
      height: 30px;
      width: 100px;
      text-decoration: none;
      color: #000;
      line-height: 30px;
      text-align: center;
    }
    
    .wrap li ul {
      position: absolute;
      top: 30px;
      display: none;
    }
  </style>
  <script src="../jquery-1.12.4.js"></script>
  <script>
    $(function () {
      
      //mouseover：鼠标经过事件
      //mouseout:鼠标离开事件
      
      //mouseenter:鼠标进入事件
      //mouseleave：鼠标离开事件
      
      var $li = $(".wrap>ul>li");
      
      //给li注册鼠标经过事件，让自己的ul显示出来
      $li.mouseenter(function () {
        //找到所有的儿子，并且还得是ul
        $(this).children("ul").show();
      });
  
      $li.mouseleave(function () {
        $(this).children("ul").hide();
      });
      
      
    });
  </script>
</head>
<body>
<div class="wrap">
  <ul>
    <li>
      <a href="javascript:void(0);">一级菜单1</a>
      <ul class="ul">
        <li><a href="javascript:void(0);">二级菜单11</a></li>
        <li><a href="javascript:void(0);">二级菜单12</a></li>
        <li><a href="javascript:void(0);">二级菜单13</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);">一级菜单2</a>
      <ul>
        <li><a href="javascript:void(0);">二级菜单21</a></li>
        <li><a href="javascript:void(0);">二级菜单22</a></li>
        <li><a href="javascript:void(0);">二级菜单23</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);">一级菜单3</a>
      <ul>
        <li><a href="javascript:void(0);">二级菜单31</a></li>
        <li><a href="javascript:void(0);">二级菜单32</a></li>
        <li><a href="javascript:void(0);">二级菜单33</a></li>
      </ul>
    </li>
  </ul>
</div>

</body>
</html>

突出显示案例：
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }
    
    ul {
      list-style: none;
    }
    
    body {
      background: #000;
    }
    
    .wrap {
      margin: 100px auto 0;
      width: 630px;
      height: 394px;
      padding: 10px 0 0 10px;
      background: #000;
      overflow: hidden;
      border: 1px solid #fff;
    }
    
    .wrap li {
      float: left;
      margin: 0 10px 10px 0;
      
    }
    
    .wrap img {
      display: block;
      border: 0;
    }
  </style>
  
  <script src="../jquery-1.12.4.js"></script>
  <script>
    $(function () {
      
      $(".wrap>ul>li").mouseenter(function () {
        
        $(this).css("opacity", "1").siblings().css("opacity", "0.4");
      });
      
      $(".wrap").mouseleave(function () {
        //让所有的li都变亮
        //$("li");
        //$(".wrap li");
        //$(".wrap>ul>li")
        
        //$(this).children().children("li");
        $(this).find('li').css("opacity", 1);
      });
    });
  </script>
  
</head>
<body>
<div class="wrap">
  <ul>
    <li><a href="#"><img src="images/01.jpg" alt=""/></a></li>
    <li><a href="#"><img src="images/02.jpg" alt=""/></a></li>
    <li><a href="#"><img src="images/03.jpg" alt=""/></a></li>
    <li><a href="#"><img src="images/04.jpg" alt=""/></a></li>
    <li><a href="#"><img src="images/05.jpg" alt=""/></a></li>
    <li><a href="#"><img src="images/06.jpg" alt=""/></a></li>
  </ul>
</div>
</body>
</html>

jq中对象调方法可一直调下去（链式编程）
在这里插入图片描述

手风琴案例：



<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {padding: 0;margin: 0;}
    ul { list-style-type: none;}
    
    .parentWrap {
      width: 200px;
      text-align:center;
      
    }
    
    .menuGroup {
      border:1px solid #999;
      background-color:#e0ecff;
    }
    
    .groupTitle {
      display:block;
      height:20px;
      line-height:20px;
      font-size: 16px;
      border-bottom:1px solid #ccc;
      cursor:pointer;
    }
    
    .menuGroup > div {
      height: 200px;
      background-color:#fff;
      display:none;
    }
  
  </style>
  
  <script src="jquery-1.12.4.js"></script>
  <script>
      $(function () {
          //思路分析：
          //1. 给所有的span注册点击事件，让当前span的兄弟div显示出来
          $(".groupTitle").click(function () {
            //下一个兄弟：nextElementSibling
            
            //链式编程：在jQuery里面，方法可以一直调用下去。
            $(this).next().slideDown(200).parent().siblings().children("div").slideUp(200);
          });
      });
  </script>
</head>
<body>
<ul class="parentWrap">
  <li class="menuGroup">
    <span class="groupTitle">标题1</span>
    <div>我是弹出来的div1</div>
  </li>
  <li class="menuGroup">
    <span class="groupTitle">标题2</span>
    <div>我是弹出来的div2</div>
  </li>
  <li class="menuGroup">
    <span class="groupTitle">标题3</span>
    <div>我是弹出来的div3</div>
  </li>
  <li class="menuGroup">
    <span class="groupTitle">标题4</span>
    <div>我是弹出来的div4</div>
  </li>
</ul>
</body>
</html>

案例：淘宝精品
<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      font-size: 12px;
    }
    
    ul {
      list-style: none;
    }
    
    a {
      text-decoration: none;
    }
    
    .wrapper {
      width: 298px;
      height: 248px;
      margin: 100px auto 0;
      border: 1px solid pink;
      overflow: hidden;
    }
    
    #left, #center, #right {
      float: left;
    }
    
    #left li, #right li {
      background: url(images/lili.jpg) repeat-x;
    }
    
    #left li a, #right li a {
      display: block;
      width: 48px;
      height: 27px;
      border-bottom: 1px solid pink;
      line-height: 27px;
      text-align: center;
      color: black;
    }
    
    #left li a:hover, #right li a:hover {
      background-image: url(images/abg.gif);
    }
    
    #center {
      border-left: 1px solid pink;
      border-right: 1px solid pink;
    }
  </style>
  
  <script src="../jquery-1.12.4.js"></script>
  <script>
    $(function () {
      
      //找不到对象
      $(function () {
        $("#left>li").mouseenter(function () {
          $("#center>li:eq(" + $(this).index() + ")").show().siblings().hide();
        });
        $("#right>li").mouseenter(function () {
          $("#center>li").eq($(this).index() + 9).show().siblings().hide();
        });
      })
    });
    
    //      $("#left>li").mouseenter(function () {
    //        //让center中对应下标的li显示，其他li隐藏
    //        var idx = $(this).index();
    //        $("#center>li:eq(" + idx + ")").show().siblings().hide();
    //      });
    //
    //      $("#right>li").mouseenter(function () {
    //        var idx = $(this).index() + 9;
    //        $("#center>li").eq(idx).show().siblings().hide();
    //
    //        //$("#center>li").eq(idx)  :jq对象
    //        //$("#center>li").get(idx);：js对象
    //      });
    //    });
  </script>

</head>
<body>
<div class="wrapper">
  
  <ul id="left">
    <li><a href="#">女靴</a></li>
    <li><a href="#">雪地靴</a></li>
    <li><a href="#">冬裙</a></li>
    <li><a href="#">呢大衣</a></li>
    <li><a href="#">毛衣</a></li>
    <li><a href="#">棉服</a></li>
    <li><a href="#">女裤</a></li>
    <li><a href="#">羽绒服</a></li>
    <li><a href="#">牛仔裤</a></li>
  </ul>
  <ul id="center">
    <li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/冬裙.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/呢大衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/毛衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/棉服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/女裤.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/羽绒服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/牛仔裤.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/女包.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男靴.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/登山鞋.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/皮带.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/围巾.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/皮衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男毛衣.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男棉服.jpg" width="200" height="250"/></a></li>
    <li><a href="#"><img src="images/男包.jpg" width="200" height="250"/></a></li>
  
  </ul>
  <ul id="right">
    <li><a href="#">女包</a></li>
    <li><a href="#">男靴</a></li>
    <li><a href="#">登山鞋</a></li>
    <li><a href="#">皮带</a></li>
    <li><a href="#">围巾</a></li>
    <li><a href="#">皮衣</a></li>
    <li><a href="#">男毛衣</a></li>
    <li><a href="#">男棉服</a></li>
    <li><a href="#">男包</a></li>
  </ul>

</div>
</body>
</html>

双引号中不能直接写变量，要用"前半段字符串"+变量+"后半段字符串"的方式桥接
小区别：在这里插入图片描述

3、JQ调错技巧
通过alert或在浏览器源代码处打断点

4、index方法详解
它是方法而不是属性
jq里几乎没有属性，都是方法
index()将返回当前元素在所有兄弟元素里面的索引

JQ01

JQ01

猜你喜欢