Loading

jQuery的DOM操作

1. jQuery对DOM树中的文本和值进行操作

  • 语法
API方法 解释
val([value]) 获得/设置 元素value属性相应的值
text([value]) 获得/设置 元素的文本内容
html([value]) 获得/设置 元素的标签体内容
  • 代码演示
<script type="text/javascript">
    //页面加载完成
    $(function(){
        //获取迪丽热巴
        console.log( $("#myinput").val() );
        //获得mydiv的文本内容
        console.log( $("#mydiv").text() );
        //获取mydiv的标签体内容
        console.log( $("#mydiv").html() );
    });
</script>

<body>
    <input id="myinput" type="text" name="username" value="迪丽热巴" /><br />
    <div id="mydiv">
        <p><a href="#">标题标签</a></p>
    </div>
</body>

2. jQuery对DOM树中的属性进行操作

  • 语法
API方法 解释
attr(name[,value]) 获得/设置属性的值
prop(name[,value]) 获得/设置属性的值(checked，selected)
  • 代码演示

代码基于02-jquery的dom操作目录中的 02-prop.html 进行编写

<script type="text/javascript">
    //页面加载完成
    $(function() {
        //获取北京节点的name属性值
        console.log($("#bj").attr("name"));

        //设置北京节点的name属性的值为 大北京
        $("#bj").attr("name", "大北京");

        //新增北京节点的discription属性 属性值是 地图
        $("#bj").attr("discription", "地图")

        //获得hobby的的选中状态
        console.log( $("#hobby").prop("checked") );
    })
</script>
  • attr与prop的注意问题
    • checked 和 selected 使用prop获取
    • 其他使用attr获取 获取不到换成prop
posted @ 2021-03-30 15:46  克豪  阅读(37)  评论(0)    收藏  举报