jQuery知识点一

一、 jQuery 介绍
1.jQuery的概念： jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。 j 就是 JavaScript； Query 查询；意思就是查询js，把js中的DOM操作做了封装，我们可以快速的查询使用里面的功能。 jQuery 封装了 JavaScript 常用的功能代码，优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。
2. jQuery 的基本使用
（1） jQuery 步骤：引入jQuery文件，在文档最末尾插入 script 标签，书写体验代码。
（2）jQuery的入口函数
第一种: 简单易用。

$(function () {   
    ...  // 此处是页面 DOM 加载完成的入口
}) ;

第二种: 繁琐，但是也可以实现

$(document).ready(function(){
   ...  //  此处是页面DOM加载完成的入口
});

总结：
① 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
②相当于原生 js 中的 DOMContentLoaded。
③不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。
④更推荐使用第一种方式。
3. jQuery中的顶级对象$
$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替，但一般为了方便，通常都直接使用 $ 。 $是jQuery的顶级对象，相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。
4.jQuery 对象和 DOM 对象
使用 jQuery 方法和原生JS获取的元素是不一样的:
①用原生 JS 获取来的对象就是 DOM 对象
②jQuery 方法获取的元素就是 jQuery 对象。
③jQuery 对象本质是：利用$对DOM 对象包装后产生的对象（伪数组形式存储）。
只有 jQuery 对象才能使用 jQuery 方法，DOM 对象则使用原生的 JavaScirpt 方法。
5. jQuery 对象和 DOM 对象转换
DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装。要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。实际开发比较常用的是把DOM对象转换为jQuery对象，这样能够调用功能更加强大的jQuery中的方法。

// 1.DOM对象转换成jQuery对象
var box = document.querySelector('.box');  // 获取DOM对象
$(box);  // 把DOM对象转换为 jQuery 对象
// 2.jQuery 对象转换为 DOM 对象有两种方法：
//   2.1 jQuery对象[索引值]
 $('div')[0];
//   2.2 jQuery对象.get(索引值)
$('div').get(0);

二、jQuery 选择器
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。
1. 基础选择器：$("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加引号

名称	用法	描述
ID 选择器	$("#id ")	获取指定ID的元素
全选选择器	$(" * ")	匹配所有元素
类选择器	$(" .class")	获取同一类class的元素
标签选择器	$(" div")	获取同一类标签的所有元素
并集选择器	$(" div,p,li")	选取多个元素
交集选择器	$(" li.current")	交集元素

2. 层级选择器
层级选择器最常用的两个分别为：后代选择器和子代选择器。

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

<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>        
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function() {
            console.log($(".nav"));
            console.log($("ul li"));
        })
    </script>
</body>

3. 筛选选择器
顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 :

语法	用法	描述
:first	$(‘li:first’)	获取第一个li元素
:last	$(‘li:last’)	获取最后一个元素
:eq(index)	$(“li:eq(2)”)	获取的里元素中，选择索引号为2的元素，索引号index从0开始
:odd	$(“li:odd”)	获取的里元素中，选择索引号为奇数的元素
:even	$(“li:even”)	获取的里元素中，选择索引号为偶数的元素

<body>
    <ul>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ul>
    <ol>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ol>
    <script>
        $(function() {
            $("ul li:first").css("color", "red");
            $("ul li:eq(2)").css("color", "blue");
            $("ol li:odd").css("color", "skyblue");
            $("ol li:even").css("color", "pink");
        })
    </script>
</body>

另: jQuery中还有一些筛选方法，类似DOM中的通过一个节点找另外一个节点，父、子、兄以外有所加强。

语法	用法	说明
parent()	$(“li”) .parent();	查找父级
children(selector)	$(“ul”).children(“li”) ;	相当于$(“ul>li”),最近一级（亲儿子）
find(selector)	$(“ul”) .find(“li”) ;	相当于$(“ul li”),后代选择器
siblings(selector)	$(“.first”).siblings(“li”) ;	查找兄弟节点，不包括自己本身
nextAll([expr])	$(“.first”).nextAll()	查找当前元素之后所有的同辈元素
prevAll([expr])	$(“.last”).prevAll()	查找当前元素之前所有的同辈元素
hasClass(class)	$(div"). hasClass(“protected”)	检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)	$(“li”). eq(2);	相当于$(“li:eq(2)”),index从0开始

4 知识铺垫
①jQuery 设置样式：$('div').css('属性', '值')
②jQuery 里面的排他思想：想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式。
$(this).css("color","red"); $(this).siblings(). css("color","");
③隐式迭代：遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。$('div').hide(); // 页面中所有的div全部隐藏，不用循环操作
④链式编程：链式编程是为了节省代码量，看起来更优雅。$(this).css('color', 'red').sibling().css('color', '');
三、 jQuery 样式操作
jQuery中常用的样式操作有两种：css() 和设置类样式方法
方法1: 操作 css 方法:jQuery 可以使用 css 方法来修改简单元素样式，也可以操作类，修改多个样式。常用以下三种形式 :
1.参数只写属性名，则是返回属性值：var strColor = $(this).css('color');
2.参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号$(this).css(''color'', ''red'');$(this).css(height, 100);
3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号，如果是复合属性必须要用驼峰命名法。$(this).css({ color:"white",font-size:"20px",backgroundColor:"purple"});
注意： css() 多用于样式少时操作，多了则不太方便。
方法2: 设置类样式方法:作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点。
常用的三种设置类样式方法：
①添加类：$("div").addClass("current");
②删除类：$("div").removeClass("current");
③切换类：$("div").toggleClass("current");
注意：
①设置类样式方法比较适合样式多时操作，可以弥补css()的不足。
②原生 JS 中 className 会覆盖元素原先里面的类名，jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。
四、 jQuery 效果
jQuery 给我们封装了很多动画效果，最为常见的如下：
显示隐藏：show() / hide() / toggle()
划入画出：slideDown() / slideUp() / slideToggle()
淡入淡出：fadeIn() / fadeOut() / fadeToggle() / fadeTo()
自定义动画：animate()
注意：
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。jQuery为我们提供另一个方法，可以停止动画排队：stop()， stop方法必须写到动画的前面
1.显示隐藏
（1）显示: show([speed,[easing],[fn]])
（2）隐藏: hide([speed,[easing],[fn]])
（3）淡入淡出切换效果: fadeToggle([speed,[easing],[fn]])
参数：
①参数都可以省略，无动画直接显示
②speed:三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画市场的毫秒数值（如：1000）
③easing:(Optional)用来指定切换效果，默认是"swing"，可用参数"linear"
④fn:回调函数，在动画完成时执行的函数，每一个元素执行一次

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                $("div").show(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(1).click(function() {
                $("div").hide(1000, function() {
                    alert(1);
                });
            })
            $("button").eq(2).click(function() {
              $("div").toggle(1000);
            })
            // 一般情况下，我们都不加参数直接显示隐藏就可以了
        });
    </script>
</body>

2. 滑入滑出
（1）下滑效果：slideDown([speed,[easing],[fn]])
（2）上滑效果：slideUp([speed,[easing],[fn]])
（3）滑动切换效果：slideToggle([speed,[easing],[fn]])
参数：
①参数都可以省略，无动画直接显示
②speed:三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画市场的毫秒数值（如：1000）
③easing:(Optional)用来指定切换效果，默认是"swing"，可用参数"linear"
④fn:回调函数，在动画完成时执行的函数，每一个元素执行一次

<body>
    <button>下拉滑动</button>
    <button>上拉滑动</button>
    <button>切换滑动</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 下滑动 slideDown()
                $("div").slideDown();
            })
            $("button").eq(1).click(function() {
                // 上滑动 slideUp()
                $("div").slideUp(500);
            })
            $("button").eq(2).click(function() {
                // 滑动切换 slideToggle()
                $("div").slideToggle(500);
            });
        });
    </script>
</body>

3. 淡入淡出
（1）淡入效果：fadeIn([speed,[easing],[fn]])
（2）淡出效果：fadeOut([speed,[easing],[fn]])
（3）淡入淡出切换效果：fadeToggle([speed,[easing],[fn]])
参数：
①参数都可以省略，无动画直接显示
②speed:三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画市场的毫秒数值（如：1000）
③easing:(Optional)用来指定切换效果，默认是"swing"，可用参数"linear"
④fn:回调函数，在动画完成时执行的函数，每一个元素执行一次
（4）渐进方式调整到指定的不透明度：fadeTo([[speed],opacity,[easing],[fn]])
参数：
①opacity透明度必须写，取值0-1之间
②speed:三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画市场的毫秒数值（如：1000）必须写
③easing:(Optional)用来指定切换效果，默认是"swing"，可用参数"linear"
④fn:回调函数，在动画完成时执行的函数，每一个元素执行一次

<body>
    <button>淡入效果</button>
    <button>淡出效果</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
        $(function() {
            $("button").eq(0).click(function() {
                // 淡入 fadeIn()
                $("div").fadeIn(1000);
            })
            $("button").eq(1).click(function() {
                // 淡出 fadeOut()
                $("div").fadeOut(1000);
            })
            $("button").eq(2).click(function() {
                // 淡入淡出切换 fadeToggle()
                $("div").fadeToggle(1000);
            });
            $("button").eq(3).click(function() {
                //  修改透明度 fadeTo() 这个速度和透明度要必须写
                $("div").fadeTo(1000, 0.5);
            });
        });
    </script>
</body>

eg：突出显示的效果
在这里插入图片描述

<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>
        $(function() {
            //鼠标进入的时候,其他的li标签透明度：0.5
            $(".wrap li").hover(function() {
                $(this).siblings().stop().fadeTo(400, 0.5);
            }, function() {
                // 鼠标离开，其他li 透明度改为 1
                $(this).siblings().stop().fadeTo(400, 1);
            })

        });
    </script>
    <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>

4 .自定义动画
自定义动画非常强大，通过参数的传递可以模拟以上所有动画，方法为：animate(params,[speed],[easing],[fn])
参数：
①params:想要更改的样式属性，以对象形式传递，必须写，属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略
②speed:三种预定速度之一的字符串（“slow”，“normal”，or “fast”）或表示动画市场的毫秒数值（如：1000）
③easing:(Optional)用来指定切换效果，默认是"swing"，可用参数"linear"（匀速）
④fn:回调函数，在动画完成时执行的函数，每一个元素执行一次

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $("button").click(function() {
                $("div").animate({
                    left: 500,
                    top: 300,
                    opacity: .4,
                    width: 500
                }, 500);
            })
        })
    </script>
</body>

5. 停止动画排队
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行。停止动画排队的方法为：stop() ,stop() 方法用于停止动画或效果。 stop() 写到动画或者效果的前面，相当于停止结束上一次的动画。
总结: 每次使用动画之前，先调用 stop() ,在调用动画。
6. 事件切换
jQuery中为我们添加了一个新事件 hover() ，功能类似 css 中的伪类 :hover 。介绍如下：hover([over,]out) 其中over和out为两个函数:
①over:鼠标移到元素上要触发的函数（相当于mouseenter）
②out:鼠标移出元素要触发的函数（相当于mouseleave）
如果只写一个函数，则鼠标经过和离开都会触发它
7.自定义动画中仿王者荣耀手风琴效果
分析：
鼠标经过某个小li有两个操作：
①当前小li的宽度为224px，同时里面的小图片淡出，大图片淡入
②其余兄弟小li的宽度变为69px，小图片淡入，大图片淡出
在这里插入图片描述

<style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        img {
            display: block;
        }
        
        ul {
            list-style: none;
        }
        
        .king {
            width: 852px;
            margin: 100px auto;
            background: url(images/bg.png) no-repeat;
            overflow: hidden;
            padding: 10px;
        }
        
        .king ul {
            overflow: hidden;
        }
        
        .king li {
            position: relative;
            float: left;
            width: 69px;
            height: 69px;
            margin-right: 10px;
        }
        
        .king li.current {
            width: 224px;
        }
        
        .king li.current .big {
            display: block;
        }
        
        .king li.current .small {
            display: none;
        }
        
        .big {
            width: 224px;
            display: none;
        }
        
        .small {
            position: absolute;
            top: 0;
            left: 0;
            width: 69px;
            height: 69px;
            border-radius: 5px;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            // 鼠标经过某个小li 有两步操作：
            $(".king li").mouseenter(function() {
                // 1.当前小li 宽度变为 224px， 同时里面的小图片淡出，大图片淡入
                $(this).stop().animate({
                    width: 224
                }).find(".small").stop().fadeOut().siblings(".big").stop().fadeIn();
                // 2.其余兄弟小li宽度变为69px， 小图片淡入， 大图片淡出
                $(this).siblings("li").stop().animate({
                    width: 69                }).find(".small").stop().fadeIn().siblings(".big").stop().fadeOut();
            })
        });
    </script>
    <div class="king">
        <ul>
        //每一个都有一个大图片和一个小图片，大图片上方叠加一张小图片，居左对齐
            <li class="current">
                <a href="#">
                    <img src="images/m1.jpg" alt="" class="small">
                    <img src="images/m.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/l1.jpg" alt="" class="small">
                    <img src="images/l.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/c1.jpg" alt="" class="small">
                    <img src="images/c.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/w1.jpg" alt="" class="small">
                    <img src="images/w.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/z1.jpg" alt="" class="small">
                    <img src="images/z.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/h1.jpg" alt="" class="small">
                    <img src="images/h.png" alt="" class="big">
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="images/t1.jpg" alt="" class="small">
                    <img src="images/t.png" alt="" class="big">
                </a>
            </li>
        </ul>

    </div>