JAVAScript强大的框架：Jquery（一）

一：jQuery是什么

为了简化 JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了不少预约义的对象和实用函数。能帮助使用者创建有高难度交互的 Web2.0 特性的富客户端页面, 而且兼容各大浏览器

jQuery可以使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id便可。

二：基本选择器

      基本选择器是 jQuery 中最经常使用的选择器, 也是最简单的选择器, 它经过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 容许重复使用).

一、#id     用法: $(”#myDiv”);    返回值  单个元素的组成的集合

       说明: 这个就是直接选择html中的id=”myDiv”

二、Element       用法: $(”div”)     返回值  集合元素

       说明: element的英文翻译过来是”元素”,因此element其实就是html已经定义的标签元素,例如 div, input, a 等等.

三、class          用法: $(”.myClass”)      返回值  集合元素

       说明: 这个标签是直接选择html代码中class=”myClass”的元素或元素组(由于在同一html页面中class是能够存在多个一样值的).

四、*          用法: $(”*”)      返回值  集合元素

      说明: 匹配全部元素,多用于结合上下文来搜索

五、selector1, selector2, selectorN      用法: $(”div,span,p.myClass”)    返回值  集合元素

      说明: 将每个选择器匹配到的元素合并后一块儿返回.你能够指定任意多个选择器, 并将匹配到的元素合并到一个结果内.其中p.myClass是表示匹配元素

       p class=”myClass”

三 层次选择器

若是想经过 DOM 元素之间的层次关系来获取特定元素, 例如后代元素, 子元素, 相邻元素, 兄弟元素等, 则须要使用层次选择器.

1 、ancestor descendant

      用法: $(”form input”) ;   返回值  集合元素

      说明: 在给定的祖先元素下匹配全部后代元素.这个要下面讲的”parent > child”区分开.

二、parent > child用法: $(”form > input”) ;    返回值  集合元素

      说明: 在给定的父元素下匹配全部子元素.注意:要区分好后代元素与子元素

三、prev + next

      用法: $(”label + input”) ;   返回值  集合元素

      说明: 匹配全部紧接在 prev 元素后的 next 元素

四、prev ~ siblings

      用法: $(”form ~ input”) ;    返回值  集合元素

      说明: 匹配 prev 元素以后的全部 siblings 元素.注意:是匹配以后的元素,不包含该元素在内,而且siblings匹配的是和prev同辈的元素,其后辈元素不被匹配.

      注意:  (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与先后位置无关, 只要是同辈节点就能够选取

三 基础过滤选择器

一、:first用法: $(”tr:first”) ;   返回值  单个元素的组成的集合

      说明: 匹配找到的第一个元素

二、:last用法: $(”tr:last”)   返回值  集合元素

      说明: 匹配找到的最后一个元素.与 :first 相对应.

三、:not(selector)用法: $(”input:not(:checked)”)返回值  集合元素

     说明: 去除全部与给定选择器匹配的元素.有点相似于”非”,意思是没有被选中的input(当input的type=”checkbox”).

四、:even用法: $(”tr:even”)   返回值  集合元素

     说明: 匹配全部索引值为偶数的元素，从 0 开始计数.js的数组都是从0开始计数的.例如要选择table中的行,由于是从0开始计数,因此table中的第一个tr就为偶数0.

五、: odd用法: $(”tr:odd”) 返回值  集合元素

      说明: 匹配全部索引值为奇数的元素,和:even对应,从 0 开始计数.

六、:eq(index)用法: $(”tr:eq(0)”)    返回值  集合元素

      说明: 匹配一个给定索引值的元素.eq(0)就是获取第一个tr元素.括号里面的是索引值,不是元素排列数.

七、:gt(index)用法: $(”tr:gt(0)”)    返回值  集合元素

说明: 匹配全部大于给定索引值的元素.

八、:lt(index)用法: $(”tr:lt(2)”)    返回值  集合元素  

      说明: 匹配全部小于给定索引值的元素.

九、:header(固定写法)用法: $(”:header”).css(”background”, “#EEE”)    返回值  集合元素

      说明: 匹配如 h1, h2, h3之类的标题元素.这个是专门用来获取h1,h2这样的标题元素.

十、:animated(固定写法)   返回值  集合元素

四 内容过滤选择器

内容过滤选择器的过滤规则主要体如今它所包含的子元素和文本内容上

一、:contains(text)用法: $(”div:contains(’John’)”)    返回值  集合元素

      说明: 匹配包含给定文本的元素.这个选择器比较有用，当咱们要选择的不是dom标签元素时,它就派上了用场了,它的做用是查找被标签”围”起来的文本内容是否符合指定的内容的.

二、:empty用法: $(”td:empty”)   返回值  集合元素

      说明: 匹配全部不包含子元素或者文本的空元素

三、:has(selector)

      用法: $(”div:has(p)”).addClass(”test”)    返回值  集合元素

      说明: 匹配含有选择器所匹配的元素的元素.这个解释须要好好琢磨,可是一旦看了使用的例子就彻底清楚了:给全部包含p元素的div标签加上class=”test”.

四、:parent用法: $(”td:parent”)   返回值  集合元素

      说明: 匹配含有子元素或者文本的元素.注意:这里是”:parent”,可不是”.parent”哦!感受与上面讲的”:empty”造成反义词.