Jquery 方法--自己總結持續更新-1

weixin_34391445發表於2017-02-26
parent() --查詢父節點
parents()--查詢祖先節點 --parents(‘div’)--在所有祖先節點中找到div
***closest()--當前元素指定的最近的祖先元素,必須要接受一個引數--(只能選擇到一個唯一的元素)--他的祖先節點包括自身
attr()----設定或返回元素屬性
sibling()--兄弟節點--sibling(div)--所有div 的兄弟節點
建立元素
$(function () {
 $(function () {
       document.createElement('div');//原生
       $('<div id="box">hellow word</div>')//JQ
    })
})

新增節點
jianshu()把元素新增到指定節點的裡面的最後---appendChildren()
$('div').append($div)
appendTo() 與append相反    $div appendTo($('div'))

prepend() 把元素新增到指定節點裡面的最前面
$('div').prepend($div)
prependTo() --$div.prependTo($('div'))

before() 把元素新增到指定節點的前面(新增到外面)---insertBefore
$('div').before($div)
insertBefore()---$div.insertBefore($('div'))

after() 把元素新增到指定節點的後面
$('div').after($div)
insertAfter()--$div.after($('div'))

兩種方法的區別於比較:例如$('div').before($div).css('background','red');---後續(css('background','red'))改變的是前面的元素($('div'))
$div.insertBefore($('div')).css('background','red');--後續改變的是也是前面的元素($div) 不過 元素不同 --看需求!
以上預設操作行為都是剪下
--end--

remove()---刪除元素---$('要刪除的元素').remove();
clone()----克隆-------var $div=$('div').clone()---克隆一個元素--預設操作行為克隆結構 不會克隆事件---.clone(true)--深度克隆 可以複製事件
index()----索引值,代表當前元素在所有兄弟元素排第幾(從0開始);--$('#span').index('span')--在所有的span標籤中查詢此時和兄弟節點沒關係!
outerWidth()---元素節點的絕對寬度(padding+border+width)--outerWidth(true)--(padding+border+width+margin)
innerWidth()---(不包含border)
width(200)-----設定寬度為200px;
innerWidth(200)-(width=200-padding)
outerWidth(200)-(width=200-padding-border)
outerWidth(200,true)--(width=200-padding-border-border)
$(window).height()-----可視區的高度
$(document).height()---頁面的的高度;
scrollTop()------------滾動距離;
$(document).scrollTop(200)----設定滾動距離
$(document).scrollTop()==$(document).height()-$(window).height()---到達底部時的滾動距離
$(obj).offset().top------元素距離Y軸的距離-距離值 相對於頁面
$(obj).position().left---不認margin值 定位距離
$(obj).offsetParent()----找到相對定位的父級--$(obj).offset().left-$(obj).offsetParent().offset().left

事件物件:
ev.pageX---滑鼠的座標相對於 頁面X軸
ev.eventX--滑鼠的座標相對於 可視區X軸
ev.which---鍵盤的鍵值
ev.target--事件源 --當前元素---事件委託
ev.stopPropagation()---阻止冒泡
ev.preventDefault()----阻止預設事件
return false;---------阻止預設事件和冒泡
事件委託:
    寫法 $('obj').delegate('被委託元素','事件',fn)
    ev.delegateTarget()---(找到)委託人
    $(ev.delegateTarget).undelegate()--解除繫結

trigger---主動觸發  $('#input').trigger('click')--呼叫input的點選事件|| $('#input').click()--呼叫input的點選事件
名稱空間---$('div').on('click.abc',function(){})--加名稱空間 還是原來的點選事件 只不過加了個識別符--trigger('click.abc')--區別對待

JS中的運動
.hide||show('normal'):--正常速度 預設400 改變-時間  寬高  背景色 裡面可以直接新增時間 改變時間的值
toggle()-如果元素隱藏就讓他顯示 如果顯示就讓他隱藏 hide()/show()合體
fadeOut() || fadeIn()淡入淡出 -預設時間400
fadeToggle()--淡入淡出 fadeOut() || fadeIn()-合體版
sideUp()||sideDown()---顯示隱藏 改變高度
sideToggle---顯示隱藏-合體版
animate()-**-引數: 1、物件{width:'300',height:'300'}設定樣式屬性 和值
                   2、時間 預設是400
                   3、運動形式 --swing(緩衝-快慢快)--linear(勻速)
                   4、回撥函式 --
                   5、數值運算--{width:'+=100'}--每次觸發事件 width會累加
                   6、json 形式-{duration:1000,easing:'linear',complete:function(){alert('回撥')}}
                   7、step--可以檢測定時器的每一次的變化-(可擴充-非常有意思 裡面有一個比例值-pos)配置引數×
                   8、delay()--在鏈式運動中 可以起到 延時的作用括號內接受時間值
stop()--停止運動 預設情況下 只停止當前運動(在鏈式運動中只停止當前的鏈的運動 不會影響後面的運動)如果接受一個true 就會全部停止
        如果接受值為兩個 true(stop(true,true))那麼就會停止到當前鏈式的運動的目標點,不會影響後面的運動
        清空佇列行為--
finish()--停止運動效果 所有運動都會到達指定目標點
parseJSON--把類似json形式的字串轉換成真正的json

相關文章