jquery常用方法______(下篇)

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开始
• filter( expr )                            返回与指定表达式匹配的元素集合，可以使用”,”号分割多个expr，用于实现多个条件筛选
• filter( fn )                               利用一个特殊的函数来作为筛选条件移除集合中不匹配的元素。
• is( expr )                                用一个表达式来检查当前选择的元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true。
• map( callback )                       将jQuery对象中的一组元素利用callback方法转换其值，然后添加到一个jQuery数组中。
• not( expr )                              从匹配的元素集合中删除与指定的表达式匹配的元素。
• slice( start, [end] )                   从匹配元素集合中取得一个子集，和内建的数组的slice方法相同。
• add( expr )                             把与表达式匹配的元素添加到jQuery对象中。
• children( [expr] )                     取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。可选的过滤器将使这个方法只匹配符合的元素(只包括元素节点，不包括文本节点)。
• contents( )                             取得一个包含匹配的元素集合中每一个元素的所有子孙节点的集合(只包括元素节点，不包括文本节点)，如果元素为iframe，则取得其中的文档元素
• find( expr )                             搜索所有与指定表达式匹配的元素。
• next( [expr] )                          取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。
• nextAll( [expr] )                       取得一个包含匹配的元素集合中每一个元素所有的后面同辈元素的元素集合
• parent( [expr] )                       取得一个包含着所有匹配元素的唯一父元素的元素集合。
• parents( [expr] )                     取得一个包含着所有匹配元素的唯一祖先元素的元素集合（不包含根元素）。
• prev( [expr] )                          取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合。
• prevAll( [expr] )                      取得一个包含匹配的元素集合中每一个元素的之前所有同辈元素的元素集合。
• siblings( [expr] )                     取得一个包含匹配的元素集合中每一个元素的所有同辈元素的元素集合。
• andSelf( )                              将前一个匹配的元素集合添加到当前的集合中取得所有div元素和其中的p元素，添加border类属性。取得所有div元素中的p元素，添background类属

$(”div”).find(”p”).andSelf().addClass(”border”);
$(”div”).find(”p”).addClass(”background”);

 

• end( )                                           结束当前的操作，回到当前操作的前一个操作找到所有p元素其中的span元素集合，然后返回p元素集合，添加css属性

$(”p”).find(”span”).end().css(”border”, “2px red solid”);

　　

 

 

JQuery Selectors 方法说明

 

 

基本选择器

• $(”#myDiv”)             匹配唯一的具有此id值的元素
• $(”div”)                匹配指定名称的所有元素
• $(”.myClass”)              匹配具有此class样式值的所有元素
• $(”*”)                         匹配所有元素
• $(”div,span,p.myClass”)           联合所有匹配的选择器

 

 

层叠选择器

• $(”form input”)           后代选择器，选择ancestor的所有子孙节点
• $(”#main > *”)                子选择器，选择parent的所有子节点
• $(”label + input”)             临选择器，选择prev的下一个临节点
• $(”#prev ~ div”)            同胞选择器，选择prev的所有同胞节点

 

基本过滤选择器

• $(”tr:first”)           匹配第一个选择的元素
• $(”tr:last”)            匹配最后一个选择的元素
• $(”input:not(:checked) + span”)              从原元素集合中过滤掉匹配selector的所有元素（这里有是一个临选择器）
• $(”tr:even”)                匹配集合中偶数位置的所有元素(从0开始)
• $(”tr:odd”)               匹配集合中奇数位置的所有元素(从0开始)
• $(”td:eq(2)”)              匹配集合中指定位置的元素(从0开始)
• $(”td:gt(4)”)                   匹配集合中指定位置之后的所有元素(从0开始)
• $(”td:gl(4)”)                    匹配集合中指定位置之前的所有元素(从0开始)
• $(”:header”)                匹配所有标题
• $(”div:animated”)             匹配所有正在运行动画的所有元素

 

 

内容过滤选择器

• $(”div:contains(’John’)”)                   匹配含有指定文本的所有元素
• $(”td:empty”)                             匹配所有空元素(只含有文本的元素不算空元素)
• $(”div:has(p)”)                       从原元素集合中再次匹配所有至少含有一个selector的所有元素
• $(”td:parent”)                           匹配所有不为空的元素(含有文本的元素也算)
• $(”div:hidden”)                          匹配所有隐藏的元素，也包括表单的隐藏域
• $(”div:visible”)                            匹配所有可见的元素

 

属性过滤选择器

• $(”div[id]”)                 匹配所有具有指定属性的元素
• $(”input[name=’newsletter’]”)               匹配所有具有指定属性值的元素
• $(”input[name!=’newsletter’]”)             匹配所有不具有指定属性值的元素
• $(”input[name^=’news’]”)                匹配所有指定属性值以value开头的元素
• $(”input[name$=’letter’]”)                  匹配所有指定属性值以value结尾的元素
• $(”input[name*=’man’]”)                           匹配所有指定属性值含有value字符的元素
• $(”input[id][name$=’man’]”)                      匹配同时符合多个选择器的所有元素

 

 

子元素过滤选择器

• $(”ul li:nth-child(2)”),
• $(”ul li:nth-child(odd)”),                 匹配父元素的第n个子元素
• $(”ul li:nth-child(3n + 1)”)
• $(”div span:first-child”)                  匹配父元素的第1个子元素
• $(”div span:last-child”)                  匹配父元素的最后1个子元素
• $(”div button:only-child”)                     匹配父元素的唯一1个子元素

 

 

表单元素选择器

• $(”:input”)                           匹配所有的表单输入元素，包括所有类型的input, textarea, select 和 button
• $(”:text”)                            匹配所有类型为text的input元素
• $(”:password”)                   匹配所有类型为password的input元素
• $(”:radio”)                     匹配所有类型为radio的input元素
• $(”:checkbox”)                    匹配所有类型为checkbox的input元素
• $(”:submit”)                     匹配所有类型为submit的input元素
• $(”:image”)                         匹配所有类型为image的input元素
• $(”:reset”)                         匹配所有类型为reset的input元素
• $(”:button”)                        匹配所有类型为button的input元素
• $(”:file”)                           匹配所有类型为file的input元素
• $(”:hidden”)                             匹配所有类型为hidden的input元素或表单的隐藏域

 

 

表单元素过滤选择器

• $(”:enabled”)                          匹配所有可操作的表单元素
• $(”:disabled”)                             匹配所有不可操作的表单元素
• $(”:checked”)                               匹配所有已点选的元素
• $(”select option:selected”)              匹配所有已选择的元素

 

 

JQuery CSS 方法说明

 

• css( name )          访问第一个匹配元素的样式属性。
• css( properties )          把一个”名/值对”对象设置为所有匹配元素的样式属性。

$(”p”).hover(function () {
    $(this).css({ backgroundColor:”yellow”, fontWeight:”bolder” });
}, function () {
    var cssObj = {
    backgroundColor: “#ddd”,
    fontWeight: “”,
    color: “rgb(0,40,244)”
}
    $(this).css(cssObj);
});

　　

• css( name, value )              在所有匹配的元素中，设置一个样式属性的值。
• offset( )                取得匹配的第一个元素相对于当前可视窗口的位置。返回的对象有2个属性，

top和left，属性值为整数。这个函数只能用于可见元素。

var p = $(”p:last”);
var offset = p.offset();
p.html( “left: ” + offset.left + “, top: ” + offset.top );

　　

• width( ) 取得当前第一匹配的元素的宽度值，
• width( val ) 为每个匹配的元素设置指定的宽度值。
• height( ) 取得当前第一匹配的元素的高度值，
• height( val ) 为每个匹配的元素设置指定的高度值。

 

 

JQuery Utilities 方法说明

 

• jQuery.browser

1. .msie 表示ie
2. jQuery.browser.version 读取用户浏览器的版本信息
3. jQuery.boxModel 检测用户浏览器针对当前页的显示是否基于w3c CSS的盒模型
4. jQuery.isFunction( obj ) 检测传递的参数是否为function

function stub() { }
var objs = [
function () {},
{ x:15, y:20 },
null,
stub,
“function”
];
jQuery.each(objs, function (i) {
var isFunc = jQuery.isFunction(objs[i]);
$(”span:eq( ” + i + “)”).text(isFunc);
});

　　

• jQuery.trim( str )         清除字符串两端的空格，使用正则表达式来清除给定字符两端的空格
• jQuery.each( object, callback )            一个通用的迭代器，可以用来无缝迭代对象和数组
• jQuery.extend( target, object1, [objectN] )             扩展一个对象，修改原来的对象并返回，这是一个强大的实现继承的

工具，这种继承是采用传值的方法来实现的，而不是JavaScript中的

原型链方式。

合并settings和options对象，返回修改后的settings对象

var settings = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
jQuery.extend(settings, options);

　　

合并defaults和options对象，defaults对象并没有被修改。options对象中的值

代替了defaults对象的值传递给了empty。

var empty = {}
var defaults = { validate: false, limit: 5, name: “foo” };
var options = { validate: true, name: “bar” };
var settings = $.extend(empty, defaults, options);

　　

• jQuery.grep( array, callback, [invert] )                         通过一个筛选函数来去除数组中的项

$.grep( [0,1,2], function(n,i){
return n > 0;
});

　　

• jQuery.makeArray( obj )                         将一个类似数组的对象转化为一个真正的数组

将选取的div元素集合转化为一个数组

var arr = jQuery.makeArray(document.getElementsByTagName(”div”));
arr.reverse(); // use an Array method on list of dom elements
$(arr).appendTo(document.body);

　　

• jQuery.map( array, callback )                         使用某个方法修改一个数组中的项，然后返回一个新的数组
• jQuery.inArray( value, array )                         返回value在数组中的位置，如果没有找到，则返回-1
• jQuery.unique( array )                        删除数组中的所有重复元素，返回整理后的数组