jquery学习随笔
转）jquery学习随笔(jquery选择器)
jQuery的选择器是CSS 1-3，XPath的结合物。jQuery提取这二种查询语言最好的部分，融合后创造出了最终的jQuery表达式查询语言。如果你了解CSS（绝大部分WEB开发者都用到的），那么你学起来就很容易了。
同时使用CSS和XPath
看几个例子：
隐藏所有包含有链接的段落：
$(”p[a]”).hide();
显示页面的第一个段落：
$(”p:eq(0)”).show()
隐藏所有当前可见的层元素
$(”div:visible”).hide();
获取所有无序列表的列表项
$(”ul/li”) /* 等价于: $(”ul > li”) */
取得name值为bar的输入字段的值：
$(”input[@name=bar]”).val();
所有处于选中状态的单选r按钮：
$(”input[@type=radio][@checked]”)
如果你对查询语言的工作原理还有疑问，可以订阅这里的邮件列表 。
CSS查询器
jQuery完全支持CSS1.3。关于CSS的一些资料查看下面的连接：
下面列出来的是支持的CSS查询器的列表式语法：
- * 任何元素
- E 类型为E的元素
- E :root 类型为E，并且是文档的根元素
- E:nth-child(n) 是其父元素的第n个类型为E的子元素
- E:first-child 是其父元素的第1个类型为E的子元素
- E:last-child 是其父元素的最后一个类型为E的子元素
- E:only-child 且是其父元素的唯一一个类型为E的子元素
- E:empty 没有子元素（包括text节点）的类型为E的元素
- E:enabled
- E:disabled 类型为E，允许或被禁止的用户界面元素
- E:checked 类型为E，处于选中状态的用户界面元素（例如单选按钮或复选框）
- E.warning 类型为E，且class属性值为warning
- E#myid 类型为E，ID为 “myid”。（至多匹配一个元素）
- E:not(s) 类型为E，不匹配选择器s
- E F 在类型E后面的类型为F的元素
- E > F 为E元素子元素的F元素
- E + F an F element immediately preceded by an E element
- E ~ F an F element preceded by an E element
不同之处
所有的属性选择器都被写成和XPath极其相似（因为所有的属性都以@符号开始）。
- E[@foo] 拥有foo属性的E元素
- E[@foo=bar] foo属性的值为bar的E元素
- E[@foo^=bar] foo属性的值以字符串”bar”开始的E元素
- E[@foo$=bar] foo属性的值以字符串”bar”结尾的E元素
- E[@foo*=bar] foo属性的值包含有字符串”bar”结尾的E元素
不支持的部分
- E:link
- E:visited an E element being the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited)
- E:active
- E:hover
- E:focus an E element during certain user actions
- E:target an E element being the target of the referring URI
- E::first-line the first formatted line of an E element
- E::first-letter the first formatted letter of an E element
- E::selection the portion of an E element that is currently selected/highlighted by the user
- E::before generated content before an E element
- E::after generated content after an E element
jQuery不支持下列的选择器，因为这些没什么用处。
- E:nth-last-child(n) an E element, the n-th child of its parent, counting from the last one
- E:nth-of-type(n) an E element, the n-th sibling of its type
- E:nth-last-of-type(n) an E element, the n-th sibling of its type, counting from the last one
- E:first-of-type an E element, first sibling of its type
- E:last-of-type an E element, last sibling of its type
- E:only-of-type an E element, only sibling of its type
- E:lang(fr) an element of type E in language “fr”
XPath 查询器
XPath是jQuery内置支持的一种表达式语言。jQuery支持基本的XPath表达 式。
定位路径
- 绝对路径
$(”/html/body//p”)
$(”/*/body//p”)
$(”//p/../div”) - 相对路径
$(”a”,this)
$(”p/a”,this)
支持的Axis选择器
- Descendant Element has a descendant element
$("//div//p")
- Child Element has a child element
$("//div/p")
- Preceding Sibling Element has an element before it, on the same axes
$("//div ~ form")
- Parent Selects the parent element of the element
$("//div/../p") 支持的谓词
- [@*] 拥有一个属性
$(”//div[@*]”) - [@foo] 拥有foo属性
$(”//input[@checked]”) - [@foo=’test’] 属性foo值为’test’
$(”//a[@ref=’nofollow’]”) - [Nodelist] Element contains a node list, for example:
$(”//div[p]”)
$(”//div[p/a]”)
支持的谓词，但与XPath和CSS又不同的
- [last()] or [position()=last()] 改为:last
$(”p:last”) - [0] or [position()=0] 改为 :eq(0) or :first
$(”p:first”)
$(”p:eq(0)”) - [position() < 5] 改为:lt(5)
$(”p:lt(5)”) - [position() > 2] 改为:gt(2)
$(”p:gt(2)”)
定制的选择器
jQuery包含一些在CSS和XPath都不用到的表达式，但我们觉得它们使用起来非常方便，所以包含进来了。
下列的列表式语法基于不同的CSS选择器，但又有非常相似的名字。
- :even 从匹配的元素集中取序数为偶数的元素
- :odd 从匹配的元素集中取序数为奇数的元素
- :eq(0) and :nth(0) 从匹配的元素集中取第0个元素
- :gt(4) 从匹配的元素集中取序数大于N的元素
- :lt(4) 从匹配的元素集中取序数小于N的元素
- :first 相当于 :eq(0)
- :last 最后一个匹配的元素
- :parent 选择包含子元素（包含text节点）的所有元素
- :contains(’test’) 选择所有含有指定文本的元素
- :visible 选择所有可见的元素（display值为block 或者visible 、visibility 值为visible的元素，不包括hide域）
- :hidden 选择所有隐藏的元素(非Hide域，且display值为block 或者visible 、visibility 值为visible的元素)
例：
$("p:first").css("fontWeight","bold");
$("div:hidden").show();
$("div:contains('test')").hide();
表单选择器
这是为表单提供的一些选择器：
- :input 选择表单元素（input, select, textarea, button）
- :text 选择所有文本域(type=”text”)
- :password 选择所有密码域(type=”password”).
- :radio 选择所有单选按钮(type=”radio”).
- :checkbox 选择所有复选框(type=”checkbox”).
- :submit 选择所有提交按钮(type=”submit”).
- :image 选择所有图像域 (type=”image”).
- :reset 选择所有清除域(type=”reset”).
- :button 选择所有按钮(type=”button”).
同样也可以使用:hidden，详细说明上面已经介绍过。
$(’#myForm :input’)
如果你需要指定表单：
$(’input:radio’, myForm)
这将选择myForm表单中所有单选按钮。选择radio通常是用[@type=radio]，但是这样用理精简些。
Dom：
Attribute：
$(“p”).addClass(css中定义的样式类型); 给某个元素添加样式
$(“img”).attr({src:”test.jpg”,alt:”test Image”}); 给某个元素添加属性/值，参数是map
$(“img”).attr(“src”,”test.jpg”); 给某个元素添加属性/值
$("img").attr("title", function() { return this.src }); 给某个元素添加属性/值
$("元素名称").html(); 获得该元素内的内容（元素，文本等）
$("元素名称").html("<b>new stuff</b>"); 给某元素设置内容
$("元素名称").removeAttr("属性名称") 给某元素删除指定的属性以及该属性的值
$("元素名称").removeClass("class") 给某元素删除指定的样式
$("元素名称").text(); 获得该元素的文本
$("元素名称").text(value); 设置该元素的文本值为value
$(“元素名称”).toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式
$("input元素名称").val(); 获取input元素的值
$("input元素名称").val(value); 设置input元素的值为value
Manipulation：
$("元素名称").after(content); 在匹配元素后面添加内容
$("元素名称").append(content); 将content作为元素的内容插入到该元素的后面
$("元素名称").appendTo(content); 在content后接元素
$("元素名称").before(content); 与after方法相反
$("元素名称").clone(布尔表达式) 当布尔表达式为真时，克隆元素（无参时，当作true处理）
$("元素名称").empty() 将该元素的内容设置为空
$("元素名称").insertAfter(content); 将该元素插入到content之后
$("元素名称").insertBefore(content); 将该元素插入到content之前
$("元素").prepend(content); 将content作为该元素的一部分，放到该元素的最前面
$("元素").prependTo(content); 将该元素作为content的一部分，放content的最前面
$("元素").remove(); 删除所有的指定元素
$("元素").remove("exp"); 删除所有含有exp的元素
$("元素").wrap("html"); 用html来包围该元素
$("元素").wrap(element); 用element来包围该元素
Traversing：
add(expr)
add(html)
add(elements)
children(expr)
contains(str)
end()
filter(expression)
filter(filter)
find(expr)
is(expr)
next(expr)
not(el)
not(expr)
not(elems)
parent(expr)
parents(expr)
prev(expr)
siblings(expr)
Core：
$(html).appendTo(“body”) 相当于在body中写了一段html代码
$(elems) 获得DOM上的某个元素
$(function(){……..}); 执行一个函数
$("div > p").css("border", "1px solid gray"); 查找所有div的子节点p，添加样式
$("input:radio", document.forms[0]) 在当前页面的第一个表单中查找所有的单选按钮
$.extend(prop) prop是一个jQuery对象，
举例：
jQuery.extend({
min: function(a, b) { return a < b ? a : b; },
max: function(a, b) { return a > b ? a : b; }
});
jQuery( expression, [context] ) ---$( expression, [context]); 在默认情况下，$()查询的是当前HTML文档中的DOM元素。
each( callback ) 以每一个匹配的元素作为上下文来执行一个函数
举例：1
$(“span”).click(function){
$("li").each(function(){
$(this).toggleClass("example");
});
});
举例：2
$("button").click(function () {
$("div").each(function (index, domEle) {
// domEle == this
$(domEle).css("backgroundColor", "yellow");
if ($(this).is("#stop")) {
$("span").text("Stopped at div index #" + index);
return false;
}
});
});
jQuery Event:
ready(fn); $(document).ready()注意在body中没有onload事件，否则该函数不能执行。在每个页面中可以
有很多个函数被加载执行，按照fn的顺序来执行。
bind( type, [data], fn ) 为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。可能的事件属性有：blur, focus, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove,
mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress,
keyup, error
one( type, [data], fn ) 为每一个匹配元素的特定事件（像click）绑定一个或多个事件处理器函数。在每个对
象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。
trigger( type, [data] ) 在每一个匹配的元素上触发某类事件。
triggerHandler( type, [data] ) 这一特定方法会触发一个元素上特定的事件(指定一个事件类型)，同时取消浏览器对此事件的默认行动
unbind( [type], [data] ) 反绑定，从每一个匹配的元素中删除绑定的事件。
$("p").unbind() 移除所有段落上的所有绑定的事件
$("p").unbind( "click" ) 移除所有段落上的click事件
hover( over, out ) over,out都是方法, 当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。
$("p").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
}
);
toggle( fn, fn ) 如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。
$("p").toggle(function(){
$(this).addClass("selected");
},
function(){
$(this).removeClass("selected");
}
);
元素事件列表说明
注：不带参数的函数，其参数为可选的 fn。jQuery不支持form元素的reset事件。
事件 描述 支持元素或对象
blur( ) 元素失去焦点 a, input, textarea, button, select, label, map, area
change( ) 用户改变域的内容 input, textarea, select
click( ) 鼠标点击某个对象 几乎所有元素
dblclick( ) 鼠标双击某个对象 几乎所有元素
error( ) 当加载文档或图像时发生某个错误 window, img
focus( ) 元素获得焦点 a, input, textarea, button, select, label, map, area
keydown( ) 某个键盘的键被按下 几乎所有元素
keypress( ) 某个键盘的键被按下或按住 几乎所有元素
keyup( ) 某个键盘的键被松开 几乎所有元素
load( fn ) 某个页面或图像被完成加载 window, img
mousedown( fn ) 某个鼠标按键被按下 几乎所有元素
mousemove( fn ) 鼠标被移动 几乎所有元素
mouseout( fn ) 鼠标从某元素移开 几乎所有元素
mouseover( fn ) 鼠标被移到某元素之上 几乎所有元素
mouseup( fn ) 某个鼠标按键被松开 几乎所有元素
resize( fn ) 窗口或框架被调整尺寸 window, iframe, frame
scroll( fn ) 滚动文档的可视部分时 window
select( ) 文本被选定 document, input, textarea
submit( ) 提交按钮被点击 form
unload( fn ) 用户退出页面 window
JQuery Ajax 方法说明:
load( url, [data], [callback] ) 装入一个远程HTML内容到一个DOM结点。
$("#feeds").load("feeds.html"); 将feeds.html文件载入到id为feeds的div中
$("#feeds").load("feeds.php", {limit: 25}, function(){
alert("The last 25 entries in the feed have been loaded");
});
jQuery.get( url, [data], [callback] ) 使用GET请求一个页面。
$.get("test.cgi", { name: "John", time: "2pm" }, function(data){
alert("Data Loaded: " + data);
});
jQuery.getJSON( url, [data], [callback] ) 使用GET请求JSON数据。
$.getJSON("test.js", { name: "John", time: "2pm" }, function(json){
alert("JSON Data: " + json.users[3].name);
});
jQuery.getScript( url, [callback] ) 使用GET请求JavaScript文件并执行。
$.getScript("test.js", function(){
alert("Script loaded and executed.");
});
jQuery.post( url, [data], [callback], [type] ) 使用POST请求一个页面。
ajaxComplete( callback ) 当一个AJAX请求结束后，执行一个函数。这是一个Ajax事件
$("#msg").ajaxComplete(function(request, settings){
$(this).append("<li>Request Complete.</li>");
});
ajaxError( callback ) 当一个AJAX请求失败后，执行一个函数。这是一个Ajax事件
$("#msg").ajaxError(function(request, settings){
$(this).append("<li>Error requesting page " + settings.url + "</li>");
});
ajaxSend( callback ) 在一个AJAX请求发送时，执行一个函数。这是一个Ajax事件
$("#msg").ajaxSend(function(evt, request, settings){
$(this).append("<li<Starting request at " + settings.url
+ "</li<");
});
ajaxStart( callback ) 在一个AJAX请求开始但还没有激活时，执行一个函数。这是一个Ajax事件
当AJAX请求开始(并还没有激活时)显示loading信息
$("#loading").ajaxStart(function(){
$(this).show();
});
ajaxStop( callback ) 当所有的AJAX都停止时，执行一个函数。这是一个Ajax事件
当所有AJAX请求都停止时，隐藏loading信息。
$("#loading").ajaxStop(function(){
$(this).hide();
});
ajaxSuccess( callback ) 当一个AJAX请求成功完成后，执行一个函数。这是一个Ajax事件
当AJAX请求成功完成时，显示信息。
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("<li>Successful Request!</li>");
});
jQuery.ajaxSetup( options ) 为所有的AJAX请求进行全局设置。查看$.ajax函数取得所有选项信息。
设置默认的全局AJAX请求选项。
$.ajaxSetup({
url: "/xmlhttp/",
global: false,
type: "POST"
});
$.ajax({ data: myData });
serialize( ) 以名称和值的方式连接一组input元素。实现了正确表单元素序列
function showValues() {
var str = $("form").serialize();
$("#results").text(str);
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
serializeArray( ) 连接所有的表单和表单元素(类似于.serialize()方法)，但是返回一个JSON数据格式。
从form中取得一组值，显示出来
function showValues() {
var fields = $(":input").serializeArray();
alert(fields);
$("#results").empty();
jQuery.each(fields, function(i, field){
$("#results").append(field.value + " ");
});
}
$(":checkbox, :radio").click(showValues);
$("select").change(showValues);
showValues();
JQuery Effects 方法说明
show( ) 显示隐藏的匹配元素。
show( speed, [callback] ) 以优雅的动画显示所有匹配的元素，并在显示完成后可选地触发一个回调函数。
hide( ) 隐藏所有的匹配元素。
hide( speed, [callback] ) 以优雅的动画隐藏所有匹配的元素，并在显示完成后可选地触发一个回调函数
toggle( ) 切换元素的可见状态。如果元素是可见的，切换为隐藏的；如果元素是隐藏的，
切换为可见的。
slideDown( speed, [callback] ) 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选
地触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以
“滑动”的方式显示出来。
slideUp( speed, [callback] ) 通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地
触发一个回调函数。这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”
的方式隐藏起来。
slideToggle( speed, [callback] ) 通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回
调函数。 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐
藏或显示。
fadeIn( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触
发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的
高度和宽度不会发生变化。
fadeOut( speed, [callback] ) 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触
发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的
高度和宽度不会发生变化。
fadeTo( speed, opacity, [callback] ) 把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成
后可选地触发一个回调函数。 这个动画只调整元素的不透明度，也就是说所
有匹配的元素的高度和宽度不会发生变化。
stop( ) 停止所有匹配元素当前正在运行的动画。如果有动画处于队列当中，他们就会立即开始。
queue( ) 取得第一个匹配元素的动画序列的引用(返回一个内容为函数的数组)
queue( callback ) 在每一个匹配元素的事件序列的末尾添加一个可执行函数，作为此元素的事件函数
queue( queue ) 以一个新的动画序列代替所有匹配元素的原动画序列
dequeue( ) 执行并移除动画序列前端的动画
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数。
animate( params, options ) 创建自定义动画的另一个方法。作用同上。
JQuery Traversing 方法说明
eq( index ) 从匹配的元素集合中取得一个指定位置的元素，index从0开始