Web前端基礎——jQuery（二）

来源:http://www.cnblogs.com/1693977889zz/archive/2017/09/27/7602863.html
-Advertisement-
Play Games

一、jQuery 中的常用函數 1) $.map(Array,fn); 對數組中的每個元素,都用fn進行處理,fn將處理後的結果返回,最後得到一個數組 2) $.each(Array,fn); 對數組中的每個元素,調用fn這個函數進行處理,但是,沒有返回值,比上例更常用 二、jQuery 對象和Do ...


一、jQuery 中的常用函數

1) $.map(Array,fn);

對數組中的每個元素,都用fn進行處理,fn將處理後的結果返回,最後得到一個數組
                

//因為這些操作,沒有與dom元素相關的,所以可以不用寫在 $(function(){...}); 中
var arr=[1,3,5,7,9];
arr=$.map(arr,function(item){
     return item*10;
 });
                        
alert(arr); [10,30,50,70,90];
            
//上例是將數組中的每個元素乘10,然後返回新的數組

 2) $.each(Array,fn);

對數組中的每個元素,調用fn這個函數進行處理,但是,沒有返回值,比上例更常用

//例一
var nameList=["哈利波特","伏地魔","小惡魔","本田","尼桑"];
                    
    $.each(nameList,function(key,value){  //對於上面的數組來說,key就是索引,value就是元素值
         alert(key+":"+value);
    });
//例二
var nameList={"aa":"哈利波特","bb":"伏地魔","cc":"小惡魔","dd":"本田","ee":"尼桑"};
    $.each(nameList,function(key,value){ 
        alert(key+":"+value);
    });
//例三 不關心key
    $.each(nameList,function(){ 
        alert(this);  //這裡的this ,取到的是value
    });

二、jQuery 對象和Dom對象

jQuery對象 ,就是通過包裝dom對象後產生的對象,dom 對象要想通過jQuery對象進行操作,要轉成jQuery對象。

$("#span1").html():  //jQuery的寫法 等價於

document.getElementById("span1").innerHTML;  //註意innerHTML 是屬性,不是方法,不要加擴號

jQuery 對象不能直接調用dom對象的方法 ,同樣,dom對象也不能直接調用jQuery對象的方法，可以將dom對象轉成jQuery對象,也可以將jQuery對象轉成dom對象。

1) 將dom對象轉成jQuery對象  // $(dom對象)

var domObj = document.getElementById("span1");
alert( $(domObj).html());   //將dom對象,用 $() 包圍 ,轉成了jQuery對象,就可調用jQuery對象的方法了

2) 將jQuery對象轉成dom對象  //取jQuery對象中的第[0]個元素或 get(0)

var jQueryObj=$("#span1");                     
jQueryObj[0].innerHTML="我現在是個dom對象"   //ok
jQueryObj.get(0).innerHTML="我現在是個dom對象,哈哈哈"  //ok

三、jQuery 的取值和賦值操作

1) 對於文本框類元素

取值  $("#userName").val();

傳值  $("#userName").val("這是賦的值 ");              

2) 對於 div,span, label 類的

取值 $("#lblMsg").html();

傳值  $("#lblMsg").html("這是賦的值 ");

取值 $("#lblMsg").text();

傳值  $("#lblMsg").html("這是賦的值 ");

alert($("#span1").html());  //連文本,帶標簽一起取出
alert($("#span1").text());  //只取文本,不取html標簽
                        
$("#span1").html("<h1>這是用text方式傳的值</h1>");  //h1 會被當做元素解釋
$("#span2").text("<h1>這是用text方式傳的值</h1>");  //這裡的h1,將會被當做文本,而不是標簽

四、jQuery選擇器

在1.4.4的文檔中,列了九類選擇器  基本  層級  基本  內容  可見性  屬性  子元素  表單  表單屬性

1) 基本 5個

第一個： #id
例子： $("#myDiv");

第二個：element

一個用於搜索的元素。指向 DOM 節點的標簽名。

$("div").html("這是element選擇器,我們都是div"); //查找所有div元素,為其賦值

思考:如何給所有的DIV元素都加上一個點擊事件?併在點擊事件中彈出div中的內容

$("div").click(function(){
     alert(this.innerHTML);
     alert($(this).html());
});

第三個：*

返回所有值,多數用來結合上下文進行操作

第四個：.Class

根據給定的類匹配元素。

$(".myClass");
 //例子
<style type="text/css">
  .cry
   {
     background:silver;   //說明,這個樣式也可以沒有,依然可以在下麵使用.cry
   }
   </style>
                    
   <script type ="text/javascript">
      $(".cry").css("background","blue");
   </script>    
                                
    <div class="cry">這是用來驗證class選擇器的層</div>

第五個：selector1,selector2,selectorN

將每一個選擇器匹配到的元素合併後一起返回。(多個選擇條件都有效)

$("#div1,span,p.myClass") 同時使用了多種選擇器 p.myClass 指的是所有擁有myClass樣式的p標簽

 

2) 層級 4個（註意不要亂加空格）

第一個：ancestor descendant

在給定的祖先元素下匹配所有的後代元素
 $("form input") //語法:選擇from標簽下的所有 input 元素,無論是第幾代

  <form>
      <label>Name:</label>
      <input name="name" />
      <fieldset>
      <label>Newsletter:</label>
      <input name="newsletter" />
      </fieldset>
   </form>
      <input name="none" />
      <script type ="text/javascript">
        $("form input").val("這是層級選器的例子");
      </script>
                            
    $("div li") //獲取div下所有的li元素(包擴後代,子的子)
//給table下所有tr下的td加個點擊事件,一點就取出td中的內容
                         $("#table1 tr td").click(function(){
                                alert(this.innerHTML);
                            });

第二個：parent > child

$("div >li") //語法,獲取div下所有的直接li子元素

第三個：prev + next

$("label + input") //語法 label 後面 (相鄰的 )input 元素 (包擴子級里的)
    <form>
      <label>Name:</label>
         <input name="name" />  //被選中
      <fieldset>
         <label>Newsletter:</label>
           <input name="newsletter" /> //被選中
       </fieldset>
    </form>
<input name="none" />

第四個：prev ~ siblings

匹配 prev 元素之後的所有 siblings 元素

$("form ~ input")    //語法  找到所有與表單同輩的 input 元素
    <form>
        <label>Name:</label>
        <input name="name" /> //不被選中,
    <fieldset>
        <label>Newsletter:</label>
          <input name="newsletter" /> //不被選中
     </fieldset>
     </form>
<input name="none" />  //被選中,因為和form是同級

 

3) 基本(定位) 10個

:first  

$("tr:first") //語法 匹配找到的第一個元素

//$("#table1 tr:first").css("background","red");  //將table1 中的第一個tr的背景色變成紅色

 :last

:not 

$("input:not(:checked)")  //沒有被勾選的那個覆選框

:even //所有索引為偶數的 0,2,4

:odd //奇數 1,3,5

//隔行變色
$("#table1 tr:even").css("background-color","silver");
$("#table1 tr:odd").css("background-color","pink");

:eq  //匹配一個給定索引值的元素

$("#table1 tr:eq(3)").css("background","green"); //將table1中第四行置成綠色

:gt //匹配所有大於給定索引值的元素

$("#table1 tr:gt(1)").css("background","green"); //將table1中的第2行以後都變成綠色

:lt //與上例相反

:header //匹配如 h1, h2, h3之類的標題元素

$(":header").css("background", "#EEE");

:animated //匹配正在執行動畫和元素

$("div:not(:animated)").animate({ left: "+=20" }, 1000); //對不執行動畫的div執行一個動畫效果

 

4)內容 4 個

第一個：

:contains  //匹配包含給定文本的元素

$("#table1 tr:contains('混球')" ).css("background","yellow");  //把含有混球的所有行高亮顯示
$("#table1 tr td:contains('混球')" ).css("background","yellow"); //精確到td (註意,如果不嚴明的寫好層級關係,會全選上)

第二個：

:empty //匹配所有不包含子元素或者文本的空元素

$("td:empty")

第三個：

:has //匹配含有選擇器所匹配的元素的元素

<div><p>Hello</p></div>
<div>Hello again!</div>
$("div:has(p)").addClass("test"); //查詢所有帶有 p 的元素,並給它加上一個 test類(林式)

第四個：

:parent  //匹配含有子元素或者文本的元素

$("td:parent") //只要td中有內容,就會被選出來(主要用於判斷自已是不是父級元素,而不是取自已的父級)

 

 5) 可見性 2 個

------  :hidden //匹配所有不可見元素，或者type為hidden的元素(隱含控制項)

 $("#table1 tr:hidden").css("display","block"); //把表中隱藏的行顯示出來

------  :visible //與上例相反

 

6) 屬性 7 個

1.[attribute=value]

匹配給定的屬性是某個特定值的元素 註意:後面的value也可以不擴,但擴上了更好

<input type="checkbox" name="c1" value="嘿嘿" />
<input type="checkbox" name="c2" value="嘻嘻" />
<input type="checkbox" name="c1" value="哈哈" />
                    
     $("button").click(function(){
     $("input[name=c1]").attr("checked",true);
      });
                        
//把name=c1的覆選框的值全取出來
     $("button").click(function(){
     var list=$("input[name=c1]");
                              
     $.each(list,function(){
              alert(this.value);
              });
});

附:處理下拉框的選中

$("button").click(function(){
//    $("select[name=select1]").val("bb");  ok
//    $("select").attr("selectedIndex",2);  ok
});
                            
<select name="select1">
     <option value="aa" >aa</option>
     <option value="bb" >bb</option>
     <option value="cc" >cc</option>
</select>
//例子取頁面中所有的 checkbox
$("input[type=checkbox]")

2.[attribute ! =value]  與上例相反

3.[attribute$=value] //匹配attribtue的值以value結尾的

<input type="checkbox" name="c1aaa" value="嘿嘿" />
<input type="checkbox" name="c2vvv" value="嘻嘻" />
<input type="checkbox" name="c1aaa" value="哈哈" />
                                var list=$("input[name$='vvv']")   
                                $.each(list,function(){
                                    alert(this.value);  //彈出 嘻嘻
                                })

4.[attribute^=value] //匹配以value開頭的

5.[attribute*=value] //匹配包含的

6.[attribute] //匹配包含給定屬性的元素

$("div[id]") //查找 帶有id屬性的 div

7.[selector1][selector2][selectorN] //複合的多條件屬性選擇器

$("input[id][name$='man']") //所有含有 id 屬性，並且它的 name 屬性是以 man 結尾的

 

7) 子元素 4 個

:first-child  //匹配第一個子元素    

<ul>
     <li>John</li>  它的顏色會變
     <li>Karl</li>
     <li>Brandon</li>
</ul>
<ul>
      <li>Glen</li>  它的顏色會變
      <li>Tane</li>
      <li>Ralph</li>
</ul>
                    
$("ul li:first-child").css("background","silver");

:last-child //匹配最後面的元素,與上例相反

:nth-child  //匹配父元素下的第N個子或奇偶元素

:eq(index)只匹配一個元素，而這個將為每一個父元素匹配子元素。:nth-child從1開始的，而:eq()是從0算起的
                    另外可以使用:
                    :nth-child(even)
                    :nth-child(odd)
                    :nth-child(3n)
                    :nth-child(2)
                    :nth-child(3n+1)
                    :nth-child(3n+2)
                    

$("ul li:nth-child(2)").css("background","pink"); //改變每個 ul 中 第二個 li的背景
$("ul li:nth-child(even)").css("background","pink"); //將每個 ul中的偶數行的背景進行設定

:only-child //如果某個元素是父元素中唯一的子元素，那將會被匹配 如果父元素中含有其他元素，那將不會被匹配。(找獨生子)

<ul>
     <li>John</li>
     <li>Karl</li>
     <li>Brandon</li>
</ul>
<ul>
     <li>Glen</li>
</ul>
                    
$("ul li:only-child") //得到   <li>Glen</li>

 

8) 表單 11 個

--:input     匹配所有 input, textarea, select 和 button 元素 請密切註意,它匹配  textarea,select,button

$(":input")

--:checkbox //匹配所有覆選框

$(":checkbox") 

--:button //匹配所有按鈕 註意它不匹配 submit 之類的

--:file  //匹配所有文件域

--:hidden //匹配所有的不可見元素，input 元素的 type 屬性為 "hidden" 的話也會被匹配到

<table>
     <tr style="display:none"><td>Value 1</td></tr>
     <tr><td>Value 2</td></tr>
</table>
$(":hidden") //每5) 條 前面也有一個hidden

--:image  //<input type=image>

--:radio

--:reset

--:password

--:submit

--:text  //$(":text") <input type="text" />

 

9) 表單屬性 4個

--:enabled

<form>
       <input name="email" disabled="disabled" />
       <input name="id" />
</form>
$("input:enabled") //得到  <input name="id" />

--:disabled //與上面相反

--:checked //匹配所有選中的被選中元素(覆選框、單選框等，不包括select中的option)

<form>  //註意這個form是可以不加的
    <input type="checkbox" name="newsletter" checked="checked" value="貓貓" />
    <input type="checkbox" name="newsletter" value="萬里追風豬" />
    <input type="checkbox" name="newsletter" checked="checked" value="狗狗" />
</form>
                    
var list=$("input:checked");   //換成前面的寫法 $("intput[checked=checked]")
$.each(list,function(){alert(this.value)}); //彈出 貓貓,狗狗

--:selected 匹配所有選中的 option

<select>
     <option value="1">石灰</option>
     <option value="2" selected?"selected">水泥</option>
     <option value="3">河卵石</option>
</select>
       alert($(":selected").val()); //2
       alert($(":selected").text()); //水泥

五、許可權設計（設計如下）
            菜單表
            id
            menuName
            URL
            target
            parentId
            pic
            level //菜單是幾級菜單 (千萬註意,如果oracle資料庫,這個是關鍵詞)
            
            管理員表
            id
            userName
            password
            ....
            
            
            用戶許可權表
            userId
            menuId

            0009   1
            0009   2
                   ...
                   
            0009   99

代碼：

  //left.jsp中
    List<MenuInfo> menuList=new MenuDao().getMenuList(0,user.getId());
    
//操作菜單表
        public class MenuDao {
            
            //查詢用戶有多少菜單,根據用戶的id
            public List<MenuInfo>getMenuList(int parentId,int userId){
                //先根據用戶的id,把他據有的菜單查出來
                String menuListStr=getUserMenuListStr(userId);
                
                Connection conn=null;
                PreparedStatement stm=null;
                ResultSet rs=null;
                List<MenuInfo> menuList=new ArrayList<MenuInfo>();
                try{
                    conn=DBUtil.getConn();
                    String sql="select * from menuInfo where parentId=?  and id in ("+menuListStr+")"; 
                    stm=conn.prepareStatement(sql);
                    stm.setInt(1, parentId);
                    rs=stm.executeQuery();
                    
                    while(rs.next()){
                        MenuInfo m=new MenuInfo();
                        m.setId(rs.getInt("id"));
                        m.setMenuName(rs.getString("menuName"));
                        m.setTarget(rs.getString("target"));
                        m.setUrl(rs.getString("url"));
                        m.setParentId(rs.getInt("parentId"));
                        m.setPic(rs.getString("pic"));
                        
                        if(parentId==0){
                            m.setSubMenuList(getMenuList(m.getId(),userId));  //遞歸
                        }
                    
                        menuList.add(m);
                    }
            
                }catch(Exception ex){
                    ex.printStackTrace();
                }finally{
                    DBUtil.close(rs, stm, conn);
                }
                
                return menuList;
            }
            
            //根據用戶的id,查詢他有哪些菜單,並拼成字元串返回
            public String getUserMenuListStr(int userId){
                Connection conn=null;
                PreparedStatement stm=null;
                ResultSet rs=null;
                String result="";
                try{
                    conn=DBUtil.getConn();
                    String sql="select menuId from userMenu where userId=?"; 
                    stm=conn.prepareStatement(sql);
                    stm.setInt(1, userId);
                    rs=stm.executeQuery();
                    
                    while(rs.next()){
                        result+=rs.getInt(1)+",";
                    }
                    
                    if(!"".equals(result)){
                        result=result.substring(0,result.length()-1);
                    }
                    
                    System.out.println(result);
                    
                }catch(Exception ex){
                    ex.printStackTrace();
                }finally{
                    DBUtil.close(rs, stm, conn);
                }
        
                return result;    
            }

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 學習 JavaScript 樹
    學習 JavaScript 樹 ======================== 樹（Tree） 在電腦科學中，數據結構是一門研究 非數值計算 的程式設計問題中電腦的操作對象（數據元素）以及它們之間的操作和運算等的學科。 它包含三方面的內容： 數據的邏輯結構（常見有樹、圖、集合、線性） 數據存儲 ...
  • Web前端基礎——jQuery（三）
    本文主要從以下幾方面介紹jQuery應用中的內容： 1 jQuery 節點遍歷2 jQuery 中的過濾器3 jQuery 屬性操作4 jQuery Dom節點操作5 幾個jQuery例子6 jQuery 中的事件7 jQuery 中的動態效果 一、 jQuery 節點遍歷 == next() // ...
  • JQuery---選擇器、DOM節點操作練習
    一、練習一 1、需求效果分析： 2、代碼示例： 1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; ...
  • css3動畫-載入中...
    寫幾個簡單的載入中動畫吧。 像前面三種都是相當於幾個不同的點輪流來播放同一動畫：變大變小。css3裡面有一個用於尺度變換的方法：scale(x,y)：定義 2D 縮放轉換，改變元素的寬度和高度。 第四種就是一個小球從上往下跌落，再彈回去，在上面的時候速度最小，下麵的時候速度最大。由於該小球只進行了上 ...
  • 《移動Web前端高效開發實戰》筆記2——使用Gulp構建一個ECMAScript 6和Sass應用
    使用Grunt構建項目涉及磁碟操作，構建效率較低，因此，基於流的Gulp應運而生。本節通過一個例子，介紹如何利用Gulp構建一個ECMAScript 6和Sass應用。 ...
  • 對redux的理解
    redux原理 某公司有物流（actionType）、電商（actionType）、廣告（actionType）3塊業務，在公司財務系統（state）統一記錄著三塊業務分別賺取到的資金。某天，電商業務在公司電商平臺銷售了價值100w的商品（action），賺取到的資金通過發票（dispatch）的形 ...
  • 2017webstrom下載破解漢化
    1、webstrom 11.0.3下載地址1：http://pan.baidu.com/s/1kVQjcwf 密碼：uggr 下載地址2：http://pan.baidu.com/s/1kVQjcwf，點擊DOWNLOAD即可下載 2、webstrom11激活 選擇“license server” ...
  • 網頁title旁邊的小圖片
    網頁title旁邊的小圖片設置，圖片格式必須是.ico ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類