在网页中，常常使用 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 事件处理方法(例如.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 允许链接（链式语法）。链接（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
网友评论