入口函数:
$(document).ready(function(){ }); 可以简写为 $(function(){ })
选择器:
选择器是jquery的根基。
基本选择器:
元素选择器:$("p") 所有 <p> 元素。
id选择器:
#id $("#lastname") id="lastname" 的元素
class选择器:
.class $(".intro") 所有 class="intro" 的元素
查找所有元素:$("*") 所有元素。
组合选择器:
$('span,#two'); //组合选择器,选择span元素和id为two的元素
选择当前元素:$(this) 选择当前的html元素。
层次选择器:
我们可以把文档中的所有的节点节点之间的关系,用传统的家族关系来描述,可以把文档树当作一个家谱,那么节点与节点直接就会存在父子,兄弟,祖孙的关系了。
后代元素、子元素、相邻元素和兄弟元素:
$('body>div').css('background','pink'); //选择body里面的div子元素
$('body div').css('background','yellow'); //选择body里面所有的div元素
$('.one+div').css('background','black'); //选择class为one的下一个兄弟元素
$('#two~div').css('background','grey'); //选择id为two的元素的后面所有的div兄弟元素。前提是具有相同的父元素
$('#two').siblings('div'):选取#two所有同辈的div元素,无论前后位置
过滤选择器:与css中的伪类选择器相同,以冒号(:)开头。
:first $("p:first") 第一个 <p> 元素 :last $("p:last") 最后一个 <p> 元素 :even $("tr:even") 所有偶数 <tr> 元素 :odd $("tr:odd") 所有奇数 <tr> 元素 :eq(index) $("ul li:eq(3)") 列表中的第四个元素(index 从 0 开始) :gt(no) $("ul li:gt(3)") 列出 index 大于 3 的元素 :lt(no) $("ul li:lt(3)") 列出 index 小于 3 的元素 :header $(":header") 所有标题元素 <h1> - <h6> :animated 所有正在执行动画的元素 :contains(text) $("div:contains('W3School')") 包含指定字符串的所有元素 :hidden $("p:hidden") 所有隐藏的 <p> 元素 :visible $("table:visible") 所有可见的表格 [attribute] $("[href]") 所有带有 href 属性的元素 [attribute=value] $("[href='#']") 所有 href 属性的值等于 "#" 的元素 [attribute!=value] $("[href!='#']") 所有 href 属性的值不等于 "#" 的元素 [attribute$=value] $("[href$='.jpg']") 所有 href 属性的值包含以 ".jpg" 结尾的元素
表单选择器:
:input $(":input") 所有 <input> 元素 :text $("input:text") 所有 type="text" 的 <input> 元素 :password $("input:password") 所有 type="password" 的 <input> 元素 :radio $("input:radio") 所有 type="radio" 的 <input> 元素 :checkbox $("input:checkbox") 所有 type="checkbox" 的 <input> 元素 :submit $("input:submit") 所有 type="submit" 的 <input> 元素 :reset $("input:reset") 所有 type="reset" 的 <input> 元素 :button $("input:button") 所有 type="button" 的 <input> 元素 :image $("input:image") 所有 type="image" 的 <input> 元素 :file $("input:file") 所有 type="file" 的 <input> 元素 :not(selector) $("input:not(:empty)") 所有不为空的 input 元素 :enabled $("input:enabled") 所有激活的 input 元素 :disabled $("input:disabled") 所有禁用的 input 元素 :selected $("input:selected") 所有被选取的 input 元素 :checked $("input:checked") 所有被选中的 input 元素