第02章 jQuery的元素操作
1属性操作
1.1设置或获取元素固有属性值 prop()
所谓元素固有属性就是元素本身自带的属性。
比如<>元素里面的href, 比如<input>元素里面的type。
// 1.获取元素的固有属性 用 prop
// 修改元素的固有属性prop("属性","值")
console.log($("a").prop("herf"));
$("a").prop("herf", "#")
console.log($("div").prop("index"));
1.2设置或获取元素自定义属性值 attr()
用户自己给元素添加的属性,我们称为自定义属性。
比如给div添加index=“1”
// 获取元素自定义的属性用attr
// 修改元素的自定义属性attr("属性","值")
console.log($("div").attr("index"));
$("div").attr("index", 4)
console.log($("div").attr("data-index"))
2数据缓存data()【了解】
// 把元素(span)当成变量看,把数据存储在元素里
$("span").data("uname", "zhihuishu")
console.log($("span").data("uname"));
// 用data获取h5自定义属性 不用写data- 而且返回值时数字类型
console.log($("div").data("index"));
3 JQuery内容文本值
3.1普通元素内容html()(相当于原生innerHTML)
获取:html() /获取元素的内容
console.log($("div").html())
设置:html(“内容”)//设置元素的内容
3.2普通元素文本内容text()(相当与原生innerText)
// 2.获取文本值text
console.log($("div").text());
$("div").text("456")
3.3表单的值val)(相当于原生value)
// 获取表单的值
$("input").val("123")
console.log($("input").val());
4 JQuery元素操作-遍历
4.1遍历元素
jQuery 隐式选代是对同一类元素做了同样的操作。如果
想要给同一类元素做不同操作,就需要用到遍历。
语法1:$("div").each(function(index, domEle){ xxx; })
each()
方法遍历匹配的每一个元素。主要用DOM处理。each 每一个
里面的回调函数有2个参数:index 是每个元素的索引号;demEle 是每个DOM元素对象,不是jquery对象
所以要想使用jquery方法,需要给这个dom
元素转换为jquery对象$(domEle)
var arr = ["red", "blue", "yellow"]
// 针对同一元素做不同操作,需要用到遍历
$("div").each(function(index, dom) {
// 回调函数的第一个参数一定是索引
// 第二个参数一定是dom元素对象
console.log(index, dom);
$(dom).css("color", arr[index])
})
语法2: $.each(object , function(index, element)(
$.each()
方法可用于遍历任何对象。
$.each({
name: "a",
age: 18
}, function(i, e) {
console.log(i, e) // 第一个输出名,第二个输出属性
})
5购物车案例
5.1功能一:全选模块
1.全选思路:里面3个小的复选框按钮( i-checkbox)选中状态(checked) 跟着全选按钮(checkall)走。
2.因为checked 是复选框的固有属性,此时我们需要利用prop()方法获取和设置该属性。
3. 把全选按钮状态赋值给3小复选框就可以了。
我还想吃
4.3 当我们每次点击小的复选框按钮,就来判断:
5.如果小复选框被选中的个数等于3就应该把全选按钮选上,否则全选按钮不选。
6. :checked 选 择器 :checked查找被选中的表单元
素。
7.change改变到时候,获取当前input的checked状态,
赋值给小按钮和全选按钮既可
8.小按钮改变的时候,判断选中个数和总个数,修改
大按钮是否要选中
5.2功能二:设置选中背景
1.核心思路:选中的商品添加背景,不选中移除背景
即可
2.全选按钮点击:如果全选是选中的,则所有的商品
添加背景,否则移除背景
3.小的复选框点击:如果是选中状态,则当前商品添
加背景,否则移除背景
4.这个背景,可以通过类名修改,添加类和删除类
8.用最新的表单内的值乘以单价即可 但是还是当前
商品小计
9.点击获取单价和数量相乘的结果保存给小计既可
10.用户直接输入数字问题
5.5功能五:计算总价和总模块
1.核心思路:把所有文本框里面的值相加就是总计数
量。总额同理
2.文本框里面的值不相同,如果想要相加需要用到
each遍历。声明一个变量,相加即可
3.点击+号-号,会改变总计和总额,如果用户修改了
文本框里面的值同样会改变总计和总额
4.因此可以封装一个函数求总计和总额的,以上2个操作调用这个函数即可。
5.注意1:总计是文本框里面的值相加用val) 总额
是普通元素的内容用text()
6.要注意普通元素里面的内容要去掉早并且转换为数
字型才能相加
7.多次需要求总计,所以封装函数最为合适
补充知识
jQuery元素操作-创建
我还他
O 语法:$("<li></li>);
jQuery元素操作-添加
element.append(“内容”[把内容放入匹配元素内部最后面,类似原生 appendChild] ---生成父子关系
element.prepend(“内容”)把内容放入匹配元素内
部最前面。----生成父子关系
o element.after(”内容”)//把内容放入目标元素后
面----生成兄弟关系
element.before(“内容“)1/把内容放入目标元
素前面-----生成兄弟关系
jQuery元素操作-刪除
o element.remove() // 删除匹配的元素(本身)
o element.empty() 1/ 删除匹配的元素集合中所
有的子节点
o element.html(") // 清空匹配的元素内容
5.6功能六:删除商品模块
1. 核心思路:把商品remove()刪除元素即可
2. 有三个地方需要删除:1.商品后面的删除按钮 2.刪
除选中的商品3.清理购物车
3.商品后面的删除按钮:一定是删除当前的商品,所
以从$(this) 出发
4.删除选中的商品:先判断小的复选框按钮是否选中
状态,如果是选中,则删除对应的商品
5.清理购物车:则是把所有的商品全部删掉
// 1.全选全不选功能
// 就是吧全选(checkall)按钮状态赋值给下面三个小按钮(j-checkbox)
// 通过change事件用prop(“属性” ,“值”)改变值
$(function() {
$(".checkall").change(function() {
console.log($(this).prop("checked"));
$(".j-checkbox,.checkall").prop("checked", $(this).prop("checked"))
if ($(this).prop("checked")) {
$(".cart-item").addClass("check-cart-item")
} else {
$(".cart-item").removeClass("check-cart-item")
}
getSum()
})
// 2.如果小复选框被选中的个数等于三就全选,否则不选
$(".j-checkbox").change(function() {
// console.log($(".j-checkbox:checked"));
var x = $(".j-checkbox")
if ($(".j-checkbox:checked").length == $(".j-checkbox").length) {
$(".checkall").prop("checked", true)
} else {
$(".checkall").prop("checked", false)
}
if ($(this).prop("checked")) {
$(this).parents(".cart-item").addClass("check-cart-item")
} else {
$(this).parents(".cart-item").removeClass("check-cart-item")
}
getSum()
})
// 3.商品的增减模块,首先声明一个变量,当我们点击+de时候,就让这个值++,然后把这个值赋给文本框
$(".increment").click(function() {
var n = $(this).siblings(".itxt").val()
console.log(n);
n++;
$(this).siblings(".itxt").val(n)
// 获取当前价格p
var p = $(this).parent().parent().siblings(".p-price").text()
console.log(p);
p = p.substr(1);
$(this).parents().siblings(".p-sum").text("¥" + (p * n).toFixed(2))
getSum()
})
$(".decrement").click(function() {
var n = $(this).siblings(".itxt").val()
if (n == 1) {
return false
}
n--;
$(this).siblings(".itxt").val(n)
// 获取当前价格p
var p = $(this).parent().parent().siblings(".p-price").text()
console.log(p);
p = p.substr(1);
$(this).parents().siblings(".p-sum").text("¥" + (p * n).toFixed(2)) /*toFixed(2) 保留两位*/
getSum()
})
// 5.用户修改文本框的值的时候 小计重新计算
// 首先我们要获取到文本框=框的值 乘当前商品的单价 计算 赋值
$(".itxt").change(function() {
// 获取文本框的值
var n = $(this).val()
if (n <= 0) {
$(this).val(1)
return false
}
// 当前商品价格
var p = $(this).parent().parent().siblings(".p-price").text()
p = p.substr(1);
$(this).parents().siblings(".p-sum").text("¥" + (p * n).toFixed(2))
getSum()
})
// 6.计算商品的总额
function getSum() {
var count = 0 //总件数
var money = 0 // 总价钱
console.log($(".j-checkbox:checked"));
var itex = $(".j-checkbox:checked").parents().siblings(".p-num").find(".itxt")
var sum = $(".j-checkbox:checked").parents().siblings(".p-num")
itex.each(function(i, ele) {
count = count + parseInt($(ele).val())
})
$(".amount-sum em").text(count)
sum.each(function(i, ele) {
money = money + parseFloat($(ele).text().substr(1))
})
$(".price-sum em").text(money.toFixed(2))
}
// 7.删除商品模块
// (1)清空购物车
$(".clear-all").click(function() {
$(this).parents().siblings("cart-item-list").remove()
getSum()
})
// 2.清除选中的商品
$(".remove-batch").click(function() {
$(".j-checkbox:checked").parents(".cart-item").remove()
getSum()
})
})
第03章 jQuery事件
1 jQuery尺寸、位置操作
1.1 jQueryR寸
width()、height()【 只算width和height】
innerWidth()、innerHeight()【包含paddingtwidth 】
outerWidth()、outerHeight()【包含padding、border、width 】
outerWidth(true)、outerHeight(true)【包含padding、border、margin、width 】
注意:
1.. 以上参数为空,则是获取相应值,返回的是数字型。
2.如果参数为数字,则是修改相应值。
3.参数可以不必写单位。
1.2 jQuery 位置
1.2.1 offset)设置或获取元素偏移
offset)方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系。
该方法有2个属性left、top .offset().top 用于获取距离文档顶部的距离,offset().left 用于获取距离文档左侧的距离。
可以设置元素的偏移:offset(f top: 10, left:30);
// $(".s").offset({
// top:200,
// left:300
// })
// 获取带有定位元素父级的位置 position如果没有带定位的父级元素 则以文档为准
console.log($(".s").position());
// 这个方法只能获取不能设置
1.2.2 position()获取元素偏移
position()方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准。
该方法有2个属性left 、top . position(.top 用于获取距离定位父级顶部的距离,position().left 用于获取距离定位父级左侧的距离。
注意:
该方法只能获取。
console.log($(".s").position());
1.2.3 scrollTop()、scrollLeft()设置或获取元素被卷去的头部和左侧
scrollTop()方法设置或返回被选元素被卷去的头部。
不跟参数是获取,参数为不带单位的数字则是设置被卷去的头部。
2案例带有动画的返回顶部
1.核心原理:使用animate动画返回顶部。
2.animate动画函数里面有个scrollTop属性,可以设置位置
3.但是是元素做动画,因此$(“ body, html ”).animate(fscrollTop:0))
<div class="back">返回顶部</div>
<div class="box"></div>
<script>
var boxTop = $(".box").offset().top
$(window).scroll(function() {
console.log($(document).scrollTop());
if ($(document).scrollTop() >= boxTop) {
$(".back").fadeIn()
} else {
$(".back").fadeOut()
}
})
$(".back").click(function() {
$("body,html").stop().animate({
scrollTop: 0
})
})
</script>
3案例:电梯导航
第一步
1.当我们滚动到今日推荐模块,就让电梯导航显示出
来
2.点击电梯导航页面可以滚动到相应内容区域
3. 核心算法:因为电梯导航模块和内容区模块一一对
应的
4.: 当我们点击电梯导航某个小模块,就可以拿到当前
小模块的索引号
5.就可以把animate要移动的距离求出来:当前索引号
内容区模块它的offset().top
6.然后执行动画即可
第二部
1.当我们点击电梯导航某个小i,当前小i添加
current类,兄弟移除类名
2.当我们页面滚动到内容区域某个模块,左侧电梯导航,相对应的小i模块,也会添加current类,兄弟移除current类。
3.触发的事件是页面滚动,因此这个功能要写到页面滚动事件里面。
4.需要用到each,遍历内容区域大模块。each里面能
拿到内容区域每一个模块元素和索引号
5.判断的条件:被卷去的头部 大于等于内容区域里
面每个模块的offset().top
6. 就利用这个索引号找到相应的电梯导航小i添加类。
4 jQuery 文件
4.1 jQuery事件注册
语法:element.事件(function())
// 对象 事件
// (function(){})
$("div").click(function() {
$(this).css("background", "pink")
})
$("div").click(function() {
$(this).css("background", "blue")
})
其他事件和原生基本一致。
如mouseover 、mouseout 、blur、focus、change、
keydown、keyup 、resize、scroll等
4.2事件处理on()绑定事件
如果有的事件只想触发一次,可以使用one()来绑定事件。
on()方法在匹配元素上绑定一个或多个事件的事件处
理函数
语法:
element.on(events[, selectorl, fn)
events:一个或多个用空格分隔的事件类型,
如"click"或"keydown"
2. selector:元素的子元素选择器。
3.fn:回调函数即绑定在元素身上的侦听函数。
4.2.1on()方法优势1:
可以绑定多个事件,多个处理事件处理程序。
同处理程序:
$("div").on({
click: function() {
$(this).css("background", "pink")
},
mouseover: function() {
$(this).css("background", "yellow")
},
mouseout: function() {
$(this).css("background", "blue")
}
})
$("div").on("mouseover mouseout", function() {
$(this).toggleClass("aaa")
})
$("li").click(function() {
console.log(1);
})
$("ul").on("click", "li", function() {
console.log(1);
})
// 2.on可以实现时间的委派
// 3.on可以给未来创建的元素绑定事件
var li = $("<li>我是ul的孩子</li>")
$("ul").append(li)
4.4自动触发事件
<script src="./jq.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
background-color: blanchedalmond;
}
</style>
</head>
<body>
<div></div>
<input type="text">
<a href="https://cn.bing.com/search?q=%E7%99%BE%E5%BA%A6&gs_lcrp=EgZjaHJvbWUqBwgCEEUYwgMyBwgAEEUYwgMyBwgBEEUYwgMyBwgCEEUYwgMyBwgDEEUYwgMyBwgEEEUYwgMyBwgFEEUYwgMyBwgGEEUYwgMyBwgHEEUYwgPSAQ0zMjg4Nzg3MDZqMGoxqAIIsAIB&FORM=ANSPA1&PC=DCTS">百度</a>
<script>
$("div").on("click", function() {
console.log("我点击了div");
event.stopPropagation()
// alert(111)
})
// 自触发事件
// 1.元素。事件() 会触发默认行为
// $("div").click()
// 2.元素。trigger(“事件”) h会触发默认行为
// $("div").trigger("click")
// 3.元素。triggerHandler(“事件”) 不会触发默认行为
// $("div").triggerHandler("click")
$("input").on("focus", function(e) { //ye可以世空的 下面给even
$(this).val("你好");
event.preventDefault()
console.log(e)
})
$("a").click(function() {
event.preventDefault()
})
// $("input").trigger("focus")
// $("input").triggerHandler("focus")
</script>
5事例:发布微博案例
1.点击发布按钮,动态创建一个小li,放入文本框的内容和删除按钮,并且添加到ul中。
2.点击的删除按钮,可以删除当前的微博留言。
6.jQuery事件对象
element.on(events,
[selectorl, function(event)))
阻止默认行为:
event.preventDefault()
false
1/阻止冒泡:event.stopPropagation()
7其他内容
jQuery插件
jQuery功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成。
注意:
这些插件也是依赖于jQuery来完成的,所以必须要先 引入jQuery文件,因此也称为jQuery 插件。
jQuery 插件常用的网站:
jQuery 插件库 http://www.jq22.com/jQuery 之家 http://www.htmleaf.com/jQuery插件使用步骤:
引入相关文件。(jQuery文件和插件文件)复制相关html、css、js(调用插件)。
7.1图片懒加载或者( B0OTSTRAP插件)
• 在线获取图片https://picsum.photos/
(图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载)
当我们页面滑动到可视区域,再显示图片。
我们使用jquery 插件库 Easylazyload。注意,此时的js引入文件和js调用必须写到DOM元素(图片)最后面
3. 将图片src 替换为 data-lazy-src
调用lazuLoadlnit()