JavaScript基础知识之jQuery

最新推荐文章于 2024-05-07 11:07:47 发布

小小小丸子呀

最新推荐文章于 2024-05-07 11:07:47 发布

阅读量2.3k

点赞数 2

分类专栏：前端文章标签： javascript jquery 前端

本文链接：https://blog.csdn.net/qq_38652677/article/details/127587375

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、jQuery概述

javascript库：即library,是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide\show，比如获取元素等。
所以库就是一个JS文件，里面对我们原生Jsdaima进行了封装，存放到里面，这样我们就可以快速高效的使用这些封装好了的功能。
jQuery就是为了快速方便的操作DOM，里面基本都是函数(方法).其设计的宗旨是“write less,do more”
学习jQuery的本质就是学习调用这些函数。

二、jQuery基本使用

1.jQuery的下载

网址：jquery
点击下载后将代码复制，新建一个json文件，将复制的内容粘贴过去

2.jQuery的使用

引入jQuery文件

//在<head>中
<script src = "jquery.min.js"></script> //你自己定义的文件名字

jQuery的入口函数
①等着DOM结构熏染完毕即可执行内部代码，不必等到所有资源加载完成，jQuery帮我们完成了封装
②相当于我们原生js中的DOMContentLoaded
③不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码

//2种方法
$(function(){
	... //此处是页面DOM加载完的入口，这种写法更简单
});

$(document).ready(function(){
	...//此处是页面DOM加载完的入口
});

3.jQuery的顶级对象`$`

其中$是jQuery的别称，在代码中可以使用jQuery来代替$,但一般为了方便，通常直接使用$
$是jQuery的顶级对象，相当于原生js中的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法

4.jQuery对象和DOM对象

DOM对象：由原生js获取过来的对象

var myDiv = document.querySelector('div');
console.dir(myDiv); //div

jQuery对象：由jQuery获取过来的对象

$('div');  //是一个jquery对象

jQuery对象的本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储)
jQuery对象只能使用jQuery方法，DOM对象则使用原生的javascript属性和方法

myDiv.style.display = 'none';
$('div').style.display = 'none';//这样就不对， jQuery对象只能使用jQuery方法

5.jQuery对象和DOM对象相互转换

jQuery对象和DOM对象之间是可以相互转换的
因为原生js比jQuery更大，原生的一些属性和方法jQuery没有给我们封装。想要使用这些属性和方法需要把jQuery对象转换成DOM对象才能使用

DOM对象转换成jQuery对象
$(DOM对象)

<body>
	<video src = "mov.mp4"></video>
	<script>
		//1.DOM对象转换成jQuery对象
		//(1)直接获取
		$('video');
		//（2）使用原生js获取过来DOM对象
		var myvideo = document.querySelector('video');
		$(myvideo);
	</script>
</body>

jQuery对象转换成DOM对象
$('div')[index] index是索引号
$('div').get(index) index是索引号

<body>
	<video src = "mov.mp4"></video>
	<script>
		//1.jQuery对象转汉城DOM对象
		$('video')[0].play(); //视频播放
		$('video').get(0).play();
	</script>
</body>

三、jQuery常用API

1.常用的jQuery选择器

原生js获取元素方式很多，很杂，而且兼容性请阔不一致，因此jQuery给我们做了封装，使获取元素同意标准。
$('选择器') 里面选择器直接写CSS选择器即可，但是要加引号
常用的选择器：

ID选择器 $("#id") 获取指定ID的元素
全选选择器 $('*') 匹配所有元素
类选择器 $(".class") 获取同一类class的元素
标签选择器 $("div") 获取同一类标签的所有元素
并集选择器 $("div,p,li") 选取多个元素
交集选择器 $("li.current") 交集元素

<body>
	<div class = "nav">我是nav</div>
</body>
<script>
	$function(){
		$(".nav");
	}
</script>

jQuery层级选择器
子代选择器：$("ul>li"); 用>号，获取亲儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器: $("ul li"); 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
jquery设置样式
$('div').css('属性','值');

<body>
	<div>hahah</div>
	<div>hahah</div>
	<div>hahah</div>
	<div>hahah</div>
	<ul>
		<li>xixixi</li>
		<li>xixixi</li>
		<li>xixixi</li>
	</ul>
	<script>
		//1.获取4个div元素
		$("div");
		//2.给四个盒子背景颜色为粉色，注意jquery不能使用style
		$("div").css("background", "pink");
	</script>
</body>

4.隐式迭代
遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们进行调用。
所以上面给div加背景颜色的例子，就是把所有的元素进行了内部的循环遍历。

jQuery筛选选择器
:first $('li:first) 获取第一个li元素
:last $('li:last') 获取最后一个li元素
:eq(index) $("li:eq(2)") 获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd $("li:odd") 获取到的li元素中，选择索引号为奇数的元素
:even $("li:even") 获取到的li元素中，选择索引号为偶数的元素
jquery筛选方法（重点）
parent() $("li").parent(); 查找父级
children(selector) $("ul").children("li") 相当于$("ul>li"),最近一级（亲儿子)
find(selector) $("ul").find("li"); 相当于$("ul li"),后代选择器
siblings(selector) $(".first").siblings("li"); 查找兄弟节点，不包括自己本身
nextAll([expr]) $(".first").nextAll() 查找当前元素之后所有的同辈元素
prevtAll([expr]) $(".last").nextAll() 查找当前元素之前所有的同辈元素
hasClass(class) $('div’).hasClass("protected") 检查当前元素是否含有某个特定的类，如果有，则返回true
eq(index) $("li").eq(2) 相当于$(“li:eq(2)”),index从0开始
下拉菜单案例

<body>
	<ul class = "nav">
		<li>
			<a href = "#">微博</a>
			<ul>
				<li>
					<a href = "">私信</a>
				</li>
				<li>
					<a href = "">评论</a>
				</li>
				<li>
					<a href = "">@wo</a>
				</li>
			</ul>
		</li>
		<li>
			<a href = "#">微博</a>
			<ul>
				<li>
					<a href = "">私信</a>
				</li>
				<li>
					<a href = "">评论</a>
				</li>
				<li>
					<a href = "">@wo</a>
				</li>
			</ul>
		</li>
	</ul>
	<script>
		$function(){
			//鼠标经过
			$(".nav>li").mouseover(function(){   
				//$(this)  //$(this)  jquery当前元素，注意this不要加引号
				$(this).children("ul").show();  //shou()显示元素
			})
			//鼠标离开
			$(".nav > li").mouseout(function(){
				$(this).childre("ul").hide();
			})
		}
	</script>
</body>

jquery排他思想
想要做一个多选一的效果，就要做到排他思想。
排他思想：当前元素设置样式，其余兄弟元素清除样式

<body>
	<button>hahah</button>
	<button>hahah</button>
	<button>hahah</button>
	<button>hahah</button>
	<button>hahah</button>
	<button>hahah</button>
	<button>hahah</button>
	<script>
		$(dunction(){
		//1.隐式迭代，给所有按钮都绑定了点击事件
			$("button").click(function(){
				//2.当前的元素变化背景夜颜色
				$(this).css("background","pink");
				//其余的兄弟去掉背景颜色  隐式迭代
				$(this).siblings("button").css("background", "");
			});
		})
	</script>
</body>

淘宝精品服饰案例
核心原理：鼠标经过左侧盒子某个小Li,就让内容区盒子相对应图片显示，其余的图片隐藏
那么需要得到当前小Li的索引号，就可以显示对应索引号的图片
jquery得到当前元素索引号$(this).index()
中间对应的图片，可以通过eq(index)方法去选择
显示元素show() 隐藏元素hide()

<body>
	<div class = "wrapper">
		<ul id = "left">
			<li><a href = '#'>女靴</a></li>
			<li><a href = '#'>雪地靴</a></li>
			<li><a href = '#'>冬裙</a></li>
			<li><a href = '#'>呢大衣</a></li>
			<li><a href = '#'>毛衣</a></li>
			<li><a href = '#'>棉服</a></li>
			<li><a href = '#'>女裤</a></li>
			<li><a href = '#'>羽绒服</a></li>
			<li><a href = '#'>牛仔裤</a></li>
		</ul>
	<div id = "content">
		<div>
			<a href = "#"><img src = "images/女靴.jpg“ width="200" heighr = "250"/></a>
		</div>
		<div>
			<a href = "#"><img src = "images/雪地靴.jpg“ width="200" heighr = "250"/></a>
		</div>
		<div>
			<a href = "#"><img src = "images/冬裙.jpg“ width="200" heighr = "250"/></a>
		</div>
		<div>
			<a href = "#"><img src = "images/呢大衣.jpg“ width="200" heighr = "250"/></a>
		</div>
		<div>
			<a href = "#"><img src = "images/毛衣.jpg“ width="200" heighr = "250"/></a>
		</div>
		<div>
			<a href = "#"><img src = "images/棉服.jpg“ width="200" heighr = "250"/></a>
		</div>
		<div>
			<a href = "#"><img src = "images/女裤.jpg“ width="200" heighr = "250"/></a>
		</div>
		<div>
			<a href = "#"><img src = "images/羽绒服.jpg“ width="200" heighr = "250"/></a>
		</div>
		<div>
			<a href = "#"><img src = "images/牛仔裤.jpg“ width="200" heighr = "250"/></a>
		</div>
		<script>
			$(function(){
				//1.1鼠标经过左侧的小Li
				$("#left li").mouseover(function(){
					//2.得到当前小li的索引号
					var index = $(this).index();
					//3.让我们右侧的盒子相应的索引号的图片显示出来就好了
					$("#content div")eq(index).show();
					//4.让其余的图片隐藏
					$("#content div").eq(index).siblings().hide();
				})
			}
</body>

链式编程

让代码更优雅
使用链式编程要注意给哪个对象执行样式

<body>
	<button>hahah</button>
	<button>hahah</button>
	<button>hahah</button>
	<button>hahah</button>
	<button>hahah</button>
	<button>hahah</button>
	<button>hahah</button>
	<script>
		$(dunction(){
		//1.隐式迭代，给所有按钮都绑定了点击事件
			//$("button").click(function(){
				//2.当前的元素变化背景夜颜色
				//$(this).css("background","pink");
				//其余的兄弟去掉背景颜色  隐式迭代
				//$(this).siblings("button").css("background", "");
				$(this).css("color,"red").siblings().css("color","");
			});
		})
	</script>
</body>

2.jQuery样式

操作css方法
jquery可以使用css方法来修改简单元素样式；也可以操作类，修改多个样式
（1）参数只写属性名，则返回属性值

$(this).css("color");

<head>
	<style>
		div{
			width:200px;
			height:200px;
			background-color:pink;
		}
	</style>
	<script src = "jquery.min.js"></script>
</head>
<body>
	<div></div>
	<script>
		//操作样式之CSS方法
		$(function(){
			console.log($("div").css("width");  //200px
		})
	</script>
</body>

（2）参数是属性名，属性值，逗号分割，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引导

$(this).css("color","red");

<head>
	<style>
		div{
			width:200px;
			height:200px;
			background-color:pink;
		}
	</style>
	<script src = "jquery.min.js"></script>
</head>
<body>
	<div></div>
	<script>
		//操作样式之CSS方法
		$(function(){
			console.log($("div").css("width");  //200px
			$("div").css("width", "300px");
		})
	</script>
</body>

（3）参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号

$(this).css({"color":"white","font-size":"20px"});

<head>
	<style>
		div{
			width:200px;
			height:200px;
			background-color:pink;
		}
	</style>
	<script src = "jquery.min.js"></script>
</head>
<body>
	<div></div>
	<script>
		//操作样式之CSS方法
		$(function(){
			//console.log($("div").css("width");  //200px
			//$("div").css("width", "300px");
			$("div").css({
				width:400,
				height:400,
				backgroundColor:"red"  //如果是复合属性必须采取驼峰命名法，如果值不是数字，则需要加引号
			})
			
		})
	</script>
</body>

设置类样式方法
作用等同于classList，可以操作类样式，注意操作类里面的参数不要加点.
（1）添加类

$("div").addClass("current");

<head>
	<style>
		div{
			width:200px;
			height:200px;
			background-color:pink;
		}
		.current{
			background-color:red;
		}
	</style>
	<script src = "jquery.min.js"></script>
</head>
<body>
	<div></div>
	<script>
		$(function(){
			//1.添加类addClass()
			$("div").click(function(){
				$(this).addCLass("current");  
			})
		})
	</script>
</body>

（2）删除类

$("div").addClass("current");

<head>
	<style>
		div{
			width:200px;
			height:200px;
			background-color:pink;
		}
		.current{
			background-color:red;
		}
	</style>
	<script src = "jquery.min.js"></script>
</head>
<body>
	<div class = "current"></div>
	<script>
		$(function(){
			//1.添加类addClass()
			$("div").click(function(){
				$(this).removeCLass("current");  
			})
		})
	</script>
</body>

切换类toggleClass()

<head>
	<style>
		div{
			width:200px;
			height:200px;
			background-color:pink;
			transition : all 0.5s;//过渡
		}
		.current{
			background-color:red;
			transform:rotate(360deg); //旋转360du
		}
	</style>
	<script src = "jquery.min.js"></script>
</head>
<body>
	<div class = "current"></div>
	<script>
		$(function(){
			$("div").click(function(){
				$(this).togfleClass("current");
			})
		})
	</script>
</body>

tab栏切换案例
分析：①点击上部的li，当前li添加current类，其余兄弟移除类
②点击的同时，得到当前li的索引号
③让下部里面相应索引号的item显示，其余item隐藏

<head>
	<style>
		.tab_list li{
			float:left;
			height:39px;
			line-height:39px;
			padding:0 20px;
			text-align:center;
			cursor:pointer;
		}

		.tab_list .current{
			background-color:red;
			color:black;
		}
		.item_info{
			pading:20px 0 0 20px;
		}
		.item{
			display:none;
		}
	</style>
</head>
<body>
	<div class = "tab">
		<div class = "tab_list">
			<ul>
				<li class="current">商品介绍</li>
				<li>规格与包装</li>
				<li>售后保障</li>
				<li>商品评价</li>
				<li>手机社区</li>
			</ul>
		</div>
		<div class = "tab_con">
			<div class = "item" style = "display:blocl;">
				商品介绍模块内容
			</div>
			<div class = "item">
				规格与包装模块内容
			</div>
			<div class = "item">
				售后保障模块内容
			</div>
			<div class = "item">
				商品评价模块内容
			</div>
			<div class = "item">
				手机社区模块内容
			</div>
		</div>
	</div>
	<script>
		$(function(){
			//1.点击上部的Li,当前li添加current类，其余兄弟移除类
			$(".tab_list li").click(function(){
				$(this).addClass("current").siblings().removeClass("current");
				//2.点击的同时拿到当前的索引号
				var index = $(this).index();
				//3.让下部里面相应索引号的item显示，其余item隐藏
				$(".tab_con .item").eq(index).show().siblings().hide();
			});
			
		})
	</script>
</body>

类操作与className区别
原生js中className会覆盖元素原先里面的类名，
jquery里面类操作只是对指定类进行操作，不影响原先的类名

<body>
	<div class = "one"></div>
	<script>
		var one = document.querySelector(".one");
		one.className = "two";   //那么One那个类就没有了
		$(".one").addClass("two"); //这个addClass相当于追加类名 不影响以前的类名
	</script>
</body>

3.jQuery动画效果

jquery封装了很多动画效果
显示隐藏：show()、hide()、toggle()
滑动:slideDown()、slideUp()、slideToggle()
淡入淡出：dadeIn()、fadeOut()、fadeToggle()、fadeTo()
自定义动画：animate()

显示语法规范
show([speed, [easing], [fn]]);
[]表示可以省略，所以show()参数可以省略，则为无动画直接显示
speed:三种预定速度之一的字符串（”slow",“normal”,or"fast")或表示动画时长的毫秒数值（如：1000）。
easing:(optional）用来指定切换效果，默认是"swing",可用参数"linear"
fn：回调函数，在动画完成时执行的函数，每个元素执行一次
隐藏参数
和刚刚的show()是一模一样的
hide([speed, [easing], [fn]])`;

<body>
	<button>显示</button>
	<button>隐藏</button>
	<button>切换</button>
	<div></div>
	<script>
		$(function(){
			$("button).eq(2).click(function(){
				$("div").hide(1000, function(){ //让那个盒子1s消失
					alter(1);  
				})
			}}
		});
	</script>
	
</body>

切换
toggle([speed, [easing],[fn]]),也就是上面哪个例子中点击一下隐藏，点击一下又显示出来
语法规则和刚刚一样

<body>
	<button>显示</button>
	<button>隐藏</button>
	<button>切换</button>
	<div></div>
	<script>
		$(function(){
			$("button).eq(2).click(function(){
				$("div").toggle(1000); //一般情况下都不加参数直接显示隐藏就可以了
			}}
		});
	</script>
	
</body>

简洁版滑动下拉菜单案例
下滑效果语法规范：slideDown([speed,[easing],[fn]])
上滑效果语法规范: slideUp([speed,[easing],[fn]])
滑动切换效果语法规范：slideToogle([speed,[,[easing],[fn]])

<body>
	<button>下拉滑动</button>
	<button>上拉滑动</button>
	<button>切换滑动</button>
	<div></div>
	<script>
	$((function){
		$("button").eq(0).click(function(){
			//下滑动 slideDown()
			$("div").slideDown();
		})
	});
	</script>
</body>

事件切换
hover([over,]out)
（1）over：鼠标移到这个元素上要触发的函数（相当于mouseenter）
（2）out:鼠标移除元素要触发的函数（相当于mouseleave)

<body>
	<button>下拉滑动</button>
	<button>上拉滑动</button>
	<button>切换滑动</button>
	<div></div>
	<script>
	$((function){
		$(".nav>li").hover(function(){
			$(this).children("ul").slideDown(200);
		}, function(){
			$(this).children("ul").slideUp(200);
		})
	});
	</script>
</body>

进一步改进：
如果只写一个函数，那么鼠标经过或者离开都会触发这个函数

<body>
	<button>下拉滑动</button>
	<button>上拉滑动</button>
	<button>切换滑动</button>
	<div></div>
	<script>
	$((function){
		$(".nav>li").hover(function(){
			$(this).children("ul").slideToggle(200);
		})
	});
	</script>
</body>

动画或者效果一旦触发就会执行，如果多次触发，就会造成多个动画或者效果排队执行
如果遇到这种情况那我们可以停止排队
stop();
注意：stop()必须写到动画或者效果的前面，相当于停止结束上一次的动画

<body>
	<button>下拉滑动</button>
	<button>上拉滑动</button>
	<button>切换滑动</button>
	<div></div>
	<script>
	$((function){
		$(".nav>li").hover(function(){
			$(this).children("ul").stop().slideToggle(200); //这样的话不管你触发多少次，它先把你上一次的动画给你停止，不管你有没有走完，先结束了，然后再执行slideToggle()
		})
	});
	</script>
</body>

淡入淡出效果
（1）fadeIn([speed,[easing],[fn]]);淡入效果
参数都可以省略。
（2）fadeOut([speed,[easing],[fn]]);淡出效果
（3）fadeToggle([speed,[easing],[fn]]);淡入淡出切换效果
（4）渐进的方式调整到指定的不透明度
fadeTo([[speed],opacity,[easing],[fn]]);
opacity透明度必须写，取值0-1之间
speed写”slow",“normal”,"fast“或者表示动画市场毫秒的数值，必须写。

<body>
	<button>淡入效果</button>
	<button>淡出效果</button>
	<button>淡入淡出切换</button>
	<button>修改透明度</button>
	<div></div>
	<script>
		$(function(){
			$("buton").eq(0).click(function(){
				//淡入
				$("div").fadeIn();
			})
			$("buton").eq(1).click(function(){
				//淡入
				$("div").fadeTo(1000, 0.5);  //1秒钟，透明度0.5
			})
		});
	</script>
</body>

自定义动画anitmate
anitmate(params,[speed],[easing],[fn]);
params：想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法

<head>
	<style>
		div{
			position:absolute;
			width:200px;
			height:200px;
			background-color:red;
		}
	</style>
</head>
<body>
	<button>动起来</button>
	<div></div>
	$(function){
		$("button").click(function(){
			$("div").animate({
				left:200px,
				top:300px,
				opacity:.4,
			}, 500);
		})
	})
</body>

4.jQuery属性

获取元素固有属性值prop()
元素固有属性就是元素本身自带的属性，比如<a>元素里面的href,比如<input>元素里面的type
设置属性 prop("属性", "属性值")

<body>
	<a href = "httP://www.baidu.com" title = "都挺好">都挺好</a>

	<script>
		$(function(){
			//1.element.prop("属性名")获取元素固有的属性值
			console.log($("a).prop("href"));  //会得到链接的值
			$("a").prop("title", "我们都挺好");
		});
	</script>
</body>

设置或者获取元素自定义的属性值 atr()
获取:attr(“属性”)
设置：attr(“属性”,“属性值”)

<body>
	<a href = "httP://www.baidu.com" title = "都挺好">都挺好</a>
	<div index = "1">我是div</div>
	<script>
		$(function(){
			//1.element.prop("属性名")获取元素固有的属性值
			console.log($("a).prop("href"));  //会得到链接的值
			$("a").prop("title", "我们都挺好");
		});
		console.log($("div").prop("index"));  //undefined
		//2.元素的自定义属性 以及修改
		console.log($("div").attr("index"));
		$("div").attr("index", 4);
	</script>
</body>

数据缓存data()
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据都将被移除。
注意这个里面的数据是存放在元素的内存里面

<body>
	<a href = "httP://www.baidu.com" title = "都挺好">都挺好</a>
	<div index = "1" data-index = "2">我是div</div>
	<span>123</span>
	<script>
		$(function(){
			//1.element.prop("属性名")获取元素固有的属性值
			console.log($("a).prop("href"));  //会得到链接的值
			$("a").prop("title", "我们都挺好");
		});
		console.log($("div").prop("index"));  //undefined
		//2.元素的自定义属性 以及修改
		console.log($("div").attr("index"));
		$("div").attr("index", 4);
		//3.数据缓存 data()这个里面的数据是存放在元素的内存里面
		$("span").data("uname","andy");   //在DOM里面是看不见的，是放在内存里面当变量使用
		console.log($("span").data("uname")); //andy;
		console.log($("div").data("index"));  //2
	</script>
</body>

这个方法不仅可以存取数据，还可以读取html5自定义属性data-index，得到的是数字型
4. 案例：购物车案例模块-全选
点击全选案例，复选框都会选上
分析：里面三个小的复选框按钮（j-checkbx）选中状态（checked)跟着全选按钮（checkall）走
因为checked是复选框的固有属性，此时我们需要利用prop()方法和设置该属性
把全选按钮状态赋值给3小复选框就可以了
当我们每次点击小的复选框按钮，就来判断：如果小的复选框被选中的个数等于3就应该把全选按钮悬赏，否则全选按钮不选
:checked选择器查找被选中的表单元素

<body>
	<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-pricce">单价</div>
			<div class = "t-num">数量</div>
			<dic 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" name= "" id = "" checked class = "j-checkbox">
				</div>
				<div class = "p-googs">
					<div class = "p-img">
						<img src = "upload/p1.jpg" alt="">
					</div>
					<div class = "p-msg">经典儿童文学
				</div>
				<div class ="price">￥12.6</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>
		</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 = "amout-sum">已经选<em>1</em>件商品</div>
				<div class = "price-sum">总价： <em>￥126</em></div>
				<div class = "btn-area">去结算</div>
			<div>
		</div>
	</div>

	<script>
		//1.全选 全不选功能模块
		//就是把全选按钮(checkall）的状态赋值给 三个小的按钮（j-checkbox）就可以了
		//事件可以使用change 
		$(".cheakall").change(function(){
			$(".j-checkbox, .checkall").prop("checked", true);
		});
		//2.2通过小的复选框来控制全选按钮
		$(".j-checkbox").change(function(){
		//$(".j-checkbox").length这个是所有的小复选框的个数
			if($(".j-checkbox:checked").length === 3){
				$(".checkall").prop("checked",true);
			}else{
				$(".checkall").prop("checked", flase);
			}
		});
	</script>		
				
</body>

5.jQuery内容文本值

主要对元素的内容还有表单的值进行操作

普通元素内容html（）(相当于原生innerHtml）

html()   //获取元素内容
html("内容")  //设置元素的内容

<body>
	<div>
		<span>我是内容</span>
	</div>
	<input type = "text" value = "请输入内容">
	<script>
		//1.获取设置元素内容html()
		console.log($("div").html());  //<span>我是内容</span>
		$("div").html("123")
		//2.获取设置元素文本内容 text()
		console.log($("div").text());   //我是内容
		$("div").text("123");
		//3.获取设置表单值val()
		console.log($("inout").val()); //请输入内容
		$("inout").val("123");  //123
	</script>
</body>

案例：购物车增减商品数量分析
核心思路:首先声明一个变量，当我们点击+号(increment），就让这个值++,然后复制给文本框
注意:我们只能增加商品的数量，就是当前+号的兄弟文本框（itxt)的值
修改表单的值是val()方法
另外这个变量的初始值应该是这个文本框的值，在这个值的基础上++.要获取表单的值

6.jQuery元素操作

主要是遍历、创建、添加、删除元素操作

遍历元素jquery隐式迭代是对同一类元素做了相同的操作。如果想要给同一类元素做不同的操作，就需要用到遍历。
（1）语法1:$("div").each(function(index,domEle){xxx;});
each()方法遍历匹配的每一个元素，主要用DOM处理。index是每个元素的索引号，demEle是每个DOM元素对象，不是jquery对象

//三个div不同的颜色
<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<script>
		$(function(){
			//$("div").css("color", "red");
			//如果针对同一类元素做不同的操作，需要用到遍历元素（类似for,但是比for强大)
			//1.each()方法遍历元素
			var arr = ["red", "green", "blue"];
			var sum = 0;
			$("div").each(function(index, domEle){
				//回调函数第一个参数一定是索引号  也可以自己指定索引号名称
				console.log(index);
				//回调函数第二个参数一定是dom元素对象
				console.log(domEle); //会获取每一个元素 <div>1</div>
				//domEle.css("color");这样会报错，dom对象没有css方法
				//$(domEle).css("color", "blue");这样才能行
				$(domEle).css("color", arr[i]);
				sum += parseInt($(domEle).text()); //求和
			})
		})
	<script>
	
</body>

（2）$.each(object, function(index, element){ xxx;});
$.each()方法可以用于遍历任何对象。主要用于数据处理，比如数组，对象
里面有两个参数：index是每个元素的索引号，element遍历内容

//三个div不同的颜色
<body>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<script>
		var arr = ["red", "green", "blue"];
		$(function(){
			//2.$.each()方法遍历元素，主要用于遍历数据，处理数据
			$.each($("div"), function(i, ele){
				console.log(i);  //012
				console.log(ele);
			})
		})
		$.each(arr, function(i, ele){
			logsole.log(i);
			console.log(ele);
		})
		$.each({name: "andy", age :18}, function(i, ele){  //遍历对象
			logsole.log(i);  //输出属性名
			console.log(ele);  //输出属性值
		})
	<script>
	
</body>

创建元素
$("<li></li>");
添加元素
内部添加元素，生成之后，他们是父子关系
外部添加元素，生成之后，他们是兄弟关系
（1）内部添加
element.append("内容");把元素放入匹配元素内部最后面，类似原生appendChild
element.prepend("内容");把元素放入匹配元素内部最前面，
（2）外部添加
element.affter("内容"); 把内容放入目标元素后面
element.before("内容"); 把内容放入目标元素前面
删除元素
element.remove() 删除匹配的元素（本身)
element.empty() 删除匹配元素集合中所有的子节点
element.html('' '') 清空匹配的元素内容

<body>
	<ul>
		<li>原先的li</li>
	</ul>
	<div class = "test">我是原先的div</div>
	<script>
		$(function(){
			//1.创建元素
			var li = $("<li>我是后来创建的</li>");
			//2.添加元素
			//(1)内部添加
			$("ul").append(li);
			$("ul").prepend(li);

			//(2)外部添加
			var div = $("<div>我是后发生的</div>");
			$("test").after(div);

			//3.删除元素
			$("ul").remove();  //可以删除匹配的元素 自杀
			$("ul").empty(); //只是里面的文字没有了，但是这个ul还是有的，所以这种方法是删除匹配元素里面的子节点 孩子
			$("ul").html("");  //作用和empty一样
		})
	</script>
</body>

7.jQuery元素尺寸、位置

jquery尺寸
width()/height() 取得匹配元素宽度和高度值只算width/height
innerWidth()/innerHeight() 取得匹配元素宽度和高度值包含padding
outerWidth()/ outerHeight() 取得匹配元素宽度和高度值包含padding、border
outerWidth(true)`outerHeight(true) 取得匹配元素宽度和高度值包含padding、border、margin`
以上参数为空，则是获取相应值，返回的是数字型
如果参数为数字，则是修改相应值
参数可以不用写单位

<head>
	<style>
		div{
			width:200px;
			height:200px;
			background-color:pink;
			padding:10px;
			border:15px solid red;
			margin:20px;
		}
	</style>
	<script src = "jquery.min.js"></script>
</head>
<body>
	<div></div>
	<script>
		$(function(){
			console.log($("div").width());  //200
			$("div").width(300);  //这样就会被改成300
			console.log($("div").innerWidth()); //320
			console.log($("div").outerWidth(true));//包含marigin值  290
		})
	</script>
</body>

jquery位置
位置主要有三个：offset()、position()、scrollTop()/scrollLeft()
（1）offset()设置或获取元素偏移
①offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
②该方法有2个属性left、top.offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离
③可以设置元素的偏移
（2）position()获取元素偏移
①position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
②这个方法只能获取不能设置偏移

<head>
	<style>
		.father{
			width:400px;
			height:400px;
			background-color:pink;
			margin:100px;
			overflow:hidden;
		}
		.son{
			width:150px；
			height：150px
			background-coloe:purple;
		}
	</style>
</head>
<body>
	<div class = "father">
		<div class = "son"></div>
	</div>
	<script>
		$(function){
			//1.获取设置距离文档的位置（偏移）offset
			console.log($(".son").offset()); //返回一个object，理由有left和top,
			console.log($(".son").offset().top);  
			$(".son").offset({
				top: 200,
				left:200
			});
			//2.获取距离带有定位父级位置(偏移) position
			console.log($(".son").position());
		})
	</script>
</body>

（3）scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
①scrollTop\scrollLeft设置或者返回被选元素被卷去的头部

<body>
	<div class = "back">返回顶部</div>
	<div class = "container">
	</div>
	<script>
		$(function(){
			//window进行了滚动
			$(window).scroll(function(){
				$(document).scrollTop();
			})
		})
	</script>
</body>

四、jQuery事件

1.jquery事件注册

以前所学都是单个事件
elemnent.事件(function(){});这样很麻烦

2.jquery事件处理

事件处理on()绑定事件
on()方法在匹配元素上绑定一个或多个事件的事件处理函数
element.on(events, [selector], fn);
events:一个或多个用空格分隔的事件类型，如"click"或"keydown“
selector:元素的子元素选择器
on方法优点：
①可以绑定多个事件，多个处理事件处理程序

<body>
	<div></div>
	<script>
		$(function(){
			//1.单个事件注册
			$("div").click(function(){
				$(this).css("background", "purple");
			});
			$("div").mouseover(function(){
				$(this).css("background", "skyblue");
			});

			//上面这样很麻烦
			//事件处理on
			//多个事件
			$("div").on({
				mouseenter:function(){
					$(this).css("background", "skyblue");
				}
				click:function(){
					$(this).css("background", "purple");
				}
		})
	</script>
</body>

②可以实现事件委派操作。事件委派的定义就是，把原来加给元素身上的事件绑定在父元素身上，就是把事件委派给父元素

<body>
	<div></div>
	<ul>
		<li>我们都是好孩子</li>
		<li>我们都是好孩子</li>
		<li>我们都是好孩子</li>
		<li>我们都是好孩子</li>
		<li>我们都是好孩子</li>
	</ul>
	<script>
		$(function(){
			//以前的写法
			//$("ul ;i").click();  //相当于是用隐式迭代给每一个小li添加了绑定事件
			$("ul").on("click", "li", function(){  //使劲按是绑定在ul身上的，只有ul这个元素添加了点击事件，但是触发对象是li,就是点了li才会触发。当点了li，会有事件冒泡，事件冒泡会冒到父亲身上，有一个点击事件，那么就会执行后面的回调函数
				alert(11);
			});
			
		})
	</script>
</body>

③动态创建的元素，click()没有办法绑定事件，on()可以给动态生成的元素绑定事件

<body>
	<div></div>
	<ul>
		<li>我们都是好孩子</li>
		<li>我们都是好孩子</li>
		<li>我们都是好孩子</li>
		<li>我们都是好孩子</li>
		<li>我们都是好孩子</li>
	</ul>
	<ol>
	</ol>
	<script>
		$(function(){
			//以前的写法,这种写法的缺点就是没办法动态创建点击事件，因为这个li是后来创建的，那么点击并不会有弹窗
			$("ol li").click(function(){
				alter(11);
			})
			var li = $("<li>我是后来创建的</li>");
			$("ol").appedn(li)
			//用on,所以On可以给未来动态创建的元素绑定事件
			$("ol").on("click","li",function(){
				alert(11);
			})
			var li = ${"<li>我是后来创建的</li>");
			$("ol").append(li);
		})
	</script>
</body>

发布微博案例
核心思路:①点击发布按钮，动态创建一个小li，放入文本框的内容和删除按钮，并且添加到ul中
②点击删除按钮，可以删除当前的微博留言

<body>
	<div class = "box" id = "weibo">
		<span>微博发布</span>
		<textarea name = "" class = "txt" cols = "30" row = "10"></textarea>  //文本框
		<button class = "btn">发布</button>   //发布按钮
		<ul>  
		</ul>
	</div>
	<script>
		$(function(){
			//1.点击发布按钮  动态创建一个小li，放入文本框的内容和删除按钮，并且添加到Ul中
			$(".btn").on("click", funfction(){
				var li  = $("<li></li>");
				li.html($:".txt").val() + "<a href = 'javascript:;'>删除</a>);
				$("ul").prepend(li);
				li.slideDown(); //滑动出来
				$(".txt").val("");
			})
			//2.点击删除按钮，可以删除当前的微博留言li
			$("ul").on("click", a, (function(){
				//$(this).parent().slideUp();//瞬间看不见了，但是主要他并没有真正删掉，还是存在的，只是页面上看不见
				$(this).parent().slideUp(function(){
					$(this).remove();
				});
			})
		})
	</script>
</body>

事件处理off()解绑事件
off()方法可以移除通过on()方法添加的事件处理程序

<body>
	<div></div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	<script>
		$(function(){
			$("div").on({
				click：function(){
					console.log("我点击了");
				};
				mouseover:function(){
					console.log('我鼠标经过了');
				}
		});

		//事件解绑
		$("div").off();  //将div上所有的事件解绑
		$("div").off("click");  //这是解除了div身上的点击事件

		//事件委托的解绑
		$("ul").on("click","li",function(){
			alert(1);
		});
		$("ul").off("click", "li");
	</script>
</body>

如果有的事件只想触发一次，可以使用one()来绑定事件。使用方法与off()基本一样，但只能触发一次

<body>
	<div></div>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
	</ul>
	<p>我是p</p>
	<script>
		$(function(){
			$("div").on({
				click：function(){
					console.log("我点击了");
				};
				mouseover:function(){
					console.log('我鼠标经过了');
				}
		});

		//事件解绑
		$("div").off();  //将div上所有的事件解绑
		$("div").off("click");  //这是解除了div身上的点击事件

		//事件委托的解绑
		$("ul").on("click","li",function(){
			alert(1);
		});
		$("ul").off("click", "li");

		//2.one()
		$("p").one("click",function(){ //只触发一次
			alert(11);
		})
	</script>
</body>

自动触发事件trigger()
有的事件希望自动触发，比如轮播图自动播放功能跟点击右侧按钮一直。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发
（1）element.click();
（2）element.trigger("type"); //第二个自动触发模式
（3）element.triggerHandler(type） //第三种

<head>
	<style>
		.div{
			width:200px;
			height:100px;
			background-color:pink;
		}
	</style>
</head>
<body>
	<div></div>
	<input type = "text">
	<script>
		$(function(){
			$("div").on("click", function(){
				alert(11);
			})
			//自动触事件
			//第一种方式1.元素.事件()
			$("div").click(); //一刷新页面就自动调用click
			//第二种方式2.元素.trigger("事件")
			$("div").trigger("click");
			//第三种3.元素.triggerHandler("事件")  区别在于这种不会触发元素的默认行为
			$("div").triggerHandler("click");
			
			$("input").on("focus", function(){  //会有光标一闪一闪的
				$(this).val("你好吗");
			})
			$("input").triggerHandler("focus");  //没有光标
		})
	</script>
</body>

3.jQuery事件对象

只要有事件被触发，就会有事件对象的产生
比如回调函数的e就是事件对象

五、jQuery其他方法

1.jQuery拷贝对象

如果想要把某个对象拷贝（合并)给另外一个对象使用，此时可以使用$.extend()方法
语法:$.extend([deep], target, object1, [objectN]);

deep:如果设为true为深拷贝，默认为false浅拷贝
target:要拷贝的目标对象
object1：待拷贝到第一个对象的对象
objectN：待拷贝到第n个对象的对象
浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响拷贝对象
深拷贝，前面加true，完全克隆（拷贝的对象，而不是地址），修改目标对象不会影响被拷贝对象如果里面有不冲突的属性，会合并到一起

<body>
	<script>
		$(function(){
			var targetObj = {};  //想要将obj复制给它
			var obj = {
				id:1,
				name:"andy"
			};
			$.extend(targetObj, obj);
			console.log(targetObj); //成功拷贝
			
			//如果targetObj原来就有数据了呢
			var targetObj = {
				id:0
			};  //想要将obj复制给它
			var obj = {
				id:1,
				name:"andy"
			};
			$.extend(targetObj, obj);
			console.log(targetObj); //成功拷贝,会将原先的内容覆盖掉

			//如果数据比较复杂呢
			var targetObj = {
				id:0
			};  //想要将obj复制给它
			var obj = {
				id:1,
				name:"andy"，
				msg：{
					age：18
				}
			};
			$.extend(targetObj, obj);
			console.log(targetObj); //成功拷贝,会全部合并过去
			targetObj.msg.age = 20;
			console.log(targetObj);//20
			console.log(obj);//20,也会跟着一起变，因为他们指向的是同一个值
		})
	</script>
</body>

2.多库共存

jquery使用 $作为标识符，随着 j q u ery 的流行，其他 j s 库也会用$ 作为标识符，这样一起用就会引起冲突
客观需求：需要一个解决方案，让jquery和其他的js库不存在冲突，可以同时存在，这就叫做多库共存
jquery解决方案：①同一将里面的 $符号改为 j Q u ery ，比如 j Q u ery (^{'} d i v^{'}) ② j q u ery 变量规定新的名称 :$ .noConflict()

3.jQuery插件

必须先引入jquery文件，才能使用插件
jquery插件库 http://www.jq22.com/
jquery之家 http://www.htmleaf.com/
jquery插件使用步骤:1.引入相关文件（jquery文件和插件文件).2,复制相关html\css\js（调用插件）

图片懒加载（图片使用延迟加载在可提高网页下载速度，它也能帮助减轻服务器负载)
当我们页面滑动到可视区域，再显示图片
bootstrap Js插件
bootstrap框架也是依赖于jquery开发的，因此里面的js插件使用，也必须引入jquery文件

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset = "UTF-8">
	<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
	<meta http-equiv = "X-UA-Compatible" content="ie==edge">
	<title>Document</title>
	<link rel = "stylesheet" href = "bootstrap/css/bootstrap.min.css">
	<script src = "bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<div class="container"></div>  //复制的内容放在里面
</body>

、、、

小小小丸子呀

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础知识之jQuery

网址：jquery点击下载后将代码复制，新建一个json文件，将复制的内容粘贴过去jQuery的入口函数①等着DOM结构熏染完毕即可执行内部代码，不必等到所有资源加载完成，jQuery帮我们完成了封装②相当于我们原生js中的DOMContentLoaded③不同于原生js中的load事件是等页面文档、外部的js文件、css文件、图片加载完毕才执行内部代码3.jQuery的顶级对象其中是jQuery的别称，在代码中可以使用jQuery来代替,但一般为了方便，通常直接使用是jQuery的
复制链接

扫一扫