jQuery——進階(動畫、迴圈、正則、事件冒泡、事件委託、DOM)
目錄
特殊動畫效果
1.淡入淡出: fadeIn():淡入 fadeOut():淡出 fadeToggle():切換淡入淡出
2.顯示隱藏: show():顯示 hide():隱藏 toggle():切換顯示隱藏
3.下拉收起: slideDown():下拉顯示 slideUp():收起隱藏 slideToggle():切換下拉收起
單標籤操作
1.獲取input裡的值: (1)元素.prop(‘value’) (2)元素.val()
2.獲取自定義屬性的值(不分單雙): 元素.attr(‘屬性’)
鏈式呼叫
jQuery物件的方法執行後會返回這個物件,所以可以將方法連在一起寫。 例:
$(this).next().slideToggle().parent().siblings().children("ul").slideUp();
迴圈遍歷
1.遍歷標籤: 標籤.each(function(){ console.log($(this).html()); })
2.遍歷陣列: arry.forEach(function(element){ console.log(element); })
正則表示式
1.寫法: var re=new RegExp(‘規則’, ‘可選引數’); var re=/規則/引數;
2.引數: g: global,全文搜尋,預設搜尋到第一個結果接停止 i: ingore case,忽略大小寫,預設大小寫敏感
事件冒泡
子類發生的事件會傳遞到父類。 阻止事件冒泡方法: 1.event.stopPropagation() 2.return false
事件委託
子元素的操作委託給父類,可以減少資源的消耗。 方法: ⽗元素.delegate(“⼦元素”,”事件”,function(){})
建立標籤
var span = $(“我是一個孤獨的span”);// 建立標籤,帶內容 var span2 = “我是一個孤獨的span”; console.log(typeof span);// object,可以靈活的操作樣式,屬性,等等內容 console.log(typeof span2);// string
dom操作
操作 | 描述 |
---|---|
append/appendTo | 在元素內部後新增/新增到元素內部後 |
prepend/prependTo | 在元素內部前新增/新增到元素內部前 |
after/insertAfter | 在元素外部後新增/新增到元素外部後 |
before/insertBefore | 在元素外部前新增/新增到元素外部前 |
remove | 刪除元素 |