選擇元素
$('.box')// CSS3 選擇器$('.el', $parent)$().add('.el1').add('.el2')$('.box').filter(':visible')$('.box').filter(function(){var$this= $(this)return$this.index() >3&& $this.hasClass('xxx')})$('.box').find('.box-header')$('.box').closest('.wrap')$('.box').parents('.wrap')$('.box').offsetParent()
遍歷元素
$el.each(function( index ){console.log( index +": "+ $(this).text() );});
創(chuàng)建元素
var$newEl = $('
復(fù)制元素
$(el).clone()
元素的末尾插入子元素
$el.append($newEl)
元素的開始插入子元素
$el.prepend($newEl)
當(dāng)前元素前面插入元素
$el.insertBefore($newEl)
當(dāng)前元素后面插入元素
$el.insertAfter($newEl)
刪除元素
$(el).remove()
判斷兩個(gè)元素是否相等
$(el).is($(otherEl))
內(nèi)容
$el.text()$el.text('text')$el.html()$el.html('xxx')
屬性
$el.attr('href')$el.attr('href','//google.com')$el.removeAttr('data-loading')$el.prop('checked')$el.prop('checked',true)
類名
$el.addClass('className')$el.addClass('className1 className2')$el.removeClass('className')$el.hasClass('className')$el.toggleClass('className')
樣式
$el.css('color');$el.css('color','red');$el.css({'font-size':'16px','border':'none'});
尺寸
$el.width()$el.width(400)$el.height()$el.innerWidth()$el.outerWidth()
位置
$el.position().top// 相對(duì)于其定位父元素$el.position().left$el.offset()// 相對(duì)于瀏覽器窗口$el.offset({? top:10,? left:20px})$el.scrollTop(20)//滾動(dòng)條滾動(dòng)20px
父元素滾動(dòng)到指定子元素的位置
$wrap.scrollTop($child.position().top)
注意：父元素需要是定位元素（position 不為 static）。
顯示隱藏
$el.show()$el.hide()$el.toggle()//切換顯示，隱藏的狀態(tài)$el.fadeIn()$el.fadeOut()$el.slideUp()$el.slideDown()
事件
$el.click(function(){})$el.on('click','.child',function(){})$el.off('click')$el.click(function(event){? event.stopPropagation();// 阻止事件冒泡event.preventDefault();// 阻止元素的默認(rèn)行為event.target;// 觸發(fā)事件的元素event.currentTarget === this;// trueevent.which();// 按下的鍵})$(document).ready(function(){})$el.change()// 腳本觸發(fā)事件
動(dòng)畫
$.animate({opacity:0.6,left:'+=50',height:'toggle'// 0 與 原高的切換},2000,function(){// 動(dòng)畫完成})
ajax
$.ajax({url:'xxx',data: {}})$.ajax({url:'xxx',type:'post'data: {query:'aaa'}}).done(function(res){}).fail(function(){})
鏈?zhǔn)秸{(diào)用
$el.addClass('someClass')? .html('xxx')? .click()
工具方法
$.makeArray
將類似數(shù)組的對(duì)象轉(zhuǎn)化成數(shù)組
functionadd(){varargs =arguments;? args = $.makeArray(args);varsum =0;returnargs.reduce(function(prev, curr){returnprev + curr? },0)}add(1,2,3);//輸出6
類型判斷
$.isArray()// 是否是數(shù)組$.isFunction()// 是否是方法$.isNumeric()// 是否是數(shù)組$.isEmptyObject()// 是否是空對(duì)象$.isPlainObject()// 是否是PlainObject。PlainObject的定義見(jiàn)[這里](http://api.jquery.com/Types/#PlainObject)
$.extend
對(duì)象合并
vardefaultOpts = {a:'xxx',b:'xxx'}functiondoSth(opts){? $.extend({}, defaultOpts, opts)// 也可以用 Object.assign({}, defaultOpts, opts)}
其他
$.noop()// 返回一個(gè)空函數(shù)$.now()// 返回自1970年1月1日 00:00:00 UTC到當(dāng)前時(shí)間的毫秒數(shù)。也可以用 Date.now()$.trim('? aa? ')// 去除字符串前后的空格。也可以用 '? aa? '.trim()
作者：九彩拼盤
鏈接：http://www.itdecent.cn/p/edb65626bab1
來(lái)源：簡(jiǎn)書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
