JQuery小结

2017-10-19 本文已影响4人 alonwang

选择器

元素选择器

("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);