jQuery基础

jQuery API 3.1.0 速查表： http://www.php100.com/manual/jquery/

jQuery 是一个 JavaScript 库，用于简化Javascript的开发。适合HTML 元素选取与操作、CSS 操作、HTML 事件操作、JS特效和动画、DOM 遍历和修改、AJAX、Utilities 等等。

1 前言

1.1 jQuery 种类

jquery-3.1.0.js   //未压缩版，代码易读，适合开发环境下使用
jquery-3.1.0.min.js   //压缩版，访问速度快，代码可读性差。适合在生产环境下使用
jquery-3.1.0.slim.js    //精简版，去掉了ajax的功能，如果你不需要用到ajax或者使用了独立的第三方ajax库，就可以用这个
jquery-3.1.0.slim.min.js    //精简压缩版，只是对精简版的代码进行了压缩

1.2 获取 jQuery

1.下载到本地

<script src="jquery-3.1.0.js"></script>

2.CDN加速（推荐）

<script src="http://lib.sinaapp.com/js/jquery/3.1.0/jquery-3.1.0.js"></script>

国内常用的免费JavaScript库CDN：
1.新浪：http://lib.sinaapp.com/
2.百度：http://cdn.code.baidu.com/
3.又拍云：http://jscdn.upai.com/
4.七牛：https://www.staticfile.org/
5.BootCDN：http://www.bootcdn.cn/

2 DOM

2.1 基础

jQuery的核心是jQuery()函数，但一般都写成$()，也可以理解为 $ 即 jQuery。$()可以完成如下操作：

• 查找、选择元素
• 创建、追加和删除元素
• 用jQuery对象封装普通的DOM对象

2.1.1 名称冲突

/*jQuery 使用 ```$``` 符号作为 jQuery 的简介方式，但是某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 ```$ ```符号。为防止两者发生冲突，可以使用noConflict() 的方法来解决该问题。*/

//在jQuery中使用自定义的名称代替$ 符号
var jq=jQuery.noConflict();

2.1.2 ready()

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

在DOM加载完成时运行的代码，可以这样写：

$(document).ready(function(){
  // 在这里写你的代码...
});

简写：

$(function($) {
  // 可以在这里继续使用$作为别名...
});

2.2 选择器

查找DOM中元素的方式：CSS选择器。

语法	注释
$("*")	匹配所有元素
$(this)	当前 HTML 元素
$("p")	所有<p> 元素
$("p.intro")	所有class="intro"的<p>元素
$(".intro")	所有class="intro" 的元素
$("#intro")	id="intro"的元素
$("ul li:first")	每个<ul> 的第一个 <li>元素
$("div#intro .head")	id="intro"的<div>元素中的所有class="head"的元素
$("p > span")	选择<p>内的<span>
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的href属性

注意：使用$()获取的结果是个元素数组，而不是某一个元素。

<a id="test1"></a>
<a id="test2"></a>
<a id="test3"></a>

<p>
<div>div1</div>
<span>span1</span>
</p>
<span class="testclass">span2</span>

<script>
    //选择id为"test1"的元素
    var elements = $("#test1");

    //选择所有<a/>元素
    var elements = $("a");

    //批量修改所有选定的元素属性，其内部有个循环
    elements.attr("target", "_blank");

    //既然是数组，就有length属性不过这个不常用
    elements.length

    //选择<p>内的<span>
    var innnerSpan = $("p > span");

    //同时使用多个选择器
    var elements = $("a, #test1, .testclass, p > span");

    //批量修改样式
    var elements = $("a, #test1, .testclass, p > span").attr("style","color:red");
</script>

更多内容参考：选择器参考手册

2.3 元素

2.3.1 创建元素(追加 )

创建一个超链接，使用append()方法

var a = $("<a/>").attr({
    id:"myLink",
    href:"http://baidu.com",
    title:"Baidu",
}).text("Click here");

$(document.body).append(a);

2.3.2 删除元素

删除所选则的元素，使用remove()方法

$("#test").remove();

删除某个元素的所有子节点，使用empty()方法

$(document.body).empty();

2.3.3 隐藏元素

隐藏元素使用hide()方法

//隐藏所有 <p> 元素
$("p").hide();

//隐藏所有 class="test" 的元素
$(".test").hide();

2.4 样式

修改样式要使用jQuery对象中的css()方法

//修改单个样式
$("#testdiv").css("color","red");

//修改多个样式
$("#testdiv").css({
    color:"red",
    backgroundColor:"yellow"
});

2.4.1 修改CSS类

修改CSS类分别使用addClass()与removeClass()方法

<div id="test_id" class="class1 class2">
    blablabla
</div>

<script>
    $("#test_id").addClass("class3");

    $("#test_id").addClass("class4 class5");

    $("#test_id").removeClass("class1 class2");

    $("#test_id").removeClass(); //删除对象元素中的所有CSS类
</script>

2.4.2 切换CSS类

切换CSS类需要使用。如果指定的类存在，则删除之。如果不存在，则添加之。

    $("#test_id").toggleClass("class1");

用jQuery对象封装普通的DOM对象，以此得到的jQuery对象叫做封装器对象。封装器对象一般用于改进另一个对象的功能。以下代码表示，用jQuery对象封装元素对象，以使用toggleClass()切换"class1"类。

var target =$(e.target());
if(e.type == "mouseover" || e.type == "mouseout"){
    target.toggleClass("class1");
}

2.4.3 检查CSS类

检查CSS类是否应用于某元素，使用hasClass()方法

$("#test_id").hasClass("class1");

2.5 属性

2.5.1 attr()

attr()为指定元素指定属性，可用于所有属性

//为所有图像设置src和alt属性
$("img").attr({ src: "test.jpg", alt: "Test Image" });

//为所有图像设置src属性
$("img").attr("src","test.jpg");

//把src属性的值设置为title属性的值
$("img").attr("title", function() { return this.src });

2.5.2 removeAttr()

//删除指定属性
$("img").removeAttr("src");

2.5.3 prop()

与attr不同，prop()专门用于checked属性

//获取复选框中checked的属性值。选中复选框为true，没选中为false。
$(":checkbox").prop("checked");

//禁用页面上的所有复选框
$("input[type='checkbox']").prop({
  disabled: true
});

禁用和选中所有页面上的复选框。
$("input[type='checkbox']").prop("disabled", false);
$("input[type='checkbox']").prop("checked", true);

通过函数来设置所有页面上的复选框被选中
$("input[type='checkbox']").prop("checked", function( i, val ) {
  return !val;
});

全选，反选，取消的功能实现:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <script type="text/javascript" src="jquery-3.1.1.js"></script>
    <script type="text/javascript" src="test_js.js"></script>
</head>
<body>
<input type="button" value="全选" onclick="CheckAll()">
<input type="button" value="反选" onclick="CheckReverse()">
<input type="button" value="取消" onclick="CheckCancel()">
<table border="1">
    <thead></thead>
    <tbody id="tb1">
    <tr>
        <td><input type="checkbox"></td>
        <td>11</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>22</td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>33</td>
    </tr>
    </tbody>
</table>
<script>
    function CheckAll() {
// $("#tb1").find(":checkbox").attr("checked", "checked");
        $("#tb1").find(":checkbox").prop("checked", true); //建议写法
    }
    function CheckReverse() {
        $("#tb1").find(":checkbox").each(function () {
            if ($(this).prop("checked")) {
                $(this).prop("checked", false);
            } else {
                $(this).prop("checked", true);
            }
        })
    }
    function CheckCancel() {
// $("#tb1").find(":checkbox").removeAttr("checked");
        $("#tb1").find(":checkbox").prop("checked", false);
    }
</script>
</body>
</html>

3 事件

jQuery中的一般事件应用

<a onclick="xxx();">!!!!!!</a>
<div id="d1">12312322</div>

<script>
    $(function () {         //当文档加载完毕自动执行此处代码
        $('#d1').click(function () {        //绑定事件（方法一）
            //$(this)表示当前点击的标签
            alert($(this).text());
        });

//        $('#d1').bind("click",function () {   //绑定事件（方法二）
//            alert($(this).text());
//        })
    });
</script>

3.1 设置监听器

所有的jQuery对象都有on()方法，用于监听事件。

function elementClick(e) {
    alert("You clicked me!");
}

$(".class1").on("click", elementClick);

监听多个事件：

function clickHandler(e) {
    alert("You clicked me!");
}
function dblclickHandler(e) {
    alert("You double-clicked me!");
}

$(".class1").on({
    click:clickHandler,
    dblclick:dblclickHandler()
});

3.2 删除监听器

删除监听器：

$(".class1").off("click", elementClick);

$(".class1").off({
    click:clickHandler,
    dblclick:dblclickHandler()
});

删除所所选元素的所有监听器

$("#test").off();

4 jQuery 下的 Ajax

jQuery 提供多个与 AJAX 有关的方法。通过这些方法能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON。同时能够把这些外部数据直接载入网页的被选元素中。

4.1 load()

load()方法从服务器加载数据，并把返回的数据放入被选元素中。

$(selector).load(URL,data,callback);
//URL(必选)：必需的 URL 参数规定您希望加载的 URL。
//data：规定与请求一同发送的查询字符串键/值对集合。
//callback：参数是 load() 方法完成后所执行的函数名称。

<h3 id="test">*******</h3>
<button id="btn1" type="button">点击，获取所请求文件的内容</button>


<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("#test").load("123.txt");
  })
})
</script>

4.2 get()

GET：从指定的资源请求数据，用于从服务器获得（取回）数据，GET 方法可能返回缓存数据。

$.get(URL,callback);
//URL(必选)：要请求的 URL
//callback ：请求成功后所执行的回调函数。

<button>向目标页面发送 GET 请求，然后获得返回的结果</button>

<script>
    function callback(data, status) {
        alert("数据：" + data + "
状态" + status);
    }

    function clickHandler() {
        $.get("123.txt", callback);
    }

    $("button").on({
        click: clickHandler
    });
</script>

4.3 post()

POST：向指定的资源提交要处理的数据，也可以用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

$.post(URL,data,callback);
//URL(必选)：要请求的 URL
//data ：规定连同请求发送的数据。
//callback ：请求成功后所执行的回调函数。

<button>向目标页面发送 POST 请求，然后获得返回的结果</button>

<script>
$(document).ready(function(){
  $("button").click(function(){
    $.post("/example/jquery/demo_test_post.asp",
    {
      name:"Morra",
      city:"Beijing"
    },
    function(data,status){
      alert("数据：" + data + "
状态：" + status);
    });
  });
});
</script>

4.4 ajax()

本地请求

<input type="button" value="跨域请求" onclick="AjaxRequest();"/>
<div id="request_times"></div>
<script>
    function AjaxRequest() {
        $.ajax({   //发送一个请求
            url: "",
            type: "GET",
            data:{'k1':'v1','k2':'v2'},
            success: function (data) {
                //当请求成功并从远程获取返回值的，时候此函数会自动执行
                $('#request_times').append(data);
            },
            error: function () {
                //当请求发生错误的时候自动执行
            }
        })
    }
</script>

跨域请求

<input type="button" value="跨域请求" onclick="AjaxRequest();"/>

<script>
    function AjaxRequest() {
        $.ajax({   //发送一个请求
            url: "",
            type: "GET",
            dataType:'jsonp',
            jsonp:'callback',
            jsonpCallback:'hello',  //jsonpCallback的值就是服务端包装数据的值hello(das;qdw数据qweqwe)
            success: function (data) {
                //当请求成功并从远程获取返回值的，时候此函数会自动执行
                console.log(data)
            },
            error: function () {
                //当请求发生错误的时候自动执行
            }
        })
    }
</script>

详情参考：jQuery 参考手册 - Ajax

5 补充

5.1 each()

循环所有数据，取出每一个数据的内容。类似于python中的for循环。
数组

a = [11, 22, 33, 44];
$.each(a, function (index) {
    console.log(a[index]);
})

字典

var b = {"a": 1, "b": 2};
$.each(b, function (k, v) {
    console.log(k, v)
})

5.2 map()

将一组元素转换成其他数组（不论是否是元素数组，可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用'$.map()'来方便的建立。

HTML 代码:

<p><b>Values: </b></p>
<form>
  <input type="text" name="name" value="John"/>
  <input type="text" name="password" value="password"/>
  <input type="text" name="url" value="http://ejohn.org/"/>
</form>

jQuery 代码:

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

结果:

[ <p>John, password, http://ejohn.org/</p> ]

5.3 返回顶部的实现

<input type="button" onclick="GoTop()" value="返回顶部">
<div id="content" style="height: 100px; 200px;overflow: auto; background-color: antiquewhite;">
<p>占位符</p>
<p>占位符</p>
<p>占位符</p>
<p>占位符</p>
<p>占位符</p>
<p>占位符</p>
<p>占位符</p>
<p>占位符</p>
</div>
<script>
    function GoTop() {
        $('#content').scrollTop(0); //某个div返回顶部
// $(window).scrollTop(0); //整个窗口返回顶部
    }
</script>

5.4 菜单栏的实现

<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="jquery-3.1.1.js"></script>
    <style>
        .hide {
            display: none;
        }
    </style>
</head>
<body>

<div>
    <div>
        <div onclick="change(event)">菜单一</div>
        <div class="content hide">
            <div>1</div>
            <div>2</div>
            <div>3</div>
        </div>
    </div>

    <div>
        <div onclick="change(event)">菜单二</div>
        <div class="content hide">
            <div>11</div>
            <div>22</div>
            <div>33</div>
        </div>
    </div>

    <div>
        <div onclick="change(event)">菜单三</div>
        <div class="content hide">
            <div>111</div>
            <div>222</div>
            <div>333</div>
        </div>
    </div>
</div>

<script>
    function change(e) {
        $(e.target).next().removeClass("hide");  //查找内容div，并显示内容

        $(e.target).parent().siblings().find(".content").addClass("hide");          //查找除点击以外的所有菜单，并给每个菜单都加上hide的样式
    }
</script>
</body>
</html>

6 插件

6.1 开源插件

插件	地址
bootstrap	http://getbootstrap.com/
bxslider	http://bxslider.com/
jquery-easyui	http://www.jeasyui.net/
jquery-validate	https://jqueryvalidation.org/
font-awesome	http://fontawesome.io/

6.2 自定义插件

//index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script src="jquery-3.1.1.js"></script>
    <script src="extends.js"></script>   <!--注意插件要放在jquery后面-->
</head>
<body>

<a onclick="xxx();">!!!!!!</a>
<div id="d1">12312322</div>

</body>
</html>

extends.js插件文件写法如下：

//extends.js
 $.extend({
     "morra":function () {
         return 123;
     }
 })

但是一般建议使用把插件方法封装在自执行函数中，extends.js加载的时候函数就会自动执行，不需要额外调用，写法如下：

//extends.js
(function (arg) {
    arg.extend({
        "morra":function () {
            return "morra";
        }
    });
})(jQuery);