文档就绪处理程序:
—在DOM树加载完毕之后立即触发脚本的执行
$(function () {
//这里是你的jQuery代码
});
或
$(document).ready(function(){
//这里是你的jQuery代码
});
在jQuery中,基本选择器共有5种:
• (1)元素选择器;$("元素名")
,$("div").css("color","red")
;
• (2)id选择器;$("#id名")
• (3)class选择器;$(".类名")
• (4)群组选择器;$("选择器1 , 选择器2 ,……,选择器n")
jQuery层次选择器
$("M N")
:后代选择器,选择M元素内部后代N元素(所有N元素)
$("M>N")
:子代选择器,选择M元素内部子代N元素(所有第1级N元素)
$("M~N")
:兄弟选择器,选择M元素后所有的同级N元素
$("M+N")
:相邻选择器,选择M元素相邻的下一个元素(M、N是同级元素)
$("M.C ")
:选择类名为C的M元素
$("M#I ")
:选择id为I的M元素
注:(1)$("M+N")
可以使用“$(M元素).next()
”代替;
(2)$("M~N")
可以使用“$(M元素).nextAll()
”代替;
jQuery属性选择器
$("selector[attr]")
:选择包含给定属性的元素
$("selector[attr='value']")
:选择给定的属性是某个特定值的元素
$("selector[attr != 'value']")
:选择所有含有指定的属性,但属性不等于特定值的元素
$("selector[attr *= 'value']")
:选择给定的属性是以包含某些值的元素
$("selector[attr ^= 'value']")
:选择给定的属性是以某些值开始的元素(比较少用)
$("selector[attr $= 'value']")
:选择给定的属性是以某些值结尾的元素(比较少用)
$("selector[selector1][selector2]…[selectorN]")
:复合属性选择器,需要同时满足多个条件时使用
注:selector指的是选择器,attr指的是属性(attribute),value指的是属性值。
例:选择具有id属性并且class属性是以nav开头的div元素,例如<div id="div1" class="lvye-div">
绿叶学习网</div>:$("div[id][class ^='lvye']")
jQuery简单伪类选择器
:not(selector) 选择除了某个选择器之外的所有元素
:first或first() 选择某元素的第一个元素(非子元素)
:last或last() 选择某元素的最后一个元素(非子元素)
:odd 选择某元素的索引值为奇数的元素
:even 选择某元素的索引值为偶数的元素
:eq(index) 选择给定索引值的元素,索引值index是一个整数,从0开始
:lt(index) 选择所有小于索引值的元素,索引值index是一个整数,从0开始
:gt(index) 选择所有大于索引值的元素,索引值index是一个整数,从0开始
:header 选择h1~h6的标题元素
:animated 选择所有正在执行动画效果的元素
:root 选择页面的根元素
:target 选择当前活动的目标元素(锚点)
【注】:“:not”过滤器
例:排除src特性值包含dog文本的图片:
$('img:not([src*=”dog”])')
不能写成:$(':not(img[src*="dog"])')——也会选择DOM中所有不是图片的元素
子元素伪类选择器(1)
:first-child 选择父元素的第1个子元素
:last-child 选择父元素的最后1个子元素
:nth-child(n) 选择父元素下的第n个元素或奇偶元素,n的值为“整数|odd|even|Xn+y(表达式)”
:only-child 选择父元素中唯一的子元素(该父元素只有一个子元素)
子元素伪类选择器(2)
:first-of-type 选择同元素类型的第1个同级兄弟元素
:last-of-type 选择同元素类型的最后1个同级兄弟元素
:nth-of-type 选择同元素类型的第n个同级兄弟元素,n的值可以是“整数|odd|even”
:only-of-type 匹配父元素中特定类型的唯一子元素(但是父元素可以有多个子元素)
【注】“:first-child”是选择父元素下的第1个子元素(不区分元素类型),而“:first-of-type”是选择父元素下某个元素类型的第1个子元素(区分元素类型);
jQuery可见性伪类选择器
:hidden 选取所有不可见元素
:visible 选取所有可见元素,与:hidden相反
【注】“:hidden”选择器选择的不仅包括样式为display:none所有元素,而且还包括属性type=”hidden”和样式为visibility:hidden的所有元素。
jQuery内容伪类选择器
:contains(text) 选择包含给定文本内容的元素
:has(selector) 选择含有选择器所匹配元素的元素
:empty 选择所有不包含子元素或者不包含文本的元素
:parent 选择含有子元素或者文本的元素(跟:empty相反)
例:$("E:contains(text)")
说明:E表示元素名,text表示所包含的文本内容。
【注】“:has”过滤器
例如“div:has(span)”—选择包含span元素的所有div元素
“div span” —选择div元素子节点中所有的span元素
jQuery表单伪类选择器
:input 选择所有input元素
:button 选择所有普通按钮,即type=”button”的input元素
:submit 选择所有提交按钮,即type=”submit”的input元素
:reset 选择所有重置按钮,即type=”reset”的input元素
:text 选择所有单行文本框
:textarea 选择所有多行文本框
:password 选择所有密码文本框
:radio 选择所有单选按钮
:checkbox 选择所有复选框
:image 选择所有图像域
:hidden 选择所有隐藏域
:file 选择所有文件域
jQuery表单属性伪类选择器
:checked 选择所有被选中的表单元素,一般用于radio和checkbox
option:selected 选择所有被选中的option元素
:enabled 选择所有可用元素,一般用于input、select和textarea
:disabled 选择所有不可用元素,一般用于input、select和textarea
:read-only 选择所有只读元素,一般用于input和textarea
:focus 选择获得焦点的元素,常用于input和textarea