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对象) 只有这一种方法;

案例

  • 开关灯 [01-开关灯.html]
// 仅仅演示对象之间的转换,代码不推荐这么写
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]

<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>
  • 好友列表切换

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

<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);">一级菜单1a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1a>li>
                <li><a href="javascript:void(0);">二级菜单2a>li>
                <li><a href="javascript:void(0);">二级菜单3a>li>
            ul>
        li>
        <li>
            <a href="javascript:void(0);">一级菜单1a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1a>li>
                <li><a href="javascript:void(0);">二级菜单2a>li>
                <li><a href="javascript:void(0);">二级菜单3a>li>
            ul>
        li>
        <li>
            <a href="javascript:void(0);">一级菜单1a>
            <ul>
                <li><a href="javascript:void(0);">二级菜单1a>li>
                <li><a href="javascript:void(0);">二级菜单2a>li>
                <li><a href="javascript:void(0);">二级菜单3a>li>
            ul>
        li>
    ul>
div>
body>
html>

  • 手风琴 [05-手风琴.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]


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

你可能感兴趣的:(Web前端,WEB前端开发)