jQuery基础学习二 捕获、设置等复杂操作

一、jQuery捕获

即：jQuery - 获取内容和属性

jquery拥有 可操作HTML元素和属性的强大方法。

1、DOM操作

1）.text（） ：设置或返回所选元素的文本内容

2）.html（）：设置或返回所选元素的内容（包括HTML标记）

3）.val（）：设置或返回表单字段的值

$("#test").val()

4） .attr（）：获取属性值

$("button").click(function(){
  alert($("#w3s").attr("href"));
});

二、jQuery设置

1、使用参数的方法，设置元素的文本内容、内容（标记）、表单value

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

2、在DOM操作的参数中加入回调函数，通过回调函数返回相应的值

$("#btn1").click(function(){
  $("#test1").text(function(i,origText){
    return "Old text: " + origText + " New text: Hello world!
    (index: " + i + ")"; 
  });
});

$("#btn2").click(function(){
  $("#test2").html(function(i,origText){
    return "Old html: " + origText + " New html: Hello <b>world!</b>
    (index: " + i + ")"; 
  });
});

3、设置标签元素的属性值：

可同时设置多个属性的值

$("button").click(function(){
  $("#w3s").attr({
    "href" : "http://www.w3cschool.cc/jquery",
    "title" : "W3Schools jQuery Tutorial"
  });
});

4、通过回调函数设置元素的属性值：

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

三、jQuery添加HTML元素

通过jQuery，可以很容易的添加新元素/内容

下面介绍四个jQuery方法：

1、append（）方法

此方法可在被选的元素结尾处插入内容

$("p").append("Some appended text.");

2、prepend（）方法

此方法可在备选的元素的前面插入内容

$("p").prepend("Some prepended text.");

3、append和prepend可以批量添加，用逗号隔开即可

$("p").append(txt1,txt2,txt3);

4、after（）和before（）方法，以前两个想似。在所选的元素之前或之后添加内容。

四、删除元素

通过jQuery可以很容易的删除HTML已有的元素。一般有以下两个方法：

1、remove（）：删除被选元素，以及其子元素

可以接受一个参数，过滤要删除的元素，该参数可以是任何jQuery选择器的语法。

$("p").remove(".italic");  意思为：删除class=italic的p标签。

2、empty（）：清空被选元素的子元素

五、获取并设置CSS类

jQuery操作css的方法：

1、addClass： 向被选元素添加一个或多个类，添加类时，还可以选取多个元素

1）选取多个元素添加类

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

2）添加多个类：

$("button").click(function(){
  $("#div1").addClass("important blue");
});

2、removeClass： 删除类

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

3、toggleClass：实现对被选元素的的添加类/删除类的切换操作

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

4、css：方法用于设置或返回被选元素的一个或者多个样式属性

1）返回指定的css属性值：

css("propertyname");

<pre name="code" class="javascript">$("p").css("background-color");

2）设置指定的css属性值

语法：css("propertyname","value");

使用：

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

3）设置多个css属性值

语法：css({"propertyname":"value","propertyname":"value",...});
使用：

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

六、尺寸

jQuery提供了多个处理大小的方法：

1、宽：width（）  设置或返回元素的宽度（不包括内边距、边框、外边距）

2、高：height（） 设置或返回元素的高度（不包括内边距、边框、外边距）

$("button").click(function(){
  var txt="";
  txt+="Width: " + $("#div1").width() + "</br>";
  txt+="Height: " + $("#div1").height();
  $("#div1").html(txt);
});

3、innerWidth（）：返回元素的宽度（包括内边距）

4、innerheight（）：返回元素的高度（包括内边距）

$("button").click(function(){
  var txt="";
  txt+="Inner width: " + $("#div1").innerWidth() + "</br>";
  txt+="Inner height: " + $("#div1").innerHeight();
  $("#div1").html(txt);
});

5、outerWidth（）：返回元素的宽度（包括内边距和边框）

6、outerHeight（）：返回元素的高度（包括内边距和边框）

$("button").click(function(){
  var txt="";
  txt+="Outer width: " + $("#div1").outerWidth() + "</br>";
  txt+="Outer height: " + $("#div1").outerHeight();
  $("#div1").html(txt);
});

七、jQuery 的DOM树（父节点）

1、parent（）：返回被选元素的直接父元素； 该方法只会向上一级对DOM树进行遍历

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

2、parents（）：返回被选元素的所有祖先父辈，它一路向上直到文档的根元素（html）

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

还可以对结果过滤，得到自己想要的父辈元素。

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

3、parentsUntil（）返回所有父辈的过滤方法，返回到参数节点之间的所有节点

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

八、jQuery的DOM树（子节点）

1、children（）：返回被选元素的所有直接子节点。

下面的例子返回每个<div>元素的所有直接子节点

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

可以使用参数来过滤返回结果：

下面的例子返回class=“1”的所有<p>元素，并且他们是<div>的直接子节点

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

2、find（）：返回被选元素的所有子节点；也可以通过参数过滤返回结果

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

如想返回所有子节点，用*做参数，表示全选

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

九、jQuery中的过滤

三个基本过滤方法

1、first（）：返回被选元素的首个元素

选取首个<div>元素内部的第一个<p>元素

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

2、last（）：返回被选元素的最后一个元素

选取首个<div>元素内部的最后一个<p>元素

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

3、eq（）：返回被选元素 中带有指定索引号的元素

选取第二个元素：

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

两个不常用的过滤方法

4、filter（）：规定一个标准，不匹配这个标准的元素会被从集合中删除，匹配的元素会被返回。

返回带有类名“intro”的所有<p>标签

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

5、not（）：返回不匹配标准的的所有元素；与filter相反

返回不带有类名"intro"的所有<p>标签

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