jQuery的总结

来源:互联网 发布:数据接口大全 编辑:程序博客网 时间:2024/06/05 00:57

构造函数,都返回JQuery对象

1.jQuery(expression,context)
jQuery中的一切都构建于这个函数之上,或者说都是在以某种方式使用这个函数。
等同:$(expression,context)
expression可以是CSS表达式,XPath表达式
context(可选)作为上下文的DOM元素,文档或jQuery对象。比如document.forms[0]

2.jQuery(elements)
等同:$(elements)
elements是DOM元素
比如:$("#myID")找ID为myID的 ,$("div"),$(".myClass"),$("*")找所有的,$("#myID,div,.myClass")
返回是封装了指定dom元素的JQuery对象
(转义字符为:// 比如要找myID.entry[1]这个ID,这要写成: myID//.entry//[1//])

3.jQuery(html)
等同:$(html)
html:一般是用于动态创建DOM元素的HTML标记字符串 
返回的JQuery对象一般常用的方法有:appendTo(dom对象)

 


4.jQuery(fn)=$(fn)=$(document).ready()

 

方法和属性

CSS相关
1.css(name)取得第一个匹配元素的样式属性
2.css(key, value)设置一个样式属性的值。
3.css(properties)设置多个样式属性的值。 例如:$("p").css({ color: "red", background: "blue" }); 
4.height(val),width(val) 设置CSS高度或宽度属性的值。如果没有明确指定单位(如:em或%),使用px。 
5.height(),width()  取得高度或宽度

封闭了DOM对象的JQuery对象的属性和方法
1. attr(name) 取得第一个匹配元素的属性值
2. addClass(class) 为每个匹配的元素添加指定的类名。 
3. attr(key, value),attr(key, fn)为所有匹配的元素设置一个属性值。
4. attr(properties) 为所有匹配的元素设置多个属性值。
5. removeAttr(name) removeClass(class) 从每一个匹配的元素中删除一个属性或类名。 
6. html(),text(),val(),  html(val),text(val),val(val)访问第一个或设置所有的匹配的值,其中html()不能用于XML文档.
7. toggleClass(class) 如果存在(不存在)就删除(添加)一个类。
8. offset( ) 例子:var p = $("p:last");var offset = p.offset();p.html( "left: " + offset.left + ", top: " + offset.top );
9. eq(index)得到第index个DOM
10. hasClass( class ) 判断是否含有指定的css类,有返回true 
11. filter( expr:#id .class ) 筛选出符合条件的dom对象,如: .filter(".middle")
12. is(expr:#id .class)  用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。
13. not(elems要从匹配的jQuery元素集合中删除的元素集合) 例子:$("p").not( $("div p.selected") ) 删除所有符合条件的多个元素集合,
    not(expr用于匹配要删除元素的表达式)一个jQuery对象中删除一个或多个元素 例子: $("p").not("#selected"),
    not(el要删除的元素 )删除一个元素 $("p").not( $("#selected")[0] ) 
14. slice( start, [end] ) 选择匹配的元素
15. after(content),before(content)在每个匹配的元素之后或前插入内容  
    insertAfter(expr),insertBefore(expr) 把所有匹配的元素插入到指定的元素元素集合的前面。
16  prepend(content),prependTo(expr) 向每个匹配的元素内部前置内容
17. empty() 删除匹配的元素集合中所有的子节点。 remove(expr) 从DOM中删除所有匹配的元素。
18. clone(deep) 克隆匹配的DOM元素并且选中这些克隆的副本
19. wrap(elem) wrap(html)把所有匹配的元素用其他元素的结构化标记包装起来。
20. get(),get(num)取得其中一个匹配的元素。 num表示取得第几个匹配的元素.或者全部元素.
21. length 当前匹配的元素数量。  size() 当前匹配的元素数量。
22. lt(pos) 将匹配的元素集合缩减为给定位置之前的所有元素 gt(pos)  将匹配的元素集合缩减为给定位置之后的所有元素

 

对事件的支持
1.ready( fn ) 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。例子:$(document).ready()
2.bind(type,data,fn) 为每一个匹配元素的特定事件(像click,blur,change...............)绑定一个事件处理器函数。
3.unbind(type,fn) 删除绑定的事件.  $("p").unbind()删除所有绑定,$("p").unbind("click")
4.one(type,data,fn) 只绑定一次
5.trigger(type)在每一个匹配的元素上触发某类事件。 这样就可以不用blur(fn),blur()这样的方法了.
6.triggerHandler( type, [data] ) 删除以前的绑定,重新绑定
7.click(),click(fn),blur(),blur(fn),change(),change(fn).................................


动画效果Effects
1.show( ),show(speed,callback),hide(),hide(speed,callback),
fadeIn(speed,callback),fadeOut(speed,callback),fadeTo(speed,opacity,callback)
以优雅的动画显示或隐藏所有匹配的元素,并(可选)在显示完成后可选地触发一个回调函数。
speed:slow,normal,fast,1000
slideUp(speed, callback) 通过高度变化(向上减小)来动态地隐藏所有匹配的元素
slideDown(speed,callback) 通过高度变化(向下增大)来动态地显示所有匹配的元素
slideToggle(speed,callback)使匹配的元素以“滑动”的方式隐藏或显示。 
toggle() 切换元素的可见状态。如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。 
2.animate(params,speed,easing,callback) 用于创建自定义动画的函数
params (Hash): 一组包含作为动画属性和终值的样式属性和及其值的集合 
speed (String|Number): (可选) 三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如:1000) 
easing (String): (可选) 要使用的擦除效果的名称(需要插件支持). 
callback (Function): (可选) 在动画完成时执行的函数 
$("p").animate({height:200, width:400, opacity: .5}, 1000, "linear", function(){alert("all done");} );

animate( params, options ) 
$("p").animate({left: "50px", opacity: 1}, { duration: 500, queue: false });
$("p").animate({"opacity": "show"}, { "duration": "slow", "easing": "easein" });

Ajax

Ajax Requests:

1.$.ajax(properties) 返回值是XMLHttpRequest,properties是属性值对 $.ajaxSetup(settings)作为全局设置
  type: "POST"或"GET", 
  url:getdata.php
  cache: false,
  dataType:"xml" OR "html" OR "text" OR "json" OR "jsonp" OR "script",
  data: "name=John&location=Boston",
  success: function(msg){alert( "Data Saved: " + msg );

2. $.get( url, [data], [callback], [type] ) 
   $.get("test.cgi", { name: "John", time: "2pm" },function(data){alert("Data Loaded: " + data);});
3. $.post( url, [data], [callback], [type] ) 
   $.post("test.php", { name: "John", time: "2pm" },  function(data){process(data);}, "xml");
4. $.getJSON( url, [data], [callback] ) 
   $.getJSON("test.js", { name: "John", time: "2pm" }, function(json){alert("JSON Data: " + json.users[3].name);});
5. $.getScript(url, callback) 用GET方式装入并执行一个远程JavaScript文件。
6. load(url, params, callback)  $("#links").load("/Main_Page #p-Getting-Started li");


Ajax Events:
1. ajaxStart( callback ) 绑定一个(当AJAX请求开始并且还没有开始运行时)执行的函数
2. ajaxSend(callback)  绑定一个Ajax请求发送时执行的函数。
   $("#msg").ajaxSend(function(evt, request, settings){$(this).append("request at "+settings.url);});
3. ajaxComplete( callback ) 当AJAX请求完成时执行一个函数。
   $("#msg").ajaxComplete(function(request, settings){$(this).append("<li>Request Complete.</li>");});
4. ajaxSuccess( callback ) 绑定一个当AJAX请求顺利完成时执行的函数。
   $("#msg").ajaxSuccess(function(evt, request, settings){$(this).append("<li>Successful Request!</li>");});
5. ajaxError( callback ) 绑定一个当一个AJAX请求失败时执行的函数。
   $("#msg").ajaxError(function(event, request, settings){$(this).append("Errorpage " + settings.url);});
6. serialize() 把Input元素的内容连接成为一个请求字符串
7. serializeArray( ) 把Input元素的内容格式为JSON格式


JAVASCRIPT

1. $.browser  version,safari,opera,msie,mozilla 
2. $.each(obj, fn) 这个函数与$().each()不同,$().each()是专门用于迭代和执行jQuery对象的函数。而这个函数可以用于迭代任何对象和数组。 这个函数的回调中包含两个参数:第一个是key(对象)或index(数组),第二个是值。
3. $.extend(target,prop1,propN) 
4. $.grep(array,fn,inv) 使用筛选函数,从一个数组中筛选项目。 其中筛选函数必须传递两个参数:数组中的当前项目和数组中项目的索引。如果要保持数组中的项目,这个函数必须返回true;如果返回false,就会删除项目。 
5. $.makeArray( obj ) 转成数组   var arr = jQuery.makeArray(document.getElementsByTagName("div"));
6. map( callback ) 把一组DOM对象转成数组 $("input").map(function(){return $(this).val();})
7. $.inArray( value, array ) 返回value在array中的索引
8. jQuery.unique( array ) 去掉相同的元素。
9. jQuery.isFunction( obj ) 返回BOOL值,判断是否是函数
10.jQuery.trim( str ) 返回去空格的字符串

0 0