JQuery
Posted 尧子陌
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery相关的知识，希望对你有一定的参考价值。
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以上是关于JQuery的主要内容，如果未能解决你的问题，请参考以下文章
markdown 在WordPress中使用jQuery代码片段