jQuery HTML

1、捕获

   2种方式：

index.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6     <script src="jquery-3.1.0.min.js"></script>
 7     <script src="myjs7.js"></script>
 8 </head>
 9 <body>
10     <p id="text">this is my webpage<a>这是一个a标签</a></p>
11     <button id="btn1">click me</button>
12 </body>
13 </html>

   第一种捕获方式：

$(document).ready(function(){
    $("#btn1").click(function(){
        alert("text:"+$("#text").text());
    });
    
});

   第二种捕获方式：

$(document).ready(function(){    
    $("#btn1").click(function(){
        alert("text:"+$("#text").html());
    });
});

两种方式的区别在于：

第一种执行结果：（只能获取具体的内容，不能获取标签）

 

第二种执行结果：（能获取标签和具体内容）

 

获取输入框的信息：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
    <script src="jquery-3.1.0.min.js"></script>
    <script src="myjs7.js"></script>
</head>
<body>
    <p id="text">this is my webpage<a>这是一个a标签</a></p>
    <button id="btn1">click me</button>
    <p><input type="text" id="it" value="jikexueyuan"></p>
</body>
</html>

 

1 $(document).ready(function(){
2 
3     $("#btn1").click(function(){
4         alert("text:"+$("#it").val());
5     });
6 });


结果：

 

获取属性

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6     <script src="jquery-3.1.0.min.js"></script>
 7     <script src="myjs7.js"></script>
 8 </head>
 9 <body>
10     <p><a href="http://www.jikexueyuan.com" id="aid"></a></p>
11     <button id="btn2">click me</button>
12 </body>
13 </html>


 

1 $(document).ready(function(){
2 
3     $("#btn2").click(function(){
4         alert("text:"+$("#aid").attr("href"));
5     });
6 });

 

2、设置

index.html代码：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6     <script src="jquery-3.1.0.min.js"></script>
 7     <script src="myjs8.js"></script>
 8 </head>
 9 <body>
10     <p id="p1">hello world</p>
11     <p id="p2">hello world</p>
12     <input type="text" id="i3" value="hello">
13     <br/>
14     <br/>
15     <button id="btn1">按钮1</button>
16     <button id="btn2">按钮2</button>
17     <button id="btn3">按钮3</button>
18     <br/>
19     <br/>
20     <a title="asd" id="aid" href="http://www.baidu.com">最初是百度，接下来是极客学院</a>
21     <br/>
22     <button id="btn4">按钮4</button>
23     <br/>
24     <br/>
25     <p id="p5">hello world</p>
26     <br/>
27     <button id="btn5">按钮5</button>
28 </body>
29 </html>

js代码：

 1 $(document).ready(function(){
 2 
 3     $("#btn1").click(function(){
 4         $("#p1").text("jikexueyuan");//修改p1内容为jikexueyuan
 5     });
 6     
 7     $("#btn2").click(function(){
 8         $("#p2").html("<a href='http://www.jikexueyuan.com'>极客</a>");
 9     });
10     
11     $("#btn3").click(function(){
12         $("#i3").val("jikexueyuan3");
13     });
14     
15     $("#btn4").click(function(){//修改多个属性
16         $("#aid").attr({
17             "href":"http://www.jikexueyuan.com",
18             "title":"hello"
19         });
20     });
21     
22     $("#btn5").click(function(){//回调方法，一直添加
23         $("#p5").text(function(i,ot){
24             return "old:"+ot+",new:这是新的内容"+i;
25         });
26     });
27 });

结果：

 

 

 

3、添加元素

index.html代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6     <script src="jquery-3.1.0.min.js"></script>
 7     <script src="myjs9.js"></script>
 8 </head>
 9 <body>
10    <p id="p1">hello world</p>
11    <p id="p2">hello world</p>
12    <button id="btn1">按钮1</button>
13    <button id="btn2">按钮2</button>
14    <button onclick="apptendText()">按钮3</button>
15 </body>
16 </html>

js代码：

 1 /*
 2  * append
 3  * prepend
 4  * before
 5  * after
 6  */
 7 $(document).ready(function(){
 8     $("#btn1").click(function(){
 9         //$("#p1").append("append method");//append方法插入，在后面插入
10         $("#p1").prepend("prepend method");//prepend方法插入，在前面插入
11         
12     });
13     $("#btn2").click(function(){
14         //$("#p2").before("before hello");//before方法插入，在前面先换行插入
15         $("#p2").after("after hello");//after方法插入，在后面先换行插入
16     });
17 });
18 function apptendText(){ //追加新的元素函数
19     /*3种方式
20      * html
21      * jquery
22      * DOM
23      */
24     var text1 = "<p>iwen</p>";
25     var text2 = $("<p></p>").text("ime");
26     var text3 = document.createElement("p");
27     text3.innerHTML = "acely";
28     $("body").append(text1,text2,text3);
29 }

 

4、删除（注意remove、empty的不同）

index.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6     <script src="jquery-3.1.0.min.js"></script>
 7     <script src="myjs10.js"></script>
 8 </head>
 9 <body>
10   <div id="div" style="height:200px;width:200px;border:1px solid black;background-color: aqua"> 
11       hello
12       <p>hello world</p>
13       <p>hello</p>
14    </div>
15    <button id="btn">删除</button>
16 </body>
17 </html>

js：

 1 /*
 2  * 删除：
 3  * remove
 4  * empty
 5  */
 6 $(document).ready(function(){
 7     $("#btn").click(function(){
 8         //$("#div").remove();//全部删除
 9         $("#div").empty();//删除掉，里面的子元素
10     });
11 });

 

posted @ 2016-08-11 15:38  UniqueColor  阅读(165)  评论(0)  编辑  收藏  举报