jQuery基础

jQuery基础

jQuery简介

jQuery由美国人John Resig于2006年创建

jQuery是目前最流行的JavaScript程序库，它是对JavaScript对象和函数的封装，本身也是由JavaScript写成

它的设计思想是：write less,do more

jQuery的用途：

1.访问和操作DOM元素

2.控制页面样式

3.对页面事件进行处理

4.扩展新的jQuery插件

5.与Ajax技术完美集合

jQuery的优势：

1.体积小，压缩后只有100KB左右

2.强大的选择器

3.出色的DOM封装

4.可靠的事件处理机制

5.出色的浏览器兼容性

6.使用隐式迭代简化编程

7.丰富的插件支持

jQuery的版本：

1.开发版

jquery-3.版本号.js

完整无压缩版本，主要用于测试、学习和开发

2.发布版

jquery-3.版本号.min.js

经过工具压缩或经过服务器开启Gzip压缩，主要应用于发布的产品和项目

在html文件中导入jQuery：

<script src="js/jquery-3.3.1.min.js" type="text/javascript"></script>

jQuery基础

jQuery基本语法

为页面加载事件绑定方法：

调用jQuery方法

$(document).ready(function(){
    //执行代码
})

简写方法：

$(function(){
    //执行代码
})

$(document).ready()与window.onload类似，但也有区别。

$(document).ready()方法为页面加载事件绑定方法。里面的元素或事件都将会在DOM完成加载之后立即加载，并且在页面内容（例如图片）加载之前，比传统的onload事件执行更靠前。

	window.onload	$(document).ready()
执行时机	必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行	网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完
编写个数	同一页面不能同时编写多个	同一页面能同时编写多个
简化写法	无	$(function(){ //执行代码 })

jQuery选择器

语法：

jQuery语法是为HTML元素的选取编制的，可以对元素执行某些操作

基本语法：

$(selector).action()

jQuery基本选择器

基本选择器包括标签选择器、类选择器、ID选择器、并集选择器和全局选择器

名称	语法构成	描述	示例
标签选择器	element	根据给定的标签匹配元素	$(“h2”)选取所有h2元素
类选择器	.class	根据给定的class匹配元素	$(".title")选取所有class为title的元素
ID选择器	#id	根据给定的id匹配元素	$("#title")选取id为title的元素
并集选择器	selector1,selector2,…,selectorN	将每一个选择器匹配的元素合并后一起返回	$(“div,p,.title”)选取所有div、p标签和拥有class为title的元素
全局选择器	*	匹配所有元素	$("*")选取所有元素

示例

$(".price").css({"background":"#efefef","padding":"5px"});

jQuery层次选择器

层次选择器通过DOM元素之间的层次关系来获取元素

名称	语法构成	描述	示例
后代选择器	A B	选取A元素里的所有B（后代）元素	$("#menu span")选取#menu下的所有< span>元素
子选择器	A>B	选取parent元素下的child(子)元素	$("#menu>span")选取#menu的所有子元素< span>
相邻元素选择器	A+B	选取紧邻A元素之后的（同辈）B元素	$(“h2+dl”)选取紧邻< h2>元素之后的同辈元素< dl>，若下一个不为< dl>，则不选取
同辈元素选择器	A~B	选取A元素之后的所有（同辈）B元素	$(“h2~dl”)选取< h2>元素之后所有的同辈元素< dl>

jQuery属性选择器

属性选择器通过HTML元素的属性来选择元素

语法构成	描述
$("[attribute]")	选取所有带有指定属性的元素
$("[attribute=‘value’]")	选取所有带有指定属性且属性值为指定值的元素
$("[attribute ! =‘value’]")	选取所有除了带有指定属性且属性值为指定值的元素外的所有元素
$("[attribute^=‘value’]")	选取所有给定属性是以某些特定值开始的元素
$("[attribute $=‘value’]")	选取所有给定属性是以某些特定值结尾的元素
$("[attribute*=‘value’]")	选取所有给定属性是以包含某些值的元素

过滤选择器

通过特定的过滤规则来筛选出所需的元素

主要分类：

基本过滤选择器、可见性过滤选择器、表单对象过滤选择器、内容过滤选择器、子元素过滤选择器等

基本过滤选择器

语法	描述
:first	选取第一个元素
:last	选取最后一个元素
:even	选取索引是偶数的所有元素（index从0开始）
:odd	选取索引是奇数的所有元素（index从0开始）
:eq(index)	选取索引为指定索引值的元素
:gt(index)	选取索引大于指定索引值的所有元素
lt(index)	选取索引小于指定索引值的所有元素
not(selector)	选取所有不为指定选择器的所有元素
:header	选取所有的标题标签，如h1~h6
:focus	选取当前获取焦点的元素
:animated	选择所有动画

示例：

$(".contain li:first").css({"font-size":"16px","color":"#e90202"})

可见性过滤选择器

通过元素显示状态来选取元素

语法	描述
:visible	选取所有可见的元素
:hidden	选取所有隐藏的元素

示例：

$("p:hidden").show();
$("p:visible").hide();

jQuery选择器注意事项

1.特殊符号的转义

# 、[]等特殊意义的符号需要使用\进行转义

2.选择器中的空格

选择器的书写规范很严格，多一个空格或少一个空格都会影响选择器的效果

(1)var $t_a=$(".text :hidden");    //带空格的jQuery选择器

选取class为“text”的元素内部的隐藏元素

(2)var $t_a=$(".text:hidden");     //不带空格的jQuery选择器

选取隐藏的class为"text"的元素