jQuery学习笔记——简介、选择器

由于时间紧任务急,我必须马上把前端这套东西流程走通,为了第一步能先看懂师兄们写的项目代码,我开始了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、选择器中含有空格的注意事项
多一个少一个空格会得到不同结果,这点需要注意
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容

  • 一、样式篇 第1章 初识jQuery (1)环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,342评论 0 44
  • 原文链接 http://blog.poetries.top/2016/10/20/review-jQuery 关注...
    程序员poetry阅读 16,630评论 18 503
  • 环境搭建 进入官方网站获取最新的版本 http://jquery.com/download/ ,这里需要注意 j...
    阿r阿r阅读 791评论 0 7
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,316评论 0 2
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,150评论 0 1