jQuery知識梳理20190817 [TOC] 1. jQuery的特征強大選擇器: 方便快速查找DOM元素隱式遍歷(迭代): 一次操作多個元素讀寫合一: 讀數據/寫數據用的是一個函數鏈式調用: 可以通過.不斷調用jQuery對象的方法事件處理 DOM操作(CUD) 樣式操作動畫瀏覽 ...

jQuery知識梳理20190817

jQuery知識梳理20190817

1. jQuery的特征

強大選擇器: 方便快速查找DOM元素
隱式遍歷(迭代): 一次操作多個元素
讀寫合一: 讀數據/寫數據用的是一個函數
鏈式調用: 可以通過.不斷調用jQuery對象的方法
事件處理
DOM操作(CUD)
樣式操作
動畫
瀏覽器相容

2. jQuery的兩把利器

2.1 jQuery核心函數

簡稱：jQuery函數($/jQuery)

jQuery庫向外直接暴露的就是$ / jQuery

當引入jQuery庫後，直接使用$即可

當函數用： $(xxx)
當對象用：$.xxx()

2.2 jQuery核心對象

簡稱：jQuery對象

得到jQuery對象：執行jQuery函數返回的就是jQuery對象

使用jQuery對象：$obj.xxx()

console.log(typeof $)   //$是一個function
console.log($ === jQuery) //true  $與jQuery等同
console.log($ === window.$) //true  $是一個全局函數

console.log(typeof $()) //"object"  這個對象就是jQuery對象

$('button').click(function () {
    alert(this.innerHTML)
})

3. jQuery核心函數詳解

jQuery核心函數，首先作為一個函數，可以當作普通的函數調用，根據不同的參數類型衍生不同的使用方式。其次，函數也是一個對象，就是說jQuery核心函數也可以作為對象來使用。

作為一般函數調用: $(param)
1). 參數為函數 : 當DOM載入完成後，執行此回調函數
2). 參數為選擇器字元串: 查找所有匹配的標簽, 並將它們封裝成jQuery對象
3). 參數為DOM對象: 將dom對象封裝成jQuery對象
4). 參數為html標簽字元串 (用得少): 創建標簽對象並封裝成jQuery對象
作為對象使用: $.xxx()
1). $.each() : 隱式遍曆數組
2). $.trim() : 去除兩端的空格

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>03_jQuery核心函數</title>
</head>
<body>
<div>
  <button id="btn">測試</button><br/>
  <input type="text" name="msg1"/><br/>
  <input type="text" name="msg2"/><br/>
</div>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
   需求1. 點擊按鈕: 顯示按鈕的文本, 顯示一個新的輸入框
   需求2. 遍歷輸出數組中所有元素值
   需求3. 去掉"  my atguigu  "兩端的空格
   */
  /*需求1. 點擊按鈕: 顯示按鈕的文本, 顯示一個新的輸入框*/
  //1). 參數為函數 : 當DOM載入完成後，執行其中的函數     回調函數
  $(function () {
    //2). 參數為選擇器(selector)字元串: 查找所有匹配的標簽, 並將它們封裝成jQuery對象
    var $btn = $("#btn")
    $btn.click(function () {
      //顯示按鈕的文本
      //this就是發生事件的dom元素對象(也就是button)
      //3). 參數為DOM對象: 將dom對象封裝成jQuery對象
      var text = $(this).html()
      alert(text)
      //顯示一個新的輸入框
      //4). 參數為html標簽字元串 (用得少): 創建標簽對象並封裝成jQuery對象
      $('<input type="text" name="msg3" /><br />').appendTo('div')
    })
  })

  /*需求2. 遍歷輸出數組中所有元素值*/
  var arr = [123, 'atguigu', true]
  // 1). $.each() : 隱式遍曆數組
  $.each(arr, function (index, item) {
    console.log('第' + (index + 1) + '個元素的值為' + item)
  })

  /*需求3. 去掉"  my atguigu  "兩端的空格*/
  var str = "  my atguigu  "
  // 2). $.trim() : 去除兩端的空格
  console.log(str.trim() === 'my atguigu')
  console.log($.trim(str) === 'my atguigu') //true
</script>
</body>
</html>

4. jQuery核心對象詳解

執行jQuery函數返回的就是jQuery對象，jQuery對象是一個包含所有匹配的任意多個dom元素的偽數組對象。

jQuery的基本行為：
- size()/length：包含的DOM元素的個數
- [index]/get(index)：得到對應位置的DOM元素
- each()：遍歷包含的所有的DOM元素
- index()：得到在所有兄弟元素中的下標。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>04_jQuery對象</title>
</head>
<body>
<button>測試一</button>
<button>測試二</button>
<button id="btn3">測試三</button>
<button>測試四</button>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function () {
    var $btns = $('button')
    console.log($btns) 
    // 需求1. 統計一共有多少個按鈕
      /*size()/length: 包含的DOM元素個數*/
    console.log($btns.size(), $btns.length) // 4    4

    // 需求2. 取出第2個button的文本
      /*[index]/get(index): 得到對應位置的DOM元素*/
    console.log($btns[1].innerHTML, $btns.get(1).innerHTML) // 測試二  測試二

    // 需求3. 輸出所有button標簽的文本
      /*each(): 遍歷包含的所有DOM元素*/
        $btns.each(function(index, domEle){
            console.log(index, domEle.innerHTML, this) // this指的是每個dom對象
        })
      
        $btns.each(function () {
          console.log(this.innerHTML) // 測試一    測試二  測試三        測試四
        })

    // 需求4. 輸出'測試三'按鈕是所有按鈕中的第幾個
      /*index(): 得到在所在兄弟元素中的下標*/
    console.log($('#btn3').index()) // 2
  })
</script>
</body>
</html>

自定義一個偽數組

/**
* 1. 偽數組
*       Object對象
 *      length屬性
*       數值下標屬性
*       沒有數組特別的方法： forEach()    push()  pop()       splice()
*/
console.log($btns instanceof Array) // false
// 自定義一個偽數組
var weiArr = {};
weiArr.length = 0;
weiArr[0] = 'atguigu';
weiArr.length = 1;
weiArr[1] = 123;
weiArr.length = 2;
for (var i = 0; i < weiArr.length; i++) {
    var obj = weiArr[i];
    console.log(i, obj);    // 1  123
}

console.log(weiArr.forEach, $btns.forEach); // undefined undefined

5. 選擇器

選擇器本身只是一個有特定語法規則的字元串，沒有實質用處。它的基本語法規則使用的就是CSS的選擇器語法，並基於此進行了擴展。$(selector)的作用是根據選擇器規則在整個文檔中查找所有匹配的標簽的數組，並封裝成jQuery對象返回。

5.1 選擇器分類

基本選擇器
- #id
- element ---- 元素選擇器
- .class
- *
- selector1, selector2, selectorN---- 並集
- selector1selector2selectorN---- 交集
層次選擇器
- ancestor descendant 後代選擇器
- parent > child 父子選擇器
- prev + next 匹配所有緊接在 prev 元素後的 next 元素
- pre ~ siblings 兄弟選擇器
過濾選擇器
- 基本過濾選擇器
- 內容過濾選擇器
- 可見性過濾選擇器
- 屬性過濾選擇器
表單選擇器

5. 2 基本過濾選擇器

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>05_基本選擇器</title>
</head>
<body>
<div id="div1" class="box">div1(class="box")</div>
<div id="div2" class="box">div2(class="box")</div>
<div id="div3">div3</div>
<span class="box">span(class="box")</span><br>
<ul>
  <li>AAAAA</li>
  <li title="hello">BBBBB(title="hello")</li>
  <li class="box">CCCCC(class="box")</li>
  <li title="hello">DDDDDD(title="hello")</li>
</ul>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function () {
// 1. 選擇id為div1的元素
    $('#div1').css('background', 'red')
// 2. 選擇所有的div元素
    $('div').css('background', 'red')
// 3. 選擇所有class屬性為box的元素
    $('.box').css('background', 'red')
// 4. 選擇所有的div和span元素
    $('div,span').css('background', 'red')
// 5. 選擇所有class屬性為box的div元素
     $('div.box').css('background', 'red')  //不能寫.boxdiv
  })
</script>
</body>
</html>

5. 3 層次選擇器

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>06_層次選擇器</title>
</head>
<body>
<ul>
  <li>AAAAA</li>
  <li class="box">CCCCC</li>
  <li title="hello"><span>BBBBB</span></li>
  <li title="hello"><span>DDDD</span></li>
  <span>EEEEE</span>
</ul>
<!--
層次選擇器: 查找子元素, 後代元素, 兄弟元素的選擇器
1. ancestor descendant
  在給定的祖先元素下匹配所有的後代元素
2. parent>child
  在給定的父元素下匹配所有的子元素
3. prev+next
  匹配所有緊接在 prev 元素後的 next 元素
4. prev~siblings
  匹配 prev 元素之後的所有 siblings 元素
-->

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function () {
//1. 選中ul下所有的的span
    $('ul span').css('background', 'red')
//2. 選中ul下所有的子元素span
    $('ul>span').css('background', 'red')
//3. 選中class為box的下一個li
    $('.box+li').css('background', 'red')
//4. 選中ul下的class為box的元素後面的所有兄弟元素
    $('ul .box~*').css('background', 'red')
  })
</script>
</body>
</html>

5.4 過濾選擇器

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>07_過濾選擇器</title>
</head>
<body>
<div id="div1" class="box">class為box的div1</div>
<div id="div2" class="box">class為box的div2</div>
<div id="div3">div3</div>
<span class="box">class為box的span</span>
<br/>
<ul>
  <li>AAAAA</li>
  <li title="hello">BBBBB</li>
  <li class="box">CCCCC</li>
  <li title="hello">DDDDDD</li>
  <li title="two">BBBBB</li>
  <li style="display:none">我本來是隱藏的</li>
</ul>
<!--
在原有選擇器匹配的元素中進一步進行過濾的選擇器
  * 基本
  * 內容
  * 可見性
  * 屬性
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function () {
//1. 選擇第一個div
    $('div:first').css('background', 'red')
//2. 選擇最後一個class為box的元素
    $('.box:last').css('background', 'red')
//3. 選擇所有class屬性不為box的div
    $('div:not(.box)').css('background', 'red')
//4. 選擇第二個和第三個li元素
    $('li:gt(0):lt(2)').css('background', 'red') //索引起始位置發生變化，重新開始計算
    $('li:lt(3):gt(0)').css('background', 'red') //正確索引位置
//5. 選擇內容為BBBBB的li
    $('li:contains(BBBBB)').css('background', 'red')
//6. 選擇隱藏的li
    $('li:hidden ').show()
//7. 選擇有title屬性的li元素
    $('li[title]').css('background', 'red')
//8. 選擇所有屬性title為hello的li元素
    $('li[title=hello]').css('background', 'red')
  })
</script>
</body>
</html>

5. 5 表單選擇器

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>08_表單選擇器</title>
</head>
<body>
<form>
  用戶名: <input type="text"/><br>
  密 碼: <input type="password"/><br>
  愛 好:
  <input type="checkbox" checked="checked"/>籃球
  <input type="checkbox" checked="checked"/>足球
  <input type="checkbox" checked="checked"/>羽毛球 <br>
  性 別:
  <input type="radio" name="sex" value='male'/>男
  <input type="radio" name="sex" value='female'/>女<br>
  郵 箱: <input type="text" name="email" disabled="disabled"/><br>
  所在地:
  <select>
    <option value="1">北京</option>
    <option value="2" selected="selected">天津</option>
    <option value="3">河北</option>
  </select><br>
  <input type="submit" value="提交"/>
</form>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function () {
//1. 選擇不可用的文本輸入框
    $(':input:disabled').css('background', 'red')
//2. 顯示選擇愛好 的個數
    console.log($(':checkbox:checked').length)
//3. 顯示選擇的城市名稱
    console.log($('select>option:selected').html())
    console.log($('select').val())  //得到的是選擇的option的value
  })
</script>
</body>
</html>

6. $的工具方法

 //1. $.each(): 遍曆數組或對象中的數據
  var person = {
    name: 'tom',
    age: 12
  }
  $.each(person, function (key, value) {
    console.log(key, value)
  })

  //2. $.trim(): 去除字元串兩邊的空格

  //3. $.type(obj): 得到數據的類型
  console.log($.type($) === "function") // true

  //4. $.isArray(obj): 判斷是否是數組
  console.log($.isArray($()))  //false
  console.log($.isArray([]))  //true

  //5. $.isFunction(obj): 判斷是否是函數
  console.log($.isFunction($)) //true
  console.log($.isFunction($())) //false

  //6. $.parseJSON(json) : 解析json字元串轉換為js對象/數組
  /*
   json整體就2種類型:
   1.json對象 : {key1:value1 , key2:value2}
   2. json數組: [value1, value2]
   3. key只能是字元串
   4. value的類型:
     number
     string
     boolean
     null
     []
     {}
   */
  var json = '{"username":"jack", "age" : 12}'
  console.log($.parseJSON(json))  //js對象
  json = '[{"username":"jack", "age" : 12},{"username":"Tom", "age" : 13}]'
  console.log($.parseJSON(json)) //js數組

    /* JSON.parse(jsonString) // json字元串----> js對象/數組
    JSON.stringify(JSObject/JSArr) // js對象/數組--->json字元串 */

7. 屬性

操作標簽的屬性, 標簽體文本
attr(name) / attr(name, value): 讀寫非布爾值的標簽屬性
prop(name) / prop(name, value): 讀寫布爾值的標簽屬性
removeAttr(name)/removeProp(name): 刪除屬性
addClass(classValue): 添加class
removeClass(classValue): 移除指定class
val() / val(value): 讀寫標簽的value
html() / html(htmlString): 讀寫標簽體文本

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>10_屬性</title>
</head>
<body>
<div id="div1" class="box" title="one">class為box的div1</div>
<div id="div2" class="box" title="two">class為box的div2</div>
<div id="div3">div3</div>
<span class="box">class為box的span</span><br/>
<ul>
  <li>AAAAA</li>
  <li title="hello" class="box2">BBBBB</li>
  <li class="box">CCCCC</li>
  <li title="hello">DDDDDD</li>
  <li title="two"><span>BBBBB</span></li>
</ul>
<input type="text" name="username" value="guiguClass"/><br>
<input type="checkbox">
<input type="checkbox"><br>
<button>選中</button>
<button>不選中</button>

<!--
1. 操作任意屬性
   attr()
   removeAttr()
   prop()
2. 操作class屬性
   addClass()
   removeClass()
3. 操作HTML代碼/文本/值
   html()
   val()
-->

<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function () {
//  1. 讀取第一個div的title屬性
    console.log($('div:first').attr('title'))
//  2. 給所有的div設置name屬性(value為atguigu)
    $('div').attr('name', 'atguigu')
//  3. 移除所有div的title屬性
    $('div').removeAttr('title')
//  4. 給所有的div設置class='guiguClass'
    $('div').attr('class', 'guiguClass')
//  5. 給所有的div添加class值(abc)
    $('div').addClass('abc')
//  6. 移除所有div的guiguClass的class
    $('div').removeClass('guiguClass')
//  7. 得到最後一個li的標簽體文本
    console.log($('li:last').html())
//  8. 設置第一個li的標簽體為"<h1>mmmmmmmmm</h1>"
    $('li:first').html('<h1>mmmmmmmmm</h1>')
//  9. 得到輸入框中的value值
    console.log($(':text').val())
//  10. 將輸入框的值設置為atguigu
    $(':text').val('atguigu')
//  11. 點擊'全選'按鈕實現全選
    $('button:first').click(function () {
      $(':checkbox').prop('checked', true)
    })
//  12. 點擊'全不選'按鈕實現全不選
    $('button:last').click(function () {
      $(':checkbox').prop('checked', false)
    })
  })
</script>
</body>
</html>

8. CSS

8.1 CSS

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>11_css</title>
</head>
<body>
<p style="color: blue;">尚矽谷的後裔</p>
<p style="color: green;">太陽的後裔</p>
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function () {
//1. 得到第一個p標簽的顏色
    console.log($('p:first').css('color'))
//2. 設置所有p標簽的文本顏色為red
    $('p').css('color', 'red')
//3. 設置第2個p的字體顏色(#ff0011),背景(blue),寬(300px), 高(30px)        //對象
    $('p:eq(1)').css({
      color: '#ff0011',
      background: 'blue',
      width: 300,
      height: 30
    })
  })
</script>
</body>
</html>

8.2 offset和position

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>12_offset和position</title>
</head>
<style type="text/css">
  * {
    margin: 0px;
  }
  .div1 {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 10px;
    background: blue;
  }
  .div2 {
    position: absolute;
    width: 100px;
    height: 100px;
    top: 50px;
    background: red;
  }
  .div3 {
    position: absolute;
    top: 250px;
  }
</style>
<body style="height: 2000px;">
<div class="div1">
  <div class="div2">測試offset</div>
</div>
<div class='div3'>
  <button id="btn1">讀取offset和position</button>
  <button id="btn2">設置offset</button>
</div>
<!--
獲取/設置標簽的位置數據
  * offset(): 相對頁面左上角的坐標
  * position(): 相對於父元素左上角的坐標
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  /*
  需求:
  1. 點擊 btn1
    列印 div1 相對於頁面左上角的位置
    列印 div2 相對於頁面左上角的位置
    列印 div1 相對於父元素左上角的位置
    列印 div2 相對於父元素左上角的位置
  2. 點擊 btn2
    設置 div2 相對於頁面的左上角的位置
   */
  $(function () {
    // 讀取offset和position
    $('#btn1').click(function () {
      var offset1 = $('.div1').offset()
      console.log(offset1.left, offset1.top) // 10 20
      var offset2 = $('.div2').offset()
      console.log(offset2.left, offset2.top) // 10 70

      var position1 = $('.div1').position()
      console.log(position1.left, position1.top) // 10 20
      var position2 = $('.div2').position()
      console.log(position2.left, position2.top) // 0 50
    })
    // 設置offset
    $('#btn2').click(function () {
      $('.div2').offset({
        left: 20,
        top: 40
      })
    })
  })
</script>
</body>
</html>

8.3 scrollTop、scrollLeft和回到頂部案例

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>13_元素滾動</title>
</head>
<body style="height: 2000px;">
<div style="border:1px solid black;width:100px;height:150px;overflow:auto">
  This is some text. This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text. This is some text.
  his is some text.
</div><br><br><br>
<button id="btn1">得到scrollTop</button>
<button id="btn2">設置scrollTop</button>
<!--
1. scrollTop():
  讀取/設置滾動條的Y坐標
2. $(document.body).scrollTop()+$(document.documentElement).scrollTop()
  讀取頁面滾動條的Y坐標(相容chrome和IE)
3. $('body,html').scrollTop(60);
  滾動到指定位置(相容chrome和IE)
-->
<script src="js/jquery-1.10.1.js"></script>
<script>
  $(function () {
    // 1. 得到div或頁面滾動條的坐標
    $('#btn1').click(function () {
      console.log($('div').scrollTop())
      console.log($('body').scrollTop() + $('html').scrollTop())
      console.log($(document.body).scrollTop() + $(document.documentElement).scrollTop())
    })
    // 2. 讓div或頁面的滾動條滾動到指定位置
    $('#btn2').click(function () {
      $('div').scrollTop(150)
      $('body, html').scrollTop(200)
    })
  })
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>03_回到頂部</title>
  <style>
    #to_top {
      width: 30px;
      height: 40px;
      font: 14px/20px arial;
      text-align: center;
      background: #06c;
      position: fixed;
      cursor: pointer;
      color: #fff;
      left: 1250px;
      top: 500px;
    }
  </style>
</head>
<body style="height: 2000px;">

<div id="to_top">返回頂部</div>

<script src="jquery-1.10.1.js"></script>
<script>
  $(function () {
    //回到頂部
    $('#to_top').click(function () {
      var $body = $(document.body)
      var $html = $(document.documentElement)

      //使用scrollTop(): 瞬間滾動到頂部
      // $('html,body').scrollTop(0)

      //使用scrollTop(): 平滑滾動到頂部
      var offset = $body.scrollTop() + $html.scrollTop()
      if(offset===0) {
        return
      }
      var totalTime = 300 // 總時間
      var intervalTime = 30 // 間隔時間
      var itemOffset = offset/(totalTime/intervalTime)
      var intervalId = setInterval(function () { // 使用迴圈定時器不斷滾動
        offset -= itemOffset
        if(offset<=0) {
          offset = 0
          clearInterval(intervalId) // 到達頂部,停止定時器
        }
        $('html,body').scrollTop(offset)
      }, intervalTime)

      //使用動畫: 平滑滾動到頂部
      // $('body,html').animate({scrollTop:0},300)
    })
  });
</script>
</body>
</html>

8.4 元素的尺寸

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>14_元素的尺寸</title>
</head>
<style>
  div {
    width: 100px;
    height: 150px;
    background: red;
    padding: 10px;
    border: 10px #fbd850 solid;
    margin: 10px;
  }
</style>
</head>
<body>
<div>div</div>
<!--
1. 內容尺寸
  height(): height
  width(): width
2. 內部尺寸
  innerHeight(): height+padding
  innerWidth(): width+padding
3. 外部尺寸
  outerHeight(false/true): height+padding+border  如果是true, 加上margin
  outerWidth(false/true): width+padding+border 如果是true, 加上margin
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script>
  $(function () {
    var $div = $('div')
    // 內容尺寸
    console.log($div.width(), $div.height()) // 100 150
    // 內部尺寸
    console.log($div.innerWidth(), $div.innerHeight()) // 120 170
    //外部尺寸
    console.log($div.outerWidth(), $div.outerHeight()) //   140 190
    console.log($div.outerWidth(true), $div.outerHeight(true)) // 160 210
  })
</script>
</body>
</html>

9. 篩選

9.1 過濾

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>15_篩選_過濾</title>
</head>
<body>
<ul>
  <li>AAAAA</li>
  <li title="hello" class="box2">BBBBB</li>
  <li class="box">CCCCC</li>
  <li title="hello">DDDDDD</li>
  <li title="two"><span>BBBBB</span></li>
</ul>
<li>eeeee</li>
<li>EEEEE</li><br>
<!--
在jQuery對象中的元素對象數組中過濾出一部分元素來
1. first()
2. last()
3. eq(index|-index)
4. filter(selector)
5. not(selector)
6. has(selector)
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function () {
    var $lis = $('ul>li');
//1. ul下li標簽第一個
    $lis.first().css('background', 'red')
//2. ul下li標簽的最後一個
    $lis.last().css('background', 'red')
//3. ul下li標簽的第二個
    $lis.eq(1).css('background', 'red')
//4. ul下li標簽中title屬性為hello的
    $lis.filter('[title=hello]').css('background', 'red')
//5. ul下li標簽中title屬性不為hello的
    $lis.not('[title=hello]').css('background', 'red') 
    $lis.filter('[title][title!=hello]').css('background', 'red')// 有title屬性並且屬性不為hello
//6. ul下li標簽中有span子標簽的
    $lis.has('span').css('background', 'red')
  })
</script>
</body>
</html>

9.2 查找---查找子元素、兄弟元素、父元素

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>16_篩選_查找孩子-父母-兄弟標簽</title>
</head>
<body>
<div id="div1" class="box" title="one">class為box的div1</div>
<div id="div2" class="box">class為box的div2</div>
<div id="div3">div3</div>
<span class="box">class為box的span</span>
<br/>
<div>
  <ul>
    <span>span文本1</span>
    <li>AAAAA</li>
    <li title="hello" class="box2">BBBBB</li>
    <li class="box" id='cc'>CCCCC</li>
    <li title="hello">DDDDDD</li>
    <li title="two"><span>span文本2</span></li>
    <span>span文本3</span>
  </ul>
  <span>span文本444</span><br>
  <li>eeeee</li>
  <li>EEEEE</li>
  <br>
</div>
<!--
在已經匹配出的元素集合中根據選擇器查找孩子/父母/兄弟標簽
1. children(): 子標簽中找
2. find() : 後代標簽中找
3. parent() : 父標簽
4. prevAll() : 前面所有的兄弟標簽
5. nextAll() : 後面所有的兄弟標簽
6. siblings() : 前後所有的兄弟標簽
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function () {
    var $ul = $('ul')
// 1. ul標簽的第2個span子標簽
    // $ul.children('span:eq(1)').css('background', 'red')
// 2. ul標簽的第2個span後代標簽
    // $ul.find('span:eq(1)').css('background', 'red')
// 3. ul標簽的父標簽
    // $ul.parent().css('background', 'red')
// 4. id為cc的li標簽的前面的所有li標簽
    // $ul.children('#cc').prevAll('li').css('background', 'red')
// 5. id為cc的li標簽的所有兄弟li標簽
    // $ul.children('#cc').siblings('li').css('background', 'red')
  })
</script>
</body>
</html>

10. 愛好選擇器

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>全選練習</title>
</head>
<body>
<form>
  你愛好的運動是？<input type="checkbox" id="checkedAllBox"/>全選/全不選
  <br/>
  <input type="checkbox" name="items" value="足球"/>足球
  <input type="checkbox" name="items" value="籃球"/>籃球
  <input type="checkbox" name="items" value="羽毛球"/>羽毛球
  <input type="checkbox" name="items" value="乒乓球"/>乒乓球
  <br/>
  <input type="button" id="checkedAllBtn" value="全　選"/>
  <input type="button" id="checkedNoBtn" value="全不選"/>
  <input type="button" id="checkedRevBtn" value="反　選"/>
  <input type="button" id="sendBtn" value="提　交"/>
</form>
<script src="jquery-1.10.1.js"></script>
<script type="text/javascript">
  $(function () {
    var $Items = $(':checkbox[name=items]')
    var $checkedAllBox = $('#checkedAllBox')

    // 1. 點擊'全選': 選中所有愛好
    $('#checkedAllBtn').click(function () {
      $Items.prop('checked', true)
      $checkedAllBox.prop('checked', true)
    })

    // 2. 點擊'全不選': 所有愛好都不勾選
    $('#checkedNoBtn').click(function () {
      $Items.prop('checked', false)
      $checkedAllBox.prop('checked', false)
    })

    // 3. 點擊'反選': 改變所有愛好的勾選狀態
    $('#checkedRevBtn').click(function () {
      $Items.each(function () {
        this.checked = !this.checked
      })
      $checkedAllBox.prop('checked', $Items.filter(':not(:checked)').size()===0)
    })

    // 4. 點擊'全選/全不選': 選中所有愛好, 或者全不選中
    $checkedAllBox.click(function () {
      $Items.prop('checked', this.checked)
    })

    // 5. 點擊某個愛好時, 必要時更新'全選/全不選'的選中狀態
    $Items.click(function () {
      $checkedAllBox.prop('checked', $Items.filter(':not(:checked)').size()===0)
    })

    // 6. 點擊'提交': 提示所有勾選的愛好
    $('#sendBtn').click(function () {
      $Items.filter(':checked').each(function () {
        alert(this.value)
      })
    })
  })
</script>
</body>
</html>

11. 文檔處理---增刪改

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>17_文檔_增刪改</title>
</head>
<style type="text/css">
  * {
    margin: 0px;
  }
  .div1 {
    position: absolute;
    width: 200px;
    height: 200px;
    top: 20px;
    left: 10px;
    background: blue;
  }
  .div2 {
    position: absolute;
    width: 100px;
    height: 100px;
    /*top: 50px;*/
    background: red;
  }
  .div3 {
    position: absolute;
    top: 250px;
  }
</style>
<body>
<ul id="ul1">
  <li>AAAAA</li>
  <li title="hello">BBBBB</li>
  <li class="box">CCCCC</li>
  <li title="hello">DDDDDD</li>
  <li title="two">EEEEE</li>
  <li>FFFFF</li>
</ul><br><br>
<ul id="ul2">
  <li>aaa</li>
  <li title="hello">bbb</li>
  <li class="box">ccc</li>
  <li title="hello">ddd</li>
  <li title="two">eee</li>
</ul>

<!--
1. 添加/替換元素
  * append(content)
    向當前匹配的所有元素內部的最後插入指定內容
  * prepend(content)
    向當前匹配的所有元素內部的最前面插入指定內容
  * before(content)
    將指定內容插入到當前所有匹配元素的前面
  * after(content)
    將指定內容插入到當前所有匹配元素的後面替換節點
  * replaceWith(content)
    用指定內容替換所有匹配的標簽刪除節點
2. 刪除元素
  * empty()
    刪除所有匹配元素的子元素
  * remove()
    刪除所有匹配的元素
-->
<script src="js/jquery-1.10.1.js" type="text/javascript"></script>
<script type="text/javascript">
  $(function () {
//1. 向id為ul1的ul下添加一個span(最後)
    $('#ul1').append('<span>append()添加的span</span>')
    $('<span>appendTo()添加的span</span>').appendTo('#ul1')
//2. 向id為ul1的ul下添加一個span(最前)
    $('#ul1').prepend('<span>prepend()添加的span</span>')
    $('<span>prependTo()添加的span</span>').prependTo('#ul1')

//3. 在id為ul1的ul下的li(title為hello)的前面添加span
    $('#ul1>li[title=hello]').before('<span>before()添加的span</span>')

//4. 在id為ul1的ul下的li(title為hello)的後面添加span
    $('#ul1>li[title=hello]').after('<span>after()添加的span</span>')
//5. 將在id為ul2的ul下的li(title為hello)全部替換為p
    $('#ul1>li[title=hello]').replaceWith('<p>replaceWith()替換的p</p>')
//6. 移除id為ul2的ul下的所有li
    $('#ul2').empty()
  });
</script>
</body>
</html>

12. 添加或刪除記錄的案例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>添加刪除記錄練習</title>
  <link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<table id="employeeTable">
  <tr>
    <th>Name</th>
    <th>Email</th>
    <th>Salary</th>
    <th>&nbsp;</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td>[email protected]</td>
    <td>5000</td>
    <td><a href="deleteEmp?id=001">Delete</a></td>
  </tr>
  <tr>
    <td>Jerry</td>
    <td>[email protected]</td>
    <td>8000</td>
    <td><a href="deleteEmp?id=002">Delete</a></td>
  </tr>
  <tr>
    <td>Bob</td>
    <td>[email protected]</td>
    <td>10000</td>
    <td><a href="deleteEmp?id=003">Delete</a></td>
  </tr>
</table>
<div id="formDiv">
  <h4>添加新員工</h4>
  <table>
    <tr>
      <td class="word">name:</td>
      <td class="inp">
        <input type="text" name="empName" id="empName"/>
      </td>
    </tr>
    <tr>
      <td class="word">email:</td>
      <td class="inp">
        <input type="text" name="email" id="email"/>
      </td>
    </tr>
    <tr>
      <td class="word">salary:</td>
      <td class="inp">
        <input type="text" name="salary" id="salary"/>
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <button id="addEmpButton" value="abc">
          Submit
        </button>
      </td>
    </tr>
  </table>
</div>
<script src="jquery-1.10.1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
  /*
   功能說明:
   1. 點擊'Submit', 根據輸入的信息在表單中生成一行員工信息
   2. 點擊Delete鏈接, 提示刪除當前行信息, 點擊確定後刪除信息
   技術要點:
   1. DOM查詢
   2. 綁定事件監聽
   3. DOM增刪改
   4. 取消事件的預設行為
   */
  $(function () {
    $('#addEmpButton').click(function () {
      var $empName = $('#empName')
      var $email = $('#email')
      var $salary = $('#salary')

      var empName = $empName.val()
      var email = $empName.val()
      var salary = $empName.val()
      var id = Date.now()
      $('<tr></tr>')
        .append('<td>'+empName+'</td>')
        .append('<td>'+email+'</td>')
        .append('<td>'+salary+'</td>')
        .append('<td><a href="deleteEmp?id="'+id+'>Delete</a></td>')
        .appendTo('#employeeTable')
        .find('a')
        .click(clickA)

      $empName.val('')
      $email.val('')
      $salary.val('')

    })

    $('a').click(clickA)

    function clickA (event) {
      event.preventDefault()
      var $tr = $(this).parent().parent()
      var name = $tr.children('td:first').html()
      if(confirm('確定刪除'+name+'嗎?')) {
        $tr.remove()
      }
    }
  })
</script>
</body>
</html>