本文详细介绍了jQuery的核心概念，包括jQuery库的用途、优点和入门知识，强调了jQuery对象和DOM对象的区别。进一步，文章详细阐述了jQuery的选择器、样式操作如css方法和类样式操作，以及jQuery的显示隐藏、滑动和淡入淡出等动画效果。通过实例展示了如何使用jQuery简化DOM操作和实现动态效果，如tab栏切换、购物车功能等。
目录
8.1 普通元素内容html()（相当于原生innerHTML）
8.2 普通元素文本内容text()（相当于原生innerText）
一、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是索引号<body> <video src="video/onetap.mp4" muted></video> <script type="text/javascript"> //jQuery对象 $('video'); //dom对象 var myVideo=document.querySelector('video'); // myVideo.play(); //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="jquery.min.js"></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('属性','属性值') //类似原生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){……});
<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尺寸、位置操作
扫一扫
1907
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
