jQuery知識梳理20190817
jQuery知識梳理20190817
[TOC]javascript
1. jQuery的特徵
- 強大選擇器: 方便快速查找DOM元素
- 隱式遍歷(迭代): 一次操做多個元素
- 讀寫合一: 讀數據/寫數據用的是一個函數
- 鏈式調用: 能夠經過.不斷調用jQuery對象的方法
- 事件處理
- DOM操做(CUD)
- 樣式操做
- 動畫
- 瀏覽器兼容
2. jQuery的兩把利器
2.1 jQuery核心函數
簡稱：jQuery函數($/jQuery)css
jQuery庫向外直接暴露的就是$ / jQueryhtml
當引入jQuery庫後，直接使用$便可java
- 當函數用： $(xxx)
- 當對象用：$.xxx()
2.2 jQuery核心對象
簡稱：jQuery對象jquery
獲得jQuery對象：執行jQuery函數返回的就是jQuery對象chrome
使用jQuery對象：$obj.xxx()json
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對象返回。app
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> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="deleteEmp?id=001">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</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>
相關文章
- 1. JQuery基礎知識梳理（一）
- 2. jQuery知識第一次梳理
- 3. 知識梳理
- 4. Webpack 知識梳理
- 5. Mysql知識梳理
- 6. Promise知識梳理
- 7. HTTPS知識梳理
- 8. Redis知識梳理
- 9. SpringCloud知識梳理
- 10. github知識梳理
- 更多相關文章...
- • 與傳輸層有關的基本知識 - TCP/IP教程
- • Spring通知類型及使用ProxyFactoryBean創建AOP代理 - Spring教程
- • Docker 清理命令
- • ☆技術問答集錦（13）Java Instrument原理
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. JQuery基礎知識梳理（一）
- 2. jQuery知識第一次梳理
- 3. 知識梳理
- 4. Webpack 知識梳理
- 5. Mysql知識梳理
- 6. Promise知識梳理
- 7. HTTPS知識梳理
- 8. Redis知識梳理
- 9. SpringCloud知識梳理
- 10. github知識梳理