jQuery HTML - 捕获

获得内容 - text(), html()以及val()

text(): 设置或返回所选元素的文本内容
html(): 设置或返回所选元素的内容(++包括HTML内容++)
val(): 设置或返回表单字段的值

属性获取 - attr()
该方法用于获取属性值

注意:
prop()函数的结果:

      1.如果有相应的属性，返回指定属性值。

      2.如果没有相应的属性，返回值是空字符串。

attr()函数的结果:

      1.如果有相应的属性，返回指定属性值。

      2.如果没有相应的属性，返回值是undefined。

对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。

对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。

具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()

jQuery HTML - 设置内容和属性

设置内容 - text(), html()以及val()

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

text(), html()以及val()的回调函数
上面的三个 jQuery 方法：text()、html() 以及 val()，同样拥有回调函数。回调函数有两个参数：被选元素列表中当前元素的下标，以及原始（旧的）值。然后以函数新值返回您希望使用的字符串

$("#btn1").click(function(){
    $("#test1").text(function(i,origText){
        return "旧文本: " + origText + " 新文本: Hello world! (index: " + i + ")"; 
    });
});
 
$("#btn2").click(function(){
    $("#test2").html(function(i,origText){
        return "旧 html: " + origText + " 新 html: Hello <b>world!</b> (index: " + i + ")"; 
    });
});

设置属性 - attr()

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

attr() 也提供回调函数, 回调函数有两个参数: 被选元素列表中当前元素的下表, 以及原始(旧的)值

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

jQuery HTML - 添加元素

append() 方法
在被选元素的结尾插入内容(仍然该元素的内部)
prepend() 方法
在被选元素的开头插入内容
通过append() 和 prepend() 方法添加若干新元素
在下面的例子中，我们创建若干个新元素。这些元素可以通过 text/HTML、jQuery 或者 JavaScript/DOM 来创建。然后我们通过 append() 方法把这些新元素追加到文本中（对 prepend() 同样有效)

function appendText(){
    var txt1 = "<p>文本<p>";
    var txt2 = $("<p></p>").text("文本");
    var txt3 = document.createElement("p");
    txt3.innerHtml = "文本";
    $("body").append(txt1, txt2, txt3);
}

after() 方法
在被选元素之后插入内容
before() 方法
在被选元素之前插入内容
通过 after() 和 before() 方法添加若干新元素
++同上++

jQuery HTML - 删除元素

remove() 方法
删除被选元素++及其子元素++
empty() 方法
删除被选元素的子元素
过滤被删除的元素
remove() 方法可以接受一个参数, 允许您对被删元素进行过滤

<head>
    <script>
        $(document).ready(function(){
          $("button").click(function(){
            $("p").remove(".italic");
          });
        });
    </script>
</head>
<body>
    <p>这是一个段落。</p>
    <p class="italic"><i>这是另外一个段落。</i></p>
    <p class="italic"><i>这是另外一个段落。</i></p>
    <button>移除所有  class="italic" 的 p 元素。</button>
</body>

jQuery HTML - 获取并设置css类

addClass() 方法

$("button").click(function{
    //在添加类时, 可以选取多个元素
    //注意: blue和important时两个样式, 此处已略
    $("h1,h2,p").addClass("blue");
    //也可以在addClass() 方法中规定多个类
    $("div").addClass("important blue")
})

removeClass() 方法
toggleClass() 方法
该方法对被选元素进行添加/删除类的切换操作

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

jQuery HTML - css()方法

css() 方法设置或返回被选元素的一个多个样式属性

返回 css 属性
返回指定的 css 属性的值, 语法如下
css("propertyname");

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

设置 css 属性
设置指定的 css 属性, 语法如下
css("propertyname","value")

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

设置多个css属性

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

jQuery 遍历 - 祖先

DOM树

parent() 方法
返回被选元素的直接父元素, 该方法只会向上一级对 DOM 树进行遍历
parents() 方法
返回被选元素的所有祖先元素, 它一路向上直到文档的根元素
你也可以使用可选参数来过滤对象元素的搜索

$(document).ready(function(){
    $("span").parents("ul")
})

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

jQuery 遍历 - 后代

children() 方法
返回被选元素的所有直接子元素
你也可以使用可选参数来过滤对子元素的搜索

$(function(){
    //返回类名为 "1" 的所有 <p> 元素, 并且它们是<div>的直接子元素
    $("div").children("p.1");
})

find() 方法
返回被选元素的后代元素, 一路向下直到最后一个后代

$(function(){
    //返回属于<div>后代的所有<span>元素
    $("div").find("span");
})

jQuery 遍历 - 同胞(siblings)

同胞拥有相同的父元素

siblings() 方法
返回被选元素的所有同胞元素
你也可以使用可选参数来过滤对同胞元素的搜索
下面的例子返回属于 <h2> 的同胞元素的所有 <p> 元素

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

next() 方法
返回被选元素的下一个同胞元素
nextAll() 方法
返回被选元素的所有跟随的同胞元素
nextUntil() 方法
返回介于两个给定参数之间的所有跟随的同胞元素

$(function(){
    //返回介于 <h2> 与 <h6> 元素之间的所有同胞元素
    $("h2").nextUnitl("h6")
})

prev(), prevAll() 和 prevUntil() 方法
工作方式与上面的方法类似, 只不过方向相反而已: 它们返回的是前面的同胞元素

jQuery 遍历 - 过滤

first() 方法
返回被选元素的首个元素
下面的例子选取首个 <div> 元素内部的第一个 <p> 元素

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

last() 方法
方法返回被选元素的最后一个元素
eq() 方法
返回被选元素中带有指定索引号的元素, 其中索引是从0开始的

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

filter() 方法
允许你规定一个标准, 不匹配这个标准的元素会被从集合中删除, 匹配的元素会被返回

$(function(){
    //返回带有类名"url"的所有<p>元素
    $("p").filter(".url");
})

not() 方法
返回不匹配标准的所有元素, 与 filter() 相反

jQuery教程(二)