jQuery入门

一、jQuery简介

1、jQuery 是一个 JavaScript 库，是一个轻量级的"写的少，做的多"的JavaScript库，极大地简化了 JavaScript 编程。jQuery 库可以通过一行简单的标记被添加到网页中。
2、目前jQuery兼容于所有主流浏览器, 包括Internet Explorer 6，但jquery-2.0以上版本不支持 IE6，7，8 浏览器。
3、jQuery库包含以下功能：HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、 JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX和 Utilities。除此之外，Jquery还提供了大量的插件。

二、jQuery安装

可以通过多种方法在网页中添加 jQuery

1、从 jquery.com 下载 jQuery 库
    ⑴下载地址：http://jquery.com/download/
    ⑵有3个可供下载的文件：
        ①Production jQuery版：优化压缩后的版本，具有较小的体积，主要用于部署网站时使用
        ②Development jQuery版：未压缩版本，用于测试和开发。
        ③jQuery map文件：map文件能够被用来在源代码感知的浏览器上调试压缩后的jQuery文件，一般不需要下载
    ⑶jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它

2、从 CDN（内容分发网络）中载入 jQuery
    ⑴BootCDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。最新版的压缩版引用地址可以在网上查询。注：如果没用网络，引入的CDN将失效。
        ①BootCDN:<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" ></script>
        ②百度CDN:<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>
        ③又拍云 CDN:<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"></script>
        ④新浪 CDN:<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>
        ⑤Google CDN:<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        ⑥Microsoft CDN:<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
        ⑦官网jquery压缩版引用地址：<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    ⑵从 CDN中载入jQuery有一个很大的优势：许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所以结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

三、jQuery语法

1、jQuery 语法是通过选取HTML元素，并对选取的元素执行某些操作。

2、基础语法： $(selector).action()
     ①$()==jQuery(),定义jQuery对象。
     ②选择符selector是"查询"和"查找" 的HTML元素,都放在双引号("")中。
     ③ jQuery 的 action() 执行对元素的操作

3、连缀编程模式：允许我们在相同的元素上运行多条jQuery命令，一条接着一条。

4、jQuery对象与DOM对象间的转换
     ①jQuery对象转换成DOM对象
        实际上jQuery对象是包含一个数组对象和各种方法的类，而jQuery对象的数组里保存的是DOM对象，因此可以通过索引的方式将jQuery对象转换成DOM对象：[index],还可以通过get(index)

var $cr=$("#div3");
var cr=$cr[0];
var cr=$cr.get(0);

     ②DOM对象转换成jQuery对象
        $(dom对象/jQuery对象)

var cr=document.getElementById("div3");
var $cr=$(cr);

5、在具体开发项目时，如果获取得对象是jQuery对象，那么在变量标识符前面加上$,这样方便识别出哪些是jQuery对象。

四、jQuery 选择器

1、jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
2、jQuery 中所有选择器都以美元符号开头：$()。
3、jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
4、如果网站包含许多页面，并且希望jQuery 函数易于维护，那么就把jQuery函数放到独立的 .js 文件中。

五、用jQuery来操作DOM

1、修改元素属性
由于jQuery是对结果集进行隐式迭代的操作，因此一个jQuery对象可以同时对多个元素进行属性更改。
获取和设置属性使用attr方法，移除属性使用removeAttr方法。
$(selector).attr(attribute)

2、修改元素内容
text([parameter]):设置(带参)或返回(无参)所选元素的文本内容
html([parameter]):设置(带参)或返回(无参)所选元素的内容(包括HTML标记)
val([parameter]):设置(带参)或返回(无参)表单字段的值

3、动态创建内容
jQuery动态创建HTML元素使用工厂函数$()实现：$(标签,[设置标签的属性])
它会动态创建一个DOM对象，但这个对象并没有添加到DOM对象树中，可以使用append()、prepend()、after()、before()等将其添加到DOM对象树。

4、动态插入节点

方法名称	方法描述
append()	在被选元素的结尾（仍然在内部）插入指定内容    $(selector).append("内容")
appendTo()	在被选元素的结尾（仍然在内部）插入指定内容    $("内容").appendTo(selector)
prepend()	在被选元素的开头（仍然在内部）插入指定内容
prependTo()	在被选元素的开头（仍然在内部）插入指定内容
after()	在被选元素后插入指定的内容    $(selector).after("内容")
before()	在被选元素前插入指定的内容    $(selector).before("内容")
insertAfter()	把匹配的元素插入到另一个指定的元素集合的后面    $("内容").insertAfter(selector)
insertBefore()	把匹配的元素插入到另一个指定的元素集合的前面    $("内容").insertBefore(selector)

5、动态删除节点
    ①remove()：用来删除指定的DOM元素，它会将节点从DOM元素树中移除，但是会返回一个指向DOM元素的引用。$(selector).remove()
      ②empty():该方法也不会删除节点，只是清空节点中的内容，DOM元素依然保持在DOM元素树中。$(selector).empty()

六、jQuery 事件

1、jQuery 是为事件处理特别设计的。
事件：就是被对象识别的操作，即操作对象对环境变化的感知和反应。
事件流：是指由于HTML文档使用的是DOM模型，而该模型是从上到下一级一级的结构，因此就会触发一连串的对象。
冒泡事件流：事件激活顺序是从出发点元素开始向上层逐级冒泡直到document为止。
事件处理程序：指的是当 HTML 中发生某些事件时所调用的方法。

2、页面初始化事件
    ①所有 jQuery 函数位于一个 $(document).ready()函数中，这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。可以执行多次，第N次都不会被上一次覆盖。
       $(document).ready(function(){...});
       比较简洁写法：$().ready(function{...})
       简洁写法：$(function(){...});
    ②JavaScript的window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。只能执行一次，会覆盖上一次。window.onload = function () {// 执行代码 }
    ③为了能正确使用ready事件，必须确保<body>标签中没有定义onload事件。

3、绑定事件
    ①一般会在页面加载事件中为DOM中的元素关联事件。
       bind方法，专门用于事件的绑定，语法：$(selector).bind(event[,data],function)
       event参数可以是所有的JavaScript事件对象;可选的data参数作为event.data属性值传递给事件对象的额外数据对象;function则是用来绑定的处理函数，一般事件处理代码就写在这个函数的函数体内。
    ②与JavaScript的事件处理类型相比，jQuery的事件处理类型少了on前缀。
    ③bind方法还可以同时关联多个事件处理代码，这样可以一次性地为同一个元素关联多种不同的事件处理程序。
        $(selector).bind({ event:function(){...},event:function(){...},...})

4、移除事件绑定
$(selector).unbind(event,function)
如果不指定unbind的任何参数，将移除选定元素上的所有的事件处理程序，参数event指定要删除的事件，多个事件之间用空格分隔，function用来指定取消绑定的函数名。

5、切换事件
当两个以上的事件绑定到一个元素上时，可以定义根据元素的不同动作行为在不同的动作间进行切换。
    ①hover:元素在鼠标悬停与鼠标移出的事件中进行切换，这个方法实际上是对mouseenter和mouseleave事件的合并，用来模仿一种鼠标悬停的效果。
        hover([over,]out)
        可选的over表示鼠标经过时要执行的事件处理代码，out表示鼠标移出时要执行的事件处理代码。
    ②toggle:可以依次调用多个指定的函数，直到最后一个函数，接下来又重复对这些函数进行轮流调用。（新版本已废弃）