JQuery DON 导航

3JQuery DON

3.1捕获

 1）文本内容的操作text（）

       作用：获取或设置文本的内容（等价于DOM操作中的innertext属性）

$("#p1").text("更改语句");
alert($("#p1").text());

 

  2）html（）：获取元素中的所有内容，包括html的所有标签。

alert($("#p1").html("<div style='color: #71b9fe'>我是新设置</div>"));

可以在div里设置要更改的元素及html的标签

 

添加表格：

<tableid="tb" border="1">

</table>

 

 

var content="<tr>";
content+="<td>java</td>";
content+="<td>孙春敏</td>";
content+="<td>清华大学出版社</td>";
content+="</tr>";
$("#tb").html(content);

 

 

  3）val（）：获取或设置表单中值

alert($("#text1").val());
$("#text1").val("我更改了");

 

 

  4）：          attr（）：获取或设置元素的属性值

 

3.2元素的添加

  1）append（）：在元素的后面添加内容。

这些内容都有可以通过html，jq，dom，三种操作。

    $("button").click(function(){
    $("#div1").append("<p>添加的段落</p>")
});

 

2）prepend（）：在元素的最前面添加内容。

$("#id2").click(function(){
 $("#div1").append("<p>添加的段落后</p>")
 });

$("#id1").click(function() {
    $("#div1").prepend("<p>添加的段落前</p>")
});

 

$("#id2").click(function(){
    var text4="<hr>";//第一种
    var text1="<p>个人信息：</p>";//第一种
    var text2=$("<p></p>").text("工作职位：");//第二种
    var text3=document.createElement("p");//第三种
    text3.innerText="个人企业：:";
    $("#div1").append(text4,text1,text2,text3);
});

 

3）after（）和before（）

      两组添加的区别：

append（）和prepend（）添加后成为了其子元素

after（）和before（）添加后成为了其兄弟元素

3.3元素的删除

   Remove（）：删除的是被选元素及其子元素

   Empty（）：删除的是子元素。

  $("#id1").click(function(){
   $("#div1").remove();
   });
   $("#id2").click(function(){
    $("#div2").empty();
   })

 

 

Remove（）：还有过滤删除的作用，可以指定删除元素，里面的参数就是指定元素的名称

 

 

    $("#id1").click(function(){
    $("p").remove(".p2");
});

这个代码的作用就是：删除所有p标签中class名为“p2”的元素

 

 

3.4操作css类

1） 添加class类：addclass（）、

2） 删除class类：removeclass（）、

3） 切换class类：toggleclass（）、

括号里添加类名字。

 

3.5css类

Css（）：里面有两个参数，：第一个参数是要设置的属性名，第二个参数是要设置属性、。

$("p").css("color","green");

Css（）也可以设置多个属性，不同属性之间用“，“隔开，属性名和属性值之间用”： “和括号“{}”括起来。如下图：

 

3.6尺寸

Width（）和height（）

innerWidth（）和innerHeight（）

outerWidth（）和outerHeight（）

outerWidth（true）和outerHeight（true）

 

 

4JQuery导航

4.1祖先

Parent（）

找到当前元素的父节点

$("#myself").parent().css("backgroundColor","red");

 

 

Parents（）找到的是当前元素的所有祖先元素，注意，如果在小括号内传入参数，就可以找到你做指定的那一个父元素。

$(".myself").parents().css("backgroundColor","red");

 

parentsUntil（）选中两个指定元素的祖先元素。

 

 

4.2后代

Children（）：

找到当前元素的直接后代。

   在小括号中心传入的参数，找到的是一指定的哪一个子元素

   Find（）：找到你当前元素的所有子元素的后代，注意这里一定要传参数。

$(".myself").find("div").css("backgroundColor","red");

 

4.3同胞

Siblings：找到当前元素的所有同胞元素。

Next（）：找到当前元素的下一个弟弟元素

Prev（）：找到当前元素的上一个哥哥元素。

nextAll（）：找到当前元素的所有弟弟元素

nextUntil（）：找到当前两个参数之间的弟弟元素

$(".myself").nextUntil(".p6").css("backgroundColor","red");

 

prevAll（）：找到的是当前元素的所有哥哥元素

prevUntil（）：找到两个指定元素之间的同胞元素