介绍
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(框架)于2006年1月由John Resig发布。jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情。它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口;具有高效灵活的CSS选择器,并且可对CSS选择器进行扩展;拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
jQuery对象和函数包含以下内容:
- 选择器
- 事件
- 效果
- 文档操作
- 属性
- CSS
- AJAX
- 遍历
- 数据
- DOM元素
- 核心
详情可以查看 jQuery 中文文档
jQuery基本用法
jQuery对象就是通过jQuery包装DOM对象后产生的对象。jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象,那么它就可以使用jQuery里的方法:例如$("#container").html()。
$("#container").html()
的意思是:获取id值为 container
的元素的html代码。其中 html()是jQuery里的方法。相当于: document.getElementById("container").innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的,但是 jQuery对象无法使用 DOM对象的任何方法,同理 DOM对象也没不能使用 jQuery里的方法。
使用jQuery对象变量时需要在变量名前加$。
var $foo = jQuery对象
选择器
id选择器
$('#container')
标签选择器
$('div')
类名选择器
$('.customClass')
同时包含class=container和classcustomClass的元素
$('.container.customClass')
所有包含class=container的div标签
$('div.container')
选择所有元素
$('*')
div中的所有后代div
$('div div')
div中的所有儿子div
$('div > div')
div之后紧挨着的div
$('div + div')
div之后所有的兄弟div
$('div ~ div')
:first 第一个元素
$('p:first') // 第一个p标签
:last 最后一个元素
$('p:last') // 最后一个p标签
:eq(index) 第(index+1)个标签
$("ul li:eq(3)") // ul中的第四个li(index 从 0 开始)
:even(index) 所有索引为偶数的元素
$("p:even") // 索引为偶数的p元素
:odd 所有索引为奇数的元素
$("p:odd") // 索引为奇数的p元素
:gt(index) 所有大于索引值的元素
$("ul li:gt(3)") // ul中索引大于3的li元素
:lt(index) 所有小于索引值的元素
$("ul li:lt(3)") // ul中索引小于3的li元素
:not(元素选择器)
$("input:not(#name)") // 不包括id=name的所有input元素
具有attribute属性的元素
[attribute]
attribute属性值为value的元素
[attribute=value]
attribute属性不为value的元素
[attribute!=value]
attribute属性值以value结尾的元素
[attribute$=value]
表单筛选器
type=text的input元素
$(':text')
type=password的input元素
$(':password')
type=file的input元素
&(':file')
type=radio的input元素
$(':radio')
type=checkbox的input元素
$(':checkbox')
type=submit的input元素
$(':submit')
type=reset的input元素
$(':reset')
type=button的input元素
$(':button')
表单对象属性
:enabled
:disabled
:checked
:selected
选择器方法
$('#id').next() // 同级别的下一个元素
$('#id').nextAll() // 同级别的下面所有元素
$('#id').nextUntil('#stop') // 同级别往下到匹配位置为止的所有元素
$("#id").prev() // 同级别的上一个元素
$("#id").prevAll() // 同级别的上面所有元素
$("#id").prevUntil("#stop") // 同级别往上到匹配位置为止的所有元素
$("#id").parent() // 查找当前元素的父元素
$("#id").parents() // 查找当前元素的所有的父元素
$("#id").parentsUntil('#stop') // 查找当前元素的所有的父元素,直到遇到匹配的那个元素为止。
$("div").first() // 获取匹配的第一个元素
$("div").last() // 获取匹配的最后一个元素
$("div").not('#container') // 从匹配元素的集合中删除与指定表达式匹配的元素
$("div").has('p') // 保留包含特定后代的元素,去掉那些不含有指定后代的元素。
$("div").eq(3) // 索引值等于指定值的元素
文档操作
$(x).append(y) // 把y追加到x元素内部的最后 $(x).appendTo(y) // 把x追加到y元素内部的最后 $(x).prepend(y) // 把y元素添加到x内部的最前 $(x).prependTo(y) // 把x元素添加到y内部的最前 $(x).after(y) // 把y元素放到x的后面 $(x).insertAfter(y) // 把x元素放到y的后面 $(x).before(y) // 把y元素放到x前面 $(x).insertBefore(y) // 把x元素放到y前面 $('id').remove() // 从DOM中删除所有匹配的元素 $('id').empty() // 删除匹配的元素集合中所有的子节点