jQuery九大選擇器和jQuery對ajax的支持

時間 2019-12-08

原文原文鏈接

1、jQuery九大選擇器javascript

1)基本選擇器：css

<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）層次選擇器html

<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）加強選擇器java

<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)查找表格的索引號爲一、三、5...奇數行個數，索引號從0開始
        alert($("table tr:odd").size());//3
        //5)查找表格的索引號爲二、四、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）表單對象選擇器jquery

<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）可見性選擇器web

<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）子元素選擇器ajax

<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）屬性選擇器json

<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）表單選擇器app

<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>