zoukankan html css js c++ java

jQuery九大选择器和jQuery对ajax的支持

一、jQuery九大选择器

1)基本选择器：

<body>
    <div id="div1ID">div1</div>
    <div id="div2ID">div2</div>
    <span class="myClass">span</span>
    <p>p</p>
    <script type="text/javascript">
        //1)查找ID为"div1ID"的元素个数
        alert($("#div1ID").size());//1
        //2)查找DIV元素的个数
        alert($("div").length);//2
        //3)查找所有样式是"myClass"的元素的个数
        alert($(".myClass").size());//1
        //4)查找所有DIV,SPAN,P元素的个数
        alert($("DIV,span,p").size());//4
        //5)查找所有ID为div1ID,CLASS为myClass,P元素的个数
        alert($("#div1ID,.myClass,p").size());//3
    </script>
</body>

2）层次选择器

<body>
    <form>
        <input type="text" value="a" />
        <table>
            <tr>
                <td><input type="checkbox" value="b" /></td>
            </tr>
        </table>
    </form>
    <input type="radio" value="ccccccccc" />
    <input type="radio" value="d" />
    <input type="radio" value="e" />
    <script type="text/javascript">
        //1)找到表单form里所有的input元素的个数
        alert( $("form input").size() );//2
        //2)找到表单form里所有的子级input元素个数
        alert( $("form>input").size() );//1
        //3)找到表单form同级第一个input元素的value属性值
        alert( $("form+input").val() );//ccccccccc
        //4)找到所有与表单form同级的input元素个数
        alert($("form~input").size());//3
    </script>

3）增强选择器

<body>
    <ul>
        <li>list item 1</li>
        <li>list item 2</li>
        <li>list item 3</li>
        <li>list item 4</li>
        <li>list item 5</li>
    </ul>
    <input type="checkbox" checked />
    <input type="checkbox" checked />
    <input type="checkbox" />
    <table border="1">
        <tr>
            <td>line1[0]</td>
        </tr>
        <tr>
            <td>line2[1]</td>
        </tr>
        <tr>
            <td>line3[2]</td>
        </tr>
        <tr>
            <td>line4[3]</td>
        </tr>
        <tr>
            <td>line5[4]</td>
        </tr>
        <tr>
            <td>line6[5]</td>
        </tr>
    </table>
    <h1>h1</h1>
    <h2>h2</h2>
    <h3>h3</h3>
    <p>p</p>
    <script type="text/javascript">
        //1)查找UL中第一个LI元素的内容
        //html()要用于html/jsp，不能用在xml
        //text()既能用于html/jsp，且能用于xml
        alert($("ul li:first").text());//list item 1
        //2)查找UL中最后个元素的内容
        alert($("ul li:last").text());//list item 5
        //4)查找表格的索引号为1、3、5...奇数行个数，索引号从0开始
        alert($("table tr:odd").size());//3
        //5)查找表格的索引号为2、4、6...偶数行个数，索引号从0开始
        alert($("table tr:even").size());//3
        //6)查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式
        //html()：强调的是标签中的内容，即便标签中的子标签，也会显示出来
        //text()：强调的是标签中的文本内容，即便标签中的子标签，也只会显示出文本内容，不会显示子标签
        alert($("table tr:eq(1)").text());//line2[1]
        //7)查找表格中第二第三行...的个数，即索引值是1和2...，也就是比0大
        alert($("table tr:gt(0)").size());//5
        //8)查找表格中第一第二行的个数，即索引值是0和1，也就是比2小
        alert($("table tr:lt(2)").size());//2
        //9)给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色
        $(":header").css("background-color", "red").css("color", "blue");
        //10)查找所有[未]选中的input为checkbox的元素个数
        alert($(":checkbox:not(:checked)").size());//1
    </script>
</body>

4）表单对象选择器

<body>
    <form>
        <input type="button" value="Input Button" /><br /> 
        <input type="checkbox" /><br /> 
        <input type="file" /><br /> 
        <input type="hidden" name="id" value="123" /><br />
        <input type="image" src="../images/lb.jpg" width="25px" height="25px" /><br /> 
        <input type="password" /><br /> 
        <input type="radio" /><br /> 
        <input type="reset" /><br /> 
        <input type="submit" /><br /> 
        <input type="text" /><br /> 
        <select>
            <option>Option</option>
        </select><br />
        <textarea></textarea><br />
        <button>Button</button><br />
    </form>
    <script type="text/javascript">
        //1)查找所有input元素的个数
        /*alert($("input").size());//10，找input标签
        alert($(":input").size());//13，找input标签和select/textarea/button
        //2)查找所有文本框的个数
        alert($(":text").size());//1
        //3)查找所有密码框的个数
        alert($(":password").size());//1
        //4)查找所有单选按钮的个数
        alert($(":radio").size());//1
        //5)查找所有复选框的个数
        alert($(":checkbox").size());//1
        //6)查找所有提交按钮的个数
        alert($(":submit").size());//2
        //7)匹配所有图像域的个数
        alert($(":image").size());//1
        //8)查找所有重置按钮的个数
        alert($(":reset").size());//1
        //9)查找所有普通按钮的个数
        alert($(":button").size());//2
        //10)查找所有文件域的个数
        alert($(":file").size());//1
        //11)查找所有input元素为隐藏域的个数
        alert($(":input:hidden").size());//1*/
        alert($("form").size());
    </script>
</body>

5）可见性选择器

<body>
    <table border="1" align="center">
        <tr style="display:none">
            <td>Value 1</td>
        </tr>
        <tr>
            <td>Value 2</td>
        </tr>
        <tr>
            <td>Value 3</td>
        </tr>
    </table>
    <script type="text/javascript">
        //1)查找隐藏的tr元素的个数
        alert($("table tr:hidden").size());//1
        //2)查找所有可见的tr元素的个数
        alert($("table tr:NOT(:hidden)").size());//2
        alert($("table tr:visible").size());//2    提倡
    </script>
</body>

6）子元素选择器

<body>
    <ul>
        <li>John</li>
        <li>Karl</li>
        <li>Brandon</li>
    </ul>
    <ul>
        <li>Glen</li>
        <li>Tane</li>
        <li>Ralph</li>
    </ul>
    <ul>
        <li>Marry</li>
    </ul>
    <ul>
        <li>Jack</li>
        <li>Jack1</li>
        <li>Jack2</li>
        <li>Jack3</li>
    </ul>
    <script type="text/javascript">
        //1)迭代[each]每个ul中第1个li元素中的内容,索引从1开始
        $("ul li:first-child").each(function() {
            alert($(this).text());
        });
        //2)迭代每个ul中最后1个li元素中的内容,索引从1开始
        $("ul li:last-child").each(function() {
            alert($(this).text());
        });
        //3)迭代每个ul中第2个li元素中的内容,索引从1开始
        $("ul li:nth-child(2)").each(function() {
            alert($(this).text());
        });
        //4)在ul中查找是唯一子元素的li元素的内容
        $("ul li:only-child").each(function() {
            alert($(this).text());
        });
    </script>
</body>

7）属性选择器

<body>
    <div>
        <p>Hello!</p>
    </div>
    <div id="test2"></div>
    <input type="checkbox" name="newsletter" value="Hot Fuzz" />
    <input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" />
    <input type="checkbox" name="newsaccept" value="Evil Plans" />
    <script type="text/javascript">
        //1)查找所有含有id属性的div元素个数
        alert($('div[id]').size());//1
        //2)查找所有name属性是newsletter的input元素，并将其选中
        //$("input[name='newsletter']").attr("checked", "checked");
        //3)查找所有name属性不是newsletter的input元素，并将其选中
       //$("input[name!='newsletter']").attr("checked", "true");
       //$("input[name!='newsletter']").attr("checked", "checked");
        //4)查找所有name属性以'news'开头的input元素，并将其选中
      //$("input[name^='news']").attr("checked", "checked");
        //5)查找所有name属性以'letter'结尾的input元素，并将其选中
       //$("input[name$='letter']").attr("checked", "checked");
        //6)查找所有name属性包含'news'的input元素，并将其选中
        //$("input[name*='news']").attr("checked", "checked");
        //7)找到所有含有id属性，并且它的name属性是以"letter"结尾的input元素，并将其选中
    // $("input[id][name$='letter']").attr("checked", "true");
        
    </script>

8）表单选择器

<body>
<form>
<input type="button" value="Input Button" /><br />
<input type="checkbox" /><br />
<input type="file" /><br />
<input type="hidden" name="id" value="123" /><br />
<input type="image" src="images/MsgError.gif" width="25px" height="25px" /><br />
<input type="password" /><br />
<input type="radio" /><br />
<input type="reset" /><br />
<input type="submit" /><br />
<input type="text" /><br />
<select>
<option>Option</option>
</select><br />
<textarea></textarea><br />
<button>Button</button><br />
</form>
<script type="text/javascript">
//1)查找所有input元素的个数
alert($("input").size());//10，找input标签
alert($(":input").size());//13，找input标签和select/textarea/button
//2)查找所有文本框的个数
alert($(":text").size());//1
//3)查找所有密码框的个数
alert($(":password").size());//1
//4)查找所有单选按钮的个数
alert($(":radio").size());//1
//5)查找所有复选框的个数
alert($(":checkbox").size());//1
//6)查找所有提交按钮的个数
alert($(":submit").size());//2
//7)匹配所有图像域的个数
alert($(":image").size());//1
//8)查找所有重置按钮的个数
alert($(":reset").size());//1
//9)查找所有普通按钮的个数
alert($(":button").size());//2
//10)查找所有文件域的个数
alert($(":file").size());//1
//11)查找所有input元素为隐藏域的个数
alert($(":input:hidden").size());//1
</script>
</body>

9）表单对象选择器

<body>
    <form>
        <input type="button" value="Input Button" /><br /> 
        <input type="checkbox" /><br /> 
        <input type="file" /><br /> 
        <input type="hidden" name="id" value="123" /><br />
        <input type="image" src="../images/lb.jpg" width="25px" height="25px" /><br /> 
        <input type="password" /><br /> 
        <input type="radio" /><br /> 
        <input type="reset" /><br /> 
        <input type="submit" /><br /> 
        <input type="text" /><br /> 
        <select>
            <option>Option</option>
        </select><br />
        <textarea></textarea><br />
        <button>Button</button><br />
    </form>
    <script type="text/javascript">
        //1)查找所有input元素的个数
        /*alert($("input").size());//10，找input标签
        alert($(":input").size());//13，找input标签和select/textarea/button
        //2)查找所有文本框的个数
        alert($(":text").size());//1
        //3)查找所有密码框的个数
        alert($(":password").size());//1
        //4)查找所有单选按钮的个数
        alert($(":radio").size());//1
        //5)查找所有复选框的个数
        alert($(":checkbox").size());//1
        //6)查找所有提交按钮的个数
        alert($(":submit").size());//2
        //7)匹配所有图像域的个数
        alert($(":image").size());//1
        //8)查找所有重置按钮的个数
        alert($(":reset").size());//1
        //9)查找所有普通按钮的个数
        alert($(":button").size());//2
        //10)查找所有文件域的个数
        alert($(":file").size());//1
        //11)查找所有input元素为隐藏域的个数
        alert($(":input:hidden").size());//1*/
        alert($("form").size());
    </script>
</body>

二）jQuery实现ajax,用的框架是struts2

具体代码如下:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>获取当前时间</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <!--
    <link rel="stylesheet" type="text/css" href="styles.css">
    -->
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
  </head>
  
  <body>
    <select id="provinceID">
        <option>选中省份</option>
        <option>湖北</option>
        <option>广东</option>
    </select>
    
    <select id="cityID">
        <option>选择城市</option>
    </select>
   <span></span>
   <script type="text/javascript">
       $("#provinceID").change(function(){
           //清除原下拉框的内容,第一项除外
           $("#cityID option:gt(0)").remove();
           //获取选中的省份
           var province = $("#provinceID option:selected").text();
           if("选中省份" != province)
           {
               $.ajax({
                   type:"POST",
                   url:"${pageContext.request.contextPath}/findByProvince?time="+new Date().getTime(),
                   data:{"province":province},
                   success:function(backData,textStatus,ajax){
                       //解析json文本
                       var array = backData.setCity;
                       var size = array.length;
                       for(var i=0;i<size;i++){
                           var city = array[i];
                           var $option = $("<option>"+city+"</option>");
                           $("#cityID").append($option);
                       }
                   }
               });
           }
       });
   </script>
  </body>
</html>

在这里还碰到了一个问题,如下:

原因是:url:"${pageContext.request.contextPath}/#?time="+new Date().getTime(),没有补齐

Action代码如下:

package cn.itcast.province;

import java.util.HashSet;
import java.util.LinkedHashSet;
import java.util.Set;

import com.opensymphony.xwork2.ActionSupport;

public class FindByProvinceAction extends ActionSupport {

    private String province;
    public void setProvince(String province) {
        this.province = province;
    }
    private Set<String> setCity;
    public Set<String> getSetCity() {
        return setCity;
    }
    public String findByProvince() throws Exception {
        // TODO Auto-generated method stub
        setCity = new LinkedHashSet<String>();
        if("湖北".equals(province))
        {
            setCity.add("武汉");
            setCity.add("咸宁");
            setCity.add("襄阳");
        }else if("广东".equals(province))
        {
            setCity.add("深圳");
            setCity.add("广州");
            setCity.add("");
        }
        return this.SUCCESS;
    }
}

struts2的配置:

<struts>

   <package name="myPackage" extends="json-default" namespace="/">
   
           <!-- 根据省份查询城市 -->
           <action 
               name="findByProvince" 
               class="cn.itcast.province.FindByProvinceAction" 
               method="findByProvince">
        
            <result name="success" type="json"/>
            
           </action>
       
   </package>

</struts>

  <package name="myPackage" extends="json-default" namespace="/">

这句话尤为重要

还有myeclipse不知道抽什么经,我自己建了一个userLibrary ,添加进去启动时却报错找不到struts的类于是重新将struts2的几个包放入到Webroot下的lib文件夹下,然后buildpath重新部署,正常,现在找到原因了,需要将项目所依赖的jar文件部署到/webroot/lib下,才可,如下图:

然后再出现报错的话,先将项目移除然后再重新发布就正常启动了.

所涉及到的几个包:

D:\迅雷下载\BeanUtils\类库\struts2\commons-fileupload-1.2.2.jar
D:\迅雷下载\BeanUtils\类库\struts2\commons-io-2.0.1.jar
D:\迅雷下载\BeanUtils\类库\struts2\commons-lang3-3.1.jar
D:\迅雷下载\BeanUtils\类库\struts2\freemarker-2.3.19.jar
D:\迅雷下载\BeanUtils\类库\struts2\javassist-3.11.0.GA.jar
D:\迅雷下载\BeanUtils\类库\struts2\ognl-3.0.5.jar
D:\迅雷下载\BeanUtils\类库\struts2\struts2-core-2.3.4.1.jar
D:\迅雷下载\BeanUtils\类库\struts2\xwork-core-2.3.4.1.jar

还有一个struts2对json支持的插件包

struts2-json-plugin-2.3.1.1.jar

jQuery实现ajax这段代码很关键:

 <script type="text/javascript">
       $("#provinceID").change(function(){
           //清除原下拉框的内容,第一项除外
           $("#cityID option:gt(0)").remove();
           //获取选中的省份
           var province = $("#provinceID option:selected").text();
           if("选中省份" != province)
           {
               $.ajax({
                   type:"POST",
                   url:"${pageContext.request.contextPath}/findByProvince?time="+new Date().getTime(),
                   data:{"province":province},
                   success:function(backData,textStatus,ajax){
                       //解析json文本
                       var array = backData.setCity;
                       var size = array.length;
                       for(var i=0;i<size;i++){
                           var city = array[i];
                           var $option = $("<option>"+city+"</option>");
                           $("#cityID").append($option);
                       }
                   }
               });
           }
       });
   </script>

一个愿意分享技术和生活的码农

查看全文

相关阅读:
你看那个人他像一条狗
 jvm系列(八):jvm知识点总览
 jvm系列(七):jvm调优-工具篇
 百亿互金平台救火故事
 一个脚本引发的血案
 一次dns缓存引发的惨案
 一次生产事故的优化经历
 从零到百亿互联网金融架构发展史
 2016颠倒梦想,2017静心前行
 Spring Boot(九)：定时任务

原文地址：https://www.cnblogs.com/zhuixun/p/6506550.html