jQUery學習筆記
- 一、jQuery屬性操作
- 1、prop()
- 2、attr()
- 3、資料快取data()
- 二、購物車案例模塊--全選分析
- 三、jQuery內容文本值
- 四、jQuery元素操作
- 五、jQuery尺寸、位置操作
- 1、jQuery尺寸
- 2、jQuery位置
一、jQuery屬性操作
1、prop()
2、attr()
3、資料快取data()
<script src="jquery.min.js"></script>
<a href="http://www.baidu.com" title="都挺好">都挺好</a>
<input type="checkbox" name="" id="" checked>
<div index="1" data-index="2">我是div</div>
<span>123</span>
<script>
$(function() {
//1. element.prop("屬性名") 獲取元素固有的屬性值
console.log($("a").prop("href"));
$("a").prop("title", "我們都挺好");
$("input").change(function() {
console.log($(this).prop("checked"));
});
// console.log($("div").prop("index"));
// 2. 元素的自定義屬性 我們通過 attr()
console.log($("div").attr("index"));
$("div").attr("index", 4);
console.log($("div").attr("data-index"));
// 3. 資料快取 data() 這個里面的資料是存放在元素的記憶體里面
$("span").data("uname", "andy");
console.log($("span").data("uname"));
// 這個方法獲取data-index h5自定義屬性 第一個 不用寫data- 而且回傳的是數字型
console.log($("div").data("index"));
})
</script>
二、購物車案例模塊–全選分析
三、jQuery內容文本值
<script src="jquery.min.js"></script>
<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>
//回傳指定祖先元素
<script src="jquery.min.js"></script>
<div class="one">
<div class="two">
<div class="three">
<div class="four">我不容易</div>
</div>
</div>
</div>
<script>
console.log($(".four").parent().parent().parent());
console.log($(".four").parents());
console.log($(".four").parents(".one"));
</script>
四、jQuery元素操作
<script src="jquery.min.js"></script>
<div>1</div>
<div>2</div>
<div>3</div>
<script>
$(function() {
// $("div").css("color", "red");
// 如果針對于同一類元素做不同操作，需要用到遍歷元素（類似for，但是比for強大）
var sum = 0;
// 1. each() 方法遍歷元素
var arr = ["red", "green", "blue"];
$("div").each(function(i, domEle) {
// 回呼函式第一個引數一定是索引號 可以自己指定索引號號名稱
// console.log(index);
// console.log(i);
// 回呼函式第二個引數一定是 dom元素物件 也是自己命名
// console.log(domEle);
// domEle.css("color"); dom物件沒有css方法
$(domEle).css("color", arr[i]);
sum += parseInt($(domEle).text());
})
console.log(sum);
// 2. $.each() 方法遍歷元素 主要用于遍歷資料，處理資料
// $.each($("div"), function(i, ele) {
// console.log(i);
// console.log(ele);
// });
// $.each(arr, function(i, ele) {
// console.log(i);
// console.log(ele);
// })
$.each({
name: "andy",
age: 18
}, function(i, ele) {
console.log(i); // 輸出的是 name age 屬性名
console.log(ele); // 輸出的是 andy 18 屬性值
})
})
</script>
<ul>
<li>原先的li</li>
</ul>
<div class="test">我是原先的div</div>
<script>
$(function() {
// 1. 創建元素
var li = $("<li>我是后來創建的li</li>");
// 2. 添加元素
// (1) 內部添加
// $("ul").append(li); 內部添加并且放到內容的最后面
$("ul").prepend(li); // 內部添加并且放到內容的最前面
// (2) 外部添加
var div = $("<div>我是后媽生的</div>");
// $(".test").after(div);
$(".test").before(div);
// 3. 洗掉元素
// $("ul").remove(); 可以洗掉匹配的元素 自殺
// $("ul").empty(); // 可以洗掉匹配的元素里面的子節點 孩子
$("ul").html(""); // 可以洗掉匹配的元素里面的子節點 孩子
})
</script>
$(function() {
// 1. 全選 全不選功能模塊
// 就是把全選按鈕（checkall）的狀態賦值給 三個小的按鈕（j-checkbox）就可以了
// 事件可以使用change
$(".checkall").change(function() {
// console.log($(this).prop("checked"));
$(".j-checkbox, .checkall").prop("checked", $(this).prop("checked"));
if ($(this).prop("checked")) {
// 讓所有的商品添加 check-cart-item 類名
$(".cart-item").addClass("check-cart-item");
} else {
// check-cart-item 移除
$(".cart-item").removeClass("check-cart-item");
}
});
// 2. 如果小復選框被選中的個數等于3 就應該把全選按鈕選上，否則全選按鈕不選，
$(".j-checkbox").change(function() {
// if(被選中的小的復選框的個數 === 3) {
// 就要選中全選按鈕
// } else {
// 不要選中全選按鈕
// }
// console.log($(".j-checkbox:checked").length);
// $(".j-checkbox").length 這個是所有的小復選框的個數
if ($(".j-checkbox:checked").length === $(".j-checkbox").length) {
$(".checkall").prop("checked", true);
} else {
$(".checkall").prop("checked", false);
}
if ($(this).prop("checked")) {
// 讓當前的商品添加 check-cart-item 類名
$(this).parents(".cart-item").addClass("check-cart-item");
} else {
// check-cart-item 移除
$(this).parents(".cart-item").removeClass("check-cart-item");
}
});
// 3. 增減商品數量模塊 首先宣告一個變數，當我們點擊+號（increment），就讓這個值++，然后賦值給文本框，
$(".increment").click(function() {
// 得到當前兄弟文本框的值
var n = $(this).siblings(".itxt").val();
// console.log(n);
n++;
$(this).siblings(".itxt").val(n);
// 3. 計算小計模塊 根據文本框的值 乘以 當前商品的價格 就是 商品的小計
// 當前商品的價格 p
var p = $(this).parents(".p-num").siblings(".p-price").html();
// console.log(p);
p = p.substr(1);
console.log(p);
var price = (p * n).toFixed(2);
// 小計模塊
// toFixed(2) 可以讓我們保留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;
}
// console.log(n);
n--;
$(this).siblings(".itxt").val(n);
// var p = $(this).parent().parent().siblings(".p-price").html();
// parents(".p-num") 回傳指定的祖先元素
var p = $(this).parents(".p-num").siblings(".p-price").html();
// console.log(p);
p = p.substr(1);
console.log(p);
// 小計模塊
$(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
getSum();
});
// 4. 用戶修改文本框的值 計算 小計模塊
$(".itxt").change(function() {
// 先得到文本框的里面的值 乘以 當前商品的單價
var n = $(this).val();
// 當前商品的單價
var p = $(this).parents(".p-num").siblings(".p-price").html();
// console.log(p);
p = p.substr(1);
$(this).parents(".p-num").siblings(".p-sum").html("￥" + (p * n).toFixed(2));
getSum();
});
// 5. 計算總計和總額模塊
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));
}
// 6. 洗掉商品模塊
// (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尺寸、位置操作
1、jQuery尺寸
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
padding: 10px;
border: 15px solid red;
margin: 20px;
}
</style>
<script src="jquery.min.js"></script>
<div></div>
<script>
$(function() {
// 1. width() / height() 獲取設定元素 width和height大小
console.log($("div").width());
// $("div").width(300);
// 2. innerWidth() / innerHeight() 獲取設定元素 width和height + padding 大小
console.log($("div").innerWidth());
// 3. outerWidth() / outerHeight() 獲取設定元素 width和height + padding + border 大小
console.log($("div").outerWidth());
// 4. outerWidth(true) / outerHeight(true) 獲取設定 width和height + padding + border + margin
console.log($("div").outerWidth(true));
})
</script>
2、jQuery位置
<div class="father">
<div class="son"></div>
</div>
<script>
$(function() {
// 1. 獲取設定距離檔案的位置（偏移） offset
console.log($(".son").offset());
console.log($(".son").offset().top);
// $(".son").offset({
// top: 200,
// left: 200
// });
// 2. 獲取距離帶有定位父級位置（偏移） position 如果沒有帶有定位的父級，則以檔案為準
// 這個方法只能獲取不能設定偏移
console.log($(".son").position());
// $(".son").position({
// top: 200,
// left: 200
// });
})
</script>
//jQuery被卷去的頭部
<style>
body {
height: 2000px;
}
.back {
position: fixed;
width: 50px;
height: 50px;
background-color: pink;
right: 30px;
bottom: 100px;
display: none;
}
.container {
width: 900px;
height: 500px;
background-color: skyblue;
margin: 400px auto;
}
</style>
<script src="jquery.min.js"></script>
<div class="back">回傳頂部</div>
<div class="container">
</div>
<script>
$(function() {
$(document).scrollTop(100);
// 被卷去的頭部 scrollTop() / 被卷去的左側 scrollLeft()
// 頁面滾動事件
var boxTop = $(".container").offset().top;
$(window).scroll(function() {
// console.log(11);
console.log($(document).scrollTop());
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn();
} else {
$(".back").fadeOut();
}
});
// 回傳頂部
$(".back").click(function() {
// $(document).scrollTop(0);
$("body, html").stop().animate({
scrollTop: 0
});
// $(document).stop().animate({
// scrollTop: 0
// }); 不能是檔案而是 html和body元素做影片
})
})
</script>
<!-- 固定電梯導航 -->
<div class="fixedtool">
<ul>
<li class="current">家用電器</li>
<li>手機通訊</li>
<li>電腦辦公</li>
<li>精品家具</li>
</ul>
</div>
/*電梯導航*/
.fixedtool {
position: fixed;
top: 100px;
left: 50%;
margin-left: -676px;
width: 66px;
background-color: #fff;
display: none;
}
.fixedtool li {
height: 32px;
line-height: 32px;
text-align: center;
font-size: 12px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.fixedtool .current {
background-color: #c81623;
color: #fff;
}
$(function() {
// 當我們點擊了小li 此時不需要執行 頁面滾動事件里面的 li 的背景選擇 添加 current
// 節流閥 互斥鎖
var flag = true;
// 1.顯示隱藏電梯導航
var toolTop = $(".recommend").offset().top;
toggleTool();
function toggleTool() {
if ($(document).scrollTop() >= toolTop) {
$(".fixedtool").fadeIn();
} else {
$(".fixedtool").fadeOut();
};
}
$(window).scroll(function() {
toggleTool();
// 3. 頁面滾動到某個內容區域，左側電梯導航小li相應添加和洗掉current類名
if (flag) {
$(".floor .w").each(function(i, ele) {
if ($(document).scrollTop() >= $(ele).offset().top - 1) {
console.log(i);
$(".fixedtool li").eq(i).addClass("current").siblings().removeClass();
}
})
}
});
// 2. 點擊電梯導航頁面可以滾動到相應內容區域
$(".fixedtool li").click(function() {
flag = false;
console.log($(this).index());
// 當我們每次點擊小li 就需要計算出頁面要去往的位置
// 選出對應索引號的內容區的盒子 計算它的.offset().top
var current = $(".floor .w").eq($(this).index()).offset().top;
// 頁面影片滾動效果
$("body, html").stop().animate({
scrollTop: current
}, function() {
flag = true;
});
// 點擊之后，讓當前的小li 添加current 類名 ，姐妹移除current類名
$(this).addClass("current").siblings().removeClass();
})
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/293624.html
標籤：其他
上一篇：JavaScript-陳述句
下一篇：計算一個元素在陣列中出現的次數