zoukankan      html  css  js  c++  java
  • 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来获取表单元素的属性值,包含自定义属性值。

  • 相关阅读:
    poj 1655 Balancing Act 树的重心
    poj 1985 Cow Marathon 树的直径
    hdu 4607 Park Visit 求树的直径
    hdu 1548 A strange lift 宽搜bfs+优先队列
    poj 2711 Leapin' Lizards && BZOJ 1066: [SCOI2007]蜥蜴 最大流
    poj 2449 Remmarguts' Date K短路+A*
    hdu 1285 确定比赛名次 拓扑排序
    hdu 3061 Battle 最大权闭合图
    hdu 3879 Base Station 最大权闭合图
    poj 2987 Firing 最大权闭合图
  • 原文地址:https://www.cnblogs.com/chichung/p/9708320.html
Copyright © 2011-2022 走看看