JQuery屬性操作
元素固定屬性值prop()
所謂的元素的固定屬性就是元素自帶的屬性，如a鏈接中的href屬性
獲取屬性語法
prop("屬性")
設定屬性語法
prop("屬性","屬性值")
元素自定義屬性值attr()
用戶自己給元素設定的屬性，稱為自定義屬性
獲取屬性語法
attr("屬性") //類似原生getAttribute()
設定屬性語法
attr("屬性","屬性值") //類似原生setAttribute()
注意:該方法也可以直接獲取自定義屬性
資料快取data()
data（）方法可以指定元素上設定屬性，但不會修改DOM結構，一旦頁面被重繪，之前存放的資料都會被移除
設定資料
data("name","value")
獲取資料
data("name")
<!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>jQuery屬性操作</title>
</head>
<script src="./jquery-3.6.0.js"></script>
<body>
<a href="http://www.baidu.com">百度</a>
<input type="checkbox" checkbox />
<div index='1' data-index="2">container</div>
<span>wrap</span>
</body>
<script>
$(function() {
//獲取元素固定的屬性值
console.log($('a').prop('href'));
// 設定元素固定的屬性值
$('a').prop('title', 'Hello Word');
//獲取自定義屬性值
console.log($('div').attr('index'));
//設定自定義屬性值
$('div').attr('index', 4);
//資料快取
$('span').data('name', '堯子陌');
console.log($('span').data('name'));
// 當表單狀態發生變化時 獲取元素的屬性的狀態
$('input').change(function() {
console.log($(this).prop('checked'));
})
})
</script>
</html>
JQuery內容文本值
普通元素內容html()
html() //獲取元素的內容
html("內容") //設定元素的內容
普通元素的文本內容
text() //獲取元素的文本內容
text("內容") //設定元素的文本內容
表單的值
val() //獲取表單的值
val("內容") //設定表單的值
<!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>JQuery表單文本值</title>
</head>
<script src="./jquery-3.6.0.js"></script>
<body>
<div>Hello</div>
<span>鴻星爾克</span>
<br />
<input type="text" value="請輸入內容">
</body>
<script>
// 元素的內容
console.log($('div').html());
$('div').html('Hello Word');
//元素的文本內容
console.log($('span').text());
$('span').text('China')
// 表單的值
console.log($('input').val());
$('input').val('Hello word')
</script>
</html>
JQuery之回傳指定的祖先元素
在JQuery中，可以通過parents()的方法來獲取指定的祖先元素，引數可直接寫祖先元素的名字
<!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>JQuery之回傳指定的祖先元素</title>
</head>
<script src="./jquery-3.6.0.js"></script>
<body>
<div class="grandfather">
<div class="father">
<div class="son">Son</div>
</div>
</div>
</body>
<script>
console.log($('.son').parents('.grandfather'));
</script>
</html>
JQuery之遍歷元素
JQuery中，隱式迭代只是對相同的元素做了同樣的操作
如果想要給同一類元素做不同的操作，則需要用到遍歷
JQuery遍歷元素之常規遍歷
<!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>JQuery之常規遍歷</title>
</head>
<script src="./jquery-3.6.0.js"></script>
<body>
<div>22</div>
<div>44</div>
<div>66</div>
</body>
<script>
$(function() {
var arr = ['green', 'yellow', 'red'];
var sum = 0;
$('div').each(function(i, ele) {
console.log(i);
console.log(ele);
$(ele).css('color', arr[i]);
sum += parseInt($(ele).text())
});
console.log(sum);
})
</script>
</html>
JQuery遍歷元素之each遍歷
<!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>JQuery之$.each()遍歷</title>
</head>
<script src="./jquery-3.6.0.js"></script>
<body>
<div>22</div>
<div>44</div>
<div>66</div>
</body>
<script>
$(function() {
let arr = ['grren', 'ywllow', 'purple']
$.each($("div"), function(i, ele) {
console.log(i);
console.log(ele);
});
$.each(arr, function(i, ele) {
console.log(i);
console.log(ele);
});
$.each({
name: "堯子陌",
age: 18
}, function(index, ele) {
console.log(index);
console.log(ele);
})
})
</script>
</html>
JQuery之購物車
? 增減商品數量
? (1).核心思路：首先宣告一個變數，當我們點擊+號（increment），就讓這個值++，然后賦值給文本框，
? (2).只能增加本商品的數量， 就是當前+號的兄弟文本框（itxt）的值
? (3).修改表單的值是val() 方法
? (4).變數初始值應該是這個文本框的值，在這個值的基礎上++，要獲取表單的值
? (5).減號（decrement）思路同理，但是如果文本框的值是1，就不能再減了，
? 修改商品小計
? (1).核心思路：每次點擊+號或者-號，根據文本框的值 乘以 當前商品的價格 就是 商品的小計
? (2). 只能增加本商品的小計， 就是當前商品的小計模塊（p-sum）
? (3).修改普通元素的內容是text() 方法
? (4). 當前商品的價格，要把￥符號去掉再相乘 截取字串 substr(1)
? (5).parents(‘選擇器’) 可以回傳指定祖先元素
? (6).如果想要保留2位小數 通過 toFixed(2)方法
? (7).用戶也可以直接修改表單里面的值，同樣要計算小計， 用表單change事件
? (8).用最新的表單內的值 乘以 單價即可 但是還是當前商品小計
? 計算總計和總額
? (1).把所有文本框中的值相加就是總額數量，總計同理，
? (2).文本框里面的值不同，如果想要相加需要用 each() 遍歷，宣告一個變數做計數器，累加即可，
html檔案
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的購物車-品優購</title>
<meta name="description" content="品優購JD.COM-專業的綜合網上購物商城,銷售家電、數碼通訊、電腦、家居百貨、服裝服飾、母嬰、圖書、食品等數萬個品牌優質商品.便捷、誠信的服務，為您提供愉悅的網上購物體驗!" />
<meta name="Keywords" content="網上購物,網上商城,手機,筆記本,電腦,MP3,CD,VCD,DV,相機,數碼,配件,手表,存盤卡,品優購" />
<!-- 引入facicon.ico網頁圖示 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- 引入css 初始化的css 檔案 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入公共樣式的css 檔案 -->
<link rel="stylesheet" href="css/common.css">
<!-- 引入car css -->
<link rel="stylesheet" href="css/car.css">
<!-- 先引入jquery -->
<script src="js/jquery.min.js"></script>
<!-- 在引入我們自己的js檔案 -->
<script src="js/car.js"></script>
</head>
<body>
</div>
<div class="c-container">
<div class="w">
<div class="cart-filter-bar">
<em>全部商品</em>
</div>
<!-- 購物車主要核心區域 -->
<div class="cart-warp">
<!-- 頭部全選模塊 -->
<div class="cart-thead">
<div class="t-checkbox">
<input type="checkbox" name="" id="" class="checkall" checked> 全選
</div>
<div class="t-goods">商品</div>
<div class="t-price">單價</div>
<div class="t-num">數量</div>
<div class="t-sum">小計</div>
<div class="t-action">操作</div>
</div>
<!-- 商品詳細模塊 -->
<div class="cart-item-list">
<div class="cart-item check-cart-item">
<div class="p-checkbox">
<input type="checkbox" checked class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p1.jpg" alt="">
</div>
<div class="p-msg">【5本26.8元】經典兒童文學彩圖青少版八十天環游地球中學生語文教學大綱</div>
</div>
<div class="p-price">￥12.60</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥12.60</div>
<div class="p-action"><a href="javascript:;">洗掉</a></div>
</div>
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox" checked>
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p2.jpg" alt="">
</div>
<div class="p-msg">【2000張貼紙】貼紙書 3-6歲 貼畫兒童 貼畫書全套12冊 貼畫 貼紙兒童 汽</div>
</div>
<div class="p-price">￥24.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥24.80</div>
<div class="p-action"><a href="javascript:;">洗掉</a></div>
</div>
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox" checked>
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p3.jpg" alt="">
</div>
<div class="p-msg">唐詩三百首+成語故事全2冊 一年級課外書 精裝注音兒童版 小學生二三年級課外閱讀書籍</div>
</div>
<div class="p-price">￥29.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">￥29.80</div>
<div class="p-action"><a href="javascript:;">洗掉</a></div>
</div>
</div>
<!-- 結算模塊 -->
<div class="cart-floatbar">
<div class="select-all">
<input type="checkbox" name="" id="" class="checkall" checked>全選
</div>
<div class="operation">
<a href="javascript:;" class="remove-batch"> 洗掉選中的商品</a>
<a href="javascript:;" class="clear-all">清理購物車</a>
</div>
<div class="toolbar-right">
<div class="amount-sum ">已經選<em>0</em>件商品</div>
<div class="price-sum">總價： <em>￥0</em></div>
<div class="btn-area">去結算</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
js檔案
$(function() {
// 1.全選復選框狀態發生改變時 把全選復選框的狀態賦值給下面的小復選框及全選復選框
$('.checkall').change(function() {
$(".j-checkbox, .checkall").prop('checked', $(this).prop('checked'));
if ($(this).prop('checked')) {
//如果全選按鈕被選上 所有的商品添加check-cart-item，反之則不添加check-cart-item
$(".cart-item").addClass("check-cart-item");
} else {
$(".cart-item").removeClass("check-cart-item");
}
})
//2.如果小復選框選中的狀態等于3 則全選按鈕的狀態被選上，否則則不選
$('.j-checkbox').change(function() {
if ($('.j-checkbox:checked').length === $('.j-checkbox').length) {
$('.checkall').prop('checked', true)
} else {
$('.checkall').prop('checked', false)
};
// 如果小復選框被選中，則添加check-cart-item類，反之則不添加check-cart-item
if ($(this).prop('checked')) {
$(this).parents('.cart-item').addClass('check-cart-item')
} else {
$(this).parents('.cart-item').removeClass('check-cart-item')
}
})
//3.增減商品模塊 宣告一個變數 當我們點擊+號(increment) 就讓值++ 點擊-- 就讓值-- 然后賦值給文本框
$('.increment').click(function() {
//得到當前兄弟文本框的值
var n = $(this).siblings('.itxt').val();
n++
$(this).siblings('.itxt').val(n);
//4.計算商品小計模塊 根據文本框的值乘以當前商品的價格 便是商品的小計
var p = $(this).parents('.p-num').siblings('.p-price').html();
p = p.substr(1);
var price = (p * n).toFixed(2);
$(this).parents('.p-num').siblings('.p-sum').html("￥" + price);
getSum();
})
$('.decrement').click(function() {
//得到當前兄弟文本框的值
var n = $(this).siblings('.itxt').val();
if (n == 1) {
return false
}
n--
$(this).siblings('.itxt').val(n);
//4.計算商品小計模塊 根據文本框的值乘以當前商品的價格 便是商品的小計
var p = $(this).parents('.p-num').siblings('.p-price').html();
p = p.substr(1);
var price = (p * n).toFixed(2);
$(this).parents('.p-num').siblings('.p-sum').html("￥" + price);
getSum();
})
//5.用戶修改文本框的值 計算小計
$('.itxt').change(function() {
var n = $(this).val();
var p = $(this).parents('.p-num').siblings('.p-price').html();
p = p.substr(1);
var price = (p * n).toFixed(2);
$(this).parents('.p-num').siblings('.p-sum').html("￥" + price);
getSum();
})
//6.計算總計與總額模塊
getSum()
function getSum() {
var count = 0; //計算總件數
var money = 0; //計算總價錢
$(".itxt").each(function(i, ele) {
count += parseInt($(ele).val());
});
$(".amount-sum em").text(count);
$('.p-sum').each(function(i, ele) {
money += parseFloat($(ele).text().substr(1))
});
$('.price-sum em').text("￥" + money.toFixed(2))
}
//7.洗掉商品模塊
// (1)商品后面的洗掉按鈕
$(".p-action a").click(function() {
$(this).parents('.cart-item').remove();
getSum()
})
//(2)洗掉選中的商品
$(".remove-batch").click(function() {
//洗掉的小復選框選中的商品
$(".j-checkbox:checked").parents('.cart-item').remove();
getSum()
})
//(3)清空購物車 洗掉全部商品
$('.clear-all').click(function() {
$('.cart-item').remove();
getSum()
})
})
JQuery之創建 洗掉 添加元素
<!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>JQuery之創建 添加 洗掉元素</title>
</head>
<script src="./jquery-3.6.0.js"></script>
<body>
<ul>
<li>ToDoList2</li>
</ul>
<div class="Two">Two</div>
</body>
<script>
$(function() {
// 創建元素
var li1 = $('<li>ToDoList1</li>');
var li3 = $('<li>ToDoList3</li>');
// 內部添加并且放在內容的最前面
$('ul').prepend(li1)
// 內部添加并且放在內容的最后面
$('ul').append(li3)
// 外部添加并且放在內容的最前面
var div_before = $('<div>One</div>')
$('.Two').before(div_before)
// 外部添加并且放在內容的最前面
var div_after = $('<div>Three</div>')
$('.Two').after(div_after)
// 清空選中元素的內容 但不清除Dom
$('ul').remove()
// 清空選中元素的子節點 清除Dom
$('ul').empty()
// 清空選中元素的子節點 清除Dom
$('ul').html("")
})
</script>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/291323.html
標籤：其他
上一篇：JavaScript實作二分查找（搜索）演算法（非遞回實作）
下一篇：復制付費文案的解決方法