jQuery 获取元素

  • jQuery 获取内容和属性

    jQuery包含用于更改和操作HTML元素和属性的强大方法。
    jQuery的一个非常重要的部分是操纵DOM的可能性。
    jQuery带有一堆与DOM相关的方法,可以轻松访问和操作元素和属性。
    DOM = Document Object Model(文档对象模型)
    DOM定义了访问HTML和XML文档的标准:
    “W3C文档对象模型(DOM)是一个平台和语言中立的接口,允许程序和脚本动态访问和更新文档的内容,结构和样式。”
  • 获取内容 text(),html()和val()

    用于DOM操作的三种简单但有用的jQuery方法是:
    • text() 设置或返回所选元素的文本内容
    • html() 设置或返回所选元素的内容(包括HTML标记)
    • val() 设置或返回表单字段的值
    以下示例演示了如何使用jQuery text()html()方法获取内容:
       
               <head>
                  <script type="text/javascript" src="jquery.js"></script>
                  <script type="text/javascript">
                  $("#btn1").click(function(){
                     alert("Text: " + $("#test").text());
                  });
                  $("#btn2").click(function(){
                     alert("HTML: " + $("#test").html());
                  });
                 </script>
               </head>
    
    尝试一下
    以下示例演示如何使用jQuery val()方法获取输入字段的值:
       
         <head>
             <script type="text/javascript" src="jquery.js"></script>
             <script type="text/javascript">
             $("#btn1").click(function(){
                alert("Value: " + $("#test").val());
             });
           </script>
         </head>
    
    尝试一下
  • 获取属性 attr()

    jQuery attr()方法用于获取属性值。
    以下示例演示如何在链接中获取href属性的值:
       
         <head>
             <script type="text/javascript" src="jquery.js"></script>
             <script type="text/javascript">
             $("button").click(function(){
               alert($("#jc2182").attr("href"));
             });
             </script>
         </head>
    
    尝试一下
    下一章将介绍如何设置(更改)内容和属性值。
    有关所有jQuery HTML方法的完整概述,请转到我们的jQuery HTML/CSS手册