jQuery 初探

在网页中，常常使用 HTML、CSS、javascript

HTML 用于页面的布局，以及一些组件的布放

CSS 是对页面的样式进行修改、美化

javascript 定义了页面中的一些行为，比如，点击某个元素后，进行隐藏或改变颜色等

原生 javascript 弊病

编写太繁琐，不好用

jQuery 出现

jQuery 是一个 JavaScript 的第三方库。对 javascript 进行了封装，极大地简化了 JavaScript 编程。同时，jQuery 很容易学习。

jQuery 库包含以下特性：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities

使用

jQuery 基础语法

jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。

基础语法是：

$(selector).action()

美元符号$表示调用 jQuery 库
（selector）用于“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作

$(this).hide() 函数，隐藏当前的 HTML 元素。
$("#test").hide() 隐藏 id="test" 的元素。ID
$("p").hide()  隐藏所有 <p> 元素。标签
$(".test").hide()  隐藏所有 class="test" 的元素。CSS 属性

选择器

jQuery 元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。

$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

jQuery 属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

jQuery CSS 选择器

jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。

查找元素：$('css 选择器')

下面的例子把所有 p 元素的背景颜色更改为红色：

$("p").css("background-color","red");

另一个例子：

$("div table td.abc input[type=submit]") 空格表示所属关系，div table取到一类元素；td.abc类，即 class；input 的类型

部分其他语法：

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

jQuery 参考手册 - 选择器

jQuery 的操作

jQuery 事件处理方法(例如.click)是 jQuery 中的核心函数。

事件处理程序指的是当 HTML 中发生某些监听的事件时，所调用的方法。

涉及定义对事件的监听和指定事件发生时调用的方法。方法中会有 javascript 代码和 jQuery 语句。

通常会把 jQuery 事件处理程序放到<head>的 javascript 脚本中：

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>

<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>

</html>

页面加载完成后，点击button按钮，会隐藏p标签的内容

对页面元素操作

$()jquery 定义的元素对象，通常是在 javascript 对象的基础上增加了一些属性和一层封装

读取属性、设置属性，读和写只差一个参数

找本页面的元素的 id: $(#id_name)or$(div#id_name)。

$(#id_name).empty()清空子元素，$(#id_name).append()添加子元素，$(#id_name).html()返回元素内的 HTML 代码，$(#id_name).html("一段 HTML 代码")设置元素内容

jquery 事件

事件，浏览器中发生了什么

普通事件监听

$("selector").click(function(e){

});

选择元素，事件类型，执行的函数。$(e.target)取到事件的元素。

一个表格，最后一列是操作，增加或删除按钮，点击按钮后，调用函数，.closest('tr').find('td.idStore').attr('data-id')，向上找最近的tr，然后向下找 class为idStore的td，获取date-id属性

有一个弊端，有些应用，在 html 的 body 中没有任何内容，所有内容都是通过 javascript 生成的。如果一开始我们监听元素时元素没有出现，监听失效

文艺事件监听

不怕后加入的节点

$("selector").on('click',function(e){

});

这个监听的元素在最开始可以不存在在页面中，用户操作过程中生成的元素，只要符合选择器，监听就有效

取消监听

$("selector").off();

如果需要对绑定事件取消绑定，重新绑定，可以通过 off。off 与 on 是一对

jQuery 参考手册 - 事件

链接/链式语法

jQuery 允许链接（链式语法）。链接（Chaining）是一种在同一对象上执行多种任务的便捷方法。

<script>
function myFunction()
{
$("#h01").attr("style","color:red").html("Hello jQuery")
}
$(document).ready(myFunction);
</script>

例如这里的$("#h01").attr("style","color:red").html("Hello jQuery")

jquery 网络请求

jQuery $.get() 方法

$.get(URL,callback);

URL参数，必须，规定您希望请求的 URL。
callback参数，可选，是请求成功后所执行的函数名。

例子：

$("button").click(function(){
  $.get("demo_test.asp",function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

$.get()的第一个参数是我们希望请求的 URL"demo_test.asp"。

第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

jQuery $.post() 方法

$.post(URL,data,callback);

URL参数，必需，规定希望请求的 URL。
data参数，可选，规定连同请求发送的数据。
callback参数，可选，是请求成功后所执行的函数名。

例子：

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

$.post()的第一个参数是我们希望请求的 URL"demo_test_post.asp"。然后我们连同请求（name 和 city）一起发送数据。"demo_test_post.asp" 中的 ASP 脚本读取这些参数，对它们进行处理，然后返回结果。第三个参数是回调函数。第一个回调参数存有被请求页面的内容，而第二个参数存有请求的状态。

jQuery 函数

文档就绪函数

通常会将所有 jQuery 函数、代码放入一个$(document).ready(function()函数中：

$(document).ready(function(){

--- jQuery functions go here ----

});

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码。

如果在文档没有完全加载之前就运行函数，操作可能失败。

jQuery 代码

jQuery 语句和 javascript 代码可以一起放入 jQuery 函数，函数可以嵌套

下面是一个完整的使用例子：

引入 jQuery 库和单独的 CSRF jQuery 函数文件

    <script type="text/javascript" src="/static/lib/jquery/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/static/lib/jquery/jquery.csrf.js"></script>

jquery.csrf.js的内容：

// using jQuery
function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie != '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            // Does this cookie string begin with the name we want?
            if (cookie.substring(0, name.length + 1) == (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken');

function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

定义了一个表单

          <form >
            <div class="form-group">
              <label for="content">内容</label>
              <textarea class="form-control" rows="5" name="content" id="commentContent" ></textarea>
            </div>
            <button type="submit" class="btn btn-default" id="commentBtn">发表</button>
          </form>

在表单下面定义了 javascript 脚本，如果点击了表单中id="commentBtn"的按钮，jQuery 发送post请求，请求内容为id="commentContent"中的值，如果请求成功，$("#commentContent").val("");将id="commentContent"中的值设为空，并通过设置window.location.href为一个连接地址进行页面跳转。

              <script type="text/javascript">
              $(document).ready(function(){
               $("#commentBtn").click(function(){
                var article_id = {{ article.id }};
                var to_comment_id = 0;
                var comment = $("#commentContent").val();
                var pages_num = {{ pagination.pages_num }};
                var param = {"article_id":article_id, "to_comment_id":to_comment_id, "content":comment};
                $.post("{% url 'comment_create' %}", param, function(){
                 $("#commentContent").val("");
                 window.location.href = "{% url 'article_detail' article.id %}?comment_page_no=" + (pages_num + 1);
                });
               })
              })
              </script>

直接将函数放到<head>标签中

通常会把 jQuery 代码、函数、放到 <head>部分的事件处理方法中

单独文件中的函数

如果网站包含许多页面，并且希望 jQuery 函数易于维护，可以将 jQuery 函数放到独立的 .js 文件中。通过 src 属性来引用文件

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

在页面引用 jQuery 库

jQuery 库可以通过一行简单的标记被添加到网页中

本地添加

可以将 jQuery 库下载到本地，然后作为外部 js 文件添加到页面中

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

一份是精简过的，另一份是未压缩的（供调试或阅读）。
这两个版本都可从jQuery.com下载。

因为 jQuery 库是在一个 JavaScript 文件中，其中包含了所有的 jQuery 函数，所以可以通过在script标签中引用 js 文件的方式将 jQuery 添加到网页中：

`<script type="text/javascript" src="/static/lib/jquery/jquery-1.9.1.min.js"></script>`

请注意，<script> 标签应该位于页面的<head> 部分。

试了一下，好像可以放在页面的任何位置，HTML标签内的任何位置，甚至HTML外也可以

CDN

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

jQuery 库名称中带有min，表示是 jQuery 核心文件

大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

通过 CDN 地址引入 jQuery 库

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

在页面中调用 jQuery

在浏览器的console中可以调用已经加载好的 jQuery

参考资料

最后编辑于：2017.12.03 05:29:46

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 199,064评论 5赞 466
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 83,606评论 2赞 376
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 146,011评论 0赞 328
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 53,550评论 1赞 269
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 62,465评论 5赞 359
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 47,919评论 1赞 275
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 37,428评论 3赞 390
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,075评论 0赞 254
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 40,208评论 1赞 294
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,185评论 2赞 317
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,191评论 1赞 328
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 32,914评论 3赞 316
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 38,482评论 3赞 302
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 29,585评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 30,825评论 1赞 255
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 42,194评论 2赞 344
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 41,703评论 2赞 339