简介
jQuery 是一个 JavaScript 库,极大地简化了 JavaScript 编程。
语法
基础语法:$(selector).action()
- 美元符号定义 jQuery
- 选择符(selector)”查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
文档就绪事件
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。如果在文档没有完全加载之前就运行函数,操作可能失败,比如:试图隐藏一个不存在的元素;获得未完全加载的图像的大小
//写法一 $(document).ready(function(){ // 开始写 jQuery 代码... }); //写法二 $(function(){ // 开始写 jQuery 代码... });
选择器
jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”(或选择)HTML 元素
语法 | 描述 |
---|---|
$(“p”) | 元素选择器 |
$(“#test”) | id选择器 |
$(“.test”) | class选择器 |
$(“*”) | 选取所有元素 |
$(this) | 选取当前 HTML 元素 |
$(“p.intro”) | 选取 class 为 intro 的 <p> 元素 |
$(“p:first”) | 选取第一个 <p> 元素 |
$(“ul li:first”) | 选取第一个 <ul> 元素的第一个 <li> 元素 |
$(“ul li:first-child”) | 选取每个 <ul> 元素的第一个 <li> 元素 |
$(“[href]”) | 选取带有 href 属性的元素 |
$(“a[target=’_blank’]”) | 选取所有 target 属性值等于 “_blank” 的 <a> 元素 |
$(“a[target!=’_blank’]”) | 选取所有 target 属性值不等于 “_blank” 的 <a> 元素 |
$(“:button”) | 选取所有 type=”button” 的 <input> 元素 和 <button> 元素 |
$(“tr:even”) | 选取偶数位置的 <tr> 元素 |
$(“tr:odd”) | 选取奇数位置的 <tr> 元素 |
事件
页面对访问者的不同操作叫做事件。术语有:触发,激发
常见的DOM事件:
鼠标 | 键盘 | 表单 | 文档/窗口事件 |
---|---|---|---|
click | keypress | submit | load |
dbclick | keydown | change | resize |
mouseenter | keyup | focus | scroll |
mouseleave | blur | unload |
在 jQuery 中,大多数 DOM 事件都有一个等效的 jQuery 方法。
常用的 jQuery 事件方法:
$(document).ready(function(){
//方法体
});
//接下来用三点...表示function(){//方法体}
$("p").click(...);
//双击触发的事件
$("p").dbclick(...);
//当鼠标指针穿过元素时触发的事件
$("p").mouseenter(...);
//当鼠标指针离开元素时触发的事件
$("p").mouseleave(...);
//当鼠标指针移动到元素上方,并按下鼠标按键时触发的事件
$("p").mousedown(...);
//当在元素上松开鼠标按钮时触发的事件
$("p").mouseup(...);
//当鼠标悬停在元素上面时触发的事件
$("p").hover(...);
//另外,当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);
//当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
//当元素获得焦点时触发的事件
$("input").focus(...);
//当元素失去焦点时触发的事件
$("input").blur(...);
比较keypress、keydown与keyup:
- keydown:在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外),它返回的是键盘代码;
- keypress:在键盘上按下一个按键,并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符,所以监听无效,换句话说,只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。
- keyup:用户松开某一个按键时触发,与keydown相对,返回键盘代码。
jQuery效果
隐藏,显示,切换
语法:
$(selector).hide(speed,callback);
元素隐藏$(selector).show(speed,callback);
元素显示$(selector).toggle(speed,callback);
元素切换hide()和show()方法- 可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒。
- 可选的 callback 参数是隐藏或显示完成后所执行的函数名称
- 可选的 callback 参数,具有以下三点说明:
- $(selector)选中的元素的个数为n个,则callback函数会执行n次
- callback函数名后加括号,会立刻执行函数体,而不是等到显示/隐藏完成后才执行,且不管元素有多少个,函数只会执行一遍
- callback既可以是函数名,也可以是匿名函数
淡入,淡出
语法:
$(selector).fadeIn(speed,callback);
淡入已隐藏的元素$(selector).fadeOut(speed,callback);
淡出可见元素$(selector).fadeToggle(speed,callback);
可以在 fadeIn() 与 fadeOut() 方法之间进行切换$(selector).fadeTo(speed,opacity,callback);
渐变为给定的不透明度(值介于 0 与 1 之间)
滑动
语法:
$(selector).slideDown(speed,callback);
向下滑动元素$(selector).slideUp(speed,callback);
向上滑动元素$(selector).slideToggle(speed,callback);
在 slideDown() 与 slideUp() 方法之间进行切换
动画
语法:
$(selector).animate({params},speed,callback);
params参数必须,其定义形成动画的 CSS 属性
注意:默认情况下,所有 HTML 元素都有一个静态位置static,且无法移动。如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!停止动画
语法:
$(selector).stop(stopAll,goToEnd);
,在动画完成前,停止动画或效果。
可选的 stopAll 参数规定是否应该清除动画队列。默认是 false,即仅停止活动的动画,允许任何排入队列的动画向后执行。若为true,停止所有动画。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。链接Chaining
链接(chaining)技术,允许我们在相同的元素上运行多条 jQuery 命令,一条接着另一条。这样的话,浏览器就不必多次查找相同的元素。比如:
$("#p1").css("color","red").slideUp(2000).slideDown(2000); //或者,下面的美观写法。jQuery 会抛掉多余的空格,并当成一行长代码来执行上面的代码行 $("#p1").css("color","red") .slideUp(2000) .slideDown(2000);
jQuery HTML
设置和获取元素内容/值
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容(包括 HTML 标记)
val() - 设置或返回表单字段的值
text(), html(), val()的回调函数fun(i, origText){return str}:i为被选元素列表中当前元素的下标;origText为原始值;str为设置的新的元素内容
attr() - 方法用于设置/获取属性值,回调函数与html()等的一样,但我还不会使用//单属性设置 $("#w3s").attr("href","//www.w3cschool.cn/jquery"); //多属性设置 $("#w3s").attr({ "href" : "//www.w3cschool.cn/jquery", "title" : "jQuery 教程" });
添加/删除元素
append() - 在被选元素内部的结尾插入指定内容
prepend() - 在被选元素内部的开头插入指定内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
remove() - 删除被选元素(及其子元素)
empty() - 从被选元素中删除子元素
remove() 方法也可接受一个参数,允许您对被删元素进行过滤。该参数可以是任何 jQuery 选择器的语法。如$("p").remove(".italic");
,将删除所有类为italic
的p元素CSS的设置
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回被选元素的一个或多个样式属性//class1,class2是类名 //可以对多个元素同时添加多个类 $("#div1,#div2").addClass("class1 class2"); //可以对多个元素同时移除多个类 $("#div1,#div2").removeClass("class1 class2"); //可以对多个元素同时进行多个类的切换操作 $("#div1,#div2").toggleClass("class1 class2"); //返回第一个p的xxx样式 $("p").css("propertyname"); //为所有的p设置xxx样式 $("p").css("propertyname","value"); //为所有的p设置多个样式 $("p").css({"propertyname":"value","propertyname":"value",...});
尺寸
width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)
height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)
innerWidth() 方法返回元素的宽度(包括内边距)
innerHeight() 方法返回元素的高度(包括内边距)
outerWidth() 方法返回元素的宽度(包括内边距和边框)
outerHeight() 方法返回元素的高度(包括内边距和边框)
outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)
outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)
遍历
祖先
parent(),返回被选元素的直接父元素
parents(),返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)
parentsUntil(),返回介于两个给定元素之间的所有祖先元素//可以使用可选参数来过滤对祖先元素的搜索,只选择ul的祖先元素 $("span").parents("ul"); //介于span和div之间的祖先元素 $("span").parentsUntil("div");
后代
children(),返回被选元素的所有直接子元素
find(),返回被选元素的后代元素//可以使用可选参数来过滤对子元素的搜索 $("div").children("p .class1"); //必选参数来返回子元素中的特定元素 $("div").find("span"); $("div").find("#id"); $("div").find("*");//返回所有子元素
同胞
siblings(),返回被选元素的所有同胞元素,如
$("h2").siblings();
next(),返回被选元素的下一个同胞元素,该方法只返回一个元素,如$("h2").next();
nextAll(),返回被选元素的所有跟随的同胞元素,如$("h2").nextAll();
nextUntil(),返回介于两个给定参数之间的所有跟随的同胞元素,如$("h2").nextUntil("h6");
以下方法类似
prev()
prevAll()
prevUntil()过滤
first(),返回被选元素的首个元素
last(),返回被选元素的最后一个元素
eq(idx),返回被选元素中带有指定索引号的元素
filter(xxx),匹配符合xxx标准的元素
not(xxx),匹配不符合xxx标准的元素
Ajax
Ajax
AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML)。
在不重载整个网页的情况下,AJAX 通过后台加载数据,并在网页上进行显示。load()方法
语法:
$(selector).load(URL,data,callback);
,url必填,可选的 data 参数规定与请求一同发送的查询字符串键/值对集合,可选的 callback 参数是 load() 方法完成后所执行的函数名称//回调函数的三个参数:responseTxt - 包含调用成功时的结果内容; //statusTXT - 包含调用的状态;xhr - 包含 XMLHttpRequest 对象 $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(statusTxt=="success") alert("External content loaded successfully!"); if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); });
get()和post()方法
$.get(URL,callback);
从服务器上请求数据
请求的url必填;回调函数可选,回调函数的第一个回调参数存有被请求页面的内容,第二个回调参数存有请求的状态。
$.post(URL,data,callback);
从服务器上请求数据
请求的url必填;可选的 data 参数规定连同请求发送的数据;可选的 callback 参数是请求成功后所执行的函数名,第一个回调参数存有被请求页面的内容,而第二个参数存有请求的状态
其他
$.noConflict();
该方法会释放对 $ 标识符的控制,这样其他脚本就可以使用它了。当然,您仍然可以通过全名替代简写的方式来使用 jQuery。
可以创建自己的简写
var jq = $.noConflict();
jq(document).ready(function(){
jq("button").click(function(){
jq("p").text("jQuery is still working!");
});
});
如果你的 jQuery 代码块使用 简写,并且您不愿意改变这个快捷方式,那么您可以把 简 写 , 并 且 您 不 愿 意 改 变 这 个 快 捷 方 式 , 那 么 您 可 以 把 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 “jQuery”
$.noConflict();
jQuery(document).ready(function($){
$("button").click(function(){
$("p").text("jQuery is still working!");
});
});