JQ note -- dom操作與屬性操作
阿新 • • 發佈：2018-12-20
- $('#id') $('.class') $('div') $('.class ul') // 選擇器
- $(function(){...}) // DOM ready
- var x = $('#id').get(0); // jq物件 轉 js原生
- var x = document.get....; console.log($(x)); // js轉jq
- $('#id').css(['color','height','width']); // 獲取多個css值（獲取的是最終樣式，不需要寫在內聯）
- $('#id').css('color','red'); // 修改css（多個用物件方法）
- $('#id').val(); // 獲取value
- $('#id').attr('id'); // 獲取id屬性值
- $('#id').attr('id','box'); // 設定id屬性值（多個用物件方法）
- $('#id').removeAttr('id'); // 刪除id屬性
- $('#id').addClass('box'); // 新增class類 名為box
- $('#id').removeClass('box'); // 移除box類
- $('#id').toggleClass('border')； //對border類 進行設定與移除的切換
$('#div').click(function(){ $('#div').toggleClass(function(){ return $('#div').hasClass('pick')?'red':'pink'; }) }) //對 #div 進行class的切換 - $('#id').find('p'); // 後代所有的 P
- $('#id').next()--prev(); // 緊鄰的 前--後 同級元素
- $('#id').nextAll('p')--prevAll(); // 前面所有的P -- 後面所有的同級元素
- $('#id').nextUntil('p')--prevUntil('p'); // 前--後 所有元素直到 P（不包括p）
- $('#id').siblings()； //前後所有 同級元素
- $('main').append(" <b>Hello world!</b>"); // 插入節點到 main內部的最後面
- ($("p")).appendTo($("#main")); // 插入到
- $('main').prepend(" <b>Hello world!</b>"); // 插入節點到 main內部的最前面
- ($("p")).prependTo($("#main")); // 插入到
- $('main').after(" <b>Hello world!</b>"); // 插入節點到 main節點後面
- ($("p")).inserAfter($("#main")); // 插入到
- $('main').before(" <b>Hello world!</b>"); // 插入節點到 main節點前面
- $('span').wrap("<div></div>"); // 每一個span節點 都被 div 包裹起來
- $('span').wrapAll("<div></div>"); // 所有span節點 被一個 div 包裹起來
- $('span').unwrap(); // 移除最近的一層父元素
- $('span').unwrap().unwrap().unwrap(); // 寫幾次就移除幾層
- $('span').clone(); // 克隆span節點 ==> 預設淺克隆（只複製節點與內容）
- $('span').clone(true).appendTo($('#main')); // 克隆span節點並新增到main節點內部的最後面 （true -- 深克隆 == 複製事件）
- $('span').remove(); // 刪除節點
- $('span').replaceWith('<h1>.....</h1>'); // 用h1替換span