04 . 前端之JQuery

JQuery简介

# 1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。
# 2. jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，
# 能够极大地简化JavaScript编程。它的宗旨就是：“Write less,do more.“

什么是JQuery?

# JQuery是一个JavaScript函数库
# JQuery是一个轻量级的"写的少，做的多"的JavaScript库.可以通过一行简单的标记被添加到网页中．

# JQuery库包含以下功能:

# 1. HTML元素选取
# 2. HTML元素操作
# 3. CSS操作
# 4. HTML事件函数
# 5. JavaScript特效和动画
# 6. HTML DOM遍历和修改
# 7. AJAX(不刷新页面同时修改页面内容)
# 8. Utilities

# 除此之外，JQuery还提供了大量的插件

为什么使用JQuery?

# 目前网络上有大量开源的JS框架，但是JQuery是目前最流行的JS框架，而且提供了大量的扩展.
# 很多大公司都在使用JQuery，例如:
# Google,Microsoft,IBM,Netflix

# JQuery是否适用于所有浏览器
# jQuery 团体知道JS在不同浏览器中存在着大量的兼容性问题,目前jQuery兼容于所有主流浏览器,包括Internet Explorer 6!

JQuery版本

1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)

2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)

3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。

维护IE678是一件让人头疼的事情，一般我们都会额外加载一个CSS和JS单独处理。值得庆幸的是使用这些浏览器的人也逐步减少，PC端用户已经逐步被移动端用户所取代，如果没有特殊要求的话，一般都会选择放弃对678的支持*

JQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$(“#i1”).html()。

$(“#i1”).html()的意思是：获取id值为 i1的元素的HTML代码。其中 html()是jQuery里的方法。相当于： document.getElementById(“i1”).innerHTML;

虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法。

一个约定，我们在声明一个jQuery对象变量的时候在变量名前面加上$：

var $variable = jQuery对像
var variable = DOM对象
$variable[0]//jQuery对象转成DOM对象

拿上面那个例子举例，jQuery对象和DOM对象的使用：

$("#i1").html();//jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;// DOM对象使用DOM的方法

Example DOM和JQuery对象的转换

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
</head>
    <link rel="stylesheet" href="csswenjian"/>
    <style>

    </style>
<body>
    <div id="i1">123</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $("#i1")
    </script>
</body>
</html>

# 打开浏览器访问这个html的console
document.getElementById('i1')
<div id=•"i1">•123•</div>•

$('#i1')           
jQuery.fn.init [div#i1,context: document,selector: "#i1"]

$('#i1')[0]
<div id=•"i1">•123•</div>•

# JQuery对象[0]  => DOM对象
# Dom对象   =>  $(Dom对象)

JQuery安装

可以通过多种方法在网页中添加 jQuery。您可以使用以下方法：

从 jquery.com 下载 jQuery 库

从 CDN 中载入 jQuery,如从 Google 中加载 jQuery

HTML标签引用JQuery

有两个版本的 jQuery 可供下载：

* Production version - 用于实际的网站中，已被精简和压缩。
* Development version - 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从 [jquery.com](http://jquery.com/download/) 中下载。

jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它：

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
</head>
    <link rel="stylesheet" href="csswenjian"/>
    <style>

    </style>
<body>
    <div id="i1">123</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $("#i1")
    </script>
</body>
</html>

# 将下载的文件放在网页的同一目录下，就可以使用JQuery

CDN引用JQuery

如果您不希望下载并存放 jQuery，那么也可以通过 CDN（内容分发网络）引用它。

Staticfile CDN、百度、又拍云、新浪、谷歌和微软的服务器都存有 jQuery 。

如果你的站点用户是国内的，建议使用百度、又拍云、新浪等国内CDN地址，如果你站点用户是国外的可以使用谷歌和微软。如需从Staticfile CDN、又拍云、新浪、谷歌或微软引用 jQuery，请使用以下代码之一：

Staticfile CDN:

<head>  
<script  src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">  </script>  
</head>

百度CDN

<head>  
<script  src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">  </script>  
</head>

新浪CDN

<head>  
<script  src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">  </script> 
</head>

Google CDN

<head>  
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">  </script>  
</head>
# Google产品在中国很不稳定

Microsoft CDN

<head>  
<script  src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>  
</head>

# 使用CDN的JQuery，有一个很大的优势:
# 许多用户访问其他站点时，已经从上面各种CDN加载过JQuery，所以结果是，他们访问你站点时，
# 会从缓存中加载JQuery，这样可以减少加载时间，同时，大多数CDN都可以确保当用户向其请求文件时，
# 会从离最近的服务器上返回响应，这样也可以提高加载速度.

# 在浏览器Console输入 $.fn.jquery可以查看使用的什么版本.

JQuery基础语法

# 通过JQuery，可以选取(查询,query)HTML元素，并对他们执行"操作"(actions).

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<script>
    $(document).ready(function () {
        // alert("文档加载完毕");
        //  当前函数执行完执行alert弹出框
        $("p").click(function () {
            $(this).hide();
        // 隐藏p元素   
        })
    });
</script>
</body>
</html>

查找标签

1. 基本选择器 id选择器：

$("#id")

标签选择器

$("tagName")

Class选择器

$(".className")

配合使用

$("div.c1")
// 找到c1  class类的div标签

所有元素选择器

$("*")

组合选择器

$("#id,.className,tagName")

层级选择器 x和y可以为任何选择器

$("x y");// x的所有后代y（子子孙孙）
$("x > y");// x的所有儿子y（儿子）
$("x + y")// 找到所有紧挨在x后面的y
$("x ~ y")// x之后所有的兄弟y

Example1

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
    <p class="pclass">p1</p>
    <p id="pid">p2</p>
    <button>
        click
    </button>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").text("p元素被修改了");
                $(".pclass").text("p元素通过class被修改了");
                $("#pid").text("p元素通过pid被修改了");
            });
        });
    </script>
</body>
</html>

基本筛选器

:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

// 示例,多用于input标签
<input type="text">
<input type="password">
<input type="checkBox">
$("input[type='checkBox']");// 取到checkBox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button>Click</button>
<script>
    $(document).ready(function () {
        // $("button").click(function () {
        //     $(this).hide();
            // 单击事件
        // });

        // $("button").dblclick(function () {
            // $(this).hide();
            // 双击事件
        // });

        $("button").mouseenter(function () {
            $(this).hide();
            // 当鼠标放到按钮上触发此事件，
            // mouseleave是鼠标移开按钮触发的事件
        });
    })
</script>
</body>
</html>

事件之绑定，解除绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
<button id="clickBind">ClickBind</button>
<script>
    $(document).ready(function () {
        // $("#clickBind").click(function () {
            // alert("hello")
            // 当我们的事件很多时，这样写非常消耗内存
        // });

        $("#clickBind").bind("click",clickHandler1);
        $("#clickBind").bind("click",clickHandler2);
        // $("#clickBind").unbind("click"); //这种解除绑定会解除所有
        $("#clickBind").unbind("click",clickHandler1()); //解除单一绑定


        $("#clickBind").on("click",clickHandler1);  // bind底层都是使用on,off实现
        $("#clickBind").off("click",clickHandler2);
    });

    function clickHandler1(e) {
        console.log("clickHandler1")
    }
    function clickHandler2(e) {
        console.log("clickHandler2")
    }
</script>
</body>
</html>

自定义事件

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
    <script src="../jquery-2.1.1.min.js"></script>
</head>
<body>
    <button id="ClickMeBtn">Click</button>
    <script>
        var ClickMeBtn
        $(document).ready(function () {
            ClickMeBtn = $("#ClickMeBtn");
            ClickMeBtn.click(function () {
                var e = jQuery.Event("MyEvent");
                ClickMeBtn.trigger(e);
            });

            ClickMeBtn.bind("MyEvent",function(event) {
                console.log(event);
            })
        })
    </script>
</body>
</html>

Example2

$("div:has(h1)")// 找到所有后代中有h1标签的div标签
$("div:has(.c1)")// 找到所有后代中有c1样式类的div标签
$("li:not(.c1)")// 找到所有不包含c1样式类的li标签
$("li:not(:has(a))")// 找到所有后代中不含a标签的li标签

Example3 多选，全选，反选

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <input type="button" value="全选" onclick="ChackAll()" />
    <input type="button" value="反选" onclick="ReverseAll()" />
    <input type="button" value="取消" onclick="CancleAll()" />


    <table border="1">
        <thead>
            <tr>
                <th>选项</th>
                <th>IP</th>
                <th>Port</th>
            </tr>
        </thead>

        <tbody >
            <tr>
                <td><input type="checkBox"></td>
                <td>1.1.1.1</td>
                <td>80</td>
            </tr>

            <tr>
                <td><input type="checkBox"></td>
                <td>1.1.1.2</td>
                <td>3306</td>
            </tr>
        </tbody>
    </table>

    <script src="jquery-1.12.4.js"></script>
    <script>
        function ChackAll() {
            $(':checkBox').prop('checked',true);
        }

        function CancleAll() {
            $(':checkBox').prop('checked',false);
        }

        function ReverseAll() {
            $(':checkBox').each(function (k) {
                //  this代表当前循环的每一个元素
                //  反选，循环出来每个元素,
                //     console.log(k,this)