第02章 jQuery的元素操作

我还想吃会

已于 2024-08-09 19:53:37 修改

阅读量429

点赞数 16

文章标签：学习前端 html

于 2024-07-31 00:00:00 首次发布

本文链接：https://blog.csdn.net/2202_75315729/article/details/140746096

版权

第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))

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">

<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()

我还想吃会

关注

16
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
第02章 jQuery的元素操作

该方法有2个属性left 、top . position(.top 用于获取距离定位父级顶部的距离,position().left 用于获取距离定位父级左侧的距离。该方法有2个属性left、top .offset().top 用于获取距离文档顶部的距离，offset().left 用于获取距离文档左侧的距离。1.全选思路：里面3个小的复选框按钮( i-checkbox)选中状态(checked) 跟着全选按钮(checkall)走。可以设置元素的偏移：offset(f top: 10, left:30)；
复制链接

扫一扫