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对象包装后产生的对象（伪数组形式存储）
//1.DOM对象：用原生js获取过来的对象就是DOM对象
var myDiv=document.querySelector('div'); //myDiv 是 DOM 对象
//2.jquery对象：用jquery方式获取的对象就是jquery对象。
$('div'); //$('div')是一个jquery对象
//3.jquery对象只能使用jQuery方法，DOM对象只能使用JavaScript属性和方法
myDiv.style.display="none";
//$('div').style.display="none"; $('div')是jQuery对象不能使用元素js方法
DOM对象和jQuery对象之间是可以相互转换的。
因为原生js比jquery更大，原生的一些属性和方法jQuery没有给我们封装，要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
- DOM对象转换为jQuery对象：$（DOM对象）不加引号
$('div') - jQuery转换为DOM对象：
$('div')[index] //index是索引号 $('div').get(index) //index是索引号
二、jQuery常用API
1. jQuery选择器
原生js有很多方式，兼容性不同，因此jQuery给我们做了封装，使用获取元素统一标准
$("选择器") //里面选择器直接写css选择器即可，但是要加引导
1.1 隐式迭代
遍历内部DOM元素（伪数组幸形式存储）的过程就叫做隐式迭代
简单理解：给匹配道德所有元素进行循环遍历，执行相应的方法，而不用我们在进行循环，简化我们的操作方便我们调用。
1111
1111
1111
1111
- 2222
- 2222
- 2222
- 2222
1.2 jQuery筛选选择器
- 筛选li
- 筛选li
- 筛选li
- 筛选li
- 筛选li
- 筛选li
- 筛选li
- 筛选li
- 筛选li
- 筛选li
1.3 jQuery筛选方法（重点）
儿子
- 我是ol的li
- 我是ol的li
- 我是ol的li
- 我是ol的li
1.4 jQuery排他思想
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" })
2.2 设置类样式方法
作用同以前的classList，可以操作类样式，主要操作类里面的参数不要加点。
案例——tab栏切换
- 商品介绍
- 规格与包装
- 售后保障
- 商品评价（50000）
- 手机社区
商品介绍模块内容
规格与包装模块内容
售后保障模块内容
商品评价（50000）模块内容
手机社区模块内容
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
所谓元素固有属性是元素本身自带的属性，比如里面的href
获取属性值
prop('属性')设置属性值
prop('属性','属性值')7.2 自定义属性attr
获取属性值
attr('属性') //类似原生getAttribute设置属性值
attr('属性','属性值') //类似原生setAttribute7.3 数据缓存data
data()方法可以在指定的元素上存取数据，并不会修改DOM元素结构，一旦页面刷新，之前存放的数据将被删除。
附加数据语法
data("name","value"); 获取数据语法
data("name")同时还可以读取HTML5自定义属性data-index，得到的是数字型
案例——购物车-全选
$(function(){
// 1.全选 ,把全选按钮状态赋值给三个小的按钮
$(".checkall").change(function(){
// console.log( $(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){……});
1
2
3
语法2：
$.each(object,function(index,demEle){……});
1
2
3
案例——购物车-总计总额
//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 创建元素
$("");9.3 添加元素
9.4 删除元素
案例——购物车-删除商品
jQuery尺寸、位置操作