JQuery学习笔记(一)

教程主要是来自慕课网的Aaron艾伦,如有冒犯,请见谅

在教程中用的是JQuery1.9,在官网http://jquery.com/download可以进行下载,当然现在已经是3.1版本了,不过基本原理是相似的。

JQuery是一个库,不需要进行安装,只需要在页面的<head></head>标签内进行script脚本中引入即可。如下:


测试JQuery的运行

对于JQuery来说它本身还是JavaScript代码,但是它还是对JavaScript进行了很好的包装处理,提供了很多好用的功能。

对于JQuery和DOM对象来说,是不一样的,两者之间可以互相转换。看下例子。


对上诉元素进行获取然后给这个文本节点增加文字,原生的JavaScript是这样处理的。

JavaScript处理

利用DOM模型提供的document.getElementById()方法获取的是一个DOM对象用innerHTML属性处理文本。

而JQuery是这样处理的。

JQuery处理

通过$()方法会得到一个JQuery对象,这是一个类数组的对象,对象内部是包含DOM对象的信息然后封装许多操作方法,通过调用自己的html方法得到与用纯JavaScript的效果一致。通过JQuery方法包装的到的是JQeury对象,与DOM对象一样他们都能处理DOM。

如何将JQuery对象转化成DOM对象?

①利用数组下标的方式读取JQuery中的DOM对象

     假如有如下HTML代码,想将其中的div中的文字变成红色字体:

JQuery处理

JQuery找到所以div元素,共三个,因为JQuery对象也是一个数组结构,所以可以通过下标来找元素,返回的是DOM对象,通过调用style属性修改颜色。注意:同JAVA数组一样,它的下标是从0开始的。

②通过JQuery自带的get()方法


JQuery处理

JQuery对象自身提供了一个get()方法允许直接访问对象内相关的DOM节点。

如何将DOM对象转化成JQuery对象?

$(参数)是一个多功能的方法,通过传递不同的参数而产生不同的作用。

如果传递给$(DOM)函数的参数是一个DOM对象,jQuery方法会把这个DOM对象给包装成一个新的jQuery对象。例子如下:

JQuery处理

通过getElementsByTagName获取所以div节点的元素,结果是一个dom合集对象,通过$()方法转化成JQuery对象,用first和css获取第一个元素和修改颜色。

JQuery的选择器

①id选择器:用来查找ID,即元素的ID属性

  格式:$('#id')

在JQuery内部采用的函数是用document.getElementById()来处理ID的获取,注意的是id是唯一的,每个id值在一个页面中只能使用一次。如果多个元素分配了相同的id,将只匹配该id选择集合的第一个DOM元素。但这种行为不应该发生;有超过一个元素的页面使用相同的id是无效的

②类选择器:通过class样式名来获取节点

  格式:$('.class')

对于id选择器来说,它的效率要低一些,但它可以多选,同样,JQuery内部是利用document.getElementByClassName()来实现的。


JavaScript和JQuery对比

可见在JQuery内部还实现了循环处理。

③元素选择器:通过给定的标志名称选择所以元素

   格式:$('element')

搜索指定元素标签名的所有节点,这个是一个合集的操作。同样的也有原生方法getElementsByTagName()函数支持。


JavaScript和JQuery对比

可见在JQuery内部还实现了循环处理。

④全选择器(*选择器)

  格式:$('*')

通配符*便是选中所有元素,在JavaScript中同样可以使用document.getElementByTagName('*')来获取相应的节点。

⑤层级选择器:处理元素与元素之间的子元素、后代元素、兄弟元素、相邻元素。


层级选择器的区别

对于层级选择器来说,都有一个参考节点。后代选择器包含了子选择器的选择内容;一般兄弟选择器包含相邻兄弟选择的内容;相邻兄弟选择器和一般兄弟选择器选择到的元素必须在同一父元素下。

⑥基本筛选选择器:筛选选择器的用法与CSS中的伪元素相似,选择器用冒号“:”开头.


基本筛选器的描述

注意事项:

┝:eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素,根据之前匹配的元       素在进一步筛选,注意jQuery合集都是从0开始索引

┝gt是一个段落筛选,从指定索引的下一个开始,gt(1) 实际从2开始

⑦内容筛选选择器:通过内容来过滤


内容过滤器描述

注意事项:

┝:contains与:has都有查找的意思,但是contains查找包含“指定文本”的元素,has查找包含“指      定元素”的元素

┝如果:contains匹配的文本包含在元素的子元素中,同样认为是符合条件的。

┝:parent与:empty是相反的,两者所涉及的子元素,包括文本节点

⑧可见性筛选选择器:元素有显示状态与隐藏状态,jQuery根据元素的状态扩展了可见性筛选选择                              器:visible与:hidden


可见性筛选选择器描述

:hidden选择器,不仅仅包含样式是display="none"的元素,还包括隐藏表单、visibility等等。

隐藏一个元素的方式:

┝CSS display的值是none。

┝type="hidden"的表单元素。

┝宽度和高度都显式设置为0。

┝一个祖先元素是隐藏的,该元素是不会在页面上显示

┝CSS visibility的值是hidden

┝CSS opacity的指是0

注意:如果元素中占据文档中一定的空间,元素被认为是可见的。可见元素的宽度或高度,是大于零。元素的visibility: hidden 或 opacity: 0被认为是可见的,因为他们仍然占用空间布局。

⑨属性筛选选择器:基于属性来定位一个元素


属性筛选选择器描述

TIPS:在这么多属性选择器中[attr="value"]和[attr*="value"]是最实用的

[attr="value"]能帮我们定位不同类型的元素,特别是表单form元素的操作,比如说input[type="text"],input[type="checkbox"]等。[attr*="value"]能在网站中帮助我们匹配不同类型的文件

子元素筛选选择器


子元素筛选选择器描述

注意事项:

┝:first只匹配一个单独的元素,但是:first-child选择器可以匹配多个:即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)

┝:last 只匹配一个单独的元素, :last-child 选择器可以匹配多个元素:即,为每个父级元素匹配最后一个子元素

┝如果子元素只有一个的话,:first-child与:last-child是同一个

┝:only-child匹配某个元素是父元素中唯一的子元素,就是说当前子元素是父元素中唯一的元素,则匹配

┝jQuery实现:nth-child(n)是严格来自CSS规范,所以n值是“索引”,也就是说,从1开始计数,:nth-child(index)从1开始的,而eq(index)是从0开始的

┝nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算,后者从后往前计算

⑪表单元素选择器


表单选择器描述

注意:

除了input筛选选择器,几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(':password') == $('[type=password]')

⑫表单对象属性筛选选择器:对所选择的表单元素进行筛选


表单筛选选择器描述

注意事项:

┝选择器适用于复选框和单选框,对于下拉框元素, 使用 :selected 选择器

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,560评论 4 361
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,104评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,297评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,869评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,275评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,563评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,833评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,543评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,245评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,512评论 2 244
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,011评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,359评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,006评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,062评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,825评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,590评论 2 273
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,501评论 2 268

推荐阅读更多精彩内容