由于时间紧任务急,我必须马上把前端这套东西流程走通,为了第一步能先看懂师兄们写的项目代码,我开始了jQuery的学习。。。
jQuery简单介绍
简介
jQuery是继Prototype后的又一个优秀的JavaScript库,是一个创建于2006年的开源项目。它凭借简洁的语法、跨平台的兼容性,极大简化了开发人员遍历dom文档、html文档、操作dom、处理事件、执行动画和开发ajax的操作。
jQuery强调写得少,做得多。它独特的选择器、链式操作、事件处理机制和封装完善的ajax都是其他js库望尘莫及的。
优势
轻量级、强大的选择器、出色的DOM封装、可靠的事件处理机制、完善的Ajax、出色的浏览器兼容性、链式操作方法、丰富的插件支持、隐式迭代。
配置环境
不需要特别安装,只要在页面<head>标签内写一行标签引入即可,此方法是在百度上调用jquery。
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
或者采用本地存放jquery方法:在jquery官网下载一个jquery.js文件,放在本地项目所在webroot的js文件夹内,再在<head>标签内写一行标签:
<script type="text/javascript" src="jquery.js"></script>
代码风格
链式操作风格
- 对于同一个对象不超过3个操作的,可以写在一行
- 对于同一个对象较多操作,建议每一行写一个操作
- 对于多个对象少量操作,可以每个对象写一行,如果涉及子元素,可以适当缩进
jQuery对象和DOM对象
DOM:document object model 文档对象模型
jQuery对象:通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,jQuery对象可以使用jQuery里的方法。
$("#foo").html();
等同于
document.getElementById("foo").innerHTML;
在jQuery对象中无法使用DOM对象的任何方法。DOM对象也不能使用jQuery里的方法。
jQuery对象和DOM对象的相互转换
获取jQuery对象:var $variable = jQuery 对象;
获取DOM对象:var variable = DOM 对象;
1、 jQuery对象-->DOM对象
[index]和get(index)
- [index]方法
var $cr = $("#cr");
var cr = $cr[0];
```-
- get(index)方法
var $cr = $("#cr");
var cr = $cr.get(0);
2、DOM对象--> jQuery对象
var cr = document.getElementById("cr");
var $cr = $(cr);
- 平时用到的jQuery对象都是通过$()函数制造出来的,$()函数是jQuery对象的制造工厂。
#### jQuery选择器
选择器是jQuery的根基,对事件处理、遍历DOM、Ajax操作都依赖于选择器。
##### 一、CSS选择器
要使某个样式应用于特定的HTML元素,需要找到该元素,在CSS中,执行这一任务的表现规则称为CSS选择器。
|选择器|语法|描述|示例|
|:--|:--|:--|:--|
|标签选择器|E{<br/> CSS规则<br/>}<br/>|以文档元素作为选择符|a{<br/> font-size:14px;<br/>}|
|ID选择器|#{<br/> CSS规则<br/>}|以文档元素的唯一标识符ID作为选择符|#note{<br/> font-size:14px;<br/>}|
|类选择器|E.className{<br/> CSS规则<br/>}|以文档元素的class作为选择符|div.note{<br/> font-size:14px;<br/>}|
|群组选择器|E1,E2,E3{<br/> CSS规则<br/>}|多个选择符应用同样的样式规则|td,p,a{<br/> font-size:14px;<br/>}|
|后代选择器|E F{<br/> CSS规则<br/>}|元素E的任意后代元素F|#links a{<br/> font-size:14px;<br/>}|
|通配选择器|*{<br/> CSS规则<br/>}|以文档的所有元素作为选择符|*{<br/> font-size:14px;<br/>}|
这就尴尬了,回车的代码都显示出来了,下次还是粘贴表格图片好了。br是回车的意思。
几乎所有主流浏览器都支持上面这些选择器。此外CSS还有伪类选择器、子选择器、临近选择器和属性选择器,但主流浏览器并不支持所有CSS选择器~~
##### 二、jQuery选择器
jQuery选择器完全继承了CSS风格,可以便捷迅速的找出特定的DOM元素,无需担心浏览器是否支持这一选择器,jQuery的行为都必须在获取到元素后才能生效。
**jQuery选择器的优势**
- 简洁的写法
`比如:用$("#ID")代替document.getElementById()函数`
- 支持CSS1到CSS3选择器
- 完善的处理机制
即使用jQuery获取网页中不存在的元素也不会报错~
**jQuery选择器**
- 基本选择器
最常用、最简单的选择器。通过id、class、标签名等来查找DOM元素。在网页中,每个id只能用一次,class可以重复使用。
![基本选择器.png](http://upload-images.jianshu.io/upload_images/3194437-e65454196c993553.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 层次选择器
如果想通过DOM元素之间的层次关系来获取特定元素,如后代元素、子元素、相邻元素和同辈元素等,那么需要用层次选择器。
![层次选择器.png](http://upload-images.jianshu.io/upload_images/3194437-d22423bdc2d380fb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 过滤选择器(基本过滤选择器、内容过滤选择器、可见性过滤选择器、属性过滤选择器、子元素过滤选择器、表单对象过滤选择器)
过滤选择器是通过特定过滤规则来筛选所需的DOM元素,选择器以:开头。
1、基本过滤选择器
![基本过滤选择器.png](http://upload-images.jianshu.io/upload_images/3194437-ddb6a1bd9854e375.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
2、内容过滤选择器
![内容过滤选择器.png](http://upload-images.jianshu.io/upload_images/3194437-117e3b25c6291c89.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
3、可见性过滤选择器
![可见性过滤选择器.png](http://upload-images.jianshu.io/upload_images/3194437-5ae089bd11d57148.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
4、属性过滤选择器
它的过滤规则是通过元素的属性来获取相应的元素。
![属性过滤选择器.png](http://upload-images.jianshu.io/upload_images/3194437-79e6394dd6d46f67.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
5、子元素过滤选择器
需要注意父元素和子元素的区分。
![子元素过滤选择器.png](http://upload-images.jianshu.io/upload_images/3194437-5d32d3712baf3bed.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
6、表单对象属性过滤选择器
此属性主要对所选择的表单元素进行过滤。.
![表单对象过滤选择器.png](http://upload-images.jianshu.io/upload_images/3194437-4495001092c17929.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
- 表单选择器
它可以方便的获取到表单的某个或某类型的元素。
![表单选择器.png](http://upload-images.jianshu.io/upload_images/3194437-880d30f3f0ca61b3.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
##### 三、jQuery选择器注意事项
1、选择器中含有特殊符号
- 含有"·"、"#"、"("、"]"等特殊字符:
在特殊符号前加"\\"
- 属性选择器的@符号问题:
由于jQuery版本问题,如果属性选择器前面有@,则去掉
2、选择器中含有空格的注意事项
多一个少一个空格会得到不同结果,这点需要注意