JQ01

时间：2025-04-06 19:38:08

JQ01

1、使用js的缺点

JQ01

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>

JQ01

2）什么是jq?

js库：把一些常用到的方法写到一个单独的js文件，使用时直接去引用就可以了。学习jq，就是学习其中封装的方法。

3）jq的版本

版本繁多。

1.x版本：能兼容ie678

2.x版本：不兼容ie678

上述版本已不再更新

3.x版本：非常精简，不兼容ie678

压缩版，适用于生产环境，文件较小，删除了注释，换行，空格等，但基本没有阅读性

未压缩版：

适用于学习与开发环境，源码清晰，方便阅读

JQ01

4）jq的入口函数

入口函数的目的是等待jq文件加载完成。引入jq文件的script标签推荐写在body标签的最后面，这样可以省去入口函数，但还是建议写上入口函数。

JQ01

//引入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的入口函数执行得要晚一些

JQ01

5）jq对象与DOM（js）对象的区别：

js对象：使用js的方式获取到的元素就是js对象

例如通过document.getElementById该方法

jq对象：使用jq的方式获取到的元素就是jq对象

例如$(“li”);//获取所有的li，可自行用美元符 标识

jq对象与js对象间的联系：

jq对象就是js对象的一个集合，是一个伪数组，里面存放了大量的js对象

JQ01

jq对象与js对象间的区别：

js对象不能调用jq对象的方法

jq对象也无法调用js对象的方法

JQ01

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

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

jq对象转为js对象

var $li=$("li");

$li[0].style.backgroundColor="red";//通过数组的方式取出

或get方法：

$li.get(0)

总结：

JQ01

6）$符号的实质

在取名时，仅是为了区分这是jq对象。

$其实是一个函数，在使用它时须跟小括号

参数不同，它的功能也不同

①参数是一个函数，将被作为入口函数使用

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

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

$(domObj);

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

$("div")

$("#id")

$(".className")

3、JQ的基本选择器

1）

JQ01

JQ01

与css中的用法一样。

JQ01

交集选择

并集选择

JQ01

层级选择器

JQ01

JQ01

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

JQ01

JQ01

筛选选择器

JQ01

2）mouseenter与mouseseover的区别

mouseover：鼠标经过事件

mouseout：鼠标离开事件

jq专属事件:

mouseenter:鼠标进入事件

mouseleave鼠标离开事件

JQ01

案例：下拉菜单

<!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="data:images/01.jpg" alt=""/></a></li>

    <li><a href="#"><img src="data:images/02.jpg" alt=""/></a></li>

    <li><a href="#"><img src="data:images/03.jpg" alt=""/></a></li>

    <li><a href="#"><img src="data:images/04.jpg" alt=""/></a></li>

    <li><a href="#"><img src="data:images/05.jpg" alt=""/></a></li>

    <li><a href="#"><img src="data:images/06.jpg" alt=""/></a></li>

  </ul>

</div>

</body>

</html>

jq中对象调方法可一直调下去（链式编程）

JQ01

手风琴案例：

<!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="data:images/女靴.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/雪地靴.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/冬裙.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/呢大衣.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/毛衣.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/棉服.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/女裤.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/羽绒服.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/牛仔裤.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/女包.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/男靴.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/登山鞋.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/皮带.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/围巾.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/皮衣.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/男毛衣.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data:images/男棉服.jpg" width="200" height="250"/></a></li>

    <li><a href="#"><img src="data: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>

双引号中不能直接写变量，要用"前半段字符串"+变量+"后半段字符串"的方式桥接

小区别：JQ01

3、JQ调错技巧

通过alert或在浏览器源代码处打断点

4、index方法详解

它是方法而不是属性

jq里几乎没有属性，都是方法

index()将返回当前元素在所有兄弟元素里面的索引

相关文章