jQuery总结

云服务器推荐
jQuery下载

什么是jQuery

1.jQuery是一个优秀的JavaScript框架，一个轻量级的JS库；
2.它封装了JS、CSS、DOM，提供了一致的、简介的API；
3.兼容CSS3，及各种浏览器；
4.使用户更方便的处理HTML、Events、实现动画效果，并且方便的为网站提供Ajax交互；
5.使用户的HTML页面保持代码和HTML内容分离；
jQuery是一个JS框架，极大的简化了JS编程

利用选择器定位节点

<div id="d1"></div>
标签名选择器：$("div")
id选择器：$("#d1")

调用方法操作节点

<div id="d1"></div>
标签名：$("div").css("font-size","50px")
id:$("#d1").css("font-size","50px")

jQuery的使用步骤

1.引用jq的js文件
2.使用选择器定位要操作的节点
3.调用jQuery方法进行操作

jQuery对象

什么是jQuery对象

1.jQuery为解决浏览器的兼容问题而提供的一种统一封装后的对象描述；
2.jQuery提供的方法都是针对jQuery对象特有的，而且大部分方法的返回值类型也是jQuery对象，所以方法可以连缀调用“jQuery对象.方法().方法().方法()”；
3.通过jQuery选择器选中的对象为jQuery对象：
如:$("div")、$("#d1");

jQuery对象与DOM对象

1.jQuery对象本质上是一个DOM对象数组，它在该数组上扩展了一些操作数组中元素的方法
2.可以直接操作这个数组：
obj.length:获取数组长度；
obj.get(index):获取数组中的某一个DOM对象；
obj[index]:等价于obj.get(index);

DOM对象转换为jQuery对象

DOM对象可直接转换为jQuery对象
$(DOM对象)；

jQuery选择器

什么是jQuery选择器

1.jQuery选择器类似CSS选择，能够实现定位元素，施加行为；
2.使用jQuery能够将内容与行为分离；

选择器的种类

jQuery选择器包含以下种类：
1.基本选择器；
2.层次选择器；
3.过滤选择器；
4.表单选择器；

基本选择器

元素选择器：依据标签名定位元素；

$("标签名")

类选择器：根据class属性定位元素

$(".class属性名")

id选择器：根据id属性定位元素

$("#id")

选择器组：定位一组选择器所对应的所有元素

$("#id,.importent")

层次选择器

1.在select1元素下，选中所有满足select2的子孙元素

$("select1 select2")

2.在select1元素下，选中所有满足select2的子元素

$("select1>select2")

3.选中select1元素的满足select2的下一个弟弟

$("select1+select2")

4.选中select1元素的满足select2的所有弟弟

$("select1~select2")

过滤选择器

基本过滤选择器

根据元素的基本特征定位元素，常用于表格和列表

:first 第一个元素
:last 最后一个元素
:not(selector) 把selector抛出在外
:even 挑选偶数行
:odd 挑选基数行
:eq(index)下标等于index的元素
:gt(index)下标大于index的元素
:lt(index)下标小于index的元素

内容过滤选择器

根据文本内容定义元素

:contains(text)匹配包含给定文本的元素
:empty 匹配所有不包含子元素或文本的空元素

可见性过滤选择器

根据可见性定位元素

:hidden 匹配所有不可见元素，或type为hidden的元素
:visible 匹配所有可见元素

属性过滤选择器

根据属性定位元素

[attribute] 匹配具有attribute属性的元素
[attribute=value] 匹配属性等于value的元素
[attribute!=value] 匹配属性不等于value的元素
例如：$("input[value='你好']")

状态过滤选择器

根据状态定位元素

:enabled 匹配可用的元素
:disabled 匹配不可用的元素
:checked 匹配选中的checkbox
:selected 匹配选中的option

表单选择器

表单选择器包括：

:text 匹配文本框
:password 匹配密码框
:radio 匹配单选框
:checkbox 匹配多选框
:submit 匹配提交按钮
:reset 匹配重置按钮
:button 匹配普通按钮
:file 匹配文件框
:hidden 匹配隐藏框
例：$(":text")