目录
一.基本介绍
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>
效果展示
464
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
