jQuery学习整理
jQuery test
First Step
First Content
Second Step
Second Content
test
test2
test3
啦啦啦
点击跳转
jQuery元素选择器
jQuery使用CSS选择器来选取HTML元素
1.$("p")选取所有元素
2.$(".intro")选取所有class="intro"的元素
3.$("#demo")选取所有id="demo"的元素
4.$("p.intro")选取所有class="intro"的
元素
5.$("p#demo")选取所有id="demo"的
元素
jQuery属性选择器
jQuery使用XPath表达式来选择带有给定属性的元素
1.$("[href]")选取所有带有href属性的元素
2.$("[href='#']")选取所有带有href且值等于"#"的元素
3.$("[href!='#']")选取所有带有href且值不等于"#"的元素
4.$("href$='.jpg'")选取所有带有href且值以".jpg"结尾的元素
jQuery CSS选择器
jQuery CSS选择器可用于改变HTML元素的CSS属性
$("p").css("background-color","red") 把所有p元素的背景颜色改成红色
更多选择器实例
$(this) 当前HTML元素
$("ul li:first")每个ul的第一个li元素
$("div#intro .head")选取id="intro"的div元素中所有class="head"的元素
jQuery选择器
选择器 实例 选取
* $("*") 所有元素
#id $("#lanstName") id="lastName"的元素（id选择器）
.class $(".intro") class="intro"的元素（类选择器）
element $("p") 所有
元素（元素选择器）
.class.class $(".intro.demo") 所有class="intro"且class="demo"的元素
:first $("p:first") 第一个p元素
:last $("p:last") 最后一个p元素
:even $("tr:even") 所有偶数tr元素
:odd $("tr:odd") 所有奇数tr元素
:eq(index) $("ul li:eq(3)") 列表中的第四个元素(index从0开始)
:qt(index) $("ul li:gt(3)") 列出index大于3的元素
:lt(index) $("ul li:lt(3)") 列出index小于3的元素
:not(selector) $("input:not(:empty)") 所有不为空的input元素
:header $(":header") 所有标题元素
-
:animated 所有动画元素
:contains(text) $(":contains('text')") 包含指定字符串的所有元素
:empty $(":empty") 无子(元素)节点的所有元素
:hidden $("p:hidden") 所有隐藏的p元素
:visible $("table:visible") 所有可见的表格
s1,s2,s3 $("th,td,.intro") 所有带有匹配选择的元素
[attribute] $("[href]") 所有带有href属性的元素
[attribute=value]$("[href='#']") 所有href属性的值等于"#"的元素
[attribute!=value]$("[href!='#']") 所有href属性的值不等于"#"的元素
[attribute$=value]$("[href$='.jpg']") 所有href属性的值包含以".jpg"结尾的元素
:input $(":input") 所有input元素
:text $(":text") 所有type="text"的元素
:password $(":password") 所有type="password"的元素
:radio $(":radio") 所有type="radio"的元素
:checkbox $(":checkbox") 所有type="checkbox"的元素
:summit $(":submit") 所有type="submit"的元素
:reset $(":reset") 所有type="reset"的元素
:button $(":button") 所有type="button"的元素
:image $(":image") 所有type="image"的元素
:file $(":file") 所有type="file"的元素
:enabled $(":enabled") 所有激活input元素
:disabled $(":disabled") 所有禁用input元素
:selected $(":selected") 所有被选取的input元素
:checked $(":checked") 所有被选中的input元素
jQuery 事件
jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数（比如 Prototype）同样使用 $ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict()，帮助您使用自己的名称（比如 jq）来代替 $ 符号
jQuery效果
1.显示和隐藏
$("#test").hide(speed,callback);
$("#test").show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
$(selector).toggle(speed,callback);
2.淡入淡出效果
fadeIn()用于淡入已隐藏的元素
$(selector).fadeIn(speed,callback);
fadeOut()用于淡出可见元素
$(selector).fadeOut(speed,callback);
fadeToggle()方法可以在fadeIn()和fadeOut()方法之间进行切换
$(selector).fadeToggle(speed,callback);
fadeTo() 允许渐变为给定的不透明度（值介于0-1之间）
$(selector).fadeTo(speed,opacity,callback);
3.滑动效果
slideDown()用于向下滑动元素
$(selector).slideDown(speed,callback);
slideUp()用于向上滑动元素
$(selector).slideUp(speed,callback);
slideToggle()方法可以在slideDown()和slideUp()方法之间进行切换
$(selector).slideToggle(speed,callback);
4.动画 animate()
$(selector).animate({param},speed,callback);
必须的params参数定义形成动画的CSS属性
jQuery获得内容和属性
jQuery DOM 操作
jQuery提供一系列与DOM相关的方法，这使访问和操作元素和属性变得很容易
获得内容
text() 设置或返回所选元素的文本内容
html() 设置或返回所选元素的内容(包括HTML标记)
val() 设置或返回表单字段的值
获得属性 attr()
jQuery attr() 方法用于获取属性值。
$("#aid").attr("href");
attr()方法允许同时设置多个属性
$("#aid").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
attr() 的回调函数
$("#w3s").attr("href", function(i,origValue){
return origValue + "/jquery";
});
jQuery 添加元素
添加内容的四个jQuery方法
append() 在被选元素的结尾插入内容
prepend() 在被选元素的开头插入内容
after() 在被选元素之后插入内容
before() 在被选元素之前插入内容
jQuery 删除元素
删除元素和内容的2个方法
remove() 删除被选元素(及其子元素)
empty() 从被选元素中删除子元素
jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。
$("p").remove(".italic"); 删除 class="italic" 的所有
元素
jQuery获取并设置CSS类
jQuery操作CSS
addClass() 向被选元素添加一个或多个类
removeClass() 从被选元素删除一个或多个类
toggleClass() 对被选元素进行添加/删除类的切换操作
css() 设置或返回样式属性
css()方法
css()方法设置或返回被选元素的一个或多个样式属性
返回CSS属性
$("p").css("background-color"); 返回首个匹配元素的 background-color 值
设置CSS属性
$("p").css("background-color","yellow");为所有匹配元素设置 background-color 值
设置多个CSS属性
$("p").css({"background-color":"yellow","font-size":"200%"});为所有匹配元素设置 background-color 和 font-size
jQuery 尺寸
通过 jQuery，很容易处理元素和浏览器窗口的尺寸。
jQuery提供多个处理尺寸的重要方法：
width() 设置或返回元素的宽度(不包括内边距、边框或外边距)
height() 设置或返回元素的高度(不包括内边距、边框或外边距)
innerWidth() 返回元素的宽度(包括内边距)
innerHeight() 返回元素的高度(包括内边距)
outerWidth() 返回元素的宽度(包括内边距和边框)
outerHeight() 返回元素的高度(包括内边距和边框)
jQuery遍历
1.向上遍历DOM树
parent() 返回被选元素的直接父元素，该方法只会向上一级对 DOM 树进行遍历。
parents() 返回被选元素的所有祖先元素，一直向上直到文档的根元素()
您也可以使用可选参数来过滤对祖先元素的搜索
$("span").parents("ul");返回所有 元素的所有祖先，并且它是 元素
parentsUntil()返回介于两个给定元素之间的所有祖先元素
$("span").parentsUntil("div");返回介于 与 元素之间的所有祖先元素
2.向下遍历DOM树
children() 返回被选元素的所有直接子元素，该方法只会向下一级对 DOM 树进行遍历
find() 返回被选元素的后代元素，一直向下知道最后一个后代
$("div").find("span");返回属于 后代的所有 元素
$("div").find("*"); 返回 的所有后代
3.在DOM树中水平遍历
siblings() 返回被选元素的所有同胞元素(即同级元素)
$("h2").siblings();
next() 返回被选元素的下一个同胞元素，该方法只返回一个元素。
$("h2").next();
nextAll() 返回被选元素的所有跟随的同胞元素
$("h2").nextAll();返回 的所有跟随的同胞元素
nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素
$("h2").nextUntil("h6");返回介于 与 元素之间的所有同胞元素(不包括h6)
prev() 返回被选元素的上一个同胞元素，该方法只返回一个元素。
prevAll() 返回被选元素的上面的同胞元素
prevUntil() 返回介于两个给定参数之间的所有跟随的同胞元素（向上）
jQuery 过滤
三个基本的过滤方法是：first()、last()和eq();允许基于其在一组元素中的位置来选择一个特定的元素
其他过滤方法，比如 filter() 和 not() 允许您选取匹配或不匹配某项指定标准的元素
first()返回被选元素的首个元素
$("div p").first();选取首个 元素内部的第一个 元素
last() 返回被选元素的最后一个元素
$("div p").last();选取最后一个
元素中的最后一个 元素
eq()返回被选元素中带有指定索引号的元素,索引号从 0 开始，因此首个元素的索引号是 0 而不是 1
$("p").eq(1);选取第二个
元素（索引号 1）
filter()允许规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回
$("p").filter(".intro");返回带有类名 "intro" 的所有
元素
not()返回不匹配标准的所有元素
$("p").not(".intro");返回不带有类名 "intro" 的所有
元素
jQuery ajax load()方法
load()方法从服务器加载数据，并把返回的数据放入被选元素中
$(selector).load(URL,data,callback)
必须的URL参数规定加载的URL
可选的data参数规定与请求一同发送的查询字符串键值对集合
可选的callback参数是load方法完成后执行的函数名称
$("#div1").load("demo_test.txt");把文件 "demo_test.txt" 的内容加载到指定的
元素中
$("#div1").load("demo_test.txt #p1");把 "demo_test.txt" 文件中 id="p1" 的元素的内容，加载到指定的 元素中
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
#responseTxt - 包含调用成功时的结果内容
#statusTXT - 包含调用的状态
#xhr - 包含 XMLHttpRequest 对象
if(statusTxt=="success")
alert("外部内容加载成功！");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
jQuery ajax get()和post()方法
get()和post()方法用于通过HTTP get或post请求从服务器请求数据
get:从指定的资源请求数据
post:向指定的资源提交要处理的数据
jQuery $.get()方法
$.get()方法通过HTTP GET请求从服务器上请求数据
语法：$.get(URL,callback)
实例：$.get("test.jsp",function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});
jQuery $.post()方法
$.post()方法通过HTTP POST请求从服务器上请求数据
语法：$.post(URL,data,callback);可选的 data 参数规定连同请求发送的数据
实例：$.post("test.jsp",
{name:"tom",age:18},
function(data,status){
alert("Data: " + data + "\nStatus: " + status);
});