jQuery学习笔记

jQuery概述

jQuery是一个快速、简洁的JavaScript函数库(框架)。

1. j就是JavaScript,Query是查询，意思就是查询js，把js中的DOM操作做了封装；
2. 简单理解就是一个JS文件，里面对原生js代码进行了封装，使我们可以快速高效地使用封装好的功能；
3. 其宗旨是“write Less,Do More"，即倡导写更少的代码做更多的事情。

一、jQuey的优点

1. 轻量级。核心文件只有几十kb，不影响页面加载速度；
2. jQuery兼容各种主流浏览器，IE 6.0+ FF 1.5+ Safari 2.0+ Opera 9.0+；
3. 链式操作与隐式迭代；
4. 封装了大量常用的DOM操作，支持事件、样式、动画等；
5. 支持插件拓展开发，目前已经有超过几百种官方插件支持；
6. 免费、开源；

二、jQuery的基本使用

官网：jquery.com
各版本下载：http://www.jq22.com/jquery-info122

1. 引入jQuery

  <script src="jquery.min.js"></script>

2. jQuery的入口函数

  $(document).ready(function(){
      ...  //1.等着页面DOM加载完毕再去执行js代码
  });
  $(function(){
      ...   //2.简写
  });

• window.onload是在网页中所有的元素以及所有关联文件完全加载到浏览器后才执行；
• jQuery的入口函数则是在DOM树完全就绪时就可以被调用；
• jQuery的入口函数可被多次使用；

3. jQuary对象存储

var a = $('#abc’);

• 减少书写量；
• 重复获取会创建新的对象，存起来节约空间。

4. 链式操作

$(this).addClass("highlight").children("a").show().end().siblings().removeClass("highlight").children("a").hide();

• 节省代码量，代码看起来更优雅

5. 隐式迭代

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

三、 jQuery的顶级对象$

1. $是jQuery的别称，在代码中可以使用jQuery代替$;
2. $是jQuery的顶级对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法。

DOM节点操作

1. DOM 对象：用原生js获取过来的对象就是DOM对象。
2. jQuery对象： 用jquery方式获取过来的对象是jQuery对象。
3. 本质：通过$把DOM元素进行了包装。
4. jQuery对象和js对象方法不通用的。

一、DOM节点获取

基础选择器

1. 标签选择器（元素选择器）
   * 语法： $(“html标签名”)
   * 获得所有匹配标签名称的元素
2. id选择器
   * 语法： $("#id")
   * 获得指定id的元素
3. 类选择器
   * 语法： $(".class")
   * 获得同一类class的元素
4. 并集选择器：
   * 语法： $(“选择器1,选择器2…”)
   * 获取多个选择器选中的元素之和
5. 全选选择器
   * 语法： $("*")
   * 获取此页面中的所有元素

层级选择器

1. 后代选择器
   * 语法： $("A B ")
   * 选择A元素内部的所有B元素
2. 子选择器
   * 语法： $(“A > B”)
   * 选择A元素内部的所有直接子元素B
3. 亲弟弟选择器
   * 语法： $("A + B ")
   * 选择紧接在A元素之后同级B元素
4. 弟弟选择器
   * 语法： $(“A ~ B”)
   * 选择A元素之后的所有同级B元素

筛选选择器

1. 首元素选择器
   * 语法： :first
   * 获得选择的元素中的第一个元素
2. 尾元素选择器
   * 语法： :last
   * 获得选择的元素中的最后一个元素
3. 非元素选择器
   * 语法： :not(selector)
   * 不包括指定内容的元素
4. 偶数选择器
   * 语法： :even
   * 索引为偶数，从 0 开始计数
5. 奇数选择器
   * 语法： :odd
   * 索引为奇数，从 0 开始计数
6. 等于索引选择器
   * 语法： :eq(index)
   * 指定索引元素，从0开始
7. 大于索引选择器
   * 语法： :gt(index)
   * 大于指定索引元素
8. 小于索引选择器
   * 语法： :lt(index)
   * 小于指定索引元素
9. 标题选择器
   * 语法： :header
   * 获得标题（h1~h6）元素，固定写法
10. 动画选择器
    * 语法： :animated
    * 获得正在执行动画效果的元素
11. 焦点选择器
    * 语法： :focus
    * 获得当前取得焦点的元素

筛选方法

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

var index = 2;//更加推荐使用 .eq()方法
$("ul li").eq(index).css("color", "blue");

二、属性操作

1. 使用attr()
   * 获取: 对象.attr(“属性名”) //返回当前属性值，底层使用的是getAttribute
   * 注意：此种方式不能获取value属性的实时数据，使用对象名.val()进行获取
   * 修改：对象.attr(“属性名”,“属性值”);
   * 删除：removeAttr(“属性名”) ：删除该属性的值
2. 使用prop()
   * 使用方法同attr()一致，底层是property
3. attr和prop区别
   * 如果操作的是元素的固有属性，则建议使用prop，某些特定属性attr获取不到
   * 如果操作的是元素自定义的属性，则建议使用attr

三、内容操作

获取：

1. html(): 获取元素内的标签体内容 ，底层调用的innerHTML
2. text(): 获取元素的标签体纯文本内容 ，底层调用的innerText
3. val()： 获取元素的value属性值

修改：

1. html(“新的内容”): 新的内容会将原有内容覆盖，HTML标签会被解析执行
2. text(“新的内容”): 新的内容会将原有内容覆盖，HTML标签不会被解析执行
3. val(“新的内容”)： 设置元素的value属性值

四、样式操作

1. 使用css()
   * 对象.css(“属性名”) //返回当前属性的样式值
   * 对象.css(“属性名”,“属性值”) //增加、修改元素的样式
   * 对象.css({“样式名”:“样式值”,“样式名”:“样式值”……})//使用json传参，提升代码书写效率。
2. 使用addClass()
   * 对象.addClass(“类选择器名”) //追加一个类样式
   * 对象.removeClass(“类选择器名”) //删除一个指定的类样式
   * 对象.toggleClass(“类选择器名”); //切换class属性

五、文档结构操作

内部插入

1. append():父元素将子元素追加到末尾
   * 对象1.append(对象2): 将对象2添加到对象1元素内部，并且在末尾
2. prepend():父元素将子元素追加到开头
   * 对象1.prepend(对象2):将对象2添加到对象1元素内部，并且在开头
3. appendTo():
   * 对象1.appendTo(对象2):将对象1添加到对象2内部，并且在末尾
4. prependTo()：
   * 对象1.prependTo(对象2):将对象1添加到对象2内部，并且在开头

外部插入

1. after():添加元素到元素后边
   * 对象1.after(对象2)： 将对象2添加到对象1后边，对象1和对象2是兄弟关系
2. before():添加元素到元素前边
   * 对象1.before(对象2)： 将对象2添加到对象1前边，对象1和对象2是兄弟关系
3. insertAfter()
   * 对象1.insertAfter(对象2)：将对象1添加到对象2后边，是兄弟关系
4. insertBefore()
   * 对象1.insertBefore(对象2)： 将对象1添加到对象2前边，是兄弟关系

包裹

1. wrap(对象|html):将每个匹配元素用指定对象或html包裹起来

  $("p").wrap("<div class='wrap'></div>"); 
  //将所有p标签用html包裹

2. unwrap():将元素取消一层包裹，即删除了直接父标签
   * 对象.unwrap() //删除了对象的父元素
3. wrapAll(对象|html):将匹配的元素用一个对象或html包裹起来

$("p").wrapAll("\<div></div>"); 
//用一个div包裹所有匹配的p标签

4. wrapInner(对象|html): 将元素的内容用对象或html包裹起来

$("p").wrapInner("<b></b>");
//所有p标签内的每个子内容加粗

替换

1. replaceWith(对象|html):将所有匹配的元素(包含内容)替换成指定的HTML或DOM元素

$("p").replaceWith("<b>hehe</b>");
//所有p标签换成加粗的hehe

2. replaceAll(对象|html):用指定的HTML或DOM元素替换所有匹配的元素(包含内容)

$(".re").replaceAll( $("p"));
//所有p标签换成re对象

删除

1. empty():清空元素的所有后代元素和文本。
   * 对象.empty():将对象的后代元素全部清空，但是保留当前对象以及其属性
2. remove([exp]):移除元素，可用表达式指定对象
   * 对象.remove():将对象删除掉
   * $(“p”).remove($(".a")) 删除所有类名有a的p标签
   * 绑定的事件，附加的数据等都会被移除。
3. detach([expr]):移除元素，可用表达式指定对象
   * 与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。

复制

1. clone([even[,deepEven]]): 克隆匹配的DOM元素并且选中这些克隆的副本。
   * Even 一个布尔值（true 或者 false）指示事件处理函数是否会被复制。

 $("button").click(function(){    
 //创建一个按钮，他可以复制自己，并且他的副本也有同样功能。
          $(this).clone(true).insertAfter(this);
        });

jQuery事件

事件：页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。

一、事件注册

1. bind() 单个事件注册
   * 语法：element.bind(事件,function(){})
   * 用法：$(“div”).bind(“click”,function(){ 事件处理程序 })
   * 对于click、mouseover、mouseout这类常用事件类型，可简写减少代码量,简写为$(“div”).click(function(){ 事件处理程序 })
2. on() 绑定事件
   * 语法：element.on(events,[selector],fn)
   * 用法一：on可以绑定一个或者多个事件处理程序

$("div").on({
               mouseenter: function() {
                   $(this).css("background", "skyblue");
                 },
                 click: function() {
                     $(this).css("background", "purple");
                 },
                 mouseleave: function() {
                    $(this).css("background", "blue");
                 }
            });
$("div").on("mouseenter mouseleave", function() {
                $(this).toggleClass("current");
            });

• 用法二： on可以实现事件委托（委派）

$("ul").on("click", "li", function() {
    alert(11);
});
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li

• 用法三：on可以给未来动态创建的元素绑定事件

$("ol").on("click", "li", function() {
            alert(11);
        })
        var li = $("<li>我是后来创建的</li>");
        $("ol").append(li);
    })

二、事件移除

• unbind([type],[data])：移除所有事件、某类型事件、特定时间类型处理函数
• one(type,[data],fn)：为元素绑定处理函数，处理函数触发一次后立即被删除
• off()方法可以移除通过on()方法添加的事件处理程序

$("div").off();  // 这个是解除了div身上的所有事件
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li");//解绑事件委托

三、常用事件

• hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

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

四、事件冒泡

事件冒泡：事件按照DOM层次像水泡一样由下至上，点击内部元素，会触发其外部元素的事件。
事件捕获：由上至下开始触发， jQuery不支持捕获。

五、事件对象

• 事件被触发，产生事件对象。
• 语法：element.on(events,[selector],function(event) { })
• 阻止默认行为：event.preventDefault()或者return false
• 阻止冒泡：event.stopPropagation()
• 事件对象的属性：
  * event.type()方法：获取到事件类型
  * event.preventDefault()方法：阻止默认事件行为
  * event.stopPropagation()方法方法：阻止事件冒泡
  * event.target()方法：获取到触发事件的元素
  * event.relatedTarget()方法：获取到触发事件的相关元素
  * event.pageX()方法/event.pageY()方法：
  * event.which()方法：鼠标点击事件中获取到鼠标左中右键（1、2、3）键盘事件中获取键盘按键
  * event.metaKey()方法：键盘事件中获取按键
  * event.originalEvent()方法：指向原始的事件对象

jQuery动画效果

一、jQuery自带基础动画

隐藏/显示动画

1. show(speed,easing,callback)
   * speed：动画的速度。三个预定义的值(“slow”,“normal”, “fast”)或表示动画时长的毫秒数值(1000为1秒)，默认为0
   * easing：用来指定切换效果，默认是"swing"，可用参数"linear"
   swing：动画执行时效果是 先慢，中间快，最后又慢
   linear：动画执行时速度是匀速的
   * callback：在动画完成时执行的函数，每个元素执行一次。
2. hide(speed,easing,callback)
3. toggle(speed,easing,callback)

淡入淡出动画

1. fadeIn(speed,easing,callback)
2. fadeOut(speed,easing,callback)
3. fadeToggle(speed,easing,callback)
4. fadeTo([speed,opacity,easing,callback) 将对象调整到指定不透明度

滑动动画

1. slideUp(speed,easing,callback)
2. slideDown(speed,easing,callback)
3. slideToggle(speed,easing,callback)

二、自定义动画

$(selector).animate({params},speed,callback);

• params 参数定义形成动画的 CSS 属性。

1. 在一个元素上的动画效果：
   同时执行（异步）：将所有动画写在一个对象中（一个animate）

 $(function() {
        $("button").click(function() {
            $("div").animate({
                left: 500,
                top: 300,
                opacity: .4,
                width: 500
            }, 500);
        })
    });

顺序执行（同步）：
①回调函数（不推荐）
②将所有动画写在多个对象中（多个animate） tip：可以链式调用

 $(function() {
        $("button").click(function() {
            $("div").animate({
                left: 500,
                top: 300,
            }, 500).animate({                
                opacity: .4,
                width: 500},500)
        })
    });

2. 在多个元素上的动画效果：
   同时执行（异步）：默认
   顺序执行（同步）：回调函数

三、停止动画

$(selector).stop(stopAll,goToEnd);

• stopAll 参数规定是否应该清除动画队列。默认是 false。
• goToEnd 参数规定是否立即完成当前动画。默认是 false。