內容
jQuery 教程
一 什么是 jQuery
二 jQuery 语法
三 jQuery 选择器
四 jQuery 事件
五 jQuery 效果- 隐藏和显示
六 jQuery - 链(Chaining)
七 jQuery - 获取内容和属性
八 jQuery - 设置内容和属性
九 jQuery - 添加元素
十 jQuery - 删除元素
十一 jQuery - 获取并设置 CSS 类
十二 jQuery 尺寸
十三 jQuery 遍历
十四 jQuery 遍历- 过滤
十五 jQuery - AJAX 简介
**jQuery **
jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。
在开始学习 jQuery 之前,您应该对以下知识有基本的了解:
• HTML
• CSS
• JavaScript
一 什么是 jQuery ?
jQuery 是一个 JavaScript 函数库。
jQuery 是一个轻量级的"写的少,做的多"的 JavaScript 库。
jQuery 库包含以下功能:
• HTML 元素选取
• HTML 元素操作
• CSS 操作
• HTML 事件函数
• JavaScript 特效和动画
• HTML DOM 遍历和修改
• AJAX
• Utilities
提示: 除此之外,jQuery 还提供了大量的插件。
很多用戶的瀏覽器已緩存了JQUERY
可以在浏览器的 Console 窗口中使用 $.fn.jquery 命令查看当前 jQuery 使用的版本:
二 jQuery 语法
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法: $(selector).action()
• 美元符号定义 jQuery
• 选择符(selector)“查询"和"查找” HTML 元素
• jQuery 的 action() 执行对元素的操作
1.文档就绪事件
您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中:
$(document).ready(function(){ // 开始写 jQuery 代码... });
等價于: $(function(){ // 开始写 jQuery 代码... });
$(document).ready(function() {
$(“p”).click(function() {
$(this).hide();
});
});
三 jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
实例:
• $(this).hide() - 隐藏当前元素
• $(“p”).hide() - 隐藏所有
元素
• $(“p.test”).hide() - 隐藏所有 class=“test” 的
元素
• $("#test").hide() - 隐藏 id=“test” 的元素
• $(".test").hide() - 隐藏所有class=“test” 的元素
四jQuery 事件
hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。
实例
$("#p1").hover(
function(){ alert("你进入了 p1!"); }
, function(){ alert("拜拜! 现在你离开了 p1!"); }
);
focus()
当元素获得焦点时,发生 focus 事件。
当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点。
focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数:
实例
$("input").focus(function(){ $(this).css("background-color","#cccccc"); });
五 jQuery 效果- 隐藏和显示
jQuery hide() 和 show()和 toggle()
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
1.基本用法
实例
$("#hide").click(function(){ $("p").hide(); });
$("#show").click(function(){ $("p").show(); });
2.進階用法
语法:
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
下面的例子演示了带有 speed 参数的 hide() 方法:
实例
$("button").click(function(){ $("p").hide(1000); });
下面的例子演示了带有 speed 参数的 hide() 方法,并使用回调函数:
实例
$(document).ready(function(){ $(".hidebtn").click(function(){ $("div").hide(1000,"linear",function(){ alert("Hide() 方法已完成!"); }); }); });
第二个参数是一个字符串,表示过渡使用哪种缓动函数。(译者注:jQuery自身提供"linear" 和 “swing”,其他可以使用相关的插件)。
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素,并隐藏已显示的元素:
实例
$("button").click(function(){ $("p").toggle(); });
语法:
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:“slow”、“fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
六 jQuery - 链(Chaining)
通过 jQuery,可以把动作/方法链接在一起。
Chaining 允许我们在一条语句中运行多个 jQuery 方法(在相同的元素上)。
下面的例子把 css()、slideUp() 和 slideDown() 链接在一起。“p1” 元素首先会变为红色,然后向上滑动,再然后向下滑动:
$("#p1").css("color","red")
.slideUp(2000)
.slideDown(2000);
七 jQuery - 获取内容和属性
jQuery DOM 操作
jQuery 中非常重要的部分,就是操作 DOM 的能力。
jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法:
• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容(包括 HTML 标记)
• val() - 设置或返回表单字段的值
下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容:
获取属性 - attr()
jQuery attr() 方法用于获取属性值。
下面的例子演示如何获得链接中 href 属性的值:
实例
$("button").click(function(){ alert($("#runoob").attr("href")); });
八jQuery - 设置内容和属性
设置内容 - text()、html() 以及 val()
我们将使用前一章中的三个相同的方法来设置内容:
• text() - 设置或返回所选元素的文本内容
• html() - 设置或返回所选元素的内容(包括 HTML 标记)
• val() - 设置或返回表单字段的值
$("#btn1").click(function(){ $("#test1").text("Hello world!"); });
$("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); });
$("#btn3").click(function(){ $("#test3").val("RUNOOB"); });
text()、html() 以及 val() 的回调函数
上面的三个 jQuery 方法:text()、html() 以及 val(),同样拥有回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 text() 和 html():
实例
$("#btn1").click(function(){
$("#test1").text(function(i,origText)
{ return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; }); });
$("#btn2").click(function(){
$("#test2").html(function(i,origText){ return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; }); });
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
下面的例子演示如何改变(设置)链接中 href 属性的值:
实例
$("button").click(function(){ $("#runoob").attr("href","http://www.runoob.com/jquery"); });
attr() 方法也允许您同时设置多个属性。
下面的例子演示如何同时设置 href 和 title 属性:
实例
$("button").click(function(){ $("#runoob").attr({ "href" : "http://www.runoob.com/jquery", "title" : "jQuery 教程" }); });
attr() 的回调函数
jQuery 方法 attr(),也提供回调函数。回调函数有两个参数:被选元素列表中当前元素的下标,以及原始(旧的)值。然后以函数新值返回您希望使用的字符串。
下面的例子演示带有回调函数的 attr() 方法:
实例
$("button").click(function(){ $("#runoob").attr("href",
function(i,origValue){ return origValue + "/jquery"; }); });
九 jQuery - 添加元素
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法:
• append() - 在被选元素的结尾插入内容 //$(“p”).append(“追加文本”);
• prepend() - 在被选元素的开头插入内容
• after() - 在被选元素之后插入内容
• before() - 在被选元素之前插入内容
通过 append() 和 prepend() 方法批量添加若干新元素
function appendText(){
var txt1="<p>文本-1。</p>"; // 使用 HTML 标签创建文本
var txt2=$("<p></p>").text("文本-2。"); // 使用 jQuery 创建文本
var txt3=document.createElement("p");
txt3.innerHTML="文本-3。"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素 }
十 jQuery - 删除元素
删除元素/内容
如需删除元素和内容,一般可使用以下两个 jQuery 方法:
remove() - 删除被选元素(及其子元素) //$("#div1").remove();
• empty() - 从被选元素中删除子元素
过滤被删除的元素
jQuery remove() 方法也可接受一个参数,允许您对被删元素进行过滤。
该参数可以是任何 jQuery 选择器的语法。
下面的例子删除 class=“italic” 的所有
元素:
实例
$("p").remove(".italic");
十一 jQuery - 获取并设置 CSS 类
jQuery 操作 CSS
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些:
• addClass() - 向被选元素添加一个或多个类
$("button").click(function(){ $("h1,h2,p").addClass("blue");
$("div").addClass("important"); });
$("button").click(function(){ $("body div:first")
.addClass("important blue"); });
• removeClass() - 从被选元素删除一个或多个类
$("button").click(function(){ $("h1,h2,p").removeClass("blue"); });
• toggleClass() - 对被选元素进行添加/删除类的切换操作
$("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });
• css() - 设置或返回样式属性
css() 方法设置或返回被选元素的一个或多个样式属性。
$("p").css({"background-color":"yellow","font-size":"200%"});
十二 jQuery 尺寸
jQuery 提供多个处理尺寸的重要方法:
• width()
• height()
• innerWidth()
• innerHeight()
• outerWidth()
• outerHeight()
$("button").click(function(){ var txt=""; txt+="div 的宽度是: " +
$("#div1").width() + "</br>"; txt+="div 的高度是: " + $("#div1").height();
$("#div1").html(txt); });
十三 jQuery 遍历
jQuery 遍历,意为"移动",用于根据其相对于其他元素的关系来"查找"(或选取)HTML 元素。以某项选择开始,并沿着这个选择移动,直到抵达您期望的元素为止。
下图展示了一个家族树。通过 jQuery 遍历,您能够从被选(当前的)元素开始,轻松地在家族树中向上移动(祖先),向下移动(子孙),水平移动(同胞)。这种移动被称为对 DOM 进行遍历。
向上遍历 DOM 树
这些 jQuery 方法很有用,它们用于向上遍历 DOM 树:
• parent() //
(
"
s
p
a
n
"
)
.
p
a
r
e
n
t
(
)
;
•
p
a
r
e
n
t
s
(
)
/
/
("span").parent(); • parents() //
("span").parent();•parents()//(“span”).parents();
(
"
s
p
a
n
"
)
.
p
a
r
e
n
t
s
(
"
u
l
"
)
;
/
/
返
回
所
有
<
s
p
a
n
>
元
素
的
所
有
祖
先
,
并
且
它
是
<
u
l
>
元
素
:
•
p
a
r
e
n
t
s
U
n
t
i
l
(
)
/
/
("span").parents("ul");//返回所有 <span> 元素的所有祖先,并且它是 <ul> 元素: • parentsUntil() //
("span").parents("ul");//返回所有<span>元素的所有祖先,并且它是<ul>元素:•parentsUntil()//(“span”).parentsUntil(“div”);//返回介于span , div之間的元素
向下遍歷DOM樹
下面是两个用于向下遍历 DOM 树的 jQuery 方法:
• children()//$(“div”).children();
$(“div”).children(“p.1”);//返回类名为 “1” 的所有
元素,并且它们是
• find()返回被选元素的后代元素,一路向下直到最后一个后代。
$(“div”).find(“span”);//返回属于
$("div”).find(“*”); //返回屬於
在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历:
• siblings() //$(“h2”).siblings();
• next()
• nextAll()
• nextUntil()
• prev()
• prevAll()
• prevUntil()
十四 jQuery 遍历- 过滤
1.三个最基本的过滤方法是:
first(), //$(“div p”).first();
last()
eq()方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始
它们允许您基于其在一组元素中的位置来选择一个特定的元素。
2.其它過濾
1) 同时满足type为text的而且,其值为a,请问jquery方式如何写?
$("input[type='text'][value='a']") 就可以了 jquery里有多条件的选择器[selector1][selector2][selectorN]
2) 匹配字符串的開始和結束
[pro=‘val’] 属性为val
[pro^=‘val’] 属性以val 开始
[pro$=‘val’] 属性以val 结束 [pro!=‘val’] 属性不包含 val
3) not
$(function () {
$("#div :radio").click(function () {
//添加div中所有radiobutton点击事件
$("#div :checked").not(this).attr("checked", "");
//除自己以外的取消选中
});
})
4)使用jquery获取radio或radiobuttonlist的值
最重要的是掌握jquery选择器的使用,在一个表单中我们通常是要获取被选中的那个radio项的值,所以要加checked来筛选,比如有以下的一些radio项:
<input type="radio" name="testradio" value="jquery获取radio的值" />jquery获取radio的值<br />
<input type="radio" name="testradio" value="jquery获取checkbox的值" />jquery获取checkbox的值<br />
<input type="radio" name="testradio" value="jquery获取select的值" />jquery获取select的值<br />
要想获取某个radio的值有以下的几种方法,直接给出代码:
1.$('input[name="testradio"]:checked').val();
2. $('input:radio:checked').val();
3. $('input[@name="testradio"][checked]');
4. $('input[name="testradio"]').filter(':checked');
如果我们要遍历name为testradio的所有radio呢,代码如下
$('input[name="testradio"]').each(function()
{
alert(this.value);
});
如果要取具体某个radio的值,比如第二个radio的值,这样写
$(‘input[name=“testradio”]:eq(1)’).val()
十五 jQuery - AJAX 简介
AJAX 是与服务器交换数据的技术,它在不重载全部页面的情况下,实现了对部分网页的更新.
jQuery - AJAX load() 方法
load() 方法从服务器加载数据,并把返回的数据放入被选元素中。
下面的例子把 “demo_test.txt” 文件中 id=“p1” 的元素的内容,加载到指定的
$("#div1").load("demo_test.txt #p1");
可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数:
• responseTxt - 包含调用成功时的结果内容
• statusTXT - 包含调用的状态
• xhr - 包含 XMLHttpRequest 对象
$("button").click(function(){ $("#div1").load("demo_test.txt"
,function(responseTxt,statusTxt,xhr){
if(statusTxt=="success") alert("外部内容加载成功!");
if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
jQuery - AJAX get() 和 post() 方法
jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。
$.get() 方法通过 HTTP GET 请求从服务器上请求数据。
$.get(URL,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 callback 参数是请求成功后所执行的函数名。
//get test
function getTest() {
$.ajax({
url: "/api/ContextTable",
type: "GET",
success: function (data) { alert(data); }
});
}
或者:
$("button").click(function(){
$.get("demo_test.php"
,function(data,status){ alert("数据: " + data + "\n状态: " + status);
});
});
$.post() 方法通过 HTTP POST 请求向服务器提交数据。
语法:
$.post(URL,data,callback);
必需的 URL 参数规定您希望请求的 URL。
可选的 data 参数规定连同请求发送的数据。
可选的 callback 参数是请求成功后所执行的函数名。
下面的例子使用 $.post() 连同请求一起发送数据:
$("button").click(function(){ $.post("/try/ajax/demo_test_post.php"
, { name:"菜鸟教程", url:"http://www.runoob.com" }
, function(data,status){ alert("数据: \n" + data + "\n状态: " + status);
});
});
或者:
//add:
function add() {
var now = new Date();
//从本地缓存中读取token值
var token = window.localStorage.getItem("token");
$.ajax({
url: "/api/ContextTable/",
type: "POST",
headers: {"auth":token},
data: { Title: "This is a test title", AddTime: now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate(), Context: "This is a test context." },
success: function (data) { alert(data); },
//当安全校验未通过的时候进入这
error: function (xhr) {
alert("Save data error.");
if (xhr.status == 401) {
var jsonData = JSON.parse(xhr.responseText);
console.log("Error in auth:" + jsonData.Message);
}
}
});
}
(完)