目录
一.基本介绍
1.基本概念
①封装了很多JS代码(类库)
②jQuery:是一个轻量级的库,拥有强大的选择器等更多优点,吸引了更多开发者去学习使用它
③官方地址:http://jquery.com/
④优点:可以简化JavaScript开发:选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件
⑤是一些前端框架的基础,比如EasyUI,Bootstrap
2.使用步骤
- ①.下载jQuery库
- 开发版本:jquery-3.3.1.js
- 生产版本:jquery-3.3.1.min.js
- jQuery版本
- 1.x版本:能够兼容IE678浏览器(不再更新版本)
- 2.x版本:不能兼容IE678浏览器(不再更新版本)
- 3.x版本:不能兼容IE678浏览器,更加的精简(在国内不流行,因为国内使用jQuery的主要目的就是兼容IE678)
- jQuery版本
- ②.引入:将js文件复制到项目中
- ③.使用
自执行函数(立执行函数),将函数的声明和调用合并在一起
(function(){
window.jQuery = window.$ = jQuery
}());
$和$()
- $代表jQuery对象(Java类),同时也是一个函数对象,即$和jQuery是等价的
- $()构造了一个jQuery对象。所以,“$()”可以叫做jQuery的构造函数
- js与jQuery的转换
- js转换jQuery====》$(js对象) 作用:转换作用
- jQuery转换js
- 1.可以通过下标转换成js对象
var $oDiv = $("#oDiv"); console.log($oDiv[0].innerHTML) console.log($oDiv.innerHTML);
- 2.可以通过get方法+下标获取
console.log($oDiv.get(0).innerHTML);
3.选择器
基本选择器
- ID选择器:#ID ——单个元素
- 类选择器:.class ——元素集合
- 元素选择器:element ——元素集合
- 通配符选择器:* ——元素集合
- 群组选择器(并集):selector1,selector2 ——元素集合
层次选择器
- 后代选择器(交集):selector1 selector2 ——元素集合
- 子代选择器:> ——元素集合
- 兄弟选择器:~ ——元素集合
- 查找所有元素:空格 --查询子元素
过滤选择器
- 获取第一个元素:first
- 最后一个元素:last
- 获取偶数下标的元素:even
- 获取奇数下标的元素:odd
- 获取某一范围元素
- :gt大于
- :lt小于
- 去除所有与给定选择器匹配的元素:not(指定选择器)
- 匹配一个给定索引值的元素:eq
- 匹配一个给定索引值的元素:header
- 匹配所有正在执行动画效果的元素:animated
表单选择器
- 匹配所有 input, textarea, select 和 button 元素:input
- 匹配所有的单行文本框:text
- 匹配所有密码框:password
- 匹配所有单选按钮:radio
- 匹配所有复选框:checkbox
- 匹配所有提交按钮:submit
- 匹配所有图像域:image
- 匹配所有重置按钮:reset
- 匹配所有按钮:button
- 匹配所有文件域: file
- 匹配所有不可见元素,或者type为hidden的元素:hidden
- 表单对象属性
- 匹配所有可用元素:enable
- 匹配所有不可用元素:disabled
- 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option):checked
- 匹配所有选中的option元素:selected
4.$工具方法
- 数组和对象操作
- $.each(object,[callback]):通用例遍方法,可用于例遍对象和数组
- $.extend([d],tgt,obj1,[objN]):用一个或多个其他对象来扩展一个对象,返回被扩展的对象
- $.grep(array,fn,[invert]):使用过滤函数过滤数组元素
- $.sub():可创建一个新的jQuery副本,不影响原有的jQuery对像
- $.when(deferreds):提供一种方法来执行一个或多个对象的回调函数,延迟对象通常表示异步事件。
- $.makearray(obj):将类数组对象转换为数组对象
- $.inarray(val,arr,[from]):确定第一个参数在数组中的位置,从0开始计数(如果没有找到则返回 -1 )
- $.toarray():把jQuery集合中所有DOM元素恢复成一个数组
- $.merge(first,second):合并两个数组,返回的结果会修改第一个数组的内容——第一个数组的元素后面跟着第二个数组的元素
- $.unique(array):删除数组中重复元素。只处理删除DOM元素数组,而不能处理字符串或者数字数组
- $.parseJSON(json):接受一个JSON字符串,返回解析后的对象
- 函数操作
- $.noop:一个空函数
- $.proxy(function,context):返回一个新函数,并且这个函数始终保持了特定的作用域
- 测试操作
- $.contains(container,contained):一个DOM节点是否包含另一个DOM节点
- $.type(obj):检测obj的数据类型
- $.isarray(obj):测试对象是否为数组
- $.isFunction(obj):测试对象是否为函数
- $.isEmptyObject(obj):测试对象是否是空对象(不包含任何属性)
案例:表格隔行换色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.12.4.js"></script>//引入jQuery文件
<script type="text/javascript">
$(function() {
$("table tr:even").mouseover(function() {//当鼠标移入到指定的要变换颜色的行时,颜色发生变化
$("table tr:even").css("background", "black");//奇数行的换色(黑色)
}).mouseout(function(){//当鼠标移出时,颜色发生变化(白色)
$("table tr:even").css("background", "white");
})
$("table tr:odd").mouseover(function() {//原理同上
$("table tr:odd").css("background", "pink");//偶数行的换色(粉色)
}).mouseout(function(){//当鼠标移出时,颜色发生变化(白色)
$("table tr:odd").css("background", "white");
})
})
</script>
</head>
<body>
<table border="1px" cellspacing="0" cellpadding="0" width=100% id="tab">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
效果展示
案例:淘宝商品展示
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 250px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
border-right: 0;
/* overflow: hidden; */
}
.show {
width: 250px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
border-right: 0;
overflow: visible;
}
#left,
#content {
float: left;
}
#left li {
background: " url(images/lili.jpg) repeat-x";
}
#left li a {
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
}
#left li a:hover {
background-image: " url(images/abg.gif)";
}
#content {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
</head>
<body>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function() {
var aa = $("#left>li");
// console.log(aa);
aa.mouseover(function() { //首先获得所有的li标签 并且设置上一个鼠标移入事件
var myindex = $(this).index(); //拿到我所移入进去的li的下标
// console.log(myindex);
var mycontent = $("#content>div").eq(myindex); //根据我所得到的移入进去的li下标去找到相对应的内容
mycontent.css("display","block");
// console.log(mycontent);
})
aa.mouseout(function() { //首先获得所有的li标签 并且设置上一个鼠标移入事件
var myindex = $(this).index(); //拿到我所移入进去的li的下标
// console.log(myindex);
var mycontent = $("#content>div").eq(myindex); //根据我所得到的移入进去的li下标去找到相对应的内容
mycontent.css("display","none");
// console.log(mycontent);
})
})
</script>
<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 style="display: block;">
<a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
</div>
<div style="display: none;">
<a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
</div>
<div style="display: none;">
<a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
</div>
<div style="display: none;">
<a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
</div>
<div style="display: none;">
<a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
</div>
<div style="display: none;">
<a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
</div>
<div style="display: none;">
<a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
</div>
<div style="display: none;">
<a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a>
</div>
<div style="display: none;">
<a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a>
</div>
</div>
</div>
</body>
</html>
效果展示
案例:全选&全不选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery-1.12.4.js"></script>//引入jQuery文件
<script type="text/javascript">
$(function() {
$("#qx").click(function() { //全选框
$(".other").prop("checked", $("#qx").prop("checked"));//让其他子复选框的选中状态与全选框一致
});
$(".other").click(function() {//其他子复选框
if ($(".other:checked").length === $(".other").length) {//当其他的子复选框选中的长度等于所有已有的子复选框的长度时
$("#qx").prop("checked", true);//就把全选框的状态变为选中
}else {
$("#qx").prop("checked", false);//否则就把全选框的状态变为未选中
}
});
})
</script>
<body>
<input name="" id="qx" type="checkbox">全选
<input name="" class="other" type="checkbox">唱
<input name="" class="other" type="checkbox">跳</td>
<input name="" class="other" type="checkbox">rap</td>
</body>