02_Jquery_04_属性选择器

【简述】

【index.jsp】

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Jquery Test</title>
    <!-- 导入Jquery文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.5.1.js"></script>
    <script type="text/javascript">
        //这里的内容会在文档加载完毕时执行 
        $(function(){
            alert($("[name]").length);
        });
    </script>
  </head>
  
  <body>
    This is my JSP page. <br>
    name:    <input type="text" name="name"/><br/>
    age:     <input type="text" name="age"/><br/>
    password:<input type="text" name="psw"/><br/>
             <input type="submit" value="登录"/>
  </body>
</html>

【运行结果1】alert($("[name]").length);

 

【运行结果2】如果修改为：alert($("[name=age]").length);

【运行结果3】如果修改为：$("[name]").val("Higgin");   会在对应的文本框中显示val("Higgin")中的内容

 

 

【通过属性选择器获取下拉列表中的内容】

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Jquery Test</title>
    <!-- 导入Jquery文件 -->
    <script type="text/javascript" src="${pageContext.request.contextPath}/jquery-1.5.1.js"></script>
    <script type="text/javascript">
        //这里的内容会在文档加载完毕时执行 
        $(function(){
            alert($(":selected").text());   //获得selected="selected"的属性的值
        });
    </script>
  </head>
  
  <body>
    This is my JSP page. <br>
    学历：
    <select name="education">
        <option value="1">大学</option>
        <option value="2"selected="selected">中学</option>
        <option value="3" >小学</option>
    </select>
  </body>
</html>

【运行结果】

 

posted @ 2016-08-12 15:04  HigginCui  阅读(158)  评论(0)  编辑  收藏  举报