# jQuery操作DOM 和 增刪改查 - 1.html() ```js $('ul li').html();//獲取ul下第一個li元素下的內容 $('ul li').html('9');//把ul下所有li元素下的內容改為9 $('ul li').html(function(index, el ...
# jQuery操作DOM 和 增刪改查 - 1.html() ```js $('ul li').html();//獲取ul下第一個li元素下的內容 $('ul li').html('9');//把ul下所有li元素下的內容改為9 $('ul li').html(function(index, ele){ return '<p style="color:orange">'+ index +'</p>' });//把ul下所有li元素下的內容改為return的內容 ```
- 2.text() ```js $('ul').text();//獲取ul元素的後代元素的所有文本節點 $('ul li').text(function(index, ele){ return '<p style="color:orange">'+ index +'</p>' });//把ul下所有li元素下的內容改為return的字元串信息 ```
- 3.size() ```js $('ul li').size();//獲取ul下li元素的個數 ```
- 4.addClass() ```js $('.demo').addClass('demo1 demo2'); $('.demo').addClass(function(index, ele){ return 'demo1';//在原來class='demo'的基礎上，加上demo1 }); ```
- 5.removeClass() 移除class
- 6.hasClass() 是否擁有某個class名
- 7.css() ```js $('.demo').css({width:'100px', height:'100px', backgroundColor:'red'});//賦值操作 $('.demo').css('width');//取值操作 ```
- 8.attr() 基於setAttribute getAttribute 自定義屬性，和行間屬性 ```js $('.demo').attr('class');//取值 $('.demo').attr('class', 'wrapper');//賦值 ```
- 9.prop() 基於原生JS的dom對象的特性操作，特性映射，非特性不能映射 ```js $('.demo').prop('class');//取值，對於自定義屬性不能取值 $('.demo').prop('checked');//取值，對於自定義屬性不能取值 $('.demo').prop('class', 'wrapper');//賦值 ```
- 10.val() 取值和賦值操作，賦和取表單元素相關的值 ```js $('input').val();//取值 $('input').val('123');//賦值 $('input[type="checkbox"]').val(function(index, oldValue){ return oldValue + index; }); ```
## 增刪改查操作
### 查找 - 1.next() 獲取下一個兄弟元素節點
- 2.prev() 獲取上一個兄弟元素節點
- 3.prevAll() 獲取同級的下麵兄弟元素節點
- 4.nextAll() 獲取同級的上面的兄弟元素節點
- 5.prevUntil() 獲取同級的上面的兄弟元素，直到XXX為止
- 6.nextUntil() 獲取同級的下麵的兄弟元素，直到XXX為止 ```js $(h1).next().click(function(){ if($(this).prop('checked')){ $(this).nextUntil('h1', 'input[type="checkbox"]').prop('checked', true);//找到同級的下麵的元素，直到h1元素為止，且只找到裡面input[type="checkbox"]的元素 }else{ $(this).nextUntil('h1', 'input[type="checkbox"]').prop('checked', false);// } }); ```
- 7.siblings() 獲取到同級元素的所有兄弟元素節點 ```js $('.demo').siblings('span');//獲取到同級的所有span元素 ```
- 8.parent() 獲取到上一級元素節點
- 9.parents() 獲取到所有祖先元素節點
- 10.offsetParent() 獲取離自己最近的有定位的祖先元素
- 11.closest() 獲得匹配選擇器的第一個祖先元素，從自己（當前元素）開始沿 DOM 樹向上。
- 12.slice() 截取元素 ```js $('.demo').slice(1, 2);//截取第一個到第二個元素（不包括第二個元素） ```
### 增加 改變元素 - 13.insertBefore() ```js $('.content').insertBefore('.box');//在.box之前插入.content ```
- 14.before() ```js $('.box').before( $('.content') );//在.box之前插入.content ```
- 15.insertAfter() ```js $('.content').insertAfter('.box');//在.box之後插入.content ```
- 16.after() ```js $('.box').after( $('.content') );//在.box之後插入.content ```
- 17.appendTo() ```js $('.demo').appendTo('.container');//把.demo添加到.container元素裡面成為最後一個子元素，剪切操作 ```
- 18.append() ```js $('.container').append( $('.demo') );//把.demo添加到.container裡面成為最後一個子元素，剪切操作 ```
- 19.prependTo() ```js $('.demo').prependTo('.container');//把.demo添加到.container元素裡面成為第一個子元素，剪切操作 ```
- 20.prepend() ```js $('.container').prependTo( $('.demo') );//把.demo添加到.container裡面成為最後一個子元素，剪切操作 ```
### 刪除元素
- 21.remove() ```js $('.demo').remove().appendTo('.container');//先刪除.demo元素，後把.demo元素添加到.container元素裡面成為最後一個子元素。這樣刪除的.demo元素，自身捆綁的事件（click, blur等)就會同時刪除 ```
- 22.detach() ```js $('.demo').detach().appendTo('.container');//先刪除.demo元素，後把.demo元素添加到.container元素裡面成為最後一個子元素。這樣刪除的.demo元素，自身捆綁的事件（click, blur等)不會同時刪除 ```
### 添加包裹元素
- 23.wrap() ```js $('.demo').wrap('<div class="container"></div>');//為.demo元素包裹一層wrap()函數中的元素，對wrap()函數中的元素進行複製操作 $('demo').wrap(fuction(index){ return '<div>' + index + '</div>'; });//為每一個.demo元素都包裹一層return的元素 ```
- 24.wrapInner() ```js $('.demo').wrapInner('<div class="container"></div>');//把.demo裡面的元素包裹一層wrap()函數中的元素 ```
- 25.wrapAll() ```js $('.demo').wrapAll('<div class="container"></div>');//給所有的.demo加上一個統一的父元素.container，註意所有的.demo元素最好是同級元素 ```
- 25.unwrap() ```js $('.demo').unwrap();//把.demo的直接父級刪掉 ```
### 特殊的 $() 創建jQuery對象 ```js $('<div></div>');//可以直接通過$()創建一個jQuery對象 ```
以上是markdown格式的筆記
