JQuery入门笔记

（1）选择器（2）方法链接（3）获得内容 - text()、html() 以及 val(), 获取属性 - attr()（3.1）获取内容（3.2）获取属性（3.3）设置内容（3.4）设置属性（3.5）修改属性 （4）添加元素（5）删除元素（6）操作css类（7）节点遍历（7.1）祖先（7.2）后代（7.3）同胞（7.4）过滤 （8）

（1）选择器

$(this).hide() - 隐藏当前元素$(“p”).hide() - 隐藏所有

元素

$(“p.test”).hide() - 隐藏所有 class=“test” 的

元素

$("#test").hide() - 隐藏 id=“test” 的元素$("*") - 选取所有元素$(this) - 选取当前 HTML 元素$(“p.intro”) - 选取 class 为 intro 的

元素

$(“p:first”) - 选取第一个

元素

$(“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> 元素$(":button") - 选取所有 type=“button” 的 <input> 元素 和 <button> 元素$(“tr:even”) - 选取偶数位置的 <tr> 元素$(“tr:odd”) - 选取奇数位置的 <tr> 元素

（2）方法链接

$("#p1").css(“color”,“red”).slideUp(2000).slideDown(2000);

（3）获得内容 - text()、html() 以及 val(), 获取属性 - attr()

（3.1）获取内容

text() - 设置或返回所选元素的文本内容（Text: 这是段落中的 粗体 文本。）html() - 设置或返回所选元素的内容（包括 HTML 标记）（HTML: 这是段落中的 粗体 文本。）val() - 设置或返回表单字段的值

（3.2）获取属性

<p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p> <button>显示 href 属性的值</button>

alert($("#runoob").attr(“href”));显示的结果是//www.runoob.com

（3.3）设置内容

$("#btn1").click(function(){ $("#test1").text("Hello world!"); }); $("#btn2").click(function(){ $("#test2").html("<b>Hello world!</b>"); }); $("#btn3").click(function(){ $("#test3").val("RUNOOB"); });

（3.4）设置属性

（1）设置一个属性

$("button").click(function(){ $("#runoob").attr("href","http://www.runoob.com/jquery"); });

（2）设置多个属性

$("button").click(function(){ $("#runoob").attr({ "href" : "http://www.runoob.com/jquery", "title" : "jQuery 教程" }); });

（3.5）修改属性

$("button").click(function(){ $("#runoob").attr("href", function(i,origValue){ return origValue + "/jquery"; }); });

（4）添加元素

（1）append() 方法：在被选元素的结尾插入文本/HTML

$("p").append("追加文本");

（2）prepend() 方法：在被选元素的开头插入文本/HTML

$("p").prepend("在开头追加文本");

（3）添加多个新元素

function appendText(){ var txt1="<p>文本-1。</p>"; // 使用 HTML 标签创建文本 var txt2=$("<p></p>").text("文本-2。"); // 使用 jQuery 创建文本 var txt3=document.createElement("p"); txt3.innerHTML="文本-3。"; // 使用 DOM 创建文本 text with DOM $("body").append(txt1,txt2,txt3); // 追加新元素 }

（4）after() 方法：在被选元素之后插入内容

$("img").after("在后面添加文本");

（5）before() 方法：在被选元素之前插入内容

$("img").before("在前面添加文本");

（6）添加若干新元素

function afterText() { var txt1="<b>I </b>"; // 使用 HTML 创建元素 var txt2=$("<i></i>").text("love "); // 使用 jQuery 创建元素 var txt3=document.createElement("big"); // 使用 DOM 创建元素 txt3.innerHTML="jQuery!"; $("img").after(txt1,txt2,txt3); // 在图片后添加文本 }

（5）删除元素

（1）remove() 方法：删除被选元素及其子元素（都删除）

$("#div1").remove();

（2）empty() 方法：删除被选元素的子元素（只删除子元素）

$("#div1").empty();

（3）使用选择器进行过滤删除 下面的例子删除 class=“italic” 的所有

元素

$("p").remove(".italic");

（6）操作css类

（1）addClass() 方法 在添加类时，您也可以选取多个元素：

$("button").click(function(){ $("h1,h2,p").addClass("blue"); $("div").addClass("important"); });

也可以在 addClass() 方法中规定多个类：

$("button").click(function(){ $("body div:first").addClass("important blue"); });

（2）removeClass() 方法 在不同的元素中删除指定的 class 属性：

$("button").click(function(){ $("h1,h2,p").removeClass("blue"); });

（3）oggleClass() 方法 对被选元素进行添加/删除类的切换操作：

$("button").click(function(){ $("h1,h2,p").toggleClass("blue"); });

（4）css() 方法 1-返回 CSS 属性

$("p").css("background-color");

2-设置 CSS 属性

$("p").css("background-color","yellow");

3-设置多个 CSS 属性

$("p").css({"background-color":"yellow","font-size":"200%"});

（7）节点遍历

（7.1）祖先

（1）parents() 方法：返回被选元素的所有祖先元素，它一路向上直到文档的根元素 ()

$(document).ready(function(){ $("span").parents().css({"color":"red","border":"2px solid red"}); });

（2）parentsUntil() 方法：返回介于两个给定元素之间的所有祖先元素

$(document).ready(function(){ $("span").parentsUntil("div").css({"color":"red","border":"2px solid red"}); });

（7.2）后代

（3）children() 方法：返回被选元素的所有直接子元素

$(document).ready(function(){ $("div").children().css({"color":"red","border":"2px solid red"}); });

也可以加上选择器进行过滤：

$(document).ready(function(){ $("div").children("p.1").css({"color":"red","border":"2px solid red"}); });

（4）find() 方法：返回被选元素的后代元素，一路向下直到最后一个后代 1-返回属于

后代的所有 元素：

$(document).ready(function(){ $("div").find("span"); });

2-返回

的所有后代：

$(document).ready(function(){ $("div").find("*"); });

（7.3）同胞

（5）siblings() 方法：返回被选元素的所有同胞元素 1-返回

的所有同胞元素：

$(document).ready(function(){ $("h2").siblings(); });

2-添加选择器过滤，返回属于

的同胞元素的所有

元素：

$(document).ready(function(){ $("h2").siblings("p"); });

（6）next() 方法：返回被选元素的下一个同胞元素（只返回一个元素） 返回

的下一个同胞元素：

$(document).ready(function(){ $("h2").next(); });

（7）nextAll() 方法：返回被选元素的所有跟随的同胞元素 返回

的所有跟随的同胞元素：

$(document).ready(function(){ $("h2").nextAll(); });

（8）nextUntil() 方法：返回介于两个给定参数之间的所有跟随的同胞元素 返回介于

与

元素之间的所有同胞元素：

$(document).ready(function(){ $("h2").nextUntil("h6"); });

（9）prev(), prevAll() & prevUntil() 方法

（7.4）过滤

（10）first() 方法：回被选元素的首个元素 选取首个

元素内部的第一个

元素：

$(document).ready(function(){ $("div p").first(); });

（11）last() 方法：返回被选元素的最后一个元素 选择最后一个

元素中的最后一个

元素：

$(document).ready(function(){ $("div p").last(); });

（12）eq() 方法：返回被选元素中带有指定索引号的元素 索引号从 0 开始，因此首个元素的索引号是 0 而不是 1。下面的例子选取第二个

元素（索引号 1）：

$(document).ready(function(){ $("p").eq(1); });

（13）filter() 方法：规定一个标准。不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。 返回带有类名 “url” 的所有

元素：

$(document).ready(function(){ $("p").filter(".url"); });

（14）not() 方法：返回不匹配标准的所有元素（not() 方法与 filter() 相反） 返回不带有类名 “url” 的所有

元素：

$(document).ready(function(){ $("p").not(".url"); });

（8）