jQuery基础入门

引言

为什么要学jQuery

使用javascript开发过程中，有许多的缺点：

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

jQuery的未来

事实上jQuery已经没落了，现在的主流前端框架React、Vue等采用虚拟DOM的方案，用户已经不需要也不应该直接在DOM上操作，因此jQuery已经没有什么应用场景了，稍微学习一下也是可以的，花个一两天学一学了解一下就可以了。

体验jQuery的使用

/*
* 1. 查找元素的方法多种多样，非常灵活
* 2. 拥有隐式迭代特性，因此不再需要手写for循环了。
* 3. 完全没有兼容性问题。
* 4. 实现动画非常简单，而且功能更加的强大。
* 5. 代码简单、粗暴。
* */
$(document).ready(function () {
    $("#btn1").click(function () {
        $("div").show(200);
    });
    $("#btn2").click(function () {
        $("div").text("我是内容");
    });
});

jQuery到底是什么

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。

jQuery的官网 http://jquery.com/

著名CDN网站：https://www.bootcdn.cn/

jQuery的API文档：https://jquery.cuishifeng.cn/index.html

通过script标签引入，可以在官网下载源码后引入，也可以在cdn直接引入在线jQuery

jQuery的版本问题

官网下载地址：http://jquery.com/download/
jQuery版本有很多，分为1.x 2.x 3.x
1.x和2.x版本jQuery都不再更新版本了，现在只更新3.x版本。

大版本分类：

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

关于压缩版和未压缩版：

• jQuery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。
• jQuery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

jQuery的入口函数

使用jQuery的三个步骤：

1. 引入jQuery文件
2. 入口函数
3. 功能实现

为什么使用 window.onload()?

因为 JavaScript 中的函数方法需要在 HTML 文档渲染完成后才可以使用，如果没有渲染完成，此时的 DOM 树是不完整的，这样在调用一些 JavaScript 代码时就可能报出"undefined"错误。

如果js代码块放在body标签的最后面，则不用管

关于JavaScript的入口函数

window.onload=function(){
    Func1();
    Func2();
    Func3();
    .....
}

关于jQuery的入口函数：

$(document).ready(function() {

});

$(function() {

});

jQuery入口函数与js入口函数的对比：

<script>
 //1.$是什么?
  //如果报了这个错误:$ is not defined,就说明没有引入jQuery文件.
  // $(function () {
  //
  // });

  //2.jQuery文件结构.
  //其实是一个自执行函数.
  // (function(){
  //   window.jQuery = window.$ = jQuery;
  // }());


  //3.
  //a.引入一个js文件,是会执行这js文件中的代码的.
  //console.log(num);//10
  //b.jQuery文件是一个自执行函数,执行这个jQUERY文件中的代码,其实就是执行这个自执行函数.
  //c.这个自执行文件就是给window对象添加一个jQuery属性和$属性.
  //console.log(window);
  //d.$其实和jQuery是等价的,是一个函数.

  // console.log(window.jQuery === window.$);//true
  // console.log(Object.prototype.toString.call($));//'[object Function]'


  //4.$是一个函数
  //参数传递不同,效果也不一样.
  //4.1 如果参数传递的是一个匿名函数-入口函数
  // $(function(){
  // });

  //4.2 如果参数传递的是一个字符串-选择器/创建一个标签
  //$('#one');
  //$('<div>啦啦,我是一个div</div>');

  //4.3 如果参数是一个dom对象,那他就会把dom对象转换成jQuery对象.
  //$(dom对象)
</script>

jQuery对象和dom对象(重要)

1. DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象：jQuery对象就是使用jQuery的方法获取页面中的元素返回的对象就是jQuery对象。
3. jQuery对象其实就是DOM对象的包装集 包装了DOM对象的集合（伪数组）
4. DOM对象与jQuery对象的方法不能混用。

DOM对象转换成jQuery对象：【联想记忆：花钱】

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

jQuery对象转换成DOM对象：

var $li = $("li");
//第一种方法（推荐使用）
$li[0]
//第二种方法
$li.get(0)

jQuery选择器

什么是jQuery选择器

• jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。
  注意：jQuery选择器返回的是jQuery对象。
• jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多扩展性的选择器。
  【查看jQuery文档】
• jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。
  所以我们平时真正能用到的只是少数的最常用的选择器。

基本选择器

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

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

层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，在给定的祖先元素下匹配所有的后代元素，代表后代选择器，获取ul下的所有li元素，包括孙子等
弟弟选择器	$(“prev + next”)	匹配所有紧接在 prev 元素后的一个同辈next 元素
弟弟们选择器	$(“prev ~ siblings”)	匹配 prev 元素之后的所有同辈的 siblings 元素

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

基本筛选器

名称	用法	描述
:first	$(‘li:first’);	获取到的li元素中，获取第一个元素
:not(selector)	$(“li:odd”).css(“color”, ”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”);	获取到的li元素中，选择索引号为偶数的元素

具体看文档，有空再总结

总结：这类选择器都带冒号

筛选选择器(方法)

名称	用法	描述
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()	找上一次兄弟

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

排他思想

$(function() {
  $("button").click(function(){
      $(this).css();//对自己设置变化
  	$(this).siblings("button").css()；//给其他兄弟设置变化
  })
})

链式编程

$(function() {
  $("button").click(function(){
  
   	$(this).css().siblings("button").css()；//对自己设置变化,给其他兄弟设置变化
  })
})

【案例：下拉菜单】
代码位于文章尾部

【案例：突出展示】
代码位于文章尾部

【案例：手风琴】
代码位于文章尾部

【案例：淘宝精品】
代码位于文章尾部

元素设置

样式设置

    /*1.设置一个样式*/
    //两个参数  设置的样式属性,具体样式	
    $('li').css('color','red');
   //传入对象（设置的样式属性:具体样式）
    $('li').css({'color':'red'});
    /*2.设置多个样式*/     
    $('li').css({
        'color':'green',
        'font-size':'20px'
    });

类名设置

	 /*1.添加一个类*/
    $('li').addClass('now');
    /*2.删除一个类*/
    $('li').removeClass('now');
    /*3.切换一个类  有就删除没有就添加*/
    $('li').toggleClass('now');
    /*4.匹配一个类  判断是否包含某个类  如果包含返回true否知返回false*/
    $('li').hasClass('now');

对应案例： 案例-《tab切换》

属性设置

	/*1.获取属性*/
    $('li').attr('name');
	/*2.设置属性*/
    $('li').attr('name','tom');
	/*3.设置多个属性*/
    $('li').attr({
        'name':'tom',
        'age':'18'
    });
	/*4.删除属性*/
    $('li').removeAttr('name');

对应案例： 案例-《美女相册》

prop方法

	/*对于布尔类型的属性，不要attr方法，应该用prop方法 prop用法跟attr方法一样。*/
    $("#checkbox").prop("checked");
    $("#checkbox").prop("checked", true);
    $("#checkbox").prop("checked", false);
    $("#checkbox").removeProp("checked");

对应案例： 案例-《表格全选》

动画

基本动画

	/*注意：动画的本质是改变容器的大小和透明度*/
    /*注意：如果不传参数是看不到动画*/
    /*注意：可传入特殊的字符  fast normal slow*/
    /*注意：可传入数字 单位毫秒*/
    /*1.展示动画*/
    $('li').show();
	/*2.隐藏动画*/
    $('li').hide();
	/*3.切换展示和隐藏*/
    $('li').toggle();

滑入滑出

	/*注意：动画的本质是改变容器的高度*/
    /*1.滑入动画*/
    $('li').slideDown();
	/*2.滑出动画*/
    $('li').slideUp();
	/*3.切换滑入滑出*/
    $('li').slideToggle();

对应案例： 案例-《下拉菜单2》

淡入淡出

	/*注意：动画的本质是改变容器的透明度*/
    /*1.淡入动画*/
    $('li').fadeIn();
	/*2.淡出动画*/
    $('li').fadeOut();
	/*3.切换淡入淡出*/
    $('li').fadeToggle();
    $('li').fadeTo('speed','opacity');

对应案例： 案例-《淡入淡出》

自定义动画

	/*
    * 自定义动画
    * 参数1：需要做动画的属性
    * 参数2：需要执行动画的总时长
    * 参数3：执行动画的时候的速度
    * 参数4：执行动画完成之后的回调函数
    * */
    $('#box1').animate({left:800},5000);
    $('#box2').animate({left:800},5000,'linear');
    $('#box3').animate({left:800},5000,'swing',function () {
        console.log('动画执行完成');
    });

对应案例： 案例-《360开关机动画》

动画队列

/*
    jQuery中有个动画队列的机制。
    当我们对一个对象添加多次动画效果时后添加的动作就会被放入这个动画队列中，  
    等前面的动画完成后再开始执行。
    可是用户的操作往往都比动画快，  
    如果用户对一个对象频繁操作时不处理动画队列就会造成队列堆积，
    影响到效果。
    */

stop使用

	/*1.停止当前动画  如果动画队列当中还有动画立即执行*/
    //$('div').stop();
    /*2.和stop()效果一致  说明这是默认设置*/
    //$('div').stop(false,false);
    /*3.停止当前动画  清除动画队列*/
    //$('div').stop(true,false);
    /*4.停止当前动画并且到结束位置  清除了动画队列*/
    //$('div').stop(true,true);
    /*5.停止当前动画并且到结束位置  如果动画队列当中还有动画立即执行*/
    $('div').stop(false,true);

对应案例： 案例-《音乐导航》
对应案例： 案例-《工具栏》

节点操作

创建节点

	/*创建节点*/
    var $a = $('百度1');

克隆节点

	/*如果想克隆事件  false  true克隆事件*/
    var $cloneP = $('p').clone(true);

添加&移动节点

	/*追加自身的最后面  传对象和html格式代码*/
    $('#box').append('百度3');
    $('#box').append($('a'));
	/*追加到目标元素最后面  传目标元素的选择器或者对象*/
    $('百度3').appendTo($('#box'));
    $('a').appendTo('#box');

    prepend();
    prependTo();
    after();
    before();

删除节点&清空节点

	/*1.清空box里面的元素*/
    /* 清理门户 */
    $('#box').empty();
	/*2.删除某个元素*/
    /* 自杀 */
    $('#box').remove();

【案例-《表格删除》】

jQuery特殊属性操作

val方法

val方法用于设置和获取表单元素的值，例如input、textarea的值

	//设置值
    $("#name").val('张三');
	 //获取值
    $("#name").val();

html方法与text方法

html方法相当于innerHTML text方法相当于innerText

	//设置内容
    $('div').html('这是一段内容');
	//获取内容
    $('div').html()
	//设置内容
    $('div').text('这是一段内容');
	//获取内容
    $('div').text()

区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。

width方法与height方法

---

设置或者获取高度

	//带参数表示设置高度
    $('img').height(200);
	//不带参数获取高度
    $('img').height();

获取网页的可视区宽高

	//获取可视区宽度
    $(window).width();
	//获取可视区高度
    $(window).height();

scrollTop与scrollLeft

设置或者获取垂直滚动条的位置

 	//获取页面被卷曲的高度
    $(window).scrollTop();
	//获取页面被卷曲的宽度
    $(window).scrollLeft();

offset方法与position方法

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。

	//获取元素距离document的位置,返回值为对象：{left:100, top:100}
    $(selector).offset();
	//获取相对于其最近的有定位的父元素的位置。
    $(selector).position();

jQuery事件机制

JavaScript中已经学习过了事件，但是jQuery对JavaScript事件进行了封装，增加并扩展了事件处理机制。jQuery不仅提供了更加优雅的事件处理语法，而且极大的增强了事件的处理能力。

详细可以参考https://www.runoob.com/jquery/jquery-events.html

jQuery事件发展历程(了解)

简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定(推荐)

简单事件注册

    click(handler)			//单击事件
    mouseenter(handler)		//鼠标进入事件
    mouseleave(handler)		//鼠标离开事件

缺点：不能同时注册多个事件

bind方式注册事件

    //第一个参数：事件类型
    //第二个参数：事件处理程序
    $("p").bind("click mouseenter", function(){
	//事件响应方法
    });

缺点：不支持动态事件绑定

delegate注册委托事件

    // 第一个参数：selector，要绑定事件的元素
    // 第二个参数：事件类型
    // 第三个参数：事件处理函数
    $(".parentBox").delegate("p", "click", function(){
	//为 .parentBox下面的所有的p标签绑定事件
    });

缺点：只能注册委托事件，因此注册时间需要记得方法太多了

on注册事件

on注册事件(重点)

jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

on注册简单事件

	// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
    $(selector).on( "click", function() {});

on注册委托事件

	 // 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
    $(selector).on( "click",'span', function() {});

on注册事件的语法：

	// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
    // 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
    // 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
    // 第四个参数：handler，事件处理函数
    $(selector).on(events,[selector],[data],handler);

事件解绑

unbind方式（不用）

    $(selector).unbind();
    $(selector).unbind("click");

undelegate方式（不用）

    $( selector ).undelegate();
    $( selector).undelegate( 'click' );

off方式（推荐）

	// 解绑匹配元素的所有事件
    $(selector).off();
	// 解绑匹配元素的所有click事件
    $(selector).off("click");

触发事件

    $(selector).click();
    $(selector).trigger("click");

jQuery事件对象

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

	//screenX和screenY	对应屏幕最左上角的值
    //clientX和clientY	距离页面左上角的位置（忽视滚动条）
    //pageX和pageY	距离页面最顶部的左上角的位置（会计算滚动条的距离）
    
    //event.keyCode	按下的键盘代码
    //event.data	存储绑定事件时传递的附加数据
    
    //event.stopPropagation()	阻止事件冒泡行为
    //event.preventDefault()	阻止浏览器默认行为
    //return false:既能阻止事件冒泡，又能阻止浏览器默认行为。

jQuery补充知识点

链式编程

直到现在，我们都是一次写一条 jQuery 语句（一条接着另一条）。

不过，有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery 命令，一条接着另一条。

通常情况下，只有设置操作、事件函数等才能把链式编程延续下去，函数执行完返回this。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。

这样的话，浏览器就不必多次查找相同的元素。

例子：$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);
end();// 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。

【案例：五角星评分案例.html】

each方法

jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

	// 参数一表示当前元素在所有匹配元素中的索引号
    // 参数二表示当前元素（DOM对象）
    $(selector).each(function(index,element){});

【案例：不同的透明度.html】

多库$共存，使用别名

jQuery使用作 为 标 示 符 ， 但 是 如 果 与 其 他 框 架 中 的 作为标示符，但是如果与其他框架中的作为标示符，但是如果与其他框架中的冲突时，jQuery可以释放$符的控制权.

1.释放操作在其他函数之前

2.释放后不能用dollar符

    var c = $.noConflict();//此时c就是新的访问符号

事件函数中的this

当我们在使用jQuery的时候，给某个标签绑定事件，会发现事件函数里面有个“this”，比如如下代码：

$("#a").click(function(){
    $(this).hide();
});

this指向的就是触发这个事件的DOM对象**，而非jQuery对象，所以我们在事件内部使用this的时候，需要通过$(this)方法将DOM对象转化为jQuery对象，才能使用jQuery中的方法。

插件

常用插件

插件：jQuery不可能包含所有的功能，我们可以通过插件扩展jQuery的功能。
jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。

1. jquery.color.js

animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。

使用插件的步骤

//1. 引入jQuery文件
    //2. 引入插件（如果有用到css的话，需要引入css）
    //3. 使用插件

2.jquery.lazyload.js

懒加载插件

jquery.ui.js插件

jQueryUI专指由jQuery官方维护的UI方向的插件。

官方API：http://api.jqueryui.com/category/all/

其他教程：jQueryUI教程

基本使用:

    //1.	引入jQueryUI的样式文件
    //2.	引入jQuery
    //3.	引入jQueryUI的js文件
    //4.	使用jQueryUI功能

使用jQuery.ui.js手风琴菜单

制作jQuery插件

原理：jQuery插件其实说白了就是给jQuery对象增加一个新的方法，让jQuery对象拥有某一个功能。

//通过给$.fn添加方法就能够扩展jQuery对象
$.fn. pluginName = function() {};

案例代码

【案例：下拉菜单】

        * {
            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;
        }

            一级菜单1

                二级菜单1
                二级菜单2
                二级菜单3

            一级菜单1

                二级菜单1
                二级菜单2
                二级菜单3

            一级菜单1

                二级菜单1
                二级菜单2
                二级菜单3

  $(function () {
    //需求: 给一级菜单li设置鼠标移入事件，二级菜单显示。
    //      给一级菜单li设置鼠标离开事件，二级菜单隐藏。

    //获取一级菜单li的方式:
    //$('li');//不行
    //$('ul>li');//不行
    //$('.wrap li');//不行
    //$('.wrap>ul>li')//可行的.

    //1.给一级菜单li设置鼠标移入事件，二级菜单显示。
    $('.wrap>ul>li').mouseover(function () {
      //console.log(this);//谁触发了鼠标移入事件,那这个this就是谁,this还是一个dom对象.

      // $(this).children('ul').css('display','block');//显示就是更改display属性为block.

      $(this).children('ul').show();//show()方法本质上还是更新display属性为block.

    });

    //2.给一级菜单li设置鼠标离开事件，二级菜单隐藏。
    $('.wrap>ul>li').mouseout(function () {
      $(this).children('ul').hide(); //hide()方法本质上还是更新display属性为none
    });

    //3.思考题:
    //为什么不给一级菜单a标签设置鼠标移入和离开事件?

    //因为这样的话,选不到二级菜单.

    // $('.wrap>ul>li>a').mouseover(function () {
    //   $(this).siblings('ul').show();
    // });
    // $('.wrap>ul>li>a').mouseout(function () {
    //   $(this).siblings('ul').hide();
    // });

  });

【案例：突出展示】

        * {
            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;
        }

  $(function () {
    //需求1:给小人物所在的li标签设置鼠标移入事件:当前li标签透明度为1,其他的兄弟li标签透明度为0.4
    //需求2:鼠标离开大盒子,所有的li标签的透明度改成1.

    //获取小人物们所在的li
    //$('.wrap li')//可以的
    //console.log($('.wrap').find('li'));//可以的

    //需求1:
    $('.wrap').find('li').mouseenter(function () {
        console.log($(this).css('opacity', 1));//这个css方法有返回值,返回值就是设置这个方法的元素本身.

        console.log($(this).css('opacity', 1).siblings('li'));

        $(this).css('opacity', 1).siblings('li').css('opacity',0.4);
    });

    //需求2:
    $('.wrap').mouseleave(function () {
        //$('.wrap').find('li').css('opacity',1);

        //console.log($(this));//在这个离开事件中,this是这整个大盒子.

        $(this).find('li').css('opacity',1);
    });

  });

【案例：手风琴】

        * {
            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;
        }

            标题1
            我是弹出来的div1

            标题2
            我是弹出来的div2

            标题3
            我是弹出来的div3

            标题4
            我是弹出来的div4

    $(function () {
        //需求:点击标题li标签,对应的div显示, 他的兄弟标签li下面的div隐藏.

        $('.parentWrap>.menuGroup').click(function () {
            //jQuery特性:隐式迭代
            //jQuery特性:链式编程,在于一个方法返回的是一个jQuery对象,既然是jQueyr对象就可以继续点出jQuery的方法来.

            $(this).children('div').show().parent().siblings('li').children('div').hide();
        });

    });

【案例：淘宝精品】

        * {
            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;
        }

      $(function () {
          //需求1:给左边的li标签们设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏.

          //需求2:给右边的li标签们设置鼠标移入事件,让中间索引对应的li显示,其他的li隐藏.

          //需求1:
          $('#left>li').mouseenter(function () {
              //获取当前鼠标移入的这个li标签的索引.

              var idx = $(this).index();//索引:表示的是这个元素在他兄弟元素间的排行.

              //console.log(idx);
              //让中间索引对应的li显示,其他的li隐藏.

              //$('#center>li:eq('+idx+')'); //字符串的拼接
              $('#center>li').eq(idx).show().siblings('li').hide();
          });

          //需求2:
          $('#right>li').mouseenter(function () {
              //获取当前鼠标移入的这个li标签的索引.

              var idx = $(this).index();
              idx += 9;//9不要写死,9是左边li标签的个数.

              //让中间索引对应的li显示,其他的li隐藏.

              $('#center>li').eq(idx).show().siblings('li').hide();
          });

          //因为age已经成为字符串的一部分了.不能拿到age变量的值.

          // var age = 18;
          // console.log("我的名字是age");

          //思考题:
          //为什么是给li标签设置鼠标移入事件,而不是给a标签设置鼠标移入事件?

          //因为给a标签设置的话,不能拿到正确的索引.

          // $('#left a').mouseenter(function () {
          //    var idx =  $(this).index();
          //     console.log(idx);
          // });

      });

        女靴
        雪地靴
        冬裙
        呢大衣
        毛衣
        棉服
        女裤
        羽绒服
        牛仔裤

        女包
        男包
        登山鞋
        皮带
        围巾
        皮衣
        男毛衣
        男棉服
        男靴

案例-《tab切换》

        * {
            margin: 0;
            padding: 0;
        }

        ul {
            list-style: none;
        }

        .wrapper {
            width: 1000px;
            height: 475px;
            margin: 0 auto;
            margin-top: 100px;
        }

        .tab {
            border: 1px solid #ddd;
            border-bottom: 0;
            height: 36px;
            width: 320px;
        }

        .tab li {
            position: relative;
            float: left;
            width: 80px;
            height: 34px;
            line-height: 34px;
            text-align: center;
            cursor: pointer;
            border-top: 4px solid #fff;
        }

        .tab span {
            position: absolute;
            right: 0;
            top: 10px;
            background: #ddd;
            width: 1px;
            height: 14px;
            overflow: hidden;
        }

        .products {
            width: 1002px;
            border: 1px solid #ddd;
            height: 476px;
        }

        .products .main {
            float: left;
            display: none;
        }

        .products .main.selected {
            display: block;
        }

        .tab li.active {
            border-color: red;
            border-bottom: 0;
        }

        国际大牌◆
        国妆名牌◆
        清洁用品◆
        男士精品

    $(function () {
        //需求:给tab栏的每一个li标签设置鼠标移入事件: 当前li添加active类,其他的兄弟li移除active类.

        //    找到当前tab栏索引一致的div,让他添加 selected类,其他的兄弟div移除selected类.

        //需求1
        $('.tab>.tab-item').mouseenter(function () {
            $(this).addClass('active').siblings('li').removeClass('active');

            //获取鼠标当前移入的这个li标签的索引
            var idx = $(this).index();

            //需求2:
            $('.products>.main').eq(idx).addClass('selected').siblings('div').removeClass('selected');
        });

    });

案例-《下拉菜单2》

        * {
            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;
        }

            一级菜单1

                二级菜单1
                二级菜单2
                二级菜单3

            一级菜单1

                二级菜单1
                二级菜单2
                二级菜单3

            一级菜单1

                二级菜单1
                二级菜单2
                二级菜单3

  $(function () {
    //需求: 给一级菜单的li标签设置鼠标移入事件，二级菜单ul显示。
    //      给一级菜单li设置鼠标离开事件，二级菜单隐藏。

    //鼠标移入事件.

    $('.wrap>ul>li').mouseenter(function () {
      //$(this).children('ul').css('display','block');
      //简写
      $(this).children('ul').stop(true,false).slideDown(300);
    });

    //鼠标移出事件.

    $('.wrap>ul>li').mouseleave(function () {
      //$(this).find('ul').css('display','none');
      //简写
      $(this).find('ul').stop(true,false).slideUp(150);
    });

  });

案例-《360开关机动画》

        .box {
            width: 322px;
            position: fixed;
            bottom: 0;
            right: 0;
            overflow: hidden;
        }

        span {
            position: absolute;
            top: 0;
            right: 0;
            width: 30px;
            height: 20px;
            cursor: pointer;
        }

  $(function () {
      //1.给关闭按钮一个点击事件.

      $('#closeButton').click(function () {
          //2.让下面那部分的高度动画变为0.

          $('#bottomPart').animate({
              height:0
          },500, function () {
              //3.让整个大盒子的宽度动画变为0
              $('#box').animate({
                  width:0
              },1000);
          });
      });

  });

案例-《淡入淡出》

  标题

    div {
      width: 200px;
      height: 200px;
      background-color: red;
      display: none;
    }

  $(function () {
    //1.淡入 fadeIn
    $('#fadeIn').click(function () {
      //让id为div1的这个元素淡入.

      //$('#div1').fadeIn(); //不给参数相当于给了一个默认的动画时长,mormal400毫秒
      $('#div1').fadeIn(1000);
      // $('#div1').fadeIn(2000, function () {
      //   alert('淡入完成了...');
      // });
    });

    //2.淡出 fadeOut
    $('#fadeOut').click(function () {
      //让id为div1的这个元素淡出
      $('#div1').fadeOut(1000);
      // $('#div1').fadeOut(1000, function () {
      //   alert('淡出完成了');
      // });
    });

    //3.切换 fadeToggle
    $('#fadeToggle').click(function () {
      $('#div1').fadeToggle(1000);
    });

    //4.淡入到那里 fadeTo
    $('#fadeTo').click(function () {
      $('#div1').fadeTo(1000,0.5);
    });

  });

案例-《表格删除》

        * {
            padding: 0;
            margin: 0;
        }

        .wrap {
            width: 410px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "΢ÈíÑźÚ";
            color: #fff;
        }

        td {
            font: 14px "΢ÈíÑźÚ";
        }

        td a.get {
            text-decoration: none;
        }

        a.del:hover {
            text-decoration: underline;
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }

        .btnAdd {
            width: 110px;
            height: 30px;
            font-size: 20px;
            font-weight: bold;
        }

        .form-item {
            height: 100%;
            position: relative;
            padding-left: 100px;
            padding-right: 20px;
            margin-bottom: 34px;
            line-height: 36px;
        }

        .form-item > .lb {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100px;
            text-align: right;
        }

        .form-item > .txt {
            width: 300px;
            height: 32px;
        }

        .mask {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100%;
            height: 100%;
            background: #000;
            opacity: 0.15;
            display: none;
        }

        .form-add {
            position: fixed;
            top: 30%;
            left: 50%;
            margin-left: -197px;
            padding-bottom: 20px;
            background: #fff;
            display: none;
        }

        .form-add-title {
            background-color: #f7f7f7;
            border-width: 1px 1px 0 1px;
            border-bottom: 0;
            margin-bottom: 15px;
            position: relative;
        }

        .form-add-title span {
            width: auto;
            height: 18px;
            font-size: 16px;
            font-family: ËÎÌå;
            font-weight: bold;
            color: rgb(102, 102, 102);
            text-indent: 12px;
            padding: 8px 0px 10px;
            margin-right: 10px;
            display: block;
            overflow: hidden;
            text-align: left;
        }

        .form-add-title div {
            width: 16px;
            height: 20px;
            position: absolute;
            right: 10px;
            top: 6px;
            font-size: 30px;
            line-height: 16px;
            cursor: pointer;
        }

        .form-submit {
            text-align: center;
        }

        .form-submit input {
            width: 170px;
            height: 32px;
        }

            课程名称
            所属学院
            操作

            JavaScript
            传智播客-前端与移动开发学院
            DELETE

            css
            传智播客-前端与移动开发学院
            DELETE

            html
            传智播客-前端与移动开发学院
            DELETE

            jQuery
            传智播客-前端与移动开发学院
            DELETE

    $(function () {
        //1.清空内容
        $('#btn').click(function () {
            //找到tbody,清空他的内容.

            $('#j_tb').empty();
        });

        //2.删除对应的行.

        $('#j_tb .get').click(function () {
            //点击a标签,删除a标签对应的那一行.

            $(this).parent().parent().remove();
        });
    });

案例-《美女相册》

        body {
            font-family: "Helvetica","Arial",serif;
            color: #333;
            background-color: #ccc;
            margin: 1em 10%;
        }
        h1 {
            color: #333;
            background-color: transparent;
        }
        a {
            color: #c60;
            background-color: transparent;
            font-weight: bold;
            text-decoration: none;
        }
        ul {
            padding: 0;
        }
        li {
            float: left;
            padding: 1em;
            list-style: none;
        }
        #imagegallery {

            list-style: none;
        }

        #imagegallery li {
            margin: 0px 20px 20px 0px;
            padding: 0px;
            display: inline;
        }

        #imagegallery li a img {
            border: 0;
        }

    美女画廊

选择一个图片

  $(function () {
      //1.需求
      //给小图片a标签设置一个单击事件.

      //让id为image的img标签修改src属性为当前点击的a标签的href属性的值
      //让id为des的这个p标签的文本设置为当前点击的这个a标签的title属性的值.

      $('#imagegallery>li>a').click(function () {
          //获取当前点击的a标签的href属性的值和title属性的值。
          var srcValue = $(this).attr('href');
          var contentValue = $(this).attr('title');
          //给img标签的src属性赋值，以及给p标签的内容赋值。
          $('#image').attr('src',srcValue);
          $('#des').text(contentValue);
          //阻止a标签的跳转
          return false;
      });

  });

案例-《表格全选》

        * {
            padding: 0;
            margin: 0;
        }
        .wrap {
            width: 300px;
            margin: 100px auto 0;
        }

        table {
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #c0c0c0;
        }

        th,
        td {
            border: 1px solid #d0d0d0;
            color: #404060;
            padding: 10px;
        }

        th {
            background-color: #09c;
            font: bold 16px "微软雅黑";
            color: #fff;
        }

        td {
            font: 14px "微软雅黑";
        }

        tbody tr {
            background-color: #f0f0f0;
        }

        tbody tr:hover {
            cursor: pointer;
            background-color: #fafafa;
        }

                课程名称
                所属学院

                JavaScript
                前端与移动开发学院

                css
                前端与移动开发学院

                html
                前端与移动开发学院

                jQuery
                前端与移动开发学院

  $(function () {
      //需求1:上面的多选框选中,下面的多选框们跟着选中,上面的多选框没有选中,下面的多选框们跟着不选中.

      //需求2:下面的多选框们,都有单击事件:
      //如果下面的多选框们都选中了,那么上面的那个多选框跟着选中,如果下面多选框有一个没有选中,那么上面的多选框就不选中.

      //需求1：
      $('#j_cbAll').click(function () {
          //获取这多选框的checked值。
          var checkedValue = $(this).prop('checked');
          //console.log(checkedValue);
          //让下面的多选框们的checked跟随这个checkedValue
          $('#j_tb input').prop('checked',checkedValue);
      });

      //需求2：
      $('#j_tb input').click(function () {
          //判断下面的那四个多选框是否都被选中了。
          var numOfAll = $('#j_tb input').length; //获取到下面所有多选框的个数。
          var numOfSelect = $('#j_tb input:checked').length; //获取到下面被选中的多选框的个数。
          console.log(numOfAll + ":" + numOfSelect);
          //判断
          // if(numOfAll == numOfSelect){
          //     //全部被选中。
          //     $('#j_cbAll').prop('checked',true);
          // }else {
          //     //有的有没选中。
          //     $('#j_cbAll').prop('checked',false);
          // }

          //上面这个判断其实可以优化。
          $('#j_cbAll').prop('checked',numOfAll == numOfSelect);
      });

  });

https://blog.csdn.net/wuyxinu/article/details/103669718