一、文本操作
1、内容操作
(1)text():文本内容的操作
<body>
<p id="p1">要捕获的内容</p>
</body>
<script>
//JS内容
/*var p1 = document.getElementById("p1");
alert(p1.textContent);*/
alert($("#p1").text());//JQuery内容
</script>
<body>
<p id="p1">要捕获的内容</p>
</body>
<script>
//捕获内容
var p1 = document.getElementById("p1");
alert(p1.textContent);
alert($("#p1").text());
//更改内容
var p1 = document.getElementById("p1");
p1.innerText = "改变内容";
alert($("#p1").text("改变内容"));
</script>
<body>
<p id="p1">要<span style="color: red">捕获</span>的内容</p>
</body>
<script>
// alert($("#p1").text());
alert($("#p1").html());
</script>
<body>
<p id="p1">要<span style="color: red">捕获</span>的内容</p>
</body>
<script>
// alert($("#p1").text());
alert($("#p1").html("<div style='background-color: aqua'>我是新设置的div</div>"));
</script>
(3)val():获取或者设置表单中的值
<body>
<input type="text" id="text1" value="请输入文本内容"/>
</body>
<script>
alert($("#text1").val());
$("#text1").val("内容");
</script>
<body>
<input type="text" id="text1" name="第一章" value="请输入文本内容"/>
</body>
<script>
/*var txt1 = document.getElementById("text1");
alert(txt1.getAttribute("name"));*/
//alert($("#text1").attr("name"));
$("#text1").attr("name","第二段");
</script>
2、元素添加
(1)append():在元素的最后面添加内容
<body>
<button id="btnApp">点击尾部添加元素</button>
<div id="div1"></div>
</body>
<script>
//在元素的最后面添加内容
$("#btnApp").click(function(){
$("#div1").append("<p>这是添加尾部的段落</p>");
});
</script>
可以同时添加多个内容,这些内容可以是通过html、JQuery、DOM创建的
<body>
<button id="btnApp">点击添加尾部元素</button>
<div id="div1"></div>
</body>
<script>
$("#btnApp").click(function(){
var txt1 = "<p>姓名:</p>";//HTML创建
var txt2 = $("<p></p>").text("电话:");//JQuery创建
var txt3 = document.createElement("p");//DOM创建
txt3.innerHTML = "住址:";
$("#div1").append(txt1,txt2,txt3);
});
</script>
(2)prepend():在元素的最前面添加内容
<body>
<button id="btnPre">点击头部添加元素</button>
<div id="div1"></div>
</body>
<script>
//在元素的最前面添加内容
$("#btnPre").click(function(){
$("#div1").prepend("<p>这是添加头部的段落</p>");
});
</script>
可以同时添加多个内容,这些内容可以是通过html、JQuery、DOM创建的
<body>
<button id="btnPre">点击添加头部元素</button>
<div id="div1"></div>
</body>
<script>
$("#btnPre").click(function(){
var txt1 = "<p>个人信息:</p>";//HTML创建
var txt2 = $("<p></p>").text("个人电话:");//JQuery创建
var txt3 = document.createElement("p");//DOM创建
txt3.innerHTML = "个人住址:";
$("#div1").prepend(txt1,txt2,txt3);
});
</script>
(3)after()和before()
两组添加的区别:append()和prepend()添加后成为了其子元素
After()和before()添加后成为了其兄弟元素
3、元素删除
remove():删除的是被选元素及其子元素;
empty():删除的是被选元素的子元素。
<style>
#div1{
width: 200px;
height: 100px;
background-color: aqua
}
#div2{
width: 200px;
height: 100px;
background-color: aqua
}
</style>
</head>
<body>
<button id="remDiv1">删除div1</button>
<button id="remDiv2">删除div2</button>
<div id="div1">
<p>我是div1中的内容</p>
</div>
<div id="div2">
<p>我是div2中的内容</p>
</div>
</body>
<script>
$("#remDiv1").click(function(){
$("#div1").remove();
});
$("#remDiv2").click(function(){
$("#div2").empty();
});
</script>
remove():还有过滤删除的作用,可以删除指定元素,里面的参数就是指定元素的名字。
<body>
<button id="remDiv1">删除div1</button>
<button id="remDiv2">删除div2</button>
<div id="div1">
<p>我是div1中的大儿子</p>
<p class="p2">我是div1中的二儿子</p>
<p>我是div1中的三儿子</p>
<p class="p2">我是div1中的小儿子</p>
</div>
</body>
<script>
$("#remDiv1").click(function(){
$("p").remove(".p2");
});
</script>
这个代码的作用就是:删除所有p标签class中名为“p2”的元素。
4、操作css类
(1)addclass():添加class类
//添加
$("#btnAdd1").click(function(){
$("#p1").addClass("style1");
});
$("#btnAdd2").click(function(){
$("#p1").addClass("style2");
});
(2)removeclass():删除class
//删除
$("#btnAdd1").click(function(){
$("#p1").removeClass("style1");
});
(3)toggleclass():切换class
//切换
$("#btnAdd1").click(function(){
$("#p1").toggleClass("style1");
});
5、操作css()方法
css():里面要传两个参数:第一个参数是要设置的属性;第二个参数是设置的属性值
<style>
.style1{
color: red;
font-size: 20px;
text-decoration: underline;
}
</style>
</head>
<body>
<p id="p1" class="style1">修改样式测试</p>
<input type="button" id="btnAdd1" value="改变颜色">
</body>
<script>
$("#btnAdd1").click(function(){
$("#p1").css("color","aqua");
});
</script>
css():也可以设置多个属性,不同属性用逗号隔开,属性名:属性值,最外层用{……}。
$("#p1").css({"color":"aqua","font-size":"30px"});
二、JQuery导航
1、祖先
(1)parent():找到的是当前元素的父元素
//找到父元素
$("#myself").parent().css("backgroundColor","aqua");
(2)parents():找到的是当前元素的所有祖先元素,注意:如果在传入参数,就可以找到你所指定的那一个父元素
$(".myself").parents("[name = 'zhang']").css("backgroundColor","aqua");
(3)parentsUntil():选中两个指定元素中的父元素
$(".myself").parentsUntil("[name = 'zhang']","[class = 'ancestor']").css("backgroundColor","aqua");
2、后代
(1)childdren():找到的是当前元素直接后代
//找到子元素
$("#myself").children().css("backgroundColor","yellow");
(2)传入参数,找到的是你指定的那一个子元素
$(".myself").children(".firstSon").css("backgroundColor","yellow");
(3)find():找到的是当前元素的所有后代,一直向下查找直到找到最后一个子元素
$(".myself").find("*").css("backgroundColor","yellow");
3、同胞
(1)next():找到的是当前元素的下一个兄弟元素
//找到下一个兄弟元素
$("#myself").next().css("backgroundColor","green");
(2)nextAll():找到的是当前元素的所有弟弟元素
$(".myself").nextAll().css("backgroundColor","blue");
(3)nextUntil():找到的是两个参数之间的同胞元素
$(".p6").nextUntil(".myself").css("backgroundColor","blue");
prev():找到的是上一个兄弟元素
//找到上一个兄弟元素
$("#myself").prev().css("backgroundColor","blue");
(4)prevAll():找到的是当前元素的哥哥元素
$(".myself").prevAll().css("backgroundColor","blue");
(5)prevUntil():找到的是两个指定元素之间的同胞元素
$(".p6").prevUntil(".myself").css("backgroundColor","blue");
(6)siblings():找到当前元素的所有兄弟元素
$(".myself").siblings().css("backgroundColor","blue");
传入参数是选中其中一个兄弟元素
$(".myself").siblings(".div3").css("backgroundColor","blue");