jquery选择器

1.  jQuery基本概念介绍

 

    1.1 什么是jQuery

  一个javascript库，把常用方法写到一个js文件中，需要的时候直接调用即可学习jQuery就是学习一些方法

 

    1.2 jQuery的使用

a.引包     b.入口函数     c.实现功能

 

    1.3 版本介绍

3个版本 1.x      2.x     3.x

其中版本1兼容IE6/7/8，版本2和3实现的功能更多一些，版本3更适合最新的浏览器

每个大版本又分为压缩版（compressed）和非压缩版（uncompressed），由于其格式和体积不同：压 缩版一 般是在生产环境中，即项目上线时使用；非压缩版是在开发环境中

 

      1.4 引包注意事项

1.忘记引包      2.引包顺序出错      3.引包路径出错

 

     1.5 入口函数详细介绍

第一种：$("document").ready(function () {  } );     

第二种：$(function () {  } );

和js的入口函数window.onload的区别：

      jQuery--文档树加载完成的时候执行，不会等待突破资源的加载完成

      js--文档树加载完成后，必须等待图片等的资源加载完成才会执行

 

     1.6 jQuery中的$符号

本质就是一个函数，且$ === jQuery，可分为3种功能:

      1，$(function () {    } );  参数是function，功能是入口函数

      2，$("#id"); $(".wrap");等  参数是字符串，一般都是选择器，功能是查找页面的元素

      3，$(domObj);  将dom对象转化成jQuery对象

 

          1.7 jQuery对象和DOM对象

jQuery对象：用jQuery方法获取到的元素返回的对象

DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象

两者的区别：jQuery对象就是DOM对象的包装集（伪数组）

两者之间的转换：

      jQuery对象转DOM对象：通过索引-- jQueryObj[index]  或  jQueryObj.get(index)

      DOM对象转jQuery对象：$(domObj)

 

          1.8 jQuery和javascript

js是一种脚本语言，jQuery是靠js写成的，jQuery就是一个js库

 

二、选择器

基本选择器：

　　#id　　　　　　　　　　　 根据Id匹配一个元素

　　.class　　　　　　　　　　  根据给定的类名匹配一个元素

　　element　　　　　　　　　 根据元素名匹配一个元素

　　*　　　　　　　　　　　　 匹配所有元素

　　selecttor1,selector2　　　 并集，返回两个选择器匹配到的元素

层次选择器：

　　ancestor descendant　　　根据祖先匹配所有的后代元素

　　parent>child　　　　　　　 根据父元素匹配所有的子元素，直接后代

　　prev+next　　　　　　　　 匹配下一个兄弟元素 相当于next()方法

　　prev~siblings　　　　　　   匹配后面的兄弟元素 相当于nextAll()方法     siblings()方法为匹配所有的兄弟元素

简单过滤选择器：

　　:first或first()　　　　　　　 匹配第一个元素

　　:last或last()　　　　　　  　匹配最后一个元素

　　:not(selector)　　　　　　  匹配非selector能匹配到的元素

　　:even　　　　　　　　　　  匹配索引值为偶数的元素，索引号从0开始

　　:odd　　　　　　　　 　　　匹配索引值为奇数的元素，索引号从0开始

　　:eq(index)　　　　　 　　　匹配指定索引号的元素，索引号从0开始

　　:gt(index)　　　　　  　　　匹配索引号大于给定索引值的元素，索引号从0开始

　　:lt(index)　　　　　　  　　 匹配索引号小于给定索引值的元素，索引号从0开始

　:header　　　　　　　　　　匹配所有的标题元素  h1 h2 h3 h4 h5 h6

　　:animated　　　　　　　　  匹配所有正在执行动画的元素

内容过滤选择器：

　　:contains(text)　　　　　　匹配包含给定文本的元素

　　:empty　　　　　　　　　　匹配所有不包含子元素或者文本的空元素

　　:has(selector)　　　　　　  匹配后代中含有selector能匹配上元素的元素

　　:parent　　　　　　　　　　匹配含有子元素或者文本的元素

可见性过滤选择器：

　　:hidden　　　　　　　　　　匹配不可见元素，或者type="hidden"的元素　含有css样式:display:"none";的元素，无论CSS是内联，导入，链接式

　　:visible　　　　　　　　　　 获取所有的可见元素

属性过滤选择器：

　　[attribute]　　　　　　　　 匹配含有给定属性的元素

　　[attribute=value]　　　　   匹配含有属性=value的元素

　　[attribute!=value]　　　　  匹配含有属性但!=value的元素

　　[attribute^=value]　　　　 匹配属性值是以value开始的元素

　　[attribute$=value]　　　　  匹配属性值是以value结束的元素

　　[attribute*=value]　　　　  匹配属性值包含某些值的元素，部分前后，中间有也算

　　[selector][selector]　　　　 匹配属性选择器的交集

子元素过滤选择器：

　　:nth-child(eq|even|odd|index)　　获取所有父元素特定位置的子元素

　　:first　　　　　　　　　　　 获取所有父元素下的第一个子元素

　　:last　　　　　　　　　　　 获取所有父元素下最后一个子元素

　　:only-child　　　　　　　　 获取所有父元素下唯一的一个元素

表单对象属性过滤选择器：

　　:enabled　　　　　　　　    获取表单中所有可用的元素

　　:disabled　　　　　　　　　 获取表单中所有不可用的元素

　　:checked　　　　　　　　　获取表单张所有被选中的元素

　　:selected　　　　　　　　   获取表单中所有被选中的option的元素

表单选择器：

　　:input　　　　　　　　　　 获取所有的表单元素<input开头的，还有textarea select

　　:text　　　　　　　　　　   获取所有的单行文本框　　<input type="text" />

　　:password　　　　　　　　获取所有的密码框元素      <input type="password" />

　　:radio　　　　　　　　　　 获取所有的单选按钮　　　<input type="radio" />

　　:checkbox　　　　　　　　 获取所有的复选框　　　　<input type="checkbox">

　　:submit　　　　　　　　　 获取所有的提交按钮　　　<input type="submit" />

　　:image　　　　　　　　　　获取所有的图像按钮　　 <input type="image" />

　　:reset　　　　　　　　　　获取所有的重置按钮　　　 <input type="reset" />

　　:button　　　　　　　　    获取所有的按钮　　　　　<input type="button">

　　:file　　　　　　　　　　　 获取所有的文件上传框　　<input type="file" />

更多详情请查看这里。