JS的问题：效率低,兼容差
- 原生JS对不同的浏览器有兼容问题
-
jQuery 准则："write less do more"
- jQuery 完美的DOM封装；完美的事件封装；对ajax的封装
- 在<script>里导入jQuery：
- <script type = "text/javascript" src="js/jquery-3.6.0.js"></script>
- 可以用alert($===jQuery) 为true代表导入jQuery成功
jQuery
- 入口函数：页面加载完后自动执行；相当于jsp的window.onload
- $(document).ready(function(){ })
- 与window.onload的不同点
- 一个页面能有一个window.onload 事件；jQuery能有多个事件
- jQuery 入口函数简写：$(function(){入口函数的内容})
-
jQuery选择器
- 基本选择器：完全继承css的选择器 $("h1") 选择h1
- 通过jQuery获取选择器不是DOM对象；而是jQuery对象
- Dom对象只能进行dom操作；jQuery只能进行jQuery操作；jQuery和Dom是区分开的；不能混用
- jQuery对绝大多数DOM进行了封装
- jQuery 转DOM ：jQuery对象名[index]
- Dom转jQuery: $(DOM对象) ---> jQuery对象
- $(h1Node2).css("color","red") //将dom转换为jquery 并设置css属性
- $(".cc").css();$("ul.td").css();
- 多重元素：$("ul td h1").css();
- jQuery 实际上是dom对象数组；所以所有的都是函数和方法；
- jquery会对选中的n个元素遍历设置属性或样式
-
过滤选择器
- $("基本选择器"："过滤选择器")
- $("li: first") 选中第一个 。
- $("li.eq(2)") 跳过前两个li选中第三个li
- $("li:last") 选中最后一个
- 按照元素的属性名进行过滤
- $("p[title]").css(,) 过滤出<p>中有title的属性
- $("li").filter(".cc").css() 过滤万能的方法
-
链式操作
- $(function()){
- $("tr").eq(2).css().css()//tr第三个 的两个css属性
- $("tr").odd().css()//偶数设置样式
- $("tr").even().css()//奇数设置样式
- $("tr").not(":first").odd().css().end().even().css()}//跳过首行；以偶数选择tr设置属性；再选择奇数行设置另一个样式
- 按照元素的层次关系进行相对选择：
- 元素之间关系：父元素 子元素 先辈元素 后代元素
- 子元素： $("ul").children(":eq(1)") 获取直接子元素
- 后代元素 $("body").find("li") 获取所有的后代 li
- jquery本质就是dom对象数组
- 直接父类：parent() $("span").parent().css()
- 获取所有的先辈元素 $("span").parents("ul") 所有span的先辈 是ul
- 获取紧邻的下一个兄弟 .next( )
- 获取上一个兄弟元素 .prev( )
- .nextAll( )后面所有的兄弟
- .prevAll( )前面所有的兄弟
- .siblings() 获取其他所有的兄弟
-
jQuery的dom操作
- .html( ) 等于dom的innerHTML()
- $("h1").html() 无参数 获取第一个
- $("h1").html("参数") 有参数 将所有的h1 设置成“参数”
- $("h1").Text()获取所有的h1
- $("li").each(function(index,value){ 下标/元素 })
- value是一个原生的dom对象 value对应每个li
- 所以访问方式： $(value).html()
- .each()做迭代处理
- .val() js中的value属性；
- 不传参返回value值 ;传参数设置vallue
- .prop()
- 返回属性的值 $("selector").prop("property") //操作表单元素 返回bool值
- 设置属性和值：$("selector").prop("property","value")
- attr()
- 返回属性的值：$("selector").attr("attribute")//获取元素的属性
- 设置属性和值：$("img").attr("src","1.jpg")
-
样式动态操作
- css方法：jquery对象操作；//采取行内样式设置
- addClass $("div").addClass("current") //current是style的一个样式
- removeClass $("div").removeClass("current")//移除div的class
- $toggleClass ("className") 样式切换
-
元素显示和隐藏
- $("div").hide()
- $("div").hide(3000) //3s内逐渐隐藏
- $("div").show(3000) //3s内逐渐出现
- $("div").animate({left:300,top:300},3000) 3s逐渐飘到指定位置
-
jquery事件注册
- 调用相关事件方法完成，去除on 变成click(function(){ })
- $(function(){$("button").click(function(){ })})
- 事件注册过程中存在隐式迭代操作 $("li").click(function( ){$(this).html( );})//this也是dom独有需要转换为jquery
- 鼠标进入：mouseenter(fun())
- 鼠标离开：mouseleave(fun())
- 动态添加列表
- 直接调用$("字符串")
- $("<li style=' '>动态添加的内容</li>")
- 挂到父元素后面：$("父元素").append( )
- 或者调用子元素的after/before
- 挂到后面:$("li").eq(2).after（$("<li style=' '>动态添加的内容</li>")）
- 挂到前面一个$("li").eq(2).before$("<li style=' '>动态添加的内容</li>")）
- 挂到后面:$("li").eq(2).after（$("<li style=' '>动态添加的内容</li>")）
- 删除:$("li").eq(2).remove( );
-
案例：tab标签页
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<title>tab标签页的设计</title>
<style>
*{margin:0;padding:0;}
ul{overflow:hidden;}
li{list-style:none;float:left;border:1px solid gray;margin-right:2px;width:50px;text-align:center;cursor:pointer;}
div{width:500px;height:200px;border:1px solid gray;}
.current{
background:green;
color:white;
}
.current1{
background:white;
color:black;}
</style>
</head>
<body style="margin:50px;">
<ul>
<li >民生</li>
<li >体育</li>
<li >娱乐</li>
</ul>
<div>
这是民生新闻内容...
</div>
<div style="display:none;">
这是体育新闻内容...
</div>
<div style="display:none;">
这是娱乐新闻内容...
</div>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script>
$("li").each(function(index,value){ //对所有的li标签对象进行each遍历
$(value).click(function(){ //点击事件
var linum=$("li")//linum 获取到所有的li标签对象
linum.each(function(index,value){//给所有的linum 对象设置class=null 取消所有的样式
value.className="";
})
var divnum= $("div") //divnum获取所有的div对象
divnum.css("display","none")//先全部设置为不显示
divnum[index].style.display="block"//点击哪个li就显示哪个divnum
$(value).addClass("current")
})
})
</script>
</body>
</html>
代码简化
$("li").click(function(){//点击li触发
//alert($(this).siblings().length) 其他兄弟有两个
$(this).addClass("current").siblings().removeClass("current");//sibling获取所有其他兄弟
//把当前li设置为current;把其他兄弟元素class移除
$("div").eq($(this).index()).show().siblings().not("ul").hide();
//sibling会获取到dvi的子元素ul,所以要not("ul") 之后隐藏其他兄弟div元素
//$("div").eq($(this).index()).show()每点击一个li就弹一个div但是会被其它div挤下去
//$("div").eq(alert($(this).index()))点第几个li同时拿到了第几个div
//index :function()没有写；因为jquery拿到了一个数组，自带有下标；所以可以省略；value不能省略
}) 效果：
-
案例：手风琴效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>手风琴</title>
<style>
*{margin: 0;padding: 0;}
.box{width: 200px;height: 600px;border: 1px solid gray;}
body{margin: 30px;}
li{list-style: none;}
h2{font-weight: bold;font-size: 20px;text-align: center;background: green;color: white;line-height: 40px;cursor: pointer;border: 1px solid gray;}
.list li{line-height: 30px;text-align: center;}
.list{display: none;}
.currents{display: block;}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<h2>朋友</h2>
<ul class="list">
<li>张三</li>
<li>李四</li>
<li>万物</li>
<li>老刘</li>
</ul>
</li>
<li>
<h2>同事</h2>
<ul class="list">
<li>张三</li>
<li>李四</li>
<li>万物</li>
<li>老刘</li>
</ul>
</li>
<li>
<h2>家人</h2>
<ul class="list">
<li>张三</li>
<li>李四</li>
<li>万物</li>
<li>老刘</li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script>
// $(function(){
// $(".list").attr("flag",false)
// $("h2").onmouseover(function(){//鼠标进入
// // $(this).next().attr("currents") //点击h2时为其下一个属性替换className
// //alert(typeof $(this).next().attr("flag"))//获取flag的属性类型：string
// if($(this).next().attr("flag")=="false")
// {
// $(this).next().show(500).attr("flag",true)
// }else {
// $(this).next().hide(500).attr("flag","false")
// }
// })
// })
$(function(){
$(".list").attr("flag",false)
$("h2").mouseenter(function(){//鼠标进入
// $(this).next().attr("currents") //点击h2时为其下一个属性替换className
//alert(typeof $(this).next().attr("flag"))//获取flag的属性类型：string
if($(this).next().attr("flag")=="false")
{
$(this).next().show(500).attr("flag",true)
}else {
$(this).next().hide(500).attr("flag","false")
}
})
$("h2").mouseleave(function(){//鼠标离开
// $(this).next().attr("currents") //点击h2时为其下一个属性替换className
//alert(typeof $(this).next().attr("flag"))//获取flag的属性类型：string
if($(this).next().attr("flag")=="false")
{
$(this).next().show(500).attr("flag",true)
}else {
$(this).next().hide(500).attr("flag","false")
}
})
})
</script>
</body>
</html>
- 效果：
案例：商品结算页面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的购物车</title>
<!-- 引入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">
</head>
<body>
<div class="car-header">
<div class="w">
<div class="car-logo">
<b>我的购物车</b>
</div>
</div>
</div>
</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"> 全选
</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>
<!-- 商品详细模块 check-cart-item-->
<div class="cart-item-list">
<div class="cart-item check-cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" 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">
</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">
</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">全选
</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>1</em>件商品</div>
<div class="price-sum">总价： <em>￥12.60</em></div>
<div class="btn-area">去结算</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script>
//选中中间三个时
$(function(){
$(".j-checkbox").click(function(){
var num=$(".j-checkbox")
var number=0;
var prices=0.0
num.each(function(){
var price=0.0
if($(this).prop("checked"))
{
var nums = Number($(this).parent().next().next().next().children().children(".itxt").val())
var salemoney= Number(($(this).parent().next().next(".p-price").html().replace("￥","")))
price=nums*salemoney
number=number+nums//获取所有的数量
}
prices=prices+price
//alert(prices)
})
$(".amount-sum").children().html(number)//设置数量
$(".price-sum").children().html(prices)
})
})
$(function(){
//alert($(".checkall").length)
var num=$(".p-checkbox")
//alert(num.length)3个
$(".checkall").click(function(){//点击全选
var bol= $(this).prop("checked")//获取当前状态
$(".checkall").prop("checked",bol)
num.each(function(){
$(".j-checkbox").prop("checked",bol)//设置三个div
})
if($(this).prop("checked"))//如果三个中div被选中；
{
$(".cart-item").addClass("check-cart-item");
//被选中就计算选中数量
// var positions= $(this).parent().next().eq(2).children().eq(1)
// var shuliang=0;
// var linshi=Number( positions.val())
// alert(linshi)
}
else {
$(".j-checkbox").prop("checked",false);
$(".cart-item").removeClass("check-cart-item");
}
})
})
//点击删除全部
$(".remove-batch").click(function(){
var num=$(".p-checkbox")
if($(".checkall").prop("checked"))
{
num.each(function(){
$(".j-checkbox").prop("checked",false);
})
$(".checkall").prop("checked",false)
}
})
//清空购物车
$(".clear-all").click(function(){
var nums= $(".cart-item-list").children("*").remove()
})
//+
$(".increment").click(function(){
var temp= $(this).prev()
//获取兄弟的val
var num=$(".increment");
var ints= Number(temp.val())
var numbers=ints+1
temp.val(numbers)
//找到单价
var concats=temp.parent().parent().prev().html().replace("￥","")
//去除￥
var salmoney=parseFloat(concats)
//alert(salmoney) 转换为小数
var moneys=numbers*salmoney
//alert(moneys)
$(this).parent().parent().next().html(moneys)
})
//-
$(".decrement").click(function(){
var temp= $(this).next()
var num=$(".decrement");
var ints= Number(temp.val())
if(ints>1){
var numbers=ints-1
temp.val(numbers)
//找到单价
var concats=temp.parent().parent().prev().html().replace("￥","")
//去除￥
var salmoney=parseFloat(concats)
//alert(salmoney) 转换为小数
var moneys=numbers*salmoney
//alert(moneys)
$(this).parent().parent().next().html(moneys)
}
})
//删除一个div
$(".p-action").click(function(){
$(this).parent().remove();
})
//选中的商品数量
// function num(){
// var bol= $(".j-checkbox").prop("checked")
// if(bol){
// var temp=$(".j-checkbox")
// var number=0;
// temp.each(function(){
// var num = Number(temp.val())
// number=num+number//获取所有的数量
// //alert(number)
// })
// $(".amount-sum").children().html(number)//设置数量
// }
// }
</script>
<script>
</script>
</body>
</html>模糊知识点：.children().children(".itxt").val()//获取子类的id为itxt的值（string）
Number(val( )) ：转换为数值
动态计算总金额，在全选框和每个商品框和每个+；-调用时都要动态变化；所以要把计算总金额方法写成公共方法
556
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
