jQuery-1

1. jQuery 概述

1.1 jQuery 的概念

• jQuery 出现的目的是加快前端人员的开发速度，我们可以非常方便的调用和使用它，从而提高开发效率。

• 学习jQuery本质： 就是学习调用这些函数（方法）。

jQuery的优点

• 轻量级。核心文件才几十kb，不会影响页面加载速度
• 链式编程、隐式迭代
• 对事件、样式、动画支持，大大简化了DOM操作
• 支持插件扩展开发。有着丰富的第三方的插件，：树形菜单、日期控件、轮播图等

1.2 JavaScript库

​ JavaScript库：即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。

​ 简单理解： 就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

常见的JavaScript库：jQuery ，Prototype， YUI ，Dojo， Ext JS， 移动端的zepto

2. jQuery的基本使用

2.1 jQuery 的入口函数

第一种：

$(document).ready(function(){
    $('div').hide();
})

第二种：

$(function () {
    $('div').hide();
})

• 等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery帮我们完成了封装
• 相当于原生js中的DOMContentLoaded
• 不同于原生js中的load事件是等页面文档，外部的js文件，css文件，图片加载完毕才执行内部代码

2.2 顶级对象

• $ 是jQuery的别称，在代码中可以使用jQuery代替，但一般为了方便，使用$。
• $符号也是jQuery的顶级对象，相当于原生js中的window。

<script>
	// 1. $ 是jQuery的别称（另外的名字）
		jQuery(function() {
			// $('div').hide();
			jQuery('div').hide();
		});	
</script>

2.3 jQuery对象和DOM对象

• DOM 对象： 用原生js获取过来的对象就是DOM对象，DOM 对象只能使用原生的 JavaScirpt 属性和方法
• jQuery对象： 用jquery方式获取过来的对象是jQuery对象，jQuery 对象只能使用 jQuery 方法。 本质：通过$把DOM元素进行了包装
• jQuery对象的本质：利用$对DOM对象包装后产生的对象（伪数组的形式存储）

<script>
	// 1. DOM 对象：  用原生js获取过来的对象就是DOM对象
        var myDiv = document.querySelector('div'); // myDiv 是DOM对象
     // 2. jQuery对象： 用jquery方式获取过来的对象是jQuery对象。 本质：通过$把DOM元素进行了包装
        var span =$('span'); // $('span')是一个jQuery 对象
</script>

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

• DOM 对象转换为 jQuery 对象： $(DOM对象)–>$(‘div);

• jQuery 对象转换为 DOM 对象（两种方式）

  ​ 1. $(‘div’)[index] index 是索引号

  ​ 2. $(‘div’).get(index) index 是索引号

<video src="mov.mp4" muted ></video>
<script>
// 1. DOM对象转换为 jQuery对象
       // (1) 我们直接获取视频，得到就是jQuery对象
       // $('video');
	// (2) 我们已经使用原生js 获取过来 DOM对象
       var myvideo = document.querySelector('video');
       // $(myvideo).play();  jquery里面没有play 这个方法
  // 2.  jQuery对象转换为DOM对象 play()方法
       // myvideo.play();
       // $('video')[0].play()
       // $('video').get(0).play()
       $('video')[0].play();
  </script>

2.4 jquery隐式迭代

隐式迭代：遍历内部 DOM 元素（伪数组形式存储）的过程就叫做隐式迭代。

<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<div>惊喜不，意外不</div>
<script>
	// 1. 获取四个div元素 
    $("div");
    // 2. 给四个div设置背景颜色为绿色 jquery对象不能使用style
    $('div').css('background','#bfa');
    // 3. 隐式迭代就是把匹配的所有元素内部进行遍历循环，给每一个元素添加css这个方法
    $("ul > li").css("color", "red");
</script>

jQuery 设置样式：
$(‘类名’).css(‘属性’,’值’);
$(“div”).css(‘color’,’#bfa’);

3. jQuery 常用API

3.1 jQuery 选择器

1. 基本选择器

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

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

2. 层级选择器

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

3. 筛选选择器

名称	用法	描述
:first	$(“li:first”)	获取第一个li元素
:last	$(“li:last”)	获取最后一个li元素
: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元素中，选择索引号为偶数的元素

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

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

4. 筛选选择器(方法)（重点）

名称	用法	描述
children(Selector)	$(“ul”).children(“li”);	相当于$(“ul>li”)，子类选择器
find(Seletor)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(seletor)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next();	找下一个兄弟
prev()	$(“li”).prev();	找上一次兄弟
eq(index)	$(‘div’).hasClass(‘current’)	检查当前元素是否含有某个特定的类，返回true / false

重点记住 ： parent() children() find() siblings() eq()

<script>
       // 注意一下都是方法 带括号
       $(function() {
           // 1. 父  parent()  返回的是 最近一级的父级元素 亲爸爸
           console.log($(".son").parent());
           // 2. 子
           // (1) 亲儿子 children()  类似子代选择器  ul>li
           $(".nav").children("p").css("color", "red");
           // (2) 可以选里面所有的孩子 包括儿子和孙子  find() 类似于后代选择器
           $(".nav").find("p").css("color", "red");
           // 3. 兄
           $(".nav").siblings("p").css("color","#bfa");

		// 判断是否有某个类名
       console.log($("div:first").hasClass("current"));
       console.log($("div:last").hasClass("current"));
       console.log($("ol li").eq(2).hasClass('item'));
       });
   </script>

3.2 jQuery 里面的排他思想

​ jQuery 里面的排他思想:
​ $(this).css(“color”,”red”);
​ $(this).siblings(). css(“color”,” ”);

//排他思想案例	
	<button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function() {
            // 1. 隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function() {
                 // 2. 当前的元素变化背景颜色
                 $(this).css("background", "pink");
                 // 3. 其余的兄弟去掉背景颜色 隐式迭代
             	 $(this).siblings("button").css("background", "");
           });
        });
    </script>

3.3 链式编程

上面该变按钮背景颜色的案例，代码可以简写为：

$(this).css("background", "pink").siblings("button").css("background", "");

3.4 新浪下拉框案例

<script>
		$(function () {
            $(".nav>li").mouseover(function () {
                // $(this)  jQuery 当前元素
                // show() 显示元素
                $(this).children("ul").show();
            });
            $(".nav>li").mouseout(function () {
                $(this).children('ul').hide();
              })
        });
</script>

3.5 淘宝精品图案例

<script>
       $(function () {
           $('#left li').click(function () {
               //获取被点击元素的索引号
               var index= $(this).index();
               //将索引号传递给div
               $('#content div').eq(index).show();
               $('#content div').eq(index).siblings().hide();
               $(this).css('background','#bfa').siblings('li').css('background', '');
             });
         })
   </script>

4. jQuery 样式操作

4.1 样式设置css方法

1. 参数值写属性名，则返回属性值；

$(this).css("color");

​ 2.参数写属性名，属性值，逗号分隔。属性必须加引号，属性值如果是数字可以不用跟单位和引号。

$(this).css("color","red");

​ 3.参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号分隔，属性可以不加引号但是要用驼峰命名法。

$(this).css({"color":"red",
"font-size":"20px",
backgroundColor:"blue"});

4.2 设置类样式方法

引号里面的类名不要加点。

​ 1.添加类addClass

$(this).addClass("current");

​ 2.删除类removeClass、

$(this).removeClass("current");

​ 3.切换类toggleClass

$(this).toggleClass("current");

​ 4.匹配一个类 判断是否包含某个类 如果包含返回true否知返回false

$(this).hasClass("current");

4.3 案例：tab栏切换

<script>
	$(function () {
         $('.tab_list li').click(function () {
             $(this).addClass('current').siblings().removeClass('current');
             var index = $(this).index(); //获取点击元素的索引号
             console.log(index);
             $('.tab_con .item').eq(index).show().siblings().hide();
         });
     });
</script>

4.4 类操作和className区别

• 原生 JS 中 className 会覆盖元素原先里面的类名。
• jQuery 里面类操作只是对指定类进行操作，不影响原先的类名。

<div class="one "></div>
   <script>
       // var one = document.querySelector(".one");
       // one.className = "two";
       $(".one").addClass("two");  //这个addClass相当于追加类名 不影响以前的类名
       $(".one").removeClass("two");
   </script>

5. jQuery 效果

5.1 显示隐藏

​ 1.显示语法

show([speed,[easing],[fn]])

​ 2.隐藏语法

hide([speed,[easing],[fn]])

​ 3.切换语法

toggle([speed,[easing],[fn]])

​ 4.参数：

• 参数都可省，无动画直接显示。
• speed：可选”slow” “noemal” “fast”或表示动画时长的毫秒数值。
• easing：默认swing，可用”linear”匀速。
• fn：回调函数，在动画完成时执行的函数，每个元素执行一次。

<button>切换</button>
   <div></div>
<script>
	$("button").eq(2).click(function () {
          $("div").toggle(1000);
       });
       //重点可记住切换
</script>

5.2 滑动

​ 1. slideDown() 方法用于向下滑动元素

$(selector).slideDown(speed,callback);

​ 2. slideUp(); 方法用于向上滑动元素

$(selector).slideUp(speed,callback);

​ 3. slideToggle(); （slideUp();和slideDown();之间进行切换

$(selector).slideToggle(speed,callback);

三个参数同上

<button>切换滑动</button>
   <div></div>
   <script>
   	$("button").eq(2).click(function() {
           // 滑动切换 slideToggle()
           $("div").slideToggle(500);
       });
   </script>

5.3 事件切换hover

​ 第一个参数是鼠标经过触发的事件函数，第二个参数是鼠标离开触发的事件函数。

$(Selector).hover(function(){//鼠标经过}, function(){//鼠标离开});

• over:鼠标移到元素上要触发的函数（相当于mouseenter）
• out:鼠标移出元素要触发的函数（相当于mouseleave）
• 如果只写一个函数，则鼠标经过和离开都会触发它

<script>
	//1. 事件切换 hover 就是鼠标经过和离开的复合写法
       $(".nav>li").hover(function() {
           $(this).children("ul").slideDown(200);
       }, function() {
           $(this).children("ul").slideUp(200);
       });
       //2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
       $(".nav>li").hover(function() {
            $(this).children("ul").slideToggle();
       });
</script>

5.4 动画队列及其停止排队方法

停止排队：stop();

• stop() 方法用于停止动画或效果。

  $(this).children('ul').stop().slideToggle(200);

注意： stop() 写到动画或者效果的前面， 相当于停止结束上一次的动画。

<script>
        //2. 事件切换 hover  如果只写一个函数，那么鼠标经过和鼠标离开都会触发这个函数
        $(".nav>li").hover(function() {
    			//stop添加到动画或者效果的前面
             $(this).children("ul").stop.slideToggle();
        });
	</script>

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

5.5 淡入淡出

• fadeIn(); 用于淡入已隐藏的元素

  $(selector).fadeIn(speed,callback);

• fadeOut(); 方法用于淡出可见元素

  $(selector).fadeOut(speed,callback);

• fadeToggle(); 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

  $(selector).fadeToggle(speed,callback);

• fadeTo(); 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

  $(selector).fadeTo(speed,opacity,callback);	//必须添加speed和opacity

  必需的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒

  fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）

5.5.1高亮显示

<script>
       $(function () {
           $('.wrap li').hover(
               function () { 
                   $(this).siblings().stop().fadeTo(500,0.5);
                },function () { 
                    $(this).siblings().stop().fadeTo(500,1);
                }
          )
       });
   </script>

5.6 动画

animate() 方法用于创建自定义动画

• 必需的 params 参数定义形成动画的 CSS 属性。
• 可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
• easing：默认swing，可用”linear”匀速。
• 可选的 callback 参数是动画完成后所执行的函数名称

animate(params,[speed],[easing],[callback])

演示案例：

<script type="text/javascript">
       $(function () {
           $('.king li').click(function () {
               // 1.li 大图片淡入，宽度224px 小图片淡出
               $(this).stop().animate({
                   width: 224
               }).find('.big').stop().fadeIn(1000).siblings('.small').stop().fadeOut(500);
               // 2.其他 li 大图片淡出，小图片淡入 宽度69px
               $(this).siblings().stop().animate({
                   width: 69
               }).find('.big').stop().fadeOut(500).siblings('.small').stop().fadeIn(1000);
           })
       })
   </script>

6. jQuery属性操作

6.1 设置或获取元素固有属性值prop()

​ 1.获取属性语法：

prop("属性")

​ 2.设置属性语法：

prop("属性":"属性值")

6.2 设置或获取元素自定义属性值attr()

​ 1.获取属性语法：

attr("属性")		//类似于原生js里面的getAtrribute()

​ 2.设置属性语法：

attr("属性":"属性值")		//类似于原生js里面的setAtrribute()

6.3 数据缓存data()

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。

 1. 附加数据语法：

data("name","value")

​ 2.获取数据语法：

data("name")

同时，还可以读取html5自定义属性data-index，得到的是数字型。

6.4 全选案例

$(function () {
    $(".a-checkbox").change(function () {
        // console.log($(".a-checkbox").prop("checked"));
        $(".j-checkbox").prop("checked", $(this).prop("checked"));
    });
    $(".j-checkbox").change(function () {
        if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
            $(".a-checkbox").prop("checked", true);
        } else {
            $(".a-checkbox").prop("checked", false);
        }
    })
})

7. jQuery内容文本值

7.1 获取设置元素内容html()

​ 1. 不写参数：获取内容

​ 2. 参数是内容：设置内容

$("div").html();
$("div").html("123");	//保留标签和内容

7.2 获取设置文本内容text()

​ 1. 不写参数：获取内容

​ 2. 参数是内容：设置内容

$("div").text();
$("div").text("123");	//不保留标签

7.3 获取设置表单值val()

 1. 不写参数：获取内容
 2. 参数是内容：设置属性

$("input").val();
$("input").val("123");