jQuery操作页面元素之元素内容操作

1：html()和text()的区别及使用 【html对应DOM中的innerHtml，text对应innerText】

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <!--#id 用于绑定元素id来控制元素的style-->
 7     <style type="text/css">
 8         #btn {
 9             background-color: aliceblue;
10             width: 100px;
11             height: 50px;
12         }
13         
14         button {
15             background-color: brown;
16             width: 100px;
17             height: 100px;
18         }
19         
20         h1 {
21             font-style: initial;
22         }
23     </style>
24     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js">
25     </script>
26 </head>
27 <script>
28     $(function() {
29         //$('button')绑定了所有的button
30         $('#btn').click(function() {
31             //a获取返回的内容,$为jQuery()函数.#id做为$()函数的参数返回的是jQuery对象.
32             console.log(($('#my_div').html()))
33         })
34 
35         $('#btn1').click(function() {
36             alert($('#my_div').text())
37         })
38 
39         $('#btn2').click(function() {
40                 $('#show').html('<h1>html设置内容</h1>')
41             })
42             //text()显示的是纯文本,不能处理HTML标签
43         $('#btn3').click(function() {
44             $('#show').text('<h1>text设置内容</h1>')
45         })
46     })
47 </script>
48 val
49 
50 <body>
51     <div id="my_div">
52         <p>HFC网与ADSL网的区别.</p>
53     </div>
54     <div id="show">
55         显示<br>
56     </div>
57     <!--html()类似Dom中的innerHTML：不但会读取元素内的内容还会将其子标签读出包括HTML代码-->
58     <button id="btn" type="button">使用html()读取内容</button><br>
59     <!--text()类似于innerText只能读取纯文本-->
60     <button id="btn1" type="button">text()读取</button><br>
61     <button id="btn2" type="button">使用html()来设置内容</button><br>
62     <button id="btn3" type="button">使用text()来设置内容</button><br>
63 </body>
64 
65 </html>

2:val()方法用于读取或设置表单字段的值，无参数时方法返回字段的值，有参数时将参数设置为字段值。

 1 <!DOCTYPE html>
 2 <html>
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
 7 </head>
 8 
 9 <body>
10     <form>
11         <input type="text" />
12         <button id="btn1">读内容</button>
13         <button id='btn2'>写内容</button>
14         <div id="show"></div>
15     </form>
16     <script>
17         $(function() {
18             $('#btn1').click(function() {
19                 //读输入框内容,$(:属性)
20                 $('div').text($(':text').val())
21             })
22             $('#btn2').click(function() {
23                 $(':text').val('val的参数用来设置内容')
24             })
25         })
26     </script>
27 </body>
28 
29 </html>

 三：attr()

1：使用attr()方法指定一个参数时，返回参数对应的元素属性值；同时指定第2个参数时，将设置指定属性的值。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>attr()</title>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script>
</head>
<style type="text/css">

</style>
<script>
    n = 0; //全局变量
    $(function() {
        $('#btn1').click(function() {
            n--;
            console.log(n);
            if (n < 0)
                n = 5;
            $('img').attr('src', 'D:/图库/' + 'img' + n + '.jpg');
            $('#show').text($('img').attr('src'));
        });
        $('#btn2').click(function() {
            n++;
            if (n > 5) {
                n = 0;
            }
            $('img').attr('src', 'D:/图库/' + 'img' + n + '.jpg');
            $('#show').text($('img').attr('src'));
        })
    })
</script>

<body>
    <img src="https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1772101787,3097677950&fm=26&gp=0.jpg" width="200" height="100" />
    <button id="btn1">上一张</button>
    <button id="btn2">下一张</button>
    <div id="show">

    </div>
</body>

</html>

 

posted @ 2020-02-08 00:18  calm寻路人  阅读(427)  评论(0)  编辑  收藏  举报