jQuery
jQuery
一、基本概念
1. 导入
// Google CDN
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
// Microsoft CDN
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
// Download file and add to src
// https://jquery.com/download/，其中Production version为生产版本，Development version为测试和开发版本。- 基本语法
$(selector).action() - 文档就绪函数 所有 jQuery 函数位于一个 document ready 函数中，为了防止文档在完全加载（就绪）之前运行 jQuery 代码。
$(document).ready(function(){
--- jQuery functions go here ----
});2. 选择器
（1）元素选择器
jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。
$("div#intro .head") 选取id="intro" 的 <div> 元素中的所有 class="head" 的元素（2）属性选择器
jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。（3）CSS选择器
jQuery CSS 选择器可用于改变 HTML 元素的 CSS 属性。
例如：$("p").css("background-color","red");3. jQuery 事件
通常会把 jQuery代码放到<head>部分的事件处理方法中。
当Jquery名称冲突时，可以利用var jq = jQuery.noConflict()来使用jq代替表示Jquery。
Event 函数 | 绑定函数至 |
|---|---|
$(document).ready(function) | 将函数绑定到文档的就绪事件（当文档完成加载时） |
$(selector).click(function) | 触发或将函数绑定到被选元素的点击事件 |
$(selector).dblclick(function) | 触发或将函数绑定到被选元素的双击事件 |
$(selector).focus(function) | 触发或将函数绑定到被选元素的获得焦点事件（被选中） |
$(selector).mouseover(function) | 触发或将函数绑定到被选元素的鼠标悬停事件 |
- 隐藏和显示
$(selector).hide();
$(selector).hide(speed,callback);
$(selector).show();
$(selector).show(speed,callback);
// 切换hide()和show()方法
$(selector).toggle();
$(selector).toggle(speed,callback);待添加
二、jQuery HTML
1. jQuery 获取
DOM：Document Object Model（文档对象模型）
- 获得内容 text() - 设置或返回所选元素的文本内容 html() - 设置或返回所选元素的内容（包括 HTML 标记） val() - 设置或返回表单字段的值
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});- 获取属性 attr() 方法用于获取属性值。
$("button").click(function(){
alert($("#w3s").attr("href"));
});2. jQuery设置内容和属性
- 设置内容 text()、html() 以及 val()
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});text()、html() 以及 val() 的回调函数。回调函数由两个参数：被选元素列表中当前元素的下标i，以及原始（旧的）值origText，返回return函数新值。
$("#btn1").click(function(){
$("#test1").text(function(i,origText){
return "Old text: " + origText + " New text: Hello world!
(index: " + i + ")";
});
});- 设置属性 attr() 方法也用于设置/改变属性值，可以同时设置多个属性。
$("button").click(function(){
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");
});
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});attr() 的回调函数。参数跟返回值同上。
$("button").click(function(){
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
});3. jQuery 添加
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容通用的格式，以下以append()为例，只是显示的效果不同。
// 增加文本
$("p").append("<b>Some appended text.</b>");
// 增加表单
$("p").append("<li>Appended item</li>");
// 增加多个
var txt1 = ...; var txt2 = ...; var txt3 = ...;
$("body").append(txt1,txt2,txt3); 4. jQuery 删除
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除“子元素”用法如下：
$("#div1").remove();
// 增加删除中的过滤，删除 class="italic" 的所有 <p> 元素：
$("p").remove(".italic");5. 获取并设置 CSS 类
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性前三者的用法如下，其中blue和important为写好的CSS样式。
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("div").addClass("important");
});css() 方法设置或返回被选元素的一个或多个样式属性。
// 返回CSS属性
$("p").css("background-color");
// 设置CSS属性
$("p").css("background-color","yellow");
$("p").css({"background-color":"yellow","font-size":"200%"});6. 尺寸
width() - 设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() - 设置或返回元素的高度（不包括内边距、边框或外边距）。
innerWidth() - 返回元素的宽度（包括内边距）
innerHeight() - 返回元素的高度（包括内边距）。
outerWidth() - 返回元素的宽度（包括内边距和边框）。
outerHeight() - 返回元素的高度（包括内边距和边框）。用法如下：
// 获取宽度和高度
var txt="";
txt+="Width of div: " + $("#div1").width() + "</br>";
txt+="Height of div: " + $("#div1").height();
$("#div1").html(txt);
// 设置宽度和高度
$("button").click(function(){
$("#div1").width(500).height(500);
});三、 jQuery 遍历
通过 jQuery 遍历，您能够从被选（当前的）元素开始，轻松地在家族树中向上移动（祖先），向下移动（子孙），水平移动（同胞）。这种移动被称为对 DOM 进行遍历。
可通过$("h2").siblings().css({"color":"red","border":"2px solid red"});和.css("background-color","yellow")来高亮显示DOM。
1. 祖先（向上遍历）
parent() - 返回被选元素的直接父元素。
parents() - 返回被选元素的所有祖先元素，它一路向上直到文档的根元素 (<html>)。
parentsUntil() - 返回介于两个给定元素之间的所有祖先元素。用法如下：
$(document).ready(function(){
$("span").parents();
$("span").parents("ul"); // 可以指定祖先符合的条件
});
// parentsUntil()用法
$(document).ready(function(){
$("span").parentsUntil("div");
});2. 后代（向下遍历）
children() - 返回被选元素的所有直接子元素。
find() - 返回被选元素的后代元素，一路向下直到最后一个后代。用法如下：
$(document).ready(function(){
$("div").children();
$("div").children("p.1");
});
// 返回属于 <div> 后代的所有 <span> 元素：
$(document).ready(function(){
$("div").find("span");
$("div").find("*"); // 返回所有后代，注意是“*”
});3. 同胞（水平遍历）
siblings() - 返回被选元素的所有同胞元素。
next() - 返回被选元素的下一个同胞元素。
nextAll() - 返回被选元素的所有跟随的同胞元素。
nextUntil() - 返回介于两个给定参数之间的所有跟随的同胞元素。
// 以下三者，与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。
prev()
prevAll()
prevUntil()用法如下：
$(document).ready(function(){
$("h2").nextAll();
$("h2").nextUntil("h6");
});4. 过滤
first() - 返回被选元素的首个元素。
last() - 返回被选元素的最后一个元素。
eq() - 返回被选元素中带有指定索引号的元素。
filter() - 允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
not() - 与filter()相反。用法如下：
$(document).ready(function(){
$("div p").first(); // 选择第一个<div><p></p></div>标签元素
$("p").eq(2); // 选择第二个p标签元素
});
$(document).ready(function(){
$("p").filter(".intro"); // 选择所有class="intro" 的元素
});四、jQuery AJAX
AJAX：异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。AJAX 是与服务器交换数据的艺术，它在不重载全部页面的情况下，实现了对部分网页的更新。
0. 原理
XMLHttpRequest 用于在后台与服务器交换数据（老版本使用 ActiveX 对象）。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
方法 | 描述 |
|---|---|
open(method, url, async) | 规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步，使用Ajax时必须）或 false（同步） |
send(string) | 将请求发送到服务器。string：仅用于 POST 请求 |
- 不同版本HTML
var xmlhttp;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", url, ture);
xmlhttp.send();- 以下情况使用POST：
1. 无法使用缓存文件（更新服务器上的文件或数据库）
2. 向服务器发送大量数据（POST 没有数据量限制）
3. 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可- 避免得到缓存结果：
xmlhttp.open("GET", "{url}?t=" + Math.random(), true);
xmlhttp.send();- 需要像HTML表单那样POST数据：
setRequestHeader()
// setRequestHeader(header,value)：向请求添加 HTTP 头，header: 规定头的名称，value: 规定头的值
xmlhttp.open("POST", "{url}", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send();- Async不同情况的逻辑函数位置：
onreadystatechange()
// Async = true
// 规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();
// Async = false
// 不要编写 onreadystatechange 函数，把代码放到 send() 语句后面即可
xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;1. 加载
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
// 必需的，URL，参数规定您希望加载的 URL
// 可选的，data，参数规定与请求一同发送的查询字符串键/值对集合
// 可选的，callback()，参数是load()方法完成后所执行的函数名称
// responseTxt - 包含调用成功时的结果内容
// statusTXT - 包含调用的状态
// xhr - 包含XMLHttpRequest对象
$(selector).load(URL, data, callback());2. Get/Post
get() 和 post() 方法用于通过 HTTP GET（从指定的资源请求数据，注意缓存数据）或 POST（向指定的资源提交要处理的数据）请求从服务器请求数据。
// 必需的，URL，参数规定您希望请求的 URL
// 可选的，callback()，参数是请求成功后所执行的函数名
// data - 存有被请求页面的内容
// status - 存有请求的状态
$.get(URL, function(data, status){
// TODO...
});
// 必需的，URL，参数规定您希望请求的 URL
// 可选的，data，参数规定连同请求发送的数据
// 可选的，callback()，参数是请求成功后所执行的函数
$.post(URL, data, status){
// TODO...
});3. 服务器响应
属性 | 描述 |
|---|---|
responseText | 获得字符串形式的响应数据。 |
responseXML | 获得 XML 形式的响应数据。 |
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
xmlDoc=xmlhttp.responseXML;
// 直接显示XML内容
document.getElementById("myDiv2").innerText=(new XMLSerializer()).serializeToString(xmlDoc);
// 显示XML中全部title标签的内容
txt="";
x=xmlDoc.getElementsByTagName("title");
for (i=0;i<x.length;i++) {
txt=txt + x[i].childNodes[0].nodeValue + "<br />";
}
document.getElementById("myDiv").innerHTML=txt;
}
}
xmlhttp.open("GET","/example/xmle/books.xml",true);
xmlhttp.send();
}4. onreadystatechange 事件
当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState （XMLHttpRequest 的状态，0~4）改变时，就会触发 onreadystatechange 事件。
readyState 中存储的 XMLHttpRequest 的状态：
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
当 readyState 等于 4 且状态为 200 时，表示响应已就绪。5. 关于callback
如果存在多个 AJAX 任务，那么应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。
function myFunction() {
loadXMLDoc("ajax_info.txt",function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}onkeyup 事件会在键盘按键被松开时发生。
onchange事件会在值发生改变时发生。支持 input/select/textarea。
6. AJAX & ASP/PHP/DB/XML
通过标签绑定事件，绑定函数在服务器响应就绪时调用函数，发送HTTP请求，访问asp/php文件，文件中对数据库进行查询。 PHP 和 AJAX MySQL 数据库实例
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
{
txt=txt + "<tr>";
// 第一列：Title
xx=x[i].getElementsByTagName("TITLE");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
// 第二列：Artist
xx=x[i].getElementsByTagName("ARTIST");
{
try
{
txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
}
catch (er)
{
txt=txt + "<td> </td>";
}
}
txt=txt + "</tr>";
}
txt=txt + "</table>";
document.getElementById('txtCDInfo').innerHTML=txt;
}
}本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2020-07-20，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
内容分发网络 CDN
内容分发网络（Content Delivery Network，CDN）通过将站点内容发布至遍布全球的海量加速节点，使其用户可就近获取所需内容，避免因网络拥堵、跨运营商、跨地域、跨境等因素带来的网络不稳定、访问延迟高等问题，有效提升下载速度、降低响应时间，提供流畅的用户体验。