find加上筛选name jquery jquery find name

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）