jQuery 元素选择器
$(“p”)选取p元素
$(“p.intro")选取class=“intro”的<p>元素
$(“p#demo")选取id = “demo”的<p>元素
jQuery属性选择器
$(“[href]”)选取所有带有href属性的元素
$(“[href=‘#']")选取所有带有href值等于”#"的元素
$(“[href!=‘#']")选取所有带有href值不等于”#"的元素
$(“[href$=‘.jpg']”)选取所有href值以.jpg结尾的元素
jQueryCSS选择器
$("p").css("background-color", "red");
$(this)当前html元素
$(“ul li:first”)每个ul下的第一个li元素
$(“div #intor .head”)id=“into”的<div>元素中的所有的class=“head"元素
jQuery事件
jQuery 代码通常放到<head>部分的事件处理方法中
$(document).ready(function)将函数绑定到文档的就绪事件
$(selector).click(function)被选元素的点击事件
//服务器上可用
$(selector).dblclick(function)被选元素的双击事件
$(selector).focus(function)被选元素获得焦点事件
$(selector).mouseover(function)被选元素的悬停事件
jQuery效果
隐藏与显示
hide() 隐藏 show() 显示
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
speed 速度 取值 slow | fast | 毫秒
callback 隐藏或者显示完后所执行的函数
jQuery toggle() 来切换hide() 和show()方法
淡入淡出
fadeIn() fadeOut() fadeToggle() fadeTo()
$(selector).fadeIn(speed,callback);
$(selector).fadeTo(speed, opacity, callback);
fadeIn用于淡入已隐藏的元素
fadeIn用于淡出可见元素
fadeToggle切换淡入和淡出
fadeTo 渐变为给定的不透明度
$("button").click(function(){
$("#div1").fadeOut("s") //淡出
$("#div1").fadeToggle(5); //淡入淡出
$("#div1").fadeTo("slow", 0.4);
});
滑动
slideUp( ) 向上滑动元素 slideDown( )向下滑动元素 slideToggle 切换
$(".uPAndDownShow").slideToggle();
动画
$(selector).animate({params},speed, callback)
获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
设置内容 - text()、html() 以及 val()
我们将使用前一章中的三个相同的方法来设置内容：
- text() - 设置或返回所选元素的文本内容
- html() - 设置或返回所选元素的内容（包括 HTML 标记）
- val() - 设置或返回表单字段的值
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
设置属性 - attr()
jQuery attr() 方法也用于设置/改变属性值。
实例
$("button").click(function(){
$("#w3s").attr({
"href" : "http://www.w3school.com.cn/jquery",
"title" : "W3School jQuery Tutorial"
});
});
添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
- append() - 在被选元素的结尾插入内容
- prepend() - 在被选元素的开头插入内容
- after() - 在被选元素之后插入内容
- before() - 在被选元素之前插入内容
function appendText()
{
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p"); // 以 DOM 创建新元素
txt3.innerHTML="Text.";
$("p").append(txt1,txt2,txt3); // 追加新元素
}
$("p").prepend("Some prepended text.");
$("img").before("<b>Before</b>");
$("img").after("<i>After</i>");
$("img").before("<b>Before</b>");
$(document).ready(function(){
$("#btn1").click(function(){
$("p").prepend("<b>Prepended text</b>. ");
});
$("#btn2").click(function(){
$("ol").prepend("<li>Prepended item</li>");
});
var txt1="<p>Text.</p>"; // 以 HTML 创建新元素
var txt2=$("<p></p>").text("Text."); // 以 jQuery 创建新元素
var txt3=document.createElement("p");
txt3.innerHTML="Text."; // 通过 DOM 来创建文本
$("body").append(txt1,txt2,txt3); // 追加新元素
}
<p>This is a paragraph.</p>
<button onclick="appendText()">追加文本</button>
| 注意事项： |
| (1)动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他方法将其插入文档中。 |
| (2)当创建单个元素时，要注意闭合标签和使用标准的XHTML格式。 |
| 例如创建一个<p> 元素，使用$("<p/>")或者("<p></p>"),但是不要使用$("<p>")或者大写的$("<P/>"); |
删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
- remove() - 删除被选元素（及其子元素）
- empty() - 从被选元素中删除子元素
删除 class="italic" 的所有 <p> 元素：
$("p").remove(".italic");
jQuery 提供多个处理尺寸的重要方法：
- width()
- height()
- innerWidth()
- innerHeight()
- outerWidth()
- outerHeight()
jQuery width() 和 height() 方法
width() 方法设置或返回元素的宽度（不包括内边距、边框或外边距）。
height() 方法设置或返回元素的高度（不包括内边距、边框或外边距）。
jQuery outerWidth() 和 outerHeight() 方法
outerWidth() 方法返回元素的宽度（包括内边距和边框）。
outerHeight() 方法返回元素的高度（包括内边距和边框）。
向上遍历 DOM 树
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
- parent()
- parents()
- parentsUntil()
- 返回每个 <span> 元素的的直接父元素：
- $(document).ready(function(){
$("span").parent();
}); - 返回所有 <span> 元素的所有祖先：
- $(document).ready(function(){
$("span").parents("ul");
}); - jQuery parentsUntil() 方法
parentsUntil() 方法返回介于两个给定元素之间的所有祖先元素。
下面的例子返回介于 <span> 与 <div> 元素之间的所有祖先元素：
实例
$(document).ready(function(){
$("span").parentsUntil("div");
}); - children() 方法返回被选元素的所有直接子元素。
$(document).ready(function(){
$("div").children();
});
返回类名为 "1" 的所有 <p> 元素，并且它们是 <div> 的直接子元素：
$(document).ready(function(){
$("div").children("p.1");
});
jQuery find() 方法
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代。
返回属于 <div> 后代的所有 <span> 元素：
$(document).ready(function(){
$("div").find("span");
});
返回 <div> 的所有后代：
$(document).ready(function(){
$("div").find("*");
});'
在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历：
- siblings()
- next()
- nextAll()
- nextUntil()
- prev()
- prevAll()
- prevUntil()
- jQuery siblings() 方法
siblings() 方法返回被选元素的所有同胞元素。
返回 <h2> 的所有同胞元素：
$(document).ready(function(){
$("h2").siblings();
}); - 返回属于 <h2> 的同胞元素的所有 <p> 元素：
- $(document).ready(function(){
$("h2").siblings("p");
}); - jQuery next() 方法
next() 方法返回被选元素的下一个同胞元素。
该方法只返回一个元素。
返回 <h2> 的下一个同胞元素：
$(document).ready(function(){
$("h2").next();
}); - jQuery nextAll() 方法
nextAll() 方法返回被选元素的所有跟随的同胞元素。
返回 <h2> 的所有跟随的同胞元素：
$(document).ready(function(){
$("h2").nextAll();
}); - jQuery nextUntil() 方法
nextUntil() 方法返回介于两个给定参数之间的所有跟随的同胞元素。
返回介于 <h2> 与 <h6> 元素之间的所有同胞元素：
$(document).ready(function(){
$("h2").nextUntil("h6");
}); - jQuery prev(), prevAll() & prevUntil() 方法
prev(), prevAll() 以及 prevUntil() 方法的工作方式与上面的方法类似，只不过方向相反而已：它们返回的是前面的同胞元素（在 DOM 树中沿着同胞元素向后遍历，而不是向前）。 - 缩写搜索元素的范围
三个最基本的过滤方法是：first(), last() 和 eq()， - 选取首个 <div> 元素内部的第一个 <p> 元素：
$(document).ready(function(){
$("div p").first();
}); - 择最后一个 <div> 元素中的最后一个 <p> 元素：
- $(document).ready(function(){
$("div p").last();
}); - jQuery eq() 方法
eq() 方法返回被选元素中带有指定索引号的元素。
索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个 <p> 元素（索引号 1）：
$(document).ready(function(){
$("p").eq(1);
});
jQuery filter() 方法
filter() 方法允许您规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。
返回带有类名 "intro" 的所有 <p> 元素：
$(document).ready(function(){
$("p").filter(".intro");
});
jQuery not() 方法
not() 方法返回不匹配标准的所有元素。
提示：not() 方法与 filter() 相反。
返回不带有类名 "intro" 的所有 <p> 元素：
$(document).ready(function(){
$("p").not(".intro");
});