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的标签
添加表格:
<table id="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():找到两个指定元素之间的同胞元素