JavaScript——jQuery

一、jQuery概述

1. JavaScript库

2. jQuery概述

3. jQuery优点

4. jQuery的入口函数

5. jQuery的*对象 $

6. jQuery对象和DOM对象

二、jQuery常用API

1. jQuery选择器

1.1 隐式迭代

1.2 jQuery筛选选择器

1.3 jQuery筛选方法（重点）

1.4 jQuery排他思想

1.5 链式编程

2. jQuery样式操作

2.1 操作css方法

2.2 设置类样式方法

案例——tab栏切换

2.3 类操作与className区别

三、jQuery效果

1. 显示隐藏效果

1.1 显示语法规范

1.2 隐藏语法规范

1.3 切换语法规范

1.4 显示参数

2. 滑动效果

2.1 下滑效果语法

2.2 上滑效果语法

2.3 滑动切换

2.4 显示参数

3. 事件切换

4. 动画队列及停止方法

4.1 动画或效果队列

4.2 停止排队

5. 淡入淡出效果

6. 自定义动画

6.1 语法

6.2 参数

7. jQuery属性操作

7.1 设置或获取元素固有属性prop

7.2 自定义属性attr

7.3 数据缓存data

案例——购物车-全选

8. jQuery文本属性值

8.1 普通元素内容html()（相当于原生innerHTML）

8.2 普通元素文本内容text()（相当于原生innerText）

8.3 表单的值val()（相当于原生value）

案例——购物车-增减商品数量

案例——购物车-修改商品小计

9. jQuery元素操作

9.1 遍历元素

案例——购物车-总计总额

9.2 创建元素

9.3 添加元素

9.4 删除元素

一、jQuery概述

1. JavaScript库

即library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在库中，封装了很多预先定义好的函数在里面，比如animate，hide，show，获取元素等。

常见JavaScript库：jQuery，prototype，YUI，Dojo，Ext JS，移动端zepto

这些库都是对原生JavaScript的封装，内部都是JavaScript实现的，我们主要学习的是jQuery。

2. jQuery概述

jQuery是一个快速，简洁的JavaScript库，其宗旨是“write less，do more”，即提倡写更少的代码，做更多的事情。

j就是JavaScript，query是查询。就是把JS中DOM操作做了封装，我们可以快速查询使用里面的功能。

jQuery封装了JavaScript常用的功能代码，优化了DOM操作、事件处理、动画设计和Ajax交互。

学习jQuery的本质：就是学习调用这些函数。

3. jQuery优点

轻量级。核心文件才即几十kb
跨浏览器兼容。基本兼容主流浏览器
链式编程、隐式迭代
对事件、样式、动画支持，大大简化了DOM操作
支持插件扩展开发。有着丰富的第三方插件，例如：树形菜单、日期控件、轮播图等
免费、开源

4. jQuery的入口函数




//（方法1）等dom加载完再去执行js



$(document).ready(function(){



	……



})



 



// (方法2)等dom加载完再去执行js



$(function(){



	……



})

等着DOM结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完毕，jQuery帮我们实行了封装
相当于原生js中的DOMContentLoad
不同于原生load事件，load事件是等页面文档、外部js文件、css文件、图片加载完毕才执行内部代码
更推荐第二种方式

5. jQuery的*对象 $

$是jQuery的别称，在代码中jQuery可以代替$，为了方便通常使用$
$是jQuery的*对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就是可调用jQuery方法了。

6. jQuery对象和DOM对象

用原生JS获取来的对象就是DOM对象
jquery方法获取的元素就是jquery对象
jQuery对象本质是：利用$对DOM对象包装后产生的对象（伪数组形式存储）




//对象：用原生js获取过来的对象就是DOM对象




var myDiv=document.querySelector('div');	//myDiv 是 DOM 对象




 



//对象：用jquery方式获取的对象就是jquery对象。



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




 



//对象只能使用jQuery方法，DOM对象只能使用JavaScript属性和方法



myDiv.style.display="none";



//$('div').="none";	$('div')是jQuery对象不能使用元素js方法

DOM对象和jQuery对象之间是可以相互转换的。

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

DOM对象转换为jQuery对象：$（DOM对象）不加引号
```
$('div')
```

jQuery转换为DOM对象：




$('div')[index]    //index是索引号




$('div').get(index)    //index是索引号




    <body>



		<video src="video/onetap.mp4" muted></video>




		<script type="text/javascript">




			//jQuery对象




			$('video');



			//dom对象




			var myVideo=document.querySelector('video');



			// ();




			//jQuery无法使用play方法




			// $('video').play();	//用法错误




			//要将jQuery对象转换为DOM对象，再使用play方法




			$('video')[0].play();



			$('video').get(0).play();



		</script>




	</body>

二、jQuery常用API

1. jQuery选择器

原生js有很多方式，兼容性不同，因此jQuery给我们做了封装，使用获取元素统一标准

$("选择器")    //里面选择器直接写css选择器即可，但是要加引导

1.1 隐式迭代

遍历内部DOM元素（伪数组幸形式存储）的过程就叫做隐式迭代

简单理解：给匹配道德所有元素进行循环遍历，执行相应的方法，而不用我们在进行循环，简化我们的操作方便我们调用。




	<body>



		<div>1111</div>




		<div>1111</div>




		<div>1111</div>




		<div>1111</div>




		<ul>




			<li>2222</li>




			<li>2222</li>




			<li>2222</li>




			<li>2222</li>




		</ul>




	</body>



	<script type="text/javascript">




		console.log($("div"));



		



		//给四个div设置背景颜色，jquery对象不能使用style




		$("div").css("background", "pink");



		



		//隐式迭代把所有元素进行内部循环，




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



	</script>

1.2 jQuery筛选选择器




	<body>



		<ul>




			<li>筛选li</li>




			<li>筛选li</li>




			<li>筛选li</li>




			<li>筛选li</li>




			<li>筛选li</li>




		</ul>




		<ol>




			<li>筛选li</li>




			<li>筛选li</li>




			<li>筛选li</li>




			<li>筛选li</li>




			<li>筛选li</li>




		</ol>




	</body>



	<script type="text/javascript">




		$(function() {



			$("ul li:first").css("color", "red");



			$("ul li:eq(2)").css("color", "blue");



			$("ol li:odd").css("color", "yellow");



		})



	</script>

1.3 jQuery筛选方法（重点）




<body>



	<div class="grandfather">




		<div class="father">




			<div class="son"> 儿子</div>




		</div>




	</div>




	<div class="nav">




		<p>我是P</p>




		<div>




			<p>ppp</p>




		</div>




	</div>




	<ol>




		<li>我是ol的li</li>




		<li>我是ol的li</li>




		<li class="item">我是ol的li</li>




		<li>我是ol的li</li>




	</ol>




</body>



<script type="text/javascript">



	$(function() {



		//1.父




		console.log($(".son").parent());



		



		//2.子




		// (1)亲儿子




		console.log($(".nav").children("p").css("color","red"));



		//(2)所有后代




		console.log($(".nav").find("p").css("color","red"));



		



		//3.兄




		$("ol .item").siblings("li").css("color","red");



		



		//4.第n个元素




		// (1)选择器方法




		var index=2;



		$("ol li:eq(2)").css("color","blue");



		$("ol li:eq("+index+")").css("color","blue");



		//(2)选择方法的方式（推荐）




		$("ol li").eq(2).css("color","blue");



		$("ol li").eq(index).css("color","blue");



		



		//5.判断是否有类名




		console.log( $("ol li").eq(index).hasClass("item"));



	})



</script>

1.4 jQuery排他思想




<body>



 	<button>11</button>




	<button>11</button>




	<button>11</button>




	<button>11</button>




	<button>11</button>




	<button>11</button>




 </body>



 <script type="text/javascript">




 	$(function(){



		$("button").click(function(){



			$(this).css("background","pink");



			$(this).siblings("button").css("background","");



		})



	})



 </script>

1.5 链式编程

目的节约代码量

使用链式编程一定注意是哪个对象执行样式。




$(function() {



	$("button").click(function() {



		// 	$(this).css("color","pink");




		// $(this).siblings().css("color","");




        //链式编程




		$(this).css("color","pink").siblings().css("color","");



	})



})

2. jQuery样式操作

2.1 操作css方法

参数只写属性名，则返回属性值
```
$(this).css('width'))
```
参数是属性名，属性值，逗号分隔，是设置一组样式，属性必加引号，只如果是数字可以不加单位和引号
```
$('div').css('width',400);
```
参数可以是对象形式，方便设置多种样式。属性名和属性值用冒号隔开，属性可以不用加引号。复合属性名用驼峰命名法。
```
$("div").css({



	width:500,



	height:500,



	backgroundColor:"red"




})
```




<style type="text/css">



div{



	width: 200px;



	height: 200px;



	background-color: pink;



}



</style>



<body>




<div></div>





<script type="text/javascript">




	$(function(){



		console.log($('div').css('width')) ;



		$('div').css('width',400);



		$("div").css({



			width:500,



			height:500,



			backgroundColor:"red"




		})



	})



</script>



</body>

2.2 设置类样式方法

作用同以前的classList，可以操作类样式，主要操作类里面的参数不要加点。




<style type="text/css">



	div {



		width: 150px;



		height: 150px;



		background-color: pink;



		margin: 100px auto;



		transition: all 0.5s;



	}



 



	.current {



		background-color: red;



		transform: rotate(360deg);



	}



</style>



<body>



	<div></div>




	<script type="text/javascript">




		$(function() {



			//1.添加类addClass()




			$('div').click(function() {



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



			})



			//2.删除类removeClass（）




			$('div').click(function() {



				$(this).removeClass("current");



			})



			// 3.切换类toggleClass（）




			$("div").click(function() {



				$(this).toggleClass("current");



			})



		})



	</script>

案例——tab栏切换




    <style>



        * {



            margin: 0;



            padding: 0;



        }



        



        li {



            list-style-type: none;



        }



        



        .tab {



            width: 978px;



            margin: 100px auto;



        }



        



        .tab_list {



            height: 39px;



            border: 1px solid #ccc;



            background-color: #f1f1f1;



        }



        



        .tab_list li {



            float: left;



            height: 39px;



            line-height: 39px;



            padding: 0 20px;



            text-align: center;



            cursor: pointer;



        }



        



        .tab_list .current {



            background-color: #c81623;



            color: #fff;



        }



        



        .item_info {



            padding: 20px 0 0 20px;



        }



        



        .item {



            display: none;



        }



    </style>



    <script src=""></script>




</head>



 



<body>



    <div class="tab">




        <div class="tab_list">




            <ul>




                <li class="current">商品介绍</li>




                <li>规格与包装</li>




                <li>售后保障</li>




                <li>商品评价（50000）</li>




                <li>手机社区</li>




            </ul>




        </div>




        <div class="tab_con">




            <div class="item" style="display: block;">




                商品介绍模块内容



            </div>




            <div class="item">




                规格与包装模块内容



            </div>




            <div class="item">




                售后保障模块内容



            </div>




            <div class="item">




                商品评价（50000）模块内容



            </div>




            <div class="item">




                手机社区模块内容



            </div>




 



        </div>




    </div>




    



</body>



<script type="text/javascript">



	$(function(){



		// 1.点击上部li，当前li添加current类，其余兄弟移除




		$(".tab_list li").click(function(){



			$(this).addClass("current").siblings().removeClass("current");



			//2.点击同时，得到当前li的索引号




			var index=$(this).index();



			//3.让下部里面相应的索引号item显示，其余隐藏




			$(".tab_con .item").eq(index).show().siblings().hide();



		})



		



	})



</script>

2.3 类操作与className区别

原生JS中className会覆盖元素原先里面的类名。

jQuery里面类操作只是对指定类进行操作，不影响原先类名

三、jQuery效果

jQuery给我们封装了很多动画效果，常见如下：

1. 显示隐藏效果

1.1 显示语法规范

show([speed],[easing],[fn]);

1.2 隐藏语法规范

hide([speed],[easing],[fn]);

1.3 切换语法规范

toggle([speed],[easing],[fn]);

1.4 显示参数

2. 滑动效果

2.1 下滑效果语法

slideDown([speed],[easing],[fn]);

2.2 上滑效果语法

slideUp([speed],[easing],[fn]);

2.3 滑动切换

slideToggle([speed],[easing],[fn]);

2.4 显示参数

3. 事件切换

hover([over],out);

鼠标经过的鼠标离开的复合写法




//1.事件切换



$(".nav>li").hover(function(){



	$(this).children("ul").slideDown(200);



},function(){



	$(this).children("ul").slideUp(200);



})




//2.简写



$(".nav>li").hover(function() {



	$(this).children("ul").slideToggle(200);



})

4. 动画队列及停止方法

4.1 动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或效果排队执行。

4.2 停止排队

stop()

stop()方法用于停止动画或效果
注意：stop（）写到动画或者效果的前面，相当于停止结束上一次动画。




$(".nav>li").hover(function() {



	$(this).children("ul").stop().slideToggle(200);



})

5. 淡入淡出效果

6. 自定义动画

6.1 语法

animate(params,[speed],[easing],[fn])

6.2 参数

7. jQuery属性操作

7.1 设置或获取元素固有属性prop

所谓元素固有属性是元素本身自带的属性，比如<a>里面的href

获取属性值

prop('属性')

设置属性值

prop('属性','属性值')

7.2 自定义属性attr

获取属性值

attr('属性')    //类似原生getAttribute

设置属性值

attr('属性','属性值')    //类似原生setAttribute

7.3 数据缓存data

data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据将被删除。

附加数据语法

data("name","value");

获取数据语法

data("name")

同时还可以读取HTML5自定义属性data-index，得到的是数字型

案例——购物车-全选




$(function(){



	// 1.全选 ,把全选按钮状态赋值给三个小的按钮




	$(".checkall").change(function(){



		// ( $(this).prop("checked"));




		$(".j-checkbox").prop("checked",$(this).prop("checked"));1




	})



	// 通过小复选框控制全选按钮




	$(".j-checkbox").change(function(){



		// if(被选中小复选框个数 === 3){




		// 	就选中全选按钮




		// }else{




		// 	不选中全选按钮




		// }




		// $(".j-checkbox").length所有小复选框个数




		if($(".j-checkbox:checked").length === $(".j-checkbox").length){



			$(".checkall").prop("checked",true);



		}else{



			$(".checkall").prop("checked",false);



		}



	})



})

8. jQuery文本属性值

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

8.1 普通元素内容html()（相当于原生innerHTML）





html()    //获取





html("内容")    //设置

8.2 普通元素文本内容text()（相当于原生innerText）





text();    //获取





text("内容")    //设置

8.3 表单的值val()（相当于原生value）





value()    //获取





value("内容")    //设置

案例——购物车-增减商品数量




$(".increment").click(function() {



	//得到当前兄弟文本框的值




	var n = $(this).siblings(".itxt").val();



	n++;



	$(this).siblings(".itxt").val(n);



});



// 减



$(".decrement").click(function() {



    //得到当前兄弟文本框的值




    var n = $(this).siblings(".itxt").val();



	if (n == 1) {



		return false;



	}



	n--;



	$(this).siblings(".itxt").val(n);



});

案例——购物车-修改商品小计




// 3.增减商品数量



// 增



$(".increment").click(function() {



	//得到当前兄弟文本框的值




	var n = $(this).siblings(".itxt").val();



	n++;



	$(this).siblings(".itxt").val(n);



	// 4.修改当前商品小计




	// 当前商品价格




	// var price = $(this).parent().parent().siblings(".p-price").html();




	var price = $(this).parents(".p-num").siblings(".p-price").html();



	price = price.substr(1);



	// 保留两位小数




	$(this).parents(".p-num").siblings(".p-sum").html("￥" + (price * n).toFixed(2));



});



// 减



$(".decrement").click(function() {



	//得到当前兄弟文本框的值




	var n = $(this).siblings(".itxt").val();



	if (n == 1) {



		return false;



	}



	n--;



	$(this).siblings(".itxt").val(n);



	// 4.修改当前商品小计




	// 当前商品价格




	var price = $(this).parents(".p-num").siblings(".p-price").html();



	price = price.substr(1);



	$(this).parents(".p-num").siblings(".p-sum").html("￥" + (price * n).toFixed(2));



})



 



 



// 5.用文本框修改小计值



$(".itxt").change(function(){



	// 先得到文本框里面的值 乘以 当前商品数量




	// 文本框修改后的值




	var n=$(this).val();



	// 商品单价




	var price = $(this).parents(".p-num").siblings(".p-price").html();



	price = price.substr(1);



	$(this).parents(".p-num").siblings(".p-sum").html("￥" + (price * n).toFixed(2));



})

9. jQuery元素操作

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

9.1 遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，需要遍历。

语法1：

$("div").each(function(index,demEle){……});




<body>



	<div>1</div>




	<div>2</div>




	<div>3</div>




	<script type="text/javascript">




		$(function() {



			// 第一个参数索引号，可以自定义




			// 第二个元素是dom元素对象




			var sum=0;



			var arr = ["red", "green", "blue"];



			$("div").each(function(i, domEle) {



				$(domEle).css("color", arr[i]);



				sum+=parseInt($(domEle).text()) ;



				console.log(sum);



			})



		})



	</script>




</body>

语法2：

$.each(object,function(index,demEle){……});




<body>



	<div>1</div>




	<div>2</div>




	<div>3</div>




	<script type="text/javascript">




		$(function() {



            var sum = 0;



			var arr = ["red", "green", "blue"];



			// 方法2




			$.each($('div'),function(i,domEle){



				$(domEle).css("color", arr[i]);



				sum += parseInt($(domEle).text());



				console.log(sum);



			})



			$.each(arr,function(i,ele){



				console.log(i);



				console.log(ele);



			})



			$.each({name:"andy",



				age:18




			},function(i,ele){



				console.log(i);



				console.log(ele);



			})



		})



	</script>




</body>

案例——购物车-总计总额




//6.总计总额模块



 




getSum();	//先调用一遍





function getSum(){



	var count=0;	//总件数




	var money=0;	//总额




	$(".itxt").each(function(i,ele){



		count+=parseInt($(ele).val());



	})



	$(".amount-sum em").text(count);



	$(".p-sum").each(function(i,ele){



		money+=parseFloat($(ele).text().substr(1));



	});



	$(".price-sum em").text("￥"+money.toFixed(2));



}

9.2 创建元素

$("<li></li>");

9.3 添加元素

9.4 删除元素

案例——购物车-删除商品

jQuery尺寸、位置操作

JavaScript——jQuery

一、jQuery概述

1. JavaScript库

2. jQuery概述

3. jQuery优点

4. jQuery的入口函数

5. jQuery的*对象 $

6. jQuery对象和DOM对象

二、jQuery常用API

1. jQuery选择器

1.1 隐式迭代

1.2 jQuery筛选选择器

1.3 jQuery筛选方法（重点）

1.4 jQuery排他思想

1.5 链式编程

2. jQuery样式操作

2.1 操作css方法

2.2 设置类样式方法

案例——tab栏切换

2.3 类操作与className区别

三、jQuery效果

1. 显示隐藏效果

1.1 显示语法规范

1.2 隐藏语法规范

1.3 切换语法规范

1.4 显示参数

2. 滑动效果

2.1 下滑效果语法

2.2 上滑效果语法

2.3 滑动切换

2.4 显示参数

3. 事件切换

4. 动画队列及停止方法

4.1 动画或效果队列

4.2 停止排队

5. 淡入淡出效果

6. 自定义动画

6.1 语法

6.2 参数

7. jQuery属性操作

7.1 设置或获取元素固有属性prop

7.2 自定义属性attr

7.3 数据缓存data

案例——购物车-全选

8. jQuery文本属性值

8.1 普通元素内容html()（相当于原生innerHTML）

8.2 普通元素文本内容text()（相当于原生innerText）

8.3 表单的值val()（相当于原生value）

案例——购物车-增减商品数量

案例——购物车-修改商品小计

9. jQuery元素操作

9.1 遍历元素

案例——购物车-总计总额

9.2 创建元素

9.3 添加元素

9.4 删除元素

案例——购物车-删除商品

相关文章