JQuery DOM 经常使用操纵汇总

一、JQuery对象的基础要领:

(1) get(); 取得一切婚配的元素
(2) get(index); 取得个中一个婚配的元素 $(this).get(0) 同等于 $(this)[0]
(3) Number index(jqueryObj); 搜索子对象
(4) each(callback); 相似foreach,不过遍历的是元素数组
如:

 $("img".each(function(index){
    this.src = "test" + index + ".jpg";
 });

运用 return false; return true; 代表 break、continue的功用

(5) length、size(); 都是返回元素总数值

(6) jQuery.noConflict(true); 重设 jquery 默许的标记
如:

    var dom = {};
    dom.query = jQuery.noConflict(true);

这时候将用 dom.query 替代 $

二、、JQuery挑选器

(1)基础:
* 婚配一切DOM元素
.classname 婚配带有指定classname的DOM元素
element(DOM标签称号) 婚配指定称号的一切DOM元素

id 婚配指定ID的DOM元素

, 用,离开示意婚配多个挑选前提中的一个

(2)层级:
挑选一[空格]挑选二 示意选一内合符前提二的一切元素
挑选一[>]挑选二 示意选一内合符前提二的第一个元素
挑选一[+]挑选二 示意紧接选一符前提二的元素 next
挑选一[~]挑选二 示意选一后符前提二的一切元素 siblings

(3)运算符

:animated           动画元素
:eq(index)          索引位置,如:$("div:eq(1)"
:even               偶数元素
dd                奇数元素
:first              第一个
:gt(index)          大于索引的一切元素
:lt(index)          小于索引的一切元素
:header             H1、H2... 这些题目元素
:last               末了一个
:not(Selector)      消除
:contains(string)   挑选的对象内容里包括
:empty              挑选的对象内容为空
:has(Selector)      含有
:parent             与empty相反
:first-child
:last-child
:nth-child(index)   第几个
nly-child         唯一的子元素

表单

:text :checkbox :radio :image :file :submit :reset :password :button

表单状况

:checked :disabled :enabled :selected

可见性

:hidden :visible

属性及其运算符

[属性称号]        婚配包括给定属性的元素
[att=value]       同等上面
[att*=value]      隐约婚配
[att!=value]      不能是这个值
[att$=value]      末端是这个值
[att^=value]      开首是这个值
[att1][att2][att3]...   婚配多个属性前提中的一个

三、JQuery DOM 的经常使用操纵

(是指经由过程挑选器挑拔取得DOM后可举行的经常使用操纵,等于JQuery对象实例的要领)

1、属性操纵(注:attr(name)、html()、val() 是只对第一个婚配元素操纵的要领,别的都是对悉数操纵)

attr(name); 取得婚配元素的第一个元素指定的属性
attr(key, fn)、attr(key, value) 对一切婚配元素设定一个属性值,前者的第二个参数是一个函数,值等于这个函数的返回值
attr(properties) 用键值对设定一切婚配元素设定一个或多个属性值,如:$("img".attr({ src: "test.jpg", alt: "Test Image" });
removeAttr(name) 删除婚配元素指定属性值
addClass(classname) 增添类名,等于增添 class 属性
removeClass(classname)
toggleClass(classname) 切换类名(存在则删除,不存在则增添)

html()
html(setvalue)
text()
text(setvalue)
val()
val(val)      关于一般元素,运用要领应当是 对象.val(设置值); 关于 select、radio等则用值示意要选中这个值的对象,如:
              $("#multiple".val(["value1", "value3"]);
              $("input".val(["checkvalue1", "checkvalue2"]);

2、挑选
实际上挑选的要领许多都能经由过程挑选器的运算符完成的,因而这里只列出一些特别的操纵要领。

eq(index)、filter(expr)、hasClass(class)、is(expr)、not(expr)、

filter(fn)           挑选出与指定函数返回值婚配的元素鸠合(这个函数内部将对每一个对象盘算一次
                   (相似 '$.each'). 假如挪用的函数返回false则这个元素被删除,不然就会保存。)

slice(start,[end])     拔取一个婚配的子集

map(callback)        将一组元素转换成其他数组(不管是不是是元素数组)

andSelf()                 把所选的加入到当前元素集合
end()                       恢复前一个挑选损坏后的状况

3、文档处置惩罚

append(content)      向每一个元素内容追加内容,content指:String, Element, jQuery 个中之一,以下同。

appendTo(content)    以上面的相反,上面是向选中对象追加,这个是把选中对象向content挑选的对旬追加

prepend(content)、prependTo(content)、after(content)、before(content)

replaceWith(content) 把选中元素用content替代
replaceAll(selector) 把挑选的对象用当前对象替代

empty()
remove([expr])
clone()
clone(true) 克隆时把事宜一同克隆

4、CSS处置惩罚

css(name)         接见第一个婚配元素的款式属性
css(name,value)   在一切婚配的元素中,设置一个款式属性的值
css(properties)   用键值对对其给值

offset()          取得选中元素的位移,返回值为对象Object{top,left}

height()、height(val)、width()、width(val)

四、JQuery对象的事宜处置惩罚

1、全局操纵

(1) ready(fn)
DOM停当时的事宜,关于document事宜能够简写为 $(function(){ … });
(2) bind(type,[data],fn) 对所的婚配绑定一个事宜data为传递给这个事宜函数的附加对象
如:

$("p".bind("click", function(){
  alert( $(this).text() );
});
function handler(event) {
  alert(event.data.foo);
}
$("p".bind("click", {foo: "bar"}, handler)

(3) one(type,[data],fn) 以上面的区别是这个事宜只相应一次
(4) trigger(type,[data]) 在每一个元素上触发一次某事宜
(5) triggerHandler(type,[data]) 只触发事宜函数,但不触发浏览器的雷同事宜
(6) unbind([type],[data]) 删除绑定的事宜
(7) hover(overFn, outFn) 相应鼠标经由事宜
(8) toggle(fn1,fn2…) 每次点击鼠标后顺次相应当差别的函数

2、牢固事宜
在不带参数的情况下示意实行某事宜,带参数则为设定某事宜

下面的事宜能触发,也能设定:

blur()、change()、click()、dblclick()、error()、focus()、keydown()、keypress()、keyup()、select()、submit()

下面的事宜只能设定,不能用JS触发:

load(fn)、mousedown(fn)、mousemove(fn)、mouseout(fn)、mouseover(fn)、mouseup(fn)、resize(fn)、scroll(fn)、unload(fn)

五、结果

hide()

hide(speed,[callback])    用动画隐蔽,callback 为动画完成时实行的函数

show()

show(speed,[callback])

toggle() 切换状况

slideDown(speed,[callback])      经由过程高度变化(向下增大)来动态地显现一切婚配的元素,在显现完成后可选地触发一个回调函数。
slideUp(speed,[callback])        经由过程高度变化(向上减小)来动态地隐蔽一切婚配的元素,在隐蔽完成后可选地触发一个回调函数。

slideToggle(speed,[callback])    经由过程高度变化来切换一切婚配元素的可见性,并在切换完成后可选地触发一个回调函数。

fadeIn(speed,[callback])         经由过程不透明度的变化来完成一切婚配元素的淡入结果,并在动画完成后可选地触发一个回调函数。
fadeOut(speed,[callback])        经由过程不透明度的变化来完成一切婚配元素的淡出结果,并在动画完成后可选地触发一个回调函数。
fadeTo(speed,opacity,[callback]) 把一切婚配元素的不透明度以渐进体式格局调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。

animate(params,options) 用于建立自定义动画的函数。

params (Options) : 一组包括作为动画属性和终值的款式属性和及其值的鸠合
options (Options) : 一组包括动画选项的值的鸠合。

animate(params[,duration[,easing[,callback]]])

duration、 easing 是预设的动画行动
duration (String,Number) : (可选) 三种预定速率之一的字符串(“slow”, “normal”, or > “fast”或示意动画时长的毫秒数值(如:1000)
easing (String) : (可选) 要运用的擦除结果的称号(须要插件支撑).> 默许jQuery供应”linear” 和 “swing”.
dequeue() 从动画行列中移除一个行列函数
queue() 返回指向第一个婚配元素的行列(将是一个函数数组)
queue(callback) 在婚配的元素的动画行列中增加一个函数
queue(queue) 将婚配元素的动画行列用新的一个行列来替代(函数数组)
stop()

六、AJAX

1、jQuery.ajax(options) 经由过程 HTTP 要求加载长途数据。

参数列表:
(1) async (Boolean) : (默许: true) 默许设置下,一切要求均为异步要求。假如须要发送同步要求,请将此选项设置为 false。
(2) beforeSend (Function) : 发送要求前可修正 XMLHttpRequest 对象的函数,如增加自定义 HTTP 头。XMLHttpRequest 是Function的唯一参数
(3) cache (Boolean) : (默许: true,dataType为script时默许为false) jQuery 1.2 新功用,设置为 false 将不会从浏览器缓存中加载要求信息。
(4) complete (Function) : 要求完成后回调函数 (要求胜利或失利时均挪用)。
(5) contentType (String) : (默许: “application/x-www-form-urlencoded” 发送信息至服务器时内容编码范例。
(6) data (Object,String) : 发送到服务器的数据。将自动转换为要求字符串花样。GET 要求中将附加在 URL 后。检察 processData 选项申明以制止此自动转换。必需为

Key/Value 花样。假如为数组,jQuery 将自动为差别值对应同一个称号。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。
(7) dataFilter (Function) :给Ajax返回的原始数据的举行预处置惩罚的函数。
(8) dataType (String) : 预期服务器返回的数据范例,”xml”、”html”、”script”、”json”、”jsonp”、”text”。
(9) error (Function) : (默许: 自动推断 (xml 或 html)) 要求失利时挪用时候。
(10) global (Boolean) : (默许: true) 是不是触发全局 AJAX 事宜。设置为 false 将不会触发全局 AJAX 事宜
(11) ifModified (Boolean) : (默许: false) 仅在服务器数据转变时猎取新数据。运用 HTTP 包 Last-Modified 头信息推断。
(12) jsonp (String) : 在一个jsonp要求中重写回调函数的名字。
(13) password (String) : 用于相应HTTP接见认证要求的暗码
(20) username (String) : 用于相应HTTP接见认证要求的用户名
(14) processData (Boolean) : (默许: true) 默许情况下,发送的数据将被转换为对象(技术上讲并不是字符串) 以合营默许内容范例 “application/x-www-form-urlencoded”。如

果要发送 DOM 树信息或别的不愿望转换的信息,请设置为 false。
(15) scriptCharset (String) : 只有当要求时dataType为”jsonp”或”script”,而且type是”GET”才会用于强迫修正charset。通常在当地和长途的内容编码差别时运用。
(16) success (Function) : 要求胜利后回调函数。参数:服务器返回数据,数据花样。 Ajax 事宜。
(17) timeout (Number) : 设置要求超时时候(毫秒),此设置将掩盖全局设置。
(18) type (String) : (默许: “GET” 要求体式格局 (“POST” 或 “GET”), 默许为 “GET”。
(19) url (String) : (默许: 当前页地点) 发送要求的地点。

参数用 : 离开,如:

$.ajax({
url: "test.html",
cache: false,
success: function(html){
    $("#results").append(html);
}
});

2、封装好的浅易要领(callback是胜利时实行的函数,参数是返回的数据)

jQuery.get(url,[data],[callback])
jQuery.getJSON(url,[data],[callback])
jQuery.getScript(url,[callback])       载入长途JS并实行
jQuery.post(url,[data],[callback])
load(url,[data],[callback])            把长途的HTML载入当前选中的DOM中

3、事宜(事宜参数为event, XMLHttpRequest, ajaxOptions, thrownError)

ajaxError(callback)       AJAX 要求发作错误时实行函数。
ajaxSend(callback)        AJAX 要求发送前实行函数
ajaxComplete(callback)    AJAX 要求完成时实行函数
ajaxStart(callback)       AJAX 要求开始时实行函数
ajaxStop(callback)        AJAX 要求结束时实行函数
ajaxSuccess(callback)     AJAX 要求胜利时实行函数
jQuery.ajaxSetup(options) 设定Ajax的全局默许值
serialize()               序列表单内容为字符串
serializeArray()          序列化表格元素 (相似 '.serialize()' 要领) 返回 JSON 数据结构数据

七、经常使用静态要领

jQuery.boxModel             当前页面中浏览器是不是运用规范盒模子衬着页面
jQuery.browser                浏览器内核标识。根据 navigator.userAgent 推断。
                                          可用值: safari opera msie mozilla

jQuery.browser.version      浏览器衬着引擎版本号。
jQuery.each(obj,callback)   通用例遍要领,可用于例遍对象和数组。
jQuery.inArray(value,array) 肯定第一个参数在数组中的位置(假如没有找到则返回 -1 )。
jQuery.map(array,callback) 将类数组对象转换为数组对象,返回值为数据,callback能够对旧数组单个举行处置惩罚
jQuery.unique(array)        删除数组中反复元素。

via 加菲

    原文作者:kidsamong
    原文地址: https://segmentfault.com/a/1190000002450665
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞