jQuery获取标签中的元素

获取双标签之间的内容

在JavaScript中，获取双标签之间的内容是这样的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
        window.onload=function(){
            var h1=document.getElementById('i');
            console.log(h1.innerHTML)
        }
    </script>
</head>
<body>
    <h1 id="i">我是标题</h1>
</body>
</html>

但是用了jQuery库后，语法就变得简单很多啦。可以写成下面这样：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            var h1=$('#i');
            console.log(h1.html())
        })
    </script>
</head>
<body>
    <h1 id="i">我是标题</h1>
</body>
</html>

由例子可知，jQuery获取双标签之间的内容，可以用html()。

获取input框的value值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            var box=$('#i');
            console.log(box.val())
        })
    </script>
</head>
<body>
    <input type="text" id="i" value="默认值">
</body>
</html>

可知，获取input框的value值用val()。

获取元素的索引值

有时候需要获得匹配元素相对于其同胞元素的索引位置，此时可以用index()方法获取。

获取某个属性的值

// 取出图片的地址

var src = $('#img1').prop('src');

// 设置图片的地址和alt属性

$('#img1').prop({src: "images/test.jpg", alt: "Test Image" });

可以用prop来获取表单元素的属性值，包含自定义属性值。

jQuery获取标签中的元素

获取双标签之间的内容

获取input框的value值

获取元素的索引值

获取某个属性的值