jQuery-获取内容

简介: jQuery-获取内容

获取内容的三种方法:

text():设置或者返回元素文本内容

html():设置或者返回所选的元素内容(包含html标记)

val():返回表单值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取元素</title>
    <style>
        p{
            border: 1px solid black;
        }
        div{
            border:  1px solid black;
        }
        a{
            display: block;
        }
    </style>
</head>
<body>
    <p>这是一个p标签&nbsp;&nbsp;<a href="#">一个a</a></p>
    <div>这是一个div标签&nbsp;&nbsp;<a href="#">第二个a</a></div>
    <br>
    <input type="text" name="" value="111" id="">
    <a href="https://www.baidu.com" id="a1">HTML 元素我们自己自定义的 DOM 属性,在处理时,使用 attr 方法</a>
    <a href="https://www.baidu.com" id="a2">HTML 元素本身就带有的固有属性,在处理时,使用 prop 方法</a>
    <script src="../jquery-3.6.0.js"></script>
    <script>
        $(document).ready(function(){
            $('p').click(function(){
                alert($('p').text());                //text()
            })
            $('div').click(function(){
                alert($('div').html());            //html()
            })
            $('input').click(function(){
                alert($('input').val());            //val()
            })
            $('#a1').click(function(){
                alert($('#a1').attr('href'));        //attr获取自定义属性
            })
            $('#a2').click(function(){
                alert($('#a2').prop('href'));        //prop获取固定属性
            })
        })
    </script>
</body>
</html>

text():获取返回元素的文本

20210905143035544.png

202109051430509.png

html():返回所选元素中的的所有内容

20210905143440594.png

20210905143451514.png

val():返回表单值

20210905143630123.png

20210905143641974.png

获取自定义的DOM属性:attr()

20210905144401899.png

20210905144728885.png

获取本身自带的固定属性:prop()

2021090514444048.png

20210905144706810.png

注:

prop()函数的结果:

     1.如果有相应的属性,返回指定属性值。

     2.如果没有相应的属性,返回值是空字符串。

attr()函数的结果:

     1.如果有相应的属性,返回指定属性值。

     2.如果没有相应的属性,返回值是 undefined。


相关文章
|
2月前
|
JavaScript API 数据安全/隐私保护
jQuery Prettydate
jQuery Prettydate
32 2
|
2月前
|
JavaScript 前端开发
JQuery 什么是JQuery?
JQuery 什么是JQuery?
36 0
|
6月前
|
JavaScript 前端开发
认识jQuery
认识jQuery
|
7月前
|
JSON JavaScript 前端开发
关于jQuery
关于jQuery
41 2
|
存储 JavaScript 前端开发
jQuery01
jQuery01
66 0
|
JavaScript 前端开发 索引
初识jQuery
初识jQuery
106 0
|
JavaScript
|
XML JSON JavaScript
|
前端开发 JavaScript 数据安全/隐私保护
html+js+Jquery(一)
html+js+Jquery(一)
224 0
html+js+Jquery(一)
|
Web App开发 前端开发 JavaScript
从零玩转jQuery-初识jQuery
课前须知: 学习jQuery前必须先掌握JavaScript jQuery虽然属于前端技术, 但是对于后端人员(诸如Java、PHP等,也需要掌握) jQuery是什么? jQuery是一款优秀的JavaScript库,从命名可以看出jQuery最主要的用途是用来做查询(jQuery=js+Query).
1842 0