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="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中对象调方法可一直调下去（链式编程）

手风琴案例：

<!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>

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

小区别：

3、JQ调错技巧

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

4、index方法详解

它是方法而不是属性

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

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

JQ01的更多相关文章

《2013传智播客视频》-wmv,avi,mp4.目录
\!--14俄罗斯方块\视频\.复习.avi; \!--14俄罗斯方块\视频\ 复习.avi; \!--14俄罗斯方块\视频\ 形状旋转.avi; \!--14俄罗斯方块\视频\ 判断形状能否变形.a ...
2013传智播客视频--.ppt,.pptx,.doc,.docx.目录
\!-- JQ03-JQ事件动画\.1版JS+JQ PPT\00JsDom编程01_邹华栋.docx; \!-- JQ03-JQ事件动画\.1版JS+JQ PPT\00JsDom编程01_邹华栋.pp ...
Webpack 配置示例
Webpack 作为前端构建工具,对于大型网站开发,大大提升了开发效率.要使用webpack需要先安装webpack工具: 先来看一个最简单的命令 $ webpack main.js bundle.j ...

随机推荐

安装CentOS 7（转）
转载地址:https://www.cnblogs.com/wcwen1990/p/7630545.html CentOS7安装详解本文基于vmware workstations进行CentOS7 ...
shell常用监控脚本
1.cpu空闲脚本 top -b -n1 |grep 'Cpu'|awk '{print $5}'|sed 's/%//'|sed 's/id,//' 变量赋值 cpu_id='top -b -n1 ...
Bean Shell常用内置变量总结
JMeter在它的BeanShell中内置了变量,用户可以通过这些变量与JMeter进行交互,其中主要的变量及其使用方法如下: log:写入信息到jmeber.log文件,使用方法:log.info( ...
麒麟Kylin
开源的分布式分析引擎,提供Hadoop/Spark之上的SQL查询接口及多维分析(MOLAP)能力以支持超大规模数据,能在亚秒内查询巨大的Hive表: Kylin的主要特点包括支持SQL接口.支持超大 ...
Excel表列名称（给定一个正整数，返回它在 Excel 表中相对应的列名称。）
例如, 1 -> A 2 -> B 3 -> C ... 26 -> Z 27 -> AA 28 -> AB ... 示例 1: 输入: 1 输出: "A ...
Ubuntu16.04多个版本GCC编译器的安装和切换
这几天在配置交叉编译ARM开发板的linux内核的过程中碰到了很多问题,其中包括了GCC版本太高等问题,由此我打算安装其他老的版本给我的Ubuntu16.04.实验过程如下: 官网的教程是最牛逼的,先 ...
valueof toString
valueof toString add(1)(2) // 3 add(1, 2, 3)(10) // 16 add(1)(2)(3)(4)(5) // 15 function add() { var ...
不一样的go语言-error
前言 go语言的error处理方式,在目前流行的编程语言中属于刺头.似乎天生就是用来有别于他人标记.TIOBE排行榜全十除了C语言,无一例外是try catch的阵营.而排在go之前的语言除了C与 ...
P4781 【模板】拉格朗日插值
P4781 [模板]拉格朗日插值证明 :https://wenku.baidu.com/view/0f88088a172ded630b1cb6b4.html http://www.ebola.pro ...
SpringBoot启动banner更改
这篇文章的开始先给大家看一个图片用过或者看过springboot的人都知道,这就是springboot启动的banner,这一篇介绍如何自定义springboot的启动bannner. 先介绍一个可 ...

JQ01

JQ01

JQ01的更多相关文章

随机推荐

热门专题