选择器
元素选择器
("p") 选取p元素。
$("p.intro") 选取所有 class="intro" 的 p 元素。
$("p#demo") 选取所有 id="demo" 的 p 元素。
属性选择器
- $("[href]") 选取所有带有 href 属性的元素。
- $("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
- $("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
- $("[href='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。
CSS选择器
- 把所有 p 元素的背景颜色更改为红色 $("p").css("background-color","red");
事件
当按钮的点击事件被触发时会调用一个函数:
$("button").click(function() {..some code... } )
名称冲突
jQuery 使用 $符号作为 jQuery 的简介方式。
某些其他 JavaScript 库中的函数(比如 Prototype)同样使用$ 符号。
jQuery 使用名为 noConflict() 的方法来解决该问题。
var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号。
Html
获得(设置)
text()、html() 以及 val()
不带参表示获取数据,带参表示设置内容
添加
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
删除
- remove() - 删除被选元素(及其子元素)
- empty() - 从被选元素中删除子元素
获取并设置 CSS 类
- addClass() - 向被选元素添加一个或多个类
- removeClass() - 从被选元素删除一个或多个类
- toggleClass() - 对被选元素进行添加/删除类的切换操作
- css() - 设置或返回样式属性
尺寸
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
遍历
祖先
- parent() 返回被选元素的直接父元素
- parents() 返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>)。
- parentsUntil() 返回介于两个给定元素之间的所有祖先元素。
后代
- children() 返回被选元素的所有直接子元素
- find() 返回被选元素的后代元素,一路向下直到最后一个后代。
同胞
- siblings() 返回被选元素的所有同胞元素
- next() 返回被选元素的下一个同胞元素
- nextAll() 返回被选元素的所有跟随的同胞元素
- nextUntil() 返回介于两个给定参数之间的所有跟随的同胞元素
- prev()
- prevAll()
- prevUntil()
过滤
- first() 返回被选元素的首个元素
- last() 返回被选元素的最后一个元素
- eq() 返回被选元素中带有指定索引号的元素
- filter() 不匹配这个标准的元素会被从集合中删除,匹配的元素会被返回。
- not() 返回不匹配标准的所有元素。
Ajax
load
$(selector).load(URL,data,callback);
get
$.get(URL,callback);
post
$.post(URL,data,callback);