目录
一、概述
1.本质
快速简洁的JavaScript框架是继Prototype之后的又一个优秀的JavaScript库（或JavaScript框架）
jQuery 就是对 DOM 进行封装，从而给我们提供了去操作 DOM 的更简洁的操作方式
jQuery有非常便利的选择元素的能力，用一个 $() 函数就能搜寻页面上的元素； $ 是jQuery的别称（另外的名字），在代码中可以使用jQuery代替$，但一般为了方便，通常都是直接用$
$是jQuery的顶级对象，相当于原生JavaScript中的window，把元素利用$包装成jQuery对象，就可以调用jQuery的方法
jQuery的操作过程：
1.jQuery操作页面元素一定是从 $() 开始
2.$() 函数里面有引号，引号里面写css的选择器
3.然后再加上jQuery自己的方法（切记：不能使用js原生的方法）
2.jQuery优点
1.轻量级。核心文件小，不会影响加载速度
2.跨浏览器兼容。基本兼容了现在主流的浏览器
3.链式编程，隐式迭代
4.对事件、样式、动画支持，大大简化了DOM操作
5.支持插件扩展开发。有着丰富的第三方插件，例如：树形菜单、日期控件、轮播图等。
6.免费、开源。
3.引入方式
1.本地引入
<script src="文件路径/xx.js"></script>
2.外部网站引入
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
4.注意
jQuery1.x.x：兼容IE6、7、8
jQuery2.x.x：不兼容IE6、7、8
jQuery3.x.x：不兼容IE6、7、8，全面支持HTML5和CSS3
原生JS会等DOM元素加载完毕，并且图片也加载完毕后才会执行；jQuery会等到DOM元素加载完毕，但不会等到图片也加载完毕
原生JS如果编写了多个入口函数，后面编写的会覆盖前面编写的；jQuery中编写多个入口函数，后面的不会覆盖前面的
5. 入口函数的几种写法
$(document).ready(function() {});jQuery(document).ready(function() {});$(function() {});jQuery(function() {});6.冲突解决
//1.释放$的使用权
/**
* 释放操作必须在编写其他jQuery代码之前编写
* 释放之后就不能再使用$，改为jQuery
*/
jQuery.noConflict();
//2.自定义一个访问符号
var lwj = jQuery.noConflict();
lwj(function() {});7.用途
-
可以批量处理
<style>
.div1 {
width: 100px;
height: 100px;
background-color: orange
}
.div2 {
width: 100px;
height: 100px;
background-color: blue
}
</style> <div class="div1"></div>
<br/>
<div class="div2"></div> //jquery可以批量处理
$('div').css('background-color', 'red');
-
批量添加事件
$('div').click(function() {
$('div').css('background-color', 'pink');
})
当在div区域单击鼠标后：
-
添加炫酷动画
//添加炫酷动画
$('div').click(function() {
$(this).animate({
'width': '500px',
'height': '200px'
}, 1000)
})
当单击div区域后：
-
更简单的动画
//更简单的动画
$('div').click(function() {
$(this).slideUp().slideDown().slideUp().slideDown();
})二、$()函数
描述：$()函数的执行结果(返回值),是一个jq对象
jq对象是一个包含了满足选择器条件的元素节点的信息集合，可以像数组一样使用
注意：
a.$()函数是可以批量处理的
b.jq对象可以转换成js对象
c.jq对象只能调用自己的属性和方法
1.$()函数的size()方法和length属性
描述：是jq对象所有，表示jq对象中包含多少个js元素节点
语法：jq对象.size()/jq对象.length
<script src="js/jquery-1.12.3.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
margin-top: 10px;
border: 1px solid;
}
</style><div class="div1"></div>
<div class="div1"></div>
<div id="div2"></div><script>
//获取元素
var $divs = $('.div1');
//设置样式
$divs.css('background-color', 'lightblue');
console.log($divs);
//jq对象可以转换成js对象
console.log($divs[0]); //获取jq中第一个js对象，通过中括号
console.log($divs.get(1)); //获取jq中第二个js对象，通过get(n)
//js方法 jq对象可以转换成js对象
$divs[0].style.backgroundColor = 'red';
//size() jq对象中包含多少个js元素节点
console.log($divs.size());
//相应的节点的长度
console.log($divs.length);
</script>
2.$()函数对选择器的全面支持
2.1.jQuery全面支持css2.1的选择器
选择器(id,类，标签，包含等选择器的任意组合)
2.2jQuery全面支持css3的选择器
选择器(属性选择器，关系选择器)
注意：jq中选择器不存在兼容性问题，因此CSS里的选择器在jq中都可以正常使用
公共部分：
<script src="js/jquery-1.12.3.min.js"></script>
<style>
div {
width: 100px;
height: 100px;
margin-top: 10px;
border: 1px solid;
}
</style>例子1：
<div class="div1"></div>
<div id="div2"></div> <script>
$('#div2').css('background-color', 'lightblue');
$('.div1').css('background-color', 'pink');
</script>
例子2：
<div class="div1">
<span>
这是第一个div的span
</span>
</div>
<div id="div2"></div> <script>
$('div span').css('color', 'orange');
$('div[class="div1"]').css('background-color', 'lightblue');
</script>
3.$(jQuery)自己发明的伪类
公共部分：
<style>
div {
width: 100px;
height: 100px;
border: 1px solid;
margin-top: 10px;
}
</style> <div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>3.1 :first伪类
<script>
// :first伪类 选中指定集合中的第一个元素
$('div:first').click(
function(){
$(this).css('background-color', 'lightblue');
$(this).animate({
'width': 500
},500);
}
);
</script>
3.2 :last伪类
//：last伪类 选定指定集合中的最后一个元素
$('div:last').click(function() {
$(this).css('background-color', 'lightblue');
$(this).animate({
'width': 500
}, 500);
});
3.3:eq(n)伪类
//:eq(n) 选中指定集合中从0开始，第n个元素
$('div:eq(2)').click(function() {
$(this).css('background-color', 'lightblue');
$(this).animate({
'width': 500
}, 500);
});
//或
$('div').eq(2).click(function() {
$(this).css('background-color', 'lightblue');
$(this).animate({
'width': 500
}, 500);
});
3.4 :lt(n)伪类和:gt(n)伪类
//:lt(n) 选中指定集合中从0开始，第n个元素之前的所有元素
//:gt(n) 选中指定集合中从0开始，第n个元素之后的所有元素
$('div:gt(2)').click(function() {
$(this).css('background-color', 'lightblue');
$(this).animate({
'width': 500
}, 500);
});
3.5 odd 选中指定集合中从0开始，所有偶数序号的元素
even 选中指定集合中从0开始，所有奇数序号的元素
//odd 选中指定集合中从0开始，所有奇数序号的元素
//even 选中指定集合中从0开始，所有偶数序号的元素
$('div:even').click(function() {
$(this).css('background-color', 'lightblue');
$(this).animate({
'width': 500
}, 500);
});
3.6补充：
:empty 找到既没有文本内容也没有子元素的指定元素
:parent 找到有文本内容或有子元素的指定元素
:contains('文本内容') 找到包含指定‘文本内容’的指定元素
:has(selector) 找到包含指定子元素的指定元素
综合例子：
<table border="1" align="center" cellspacing="0">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table><style>
table tr td {
width: 100px;
height: 40px;
}
</style><script>
//将表格中所有偶数的行背景颜色设置为 lightgreen
$('tr:odd').css('background-color', 'lightgreen');
var color = '';
// 当鼠标移到tr上时
$('tr').hover(function() {
//鼠标移入
// 设置背景属性
color = $(this).css('background-color');
// 设置背景属性值
$(this).css('background-color', 'lightgray');
}, function() {
//鼠标移出
// 设置背景属性值
$(this).css('background-color', color);
// color='';
});
</script>
4.$()函数详解
描述：$()函数是jQuey框架提供的一个操作入口，这个入口是一个函数。
$()等价于jQuey()
说明：
$()函数本名为jQuey()函数，在jq框架内部，$()等价于jQuey()
注意：
$()函数并不是jQuey框架独有的，很多框架中也有$()函数
避免使用麻烦，所以使用$()函数
特性：
(1)$()函数可以批量操作
(2)$()函数内部写的是选择器名，只要选择器书写正确，不管是哪种都能正常加载(不需要考虑兼容性问题)
(3)$()函数也有返回值，返回值是jq对象，而jq对象只能使用自己的方法
jq对象是可以转换成js对象
a) jq对象可以通过【jq对象[n]】方式转换为js原生对象
var p = $("p")[0];
b) jq对象可以通过【.get(n)】方式转换为js原生对象
var p = $("p").get(0);
$()在选择元素的时候括号中先写引号，但是存在获取某些对象的时候不需要加引号的特例：
$(window)
$(document)
$(this)
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
