jQuery的一些元素和选择器

jQuery由美国人John Resig于2006年创建
jQuery是目前最流行的JavaScript程序

库，它是对JavaScript对象和函数的封装
它的设计思想是write less,do more
优势：
体积小，压缩后只有100KB左右
强大的选择器
出色的DOM封装
可靠的事件处理机制
出色的浏览器兼容性
使用隐式迭代简化编程
丰富的插件支持
window.onload $(document).ready()

执行时机

• 必须等待网页中所有的内容加载完毕后（包括图片、flash、视频等）才能执行网页中所有DOM文档结构绘制完毕后即刻执行，可能与DOM元素关联的内容（图片、flash、视频等）并没有加载完编写个数 同一页面不能同时编写多个 同一页面能同时编写多个简化写法

• $(function()//执行代码)?;工厂函数$()：将DOM对象转化为jQuery对象选择器 selector：获取需要操作的

DOM 元素

方法action()：jQuery中提供的方法，其中包括绑定事件处理的方法

使用addClass( )方法为元素添加样式$(this).css

({“background”:"#c81623"});

$(selector).show( );显示

$(selector).hide( );隐藏

选择器

• jQuery选择器功能强大，种类也很多，分类如下
• 通过CSS选择器选取元素

基本选择器

• id 类 标签

• 名称 语法构成 描述 示例

• 标签选择器 element 根据给定的标签名匹配元素 $(“h2”?)选取所有h2元素。

• 类选择器 .class 根据给定的class匹配元素 $(" .title")选取所有class为title的元素。

• ID选择器 #id 根据给定的id匹配元素 $(" #title")选取id为title的元素。

• 并集选择器 selector1,selector2,…,selectorN 将每一个选择器匹配的元素合并后一起返回 $(“div,p,.title”?)选取所有div、p和拥有class为title的元素。

• 全局选择器 * 匹配所有元素 $("*"?)选取所有元素。

层次选择器

名称 语法构成 描述 示例

• 后代选择器 ancestor descendant 选取ancestor元素里的所有descendant（后代）元素 $("#menu span"?)选取#menu下的元素
• 子选择器 parent>child 选取parent元素下的child（子）元素 $("#menu>span"?)选取#menu的子元素
• 相邻元素选择器 prev+next 选取紧邻prev元素之后的next元素 $(" h2+dl "?)选取紧邻< h2 >元素之后的同辈元素< dl >

同辈元素选择器

• prev~sibings 选取prev元素之后的所有siblings元素 $(" h2~dl "?)选取< h
  2>元素之后所有的同辈元素< dl >

属性选择器

• [attribute] 选取包含给定属性的元素 $(" [href]"?)选取含有href属性的元素
• [attribute=value] 选取等于给定属性是某个特定值的元素 $(" [href =’#’]"?)选取href属性值为“#”的元素
• [attribute!=value] 选取不等于给定属性是某个特定值的元素 $(" [href?!=’#’]"?)选取href属性值不为“#”的元素
• [attribute^=value] 选取给定属性是以某些特定值开始的元素 $(" [href^=‘en’]"?)选取href属性值以en开头的元素
• [attribute$=value] 选取给定属性是以某些特定值结尾的元素 $("
• [href$=’.jpg’]"?)选取href属性值以.jpg结尾的元素
• [attribute*=value] 选取给定属性是以包含某些值的元素 $(" [href* =‘txt’]"?)选取href属性值中含有txt的元素

基本过滤选择器

语法 描述 示例

• :first 选取第一个元素 $(" li:first"?)选取所有< li >元素中的第一个< li >元素
• :last 选取最后一个元素 $(" li:last"?)选取所有< li >元素中的最后一个< li >元素
• :not(selector) 选取去除所有与给定选择器匹配的元素 $(" li:not(.three)" )选取class不是three的元素
• :even 选取索引是偶数的所有元素（index从0开始） $(" li:even"?)选取索引是偶数的所有< li >元素
• :odd 选取索引是奇数的所有元素（index从0开始） $(" li:odd"?)选取索引是奇数的所有< li >元素
• :eq(index) 选取索引等于index的元素（index从0开始） $(“li:eq(1)”?)选取索引等于1的< li >元素
• :gt(index) 选取索引大于index的元素（index从0开始） $(" li:gt(1)"?)选取索引大于1的< li >元素（注：大于1，不包括1）
• :lt(index) 选取索引小于index的元素（index从0开始） $(“li:lt(1)”?)选取索引小于1的< li >元素（注：小于1，不包括1）
• :header 选取所有标题元素，如h1~h6 $(":header"?)选取网页中所有标题元素
• :focus 选取当前获取焦点的元素 $(":focus"?)选取当前获取焦点的元素
• :animated 选择所有动画 $(":animated" )选取当前所有动画元素