学习不止眼前的教程与笔记 还需实践与创新

搜索

首页>>网站建设>>jQuery>>基础教程>>

jQuery - DOM 操作之获取内容和属性

点击:

    在网页设计中获取网点各个节点的内容和属性是操作中必不可少的一部分,那么jQuery该怎么获取节点的内容和属性呢?

    在jQuery中获取元素或者节点的内容和属性是非常简单的,通过:

    • text() - 设置或返回所选元素的文本内容
    • html() - 设置或返回所选元素的内容(包括 HTML 标记)
    • val() - 设置或返回表单字段的值
    • attr()-设置或返回所选元素的属性值

    一、jQuery使用text()设置或返回所选元素或者节点的文本内容

    jQuery获取内容:

    //网页内容
    <div id='info'>这里是<em>内容</em>信息</div>
    //jQuery脚本
    $("#info").click(function(){
      alert("Text: " + $("#info").text());
    });

    上述实例运行结果就是,弹出:这里是内容信息的提示框。

    jQuery如果想要设置所选元素或者节点的值可以这样:

    $("#info").click(function(){
      $("#info").text('这里是想要设置的值');
    });

    二、jQuery使用html()设置或返回所选元素的内容(包括 HTML 标记)

    jQuery获取内容:

    //网页内容
    <div id='info'>这里是<em>内容</em>信息</div>
    //jQuery脚本
    $("#info").click(function(){
      alert("Text: " + $("#info").html());
    });
    上述实例运行结果就是:这里是<em>内容</em>信息,其中em标签也会被显示出来。

    jQuery设置所选元素的值可以这样:

    $("#info").click(function(){
      $("#info").html('这里<p>是想要</p>设置的值');
    });

    三、jQuery使用val()设置或返回表单字段的值

    jQuery获取表单的值:

    //网页内容
    <input type='text' id='info' value='迷糊馆'>
    <button  id='btn'>获取信息</button>
    //jQuery脚本
    $("#btn").click(function(){
      alert("Text: " + $("#info").val());
    });
    上述点击按钮“获取信息”时,会获取到输入框的值:迷糊馆。

    jQuery设置所选表单的值可以这样:

    $("#info").val('这里是需要设置的值');

    四、jQuery使用attr()设置或返回元素的属性值

    jQuery获取属性值:

    //网页内容
    <input type='text' class='mihu' id='info' value='迷糊馆'>
    <button  id='btn'>获取信息</button>
    //jQuery脚本
    $("#btn").click(function(){
      alert($("#info").attr("class"));
    });
    上述实例会获取到输入框的class属性值:mihu。

    jQuery设置元素的属性值:

    $("#info").attr("class",'mihu2')
    这样就可以直接改变info表单的class样式表。
赞一个(0)     踩一个(0)