在jquery出世以来,它取得很大的成就和认同。jquery是一个轻量级的javascript框架,它的发布版很小仅16k左右。它能让你方便简洁的写出漂亮的动画效果、实现各种视觉效果,轻松的处理javascript的dom数以及ajax的交互行为。它的优点在于轻量级、简单易学、易扩展、跨浏览器和网上拥有大量的jquery插件使用。由于它这一大堆的优点,它已经被微软官方认可加入vs ide中拥有强大的智能提示,并据官方的统计现在至少有20%的国际性大网站已经加入jquery作为其脚本。
1:首先是javascript的dom 和 jquery包装集的区分
1.1:在javascript中我们访问的方式是操作dom结构,提供的可用方法有:
1: document.getelementbyid(id):根据id获取dom对象。
2:document.getelementsbyname(name):根据html标记name属性获取一个dom数组。
3:document.getelementsbytagname(tag):根据html的tag获取一个dom数组。
1.2:jquery相对dom则提供了许多可用的方法和属性。
jquery简单的获取对象有$(“#id”) ,$(“.class”),$(“tag”)方式,它的书写方式和css3.0相似 id用#,class(css)用.,html tag则直接书写。关于jquery的选择器在下面讲述,这里不急。
1.3:javascript的dom对象转可以化为jquery包装集:通过$(element)赴会就为jquery包装集。
2:jquery最强大的就是提供了一个万能的属性选择器。
2.1基本选择器
选择表达式
说明
举例
#id
根据给定的id匹配一个元素用#
$(#testdiv2) 获取id为testdiv2的元素
.class
根据给定的类匹配元素(也就是取class的值)用.
$(.mydiv) 获取class为mydiv的一组元素
element
根据给定的元素名匹配所有元素,直接写上元素名例如(p,a,input,div等)
$(div) 获取所有的div元素
selector1,selector2,selectorn
将每一个选择器匹配到的元素合并后一起返回,选择器可以是id,class,element用,隔开
$(#testdiv2,p)
$(p,span,div.mydiv) 获取所有的p,span和class为mydiv的元素
*
选择所有的元素
$(*)
2.2简单选择器
选择表达式
说明
举例
:first
匹配找到的第一个元素
$(div:first)
:last
匹配找到的最后一个元素
$(div:last)
:eq(index)
匹配一个给定索引值的元素,当然要存在才可以找得到,索引从0开始
$(div:eq(1))
:gt(index)
匹配所有大于给定索引值的元素
$(div:gt(0)) 查找第1个以后的元素
:lt(index)
匹配所有小于给定索引值的元素
$(div:lt(2)) 查找第一行和第二行的元素
:even
匹配所有索引值为偶数的元素,从 0 开始计数
$(div:even)
查找第1,3,5个div
:odd
匹配所有索引值为奇数的元素,从 0 开始计数
$(div:odd)
查找第2,4个div
:not(selector)
去除所有与给定选择器匹配的元素
selector为表达式,可以是属性里面的一个值
$(input:not(:checked))
查找所有未选中的input 元素[注 :checked为自定义筛选选择器,后面会讲到]
:header
匹配如 h1, h2, h3之类的标题元素
$(:header).css(background, #eee);
添加样式
:animated
匹配所有正在执行动画效果的元素
暂无例子
3.3:内容选择器
选择表达式
说明
举例
:contains(text)
匹配包含给定文本的元素,只要里面出现即可
$(p:contains('段落'))
找带有段落字样的p元素
:empty
匹配所有不包含子元素或者文本的空元素
$(div:empty)
:has(selector)
匹配含有选择器所匹配的元素的元素
$(div:has('p'))
:parent
匹配含有子元素或者文本的元素
$(div:parent)
4.4子元素选择器
选择器
说明
举例
:first-child
匹配第一个子元素
$(ul li:first-child)//在每个 ul 中查找第一个 li
:last-child
匹配最后一个子元素
$(ul li:last-child)//在每个 ul 中查找最后一个 li
:nth-child(index/even/odd/equation)
匹配其父元素下的第n个子或奇偶元素
':eq(index)' 只匹配一个元素,而这个将为每一个父元素匹配子元素。:nth-child从1开始的,而:eq()是从0算起的!
可以使用:
nth-child(even)//偶数行
:nth-child(odd)//奇数行
:nth-child(3n)
:nth-child(2)//索引为2的
:nth-child(3n+1)
:nth-child(3n+2)
$(ul li:nth-child(2))//在每个 ul 查找第 2 个li
:nth-child(index/even/odd/equation)
匹配其父元素下的第n个子或奇偶元素
$(ul li:nth-child(2))//在每个 ul 查找第 2 个li
:only-child
如果某个元素是父元素中唯一的子元素,那将会被匹配
如果父元素中含有其他元素,那将不会被匹配。
$(ul li:only-child)//在 ul 中查找是唯一子元素的 li
4.5:可见性选择器
选择器
说明
举例
:hidden
匹配所有的不可见元素,input 元素的 type 属性为 hidden 的话也会被匹配到
$(div:hidden)
:visible
匹配所有的可见元素
$(div:visible)//元素来匹配
$(.divh:visible)//根据class来匹配
例子就不用多讲了,大家对于jquery应该都有一定的见地了。呵呵…