JQuery知识补充1
1.DOM加载完成后执行的代码
(1)
$(document).ready(function() { // 开始写 jQuery 代码... } );
(2)
$(function(){ // 开始写 jQuery 代码... });
2.选择器补充
$("p:first") | 选取第一个 <p> 元素 |
$("ul li:first") | 选取第一个 <ul> 元素的第一个 <li> 元素 |
$("ul li:first-child") | 选取每个 <ul> 元素的第一个 <li> 元素 |
$("[href]") | 选取带有 href 属性的元素 |
$("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的 <a> 元素 |
$("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 <a> 元素 |
$("tr:even") | 选取偶数位置的 <tr> 元素 |
$("tr:odd") | 选取奇数位置的 <tr> 元素 |
3.基础事件执行间隔与回调
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
基本上都具有该属性
4.方法链接(多个事件依次执行)
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
效果:颜色先变红,向上2000毫秒内逐渐隐藏,然后向下2000毫秒内逐渐显示
5.遍历
(1)遍历父级
- 父级(第一父级): JQuery parent() 例:$("span").parent();
- 所有父级,包含父级以上级别,直到最顶级:JQuery parents() 例:$("span").parents();
- 介于当前选择器和某个选择器之间的(只能筛选父级及父级以上) JQuery parentsUntil(): 例: $("span").parentsUntil("div");
(2)遍历子级
- 第一级子级:JQuery.children() 例:$("div").children();
- 返回某个或某些指定子级::JQuery.chidren() 例; $("div").children("p.1"); 返回类名为1的P标记子元素(是一个返回一个,是多个返回多个)
- 返回所有子级:JQuery.find() 例:$("div").find(" * ")
(3)水平遍历
- 返回所有平级元素JQuery siblings(); 例:$("h2").siblings(); $("h2").siblings("p");[返回所有平级P标记元素]
- 返回平级元素位置上的下一个元素:JQuery.next(); 例:$("h2").next();
- 返回平级元素位置上的后面的所有元素:JQuery.nextAll(); 例:$("h2").nextAll();
- 返回两个水平元素之间的所有元素:JQuery.nextUntil(); 例:$("h2").nextUntil("h6");
(4)过滤遍历
返回选取元素中的第一个元素:JQuery.first(); 例:$("div p").first();
返回选取元素中的最后一个元素:JQuery.last(); 例:$("div p").last();
返回选取元素中某个索引元素(索引从0开始):JQuery.eq(); 例:$("div").eq(0);
返回匹配元素,不匹配的会从集合中删除,只在集合中保留匹配元素:JQuery.filter(); 例:$("div").filter(".url");[集合中都是带url标签的div]
返回不匹配元素,与filter相反.JQuery.not();