Web前端学习笔记—— jQuery之简介、对象、选择器

jQuery简介

JavaScript库的概念

JavaScript开发的过程中，处理浏览器的兼容很复杂而且很耗时，于是一些封装了这些操作的库应运而生。这些库还会把一些常用的代码进行封装。

把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）

常见的JavaScript 库 - jQuery、Prototype、MooTools。其中jQuery是最常用的一个

jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。

jQuery的优点好处

jQuery设计的宗旨是'Write Less，Do More'，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的操作，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器。
极大地简化了 JavaScript 编程。

jQuery的版本

jQuery版本有很多，分为1.x 2.x 3.x

1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。
3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

国内多数网站还在使用1.x的版本

jQuery官网

体验jQuery

案例：让div显示与设置内容

使用JavaScript开发过程中，有许多不便之处

-查找元素的方法太少，麻烦。
-遍历伪数组很麻烦，通常要嵌套一大堆的for循环。
-有兼容性问题。
-想要实现简单的动画效果，也很麻烦
-代码冗余。

$(document).ready(function () {
    $('#btn1').click(function () {
      	// 隐式迭代：偷偷的遍历，在jQuery中，不需要手动写for循环了，会自动进行遍历。
        $('div').show(200);
    });

    $('#btn2').click(function () {
        $('div').text('我是内容');
    });
});

优点总结：

-查找元素的方法多种多样，非常灵活
-拥有隐式迭代特性，因此不再需要手写for循环了。
-完全没有兼容性问题。
-实现动画非常简单，而且功能更加的强大。
-代码简单、粗暴。

jQuery中顶级对象

jQuery中的顶级对象是$或jQuery

获取jQuery对象
入口函数
高级功能

注意：jQuery中的$和JQuery关键字本身为同一对象；

jQuery中页面加载事件

使用jQuery的三个步骤：

引入jQuery文件
入口函数
功能实现

关于jQuery的入口函数：

// 第一种写法
$(document).ready(function() {
	
});
// 第二种写法
$(function() {
	
});

jQuery入口函数与window.onload的对比

JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

jQuery对象和DOM对象

jQuery对象和DOM对象的区别

DOM对象

用原生JavaScript获取的DOM对象
	通过document.getElementById()  反馈的是元素(DOM对象)
通过document.getElementsByTagName()获取到的是什么？
	伪数组(集合)，集合中的每一个对象是DOM对象

jQuery对象

jQuery对象用$()的方式获取的对象
jQuery对象又可以叫做包装集(包装的DOM对象的集合)

区别

jQuery对象不能使用DOM对象的成员，DOM对象不能使用jQuery对象的成员

// DOM对象
var box = document.getElementById('box');
// 错误
box.text('hello');
// 正确
box.innerText = 'hello';

// jQuery对象，jQuery对象加前缀$，用以区分DOM对象
var $box = $('#box');
// 错误
$box.innerText = 'hello';
// 正确
$box.text('hello');

jQuery对象和DOM对象的相互转换

jQuery对象转换成DOM对象：   
	jQuery对象.get(索引值); 
	jQuery对象[索引值] 
    	jQuery对象是包装集(集合)，从集合中取数据可以使用索引的方式
DOM对象转换成jQuery对象：   
	$(DOM对象) 只有这一种方法;

案例

// 仅仅演示对象之间的转换，代码不推荐这么写
jQuery(document).ready(function () {
  // 获取元素；
  var inpArr = document.getElementsByTagName('input');
  // 获取第一个按钮，然后绑定事件；
  $(inpArr[0]).click(function () {
    // 设置body的背景色
    $('body')[0].style.background = '#fff';
  });
  // 获取第二个按钮，然后绑定事件；
  $(inpArr[1]).click(function () {
    // 设置body的背景色
    $('body').get(0).style.background = '#000';
  });
});

选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。

jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。（查看jQuery文档）

jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

jQuery基本选择器

名称	用法	描述
ID选择器	$(’#id’);	获取指定ID的元素
类选择器	$(’.class’);	获取同一类class的元素
标签选择器	$(‘div’);	获取同一类标签的所有元素
并集选择器	$(‘div,p,li’);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(‘div.redClass’);	获取class为redClass的div元素

总结：跟css的选择器用法一模一样。

jQuery层级选择器

名称	用法	描述
子代选择器	$(‘ul > li’);	使用-号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(‘ul li’);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

跟CSS的选择器一模一样。

jQuery过滤选择器

这类选择器都带冒号:

名称	用法	描述
:eq（index）	$(‘li:eq(2)’).css(‘color’, ‘red’);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(‘li:odd’).css(‘color’, ‘red’);	获取到的li元素中，选择索引号为奇数的元素
:even	$(‘li:even’).css(‘color’, ‘red’);	获取到的li元素中，选择索引号为偶数的元素

jQuery筛选选择器(方法)

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

名称	用法	描述
children(selector)	$(‘ul’).children(‘li’)	相当于$(‘ul-li’)，子类选择器
find(selector)	$(‘ul’).find(‘li’);	相当于$(‘ul li’),后代选择器
siblings(selector)	$(’#first’).siblings(‘li’);	查找兄弟节点，不包括自己本身。
parent()	$(’#first’).parent();	查找父亲
eq(index)	$(‘li’).eq(2);	相当于$(‘li:eq(2)’),index从0开始
next()	$(‘li’).next()	找下一个兄弟
prev()	$(‘li’).prev()	找上一次兄弟

案例

鼠标放上突出展示 [02-突出展示.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.2.js"></script>
  <script>

    $(function () {
      //获取所有的li,添加鼠标进入事件
      $(".wrap>ul>li").mouseenter(function () {
        //设置当前的li的透明度的同时修改当前的li的所有的兄弟元素li的透明度
        $(this).css("opacity",1).siblings("li").css("opacity",0.5);
      });
      //鼠标离开事件
      $(".wrap").mouseleave(function () {
        //从当前的div中所有的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>

好友列表切换

<!DOCTYPE html>
<html>
<head lang="en">
    <title></title>
    <meta charset="UTF-8">
    <style type="text/css">

        #u1 li {
            margin-bottom: 10px;
            background-color: Orange;
            font-size: 20px;
            font-weight: bolder;
            cursor: pointer;
        }
        #u1 li ul {
            list-style-type: none;
            margin: 0;
            padding: 0;

        }

        #u1 li ul li {
            background-color: pink;
        }
    </style>
    <script src="jquery-1.12.1.js"></script>
    <script>
      //页面加载后,隐藏所有的li
      $(function () {
        $("#u1>li>ul").hide();
        //找到id为u1下面的直接的子元素li添加点击事件
        $("#u1>li").click(function () {
          //当前点击的li里面的ul显示
          $(this).children("ul").show(500);
          //隐藏当前被点击的li的兄弟元素的li中的ul
          $(this).siblings("li").find("ul").hide(500);
        });
      });
    </script>
</head>
<body>
<div style=" width:200px; height:500px; border:1px solid red;">
    <ul id="u1" style=" list-style-type:none; margin:0; padding:0; text-align:center;">
        <li>
            幼儿园同学
            <ul>
                <li>鼻涕虫</li>
                <li>爱哭鬼</li>
                <li>张大胆</li>
                <li>班主任</li>
            </ul>
        </li>
        <li>小学同学
            <ul>
                <li>张三丰</li>
                <li>张无忌</li>
                <li>乔布斯</li>
                <li>助教</li>
            </ul>
        </li>
        <li>
            初中同学
            <ul>
                <li>盖茨</li>
                <li>川普</li>
                <li>奥巴马</li>
                <li>凤姐</li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

下拉菜单 [04-下拉菜单.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;
        }

        .wrap {
            width: 330px;
            height: 30px;
            margin: 100px auto 0;
            padding-left: 10px;
            background-image: url(images/bg.jpg);
        }

        .wrap li{
            background-image: url(images/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="vendor/jquery.js"></script>
    <script>
        jQuery(document).ready(function () {
            //需求1：鼠标进入ul中的子元素li，让该li的子元素ul显示；
            //需求2：鼠标移开ul中的子元素li，让该li的子元素ul隐藏；


            //需求1：鼠标进入ul中的子元素li，让该li的子元素ul显示；
            $(".wrap>ul>li").mouseover(function () {
                //获取鼠标进入的li，是原生dom对象；
                //转换成jquery对象
                $(this).children("ul").show();
            });
            //需求2：鼠标移开ul中的子元素li，让该li的子元素ul隐藏；
            $(".wrap>ul>li").mouseout(function () {
                $(this).children("ul").hide();
            });
        });
    </script>
</head>
<body>
<div class="wrap">
    <ul>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
        <li>
            <a href="javascript:void(0);">一级菜单1</a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1</a></li>
                <li><a href="javascript:void(0);">二级菜单2</a></li>
                <li><a href="javascript:void(0);">二级菜单3</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

手风琴 [05-手风琴.html]

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    ul {
      list-style: none
    }

    * {
      margin: 0;
      padding: 0;
    }

    div {
      width: 1150px;
      height: 400px;
      margin: 50px auto;
      border: 1px solid red;
      overflow: hidden;
    }

    div li {
      width: 240px;
      height: 400px;
      float: left;
    }

    div ul {
      width: 1300px;
    }


  </style>
  <script src="jquery-1.12.2.js"></script>
  <script>

    //页面加载的事件
    $(function () {

      //获取所有的li
      $("#box>ul>li").mouseenter(function () {
        //当前的li宽为800px,其他的li的宽为100px
        $(this).css("width", "800px").siblings("li").css("width", "100px");
      });
      $("#box").mouseleave(function () {
        $("li").css("width", "240px");
      });
    });
  </script>
</head>
<body>
<div id="box">
  <ul>
    <li><img src="images/1.jpg"/></li>
    <li><img src="images/2.jpg"/></li>
    <li><img src="images/3.jpg"/></li>
    <li><img src="images/4.jpg"/></li>
    <li><img src="images/5.jpg"/></li>
  </ul>
</div>

</body>
</html>

淘宝服饰精品 [06-淘宝服饰精品.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="vendor/jquery.js"></script>
    <script>
        jQuery(function () {
            //需求1：鼠标进入左侧ul中的li，让中间ul中的li对应索引值的显示，其他隐藏；
            //需求2：鼠标进入右侧ul中的li，让中间ul中的li对应索引+9的显示，其他隐藏；

            //需求1：鼠标进入左侧ul中的li，让中间ul中的li对应索引值的显示，其他隐藏；
            $("#left li").mouseover(function () {
                //让中间ul中的li对应索引值的显示，其他隐藏；
//                alert($(this).index());   jquery方法获取索引值
                var num = $(this).index();
                $("#center li").eq(num).show().siblings("li").hide();
            });
            //需求2：鼠标进入右侧ul中的li，让中间ul中的li对应索引+9的显示，其他隐藏；
            $("#right li").mouseover(function () {
                //让中间ul中的li对应索引值的显示，其他隐藏；
                $("#center li:eq("+($(this).index()+9)+")").show().siblings("li").hide();
            });
        });
    </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>

唯恋殊雨

发布了296 篇原创文章 · 获赞 562 · 访问量 50万+

他的留言板关注