---
tags: jQuery,第三章
---
# jQuery第三章
## 屬性操作
```javascript=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="jQuery.min.js"></script>
</head>
<body>
<a href="https://www.google.com/" title="都挺好">看我</a>
<input type="checkbox" checked />
<div index="1" data-index="2">我是div</div>
<span>123</span>
<script>
// element.prop('屬姓名')獲取元素固有屬性值
console.log($('a').prop('href'));
$('a').prop('title', 'google');
$('input').change(function () {
console.log($(this).prop('checked'));
});
console.log($('div').prop('index'));
// element.attr('屬姓名')獲取自定義屬性值
console.log($('div').attr('index'));
$('div').attr('index', 4);
console.log($('div').attr('data-index'));
// 數據緩存data()這裡面的數據是存在內存，查找元素看不到
$('span').data('uname', 'andy');
console.log($('span').data('uname'));
// 注意
console.log($('div').data('index'));
// 語法不用加data-，但鎖定的是H5語法data-index="2"
// 返回值為數字型
</script>
</body>
</html>
```
## 購物車全選
```javascript=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="jQuery.min.js"></script>
<style>
.center {
width: 636px;
height: 1000px;
margin: 200px auto;
}
div {
width: 100px;
height: 100px;
}
.allDiv {
background-color: pink;
display: inline-block;
}
.itemDiv {
background-color: skyblue;
display: inline-block;
}
</style>
<script src="jQuery.min.js"></script>
</head>
<body>
<div class="center">
<input type="checkbox" class="all" />
<div class="allDiv">我是全選框</div>
<input type="checkbox" class="item" />
<div class="itemDiv">我是商品1</div>
<input type="checkbox" class="item" />
<div class="itemDiv">我是商品2</div>
<input type="checkbox" class="item" />
<div class="itemDiv">我是商品3</div>
<input type="checkbox" class="all" />
<div class="allDiv">我是全選框</div>
</div>
<script>
// 全選框
$('.all').change(function () {
console.log($(this).prop('checked'));
$('.item,.all').prop('checked', $(this).prop('checked'));
});
// 小複選框
$('.item').change(function () {
if ($('.item:checked').length === $('.item').length) {
$('.all').prop('checked', true);
} else {
$('.all').prop('checked', false);
}
});
</script>
</body>
</html>
```
## 內容文本值
```javascript=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="jQuery.min.js"></script>
</head>
<body>
<div>
<span>我是內容</span>
</div>
<input type="text" value="請輸入內容" />
<script>
// 1.html()
console.log($('div').html());
// $('div').html('123');
// 2.text()
console.log($('div').text());
// $('div').text('123');
// 3.val()
console.log($('input').val());
$('input').val('123');
</script>
</body>
</html>
```
## 遍歷對象
```javascript=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="jQuery.min.js"></script>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
var sum = 0;
var arr = ['red', 'green', 'blue'];
$('div').each(function (i, DOMEle) {
console.log(i);
console.log(DOMEle);
$(DOMEle).css('color', arr[i]);
sum += parseInt($(DOMEle).text());
console.log(sum);
});
</script>
</body>
</html>
```
```javascript=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="jQuery.min.js"></script>
</head>
<body>
<script>
var arr = ['red', 'green', 'blue'];
$.each(arr, function (i, ele) {
console.log(i); // 輸出 0 1 2
console.log(ele); // 輸出 red green blue
});
$.each({ name: 'andy', age: 18 }, function (i, ele) {
console.log(i); // 輸出 name age 屬性名
console.log(ele); // 輸出 andy 18 屬性值
});
</script>
</body>
</html>
```
## 創建、添加、刪除
```javascript=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="jQuery.min.js"></script>
</head>
<body>
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
// 創建元素
var li = $('<li>我是後來創建的li</li>');
var li2 = $('<li>我是li2</li>');
// 添加元素 方法1
$('ul').append(li); // 內部添加放到內容最後面
$('ul').prepend(li2); // 內部添加放到內容最前面
// 添加元素 方法2
var div = $('<div>我是後來創建的div</div>');
var div2 = $('<div>我是div2</div>');
$('.test').after(div); // 外部添加放到內容最後面
$('.test').before(div2); // 外部添加放到內容最前面
// 刪除元素
// $('ul').remove(); // 刪除元素 自殺
// $('ul').empty(); // 刪除元素的子節點
// $('ul').html(''); // 刪除元素的子節點
</script>
</body>
</html>
```
## 購物車案例
```javascript=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
.item-num {
width: 190px;
height: 20px;
background-color: pink;
margin: 100px auto;
}
.prise {
float: left;
}
button {
float: left;
width: 20px;
height: 20px;
background-color: white;
border: 1px solid gray;
}
input {
float: left;
width: 50px;
height: 16px;
text-align: center;
}
.item-sum,
.prise-sum {
width: 190px;
height: 20px;
margin: 0 auto;
text-align: center;
}
</style>
<script src="jQuery.min.js"></script>
</head>
<body>
<div class="item-num">
<div class="prise">$12.86</div>
<button class="minus">-</button>
<input type="text" class="num" value="1" />
<button class="plus">+</button>
<div><b>$12.86</b></div>
</div>
<div class="item-num">
<div class="prise">$25.05</div>
<button class="minus">-</button>
<input type="text" class="num" value="1" readonly="readonly" />
<button class="plus">+</button>
<div><b>$25.05</b></div>
</div>
<div class="item-num">
<div class="prise">$32.47</div>
<button class="minus">-</button>
<input type="text" class="num" value="1" readonly="readonly" />
<button class="plus">+</button>
<div><b>$32.47</b></div>
</div>
<div class="item-sum">你已選擇<em>1</em>件商品</div>
<div class="prise-sum">總計<em>0</em>元</div>
</body>
<script>
// +號
$('.plus').click(function () {
var n = $(this).siblings('.num').val();
console.log(n);
n++;
$(this).siblings('.num').val(n);
// 小計獲取值
var p = $(this).siblings('.prise').html();
console.log(p);
p = p.substr(1);
console.log(p);
var result = (p * n).toFixed(2);
// 小計運算
$(this)
.siblings('div')
.children('b')
.html('$' + result);
getSum();
});
// -號
$('.minus').click(function () {
var n = $(this).siblings('.num').val();
console.log(n);
if (n <= 1) {
return false;
}
n--;
$(this).siblings('.num').val(n);
// 小計獲取值
var p = $(this).siblings('.prise').html();
console.log(p);
p = p.substr(1);
console.log(p);
// 小計運算
$(this)
.siblings('div')
.children('b')
.html('$' + (p * n).toFixed(2));
getSum();
});
// 修改文本框
$('.num').change(function () {
var n = $(this).val();
var p = $(this).siblings('.prise').html();
p = p.substr(1);
$(this)
.siblings('div')
.children('b')
.html('$' + (p * n).toFixed(2));
});
// 計算總計總額
getSum();
function getSum() {
var count = 0;
var money = 0;
$('.num').each(function (i, ele) {
count += parseInt($(ele).val());
});
$('.item-sum em').text(count);
$('div>b').each(function (i, ele) {
money += parseFloat($(ele).text().substr(1));
});
$('.prise-sum em').text('$' + money.toFixed(2));
}
</script>
</html>
```
```javascript=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.box {
height: 200px;
width: 1000px;
margin: 10px auto;
}
.checkbox {
float: left;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
}
.yellow {
float: left;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: yellow;
}
.green {
float: left;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: green;
}
.red {
float: left;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
background-color: red;
}
.delete {
float: left;
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
}
.mark,
.clear {
width: 150px;
height: 20px;
margin: 0 auto;
text-align: center;
}
.addBackground {
background-color: orange;
}
</style>
<script src="jQuery.min.js"></script>
</head>
<body>
<div class="box">
<div class="checkbox"><input type="checkbox" class="yes" /></div>
<div class="yellow">黃</div>
<div class="green">綠</div>
<div class="red">紅</div>
<div class="delete"><a href="javascript:;">刪除</a></div>
</div>
<div class="box">
<div class="checkbox"><input type="checkbox" class="yes" /></div>
<div class="yellow">黃黃</div>
<div class="green">綠綠</div>
<div class="red">紅紅</div>
<div class="delete"><a href="javascript:;">刪除</a></div>
</div>
<div class="box">
<div class="checkbox"><input type="checkbox" class="yes" /></div>
<div class="yellow">黃黃黃</div>
<div class="green">綠綠綠</div>
<div class="red">紅紅紅</div>
<div class="delete"><a href="javascript:;">刪除</a></div>
</div>
<div class="mark"><a href="javascript:;">刪除選中的商品</a></div>
<div class="clear"><a href="javascript:;">清空購物車</a></div>
<script>
// 商品後面刪除按鈕
$('.delete a').click(function () {
$(this).parents('.box').remove();
});
// 刪除選中的商品
$('.mark a').click(function () {
$('.yes:checked').parents('.box').remove();
});
// 清空購物車
$('.clear a').click(function () {
$('.box').remove();
});
// 添加背景色
$('.yes').change(function () {
if ($(this).prop('checked')) {
$(this).parents('.box').addClass('addBackground');
} else {
$(this).parents('.box').removeClass('addBackground');
}
});
</script>
</body>
</html>
```
## 尺寸方法
```javascript=
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 20px solid red;
margin: 20px;
}
</style>
<script src="jQuery.min.js"></script>
</head>
<body>
<div></div>
<script>
console.log($('div').width());
// $('div').width(300);
console.log($('div').innerWidth());
console.log($('div').outerWidth());
console.log($('div').outerWidth(true));
</script>
</body>
</html>
```
Sign in with Wallet
Connect another wallet