Jquery学习4-3---jquery用法之访问dom元素包含信息。

 

text()：访问dom元素的文本内容使用text()方法。注意:只是获取文本内容，元素内的其他标签不会被获取。

 

       例子：获取p标签中的文本。

<p>段落段落<span>test</span></p><script language="javascript" type="text/javascript">alert($("p").text());</script>

 

返回的是文本，即“段落段落test”而不是“段落段落<span>test</span>”。

text(val)：同样text(val)也会向元素内添加文本字符串，它会自动删除原有的文本然后写入传递的文本。

       例子：

             

<p>段落段落<span>test</span></p><script language="javascript" type="text/javascript">       $("p").text("123");</script>

输出的是“123”

注意：此时传入的无论是什么都会原样输出，html代码也不例外。

              注意：使用text()和text(val)能够读写jquery对象所有能够匹配的元素的内容，结果由所有匹配元素的内容组合起来的文本。

              例如：

<p>段落段落<span>test</span></p><p>这是第二个段落</p><script language="javascript" type="text/javascript">      alert($("p").text());</script>

结果如下：

Html():获取元素中所有的内容，不仅仅是文本，包括元素。

       例子：

    

<p>段落段落<span>test</span></p><p>这是第二个段落</p><p><br /></p><p><br /><br /></p><script language="javascript" type="text/javascript">    alert($("p").html());</script>

运行：

 

注意：虽然上面有多个p标签，但只获取了第一个p标签里的内容，这就是说jquery对象只是获取到了第一个元素的所有的内容。

 

Html(val):

              向元素中传递html元素。

              例子：

<p>段落段落<span>test</span></p><p>这是第二个段落</p><p><br /></p><p><br /><br /></p><script language="javascript" type="text/javascript">       $("p").html("<a href='#'>test</a>");</script>

结果：

注意：当向元素中插入内容时，是向所有匹配的元素中插入的。

Val():

该方法专门用来读取表单域的值。而且仅能获取第一个匹配元素的当前值。

 

例子：

       读取下拉列表框的当前选择的值：

       <select>              <option value="1">选项1</option>              <option value="2" selected="selected">选项2</option>              <option value="3">选项三</option>       </select>       <script type="text/javascript">              alert($("select").val());       </script>

                            运行：

              对于多选列表框的，可以获取多个值。

                     例子：

         

       <select multiple="multiple">              <option value="1">选项1</option>              <option value="2" selected="selected">选项2</option>              <option value="3" selected="selected">选项三</option>       </select>       <script type="text/javascript">              //alert($("select").html());              alert($("select").val());       </script>

              结果：

 

 

获取不同输入域的值：

          

       <input type="button" value="提交">       <input type="radio" value="sex">       <input type="checkbox" value="select">       <input type="password" value="密码">       <input type="text" value="文本">       <script type="text/javascript" language="javascript">              alert($($("input")[0]).val());                alert($($("input")[1]).val());                alert($($("input")[2]).val());                alert($($("input")[3]).val());                alert($($("input")[4]).val());         </script>

得到的结果就如下：

 

 

共得到五个弹出窗口.。

注意：其实这里就使用了jquery对象和dom对象的相互转换。