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
  • C# + WPF 音頻播放器 界面優雅，體驗良好
    前言 本文介紹一款使用 C# 與 WPF 開發的音頻播放器，其界面簡潔大方，操作體驗流暢。該播放器支持多種音頻格式（如 MP4、WMA、OGG、FLAC 等），並具備標記、實時歌詞顯示等功能。 另外，還支持換膚及多語言（中英文）切換。核心音頻處理採用 FFmpeg 組件，獲得了廣泛認可，目前 Git ...
  • OAuth2.0授權-gitee授權碼模式
    OAuth2.0授權驗證-gitee授權碼模式 本文主要介紹如何筆者自己是如何使用gitee提供的OAuth2.0協議完成授權驗證並登錄到自己的系統，完整模式如圖 1、創建應用 打開gitee個人中心->第三方應用->創建應用 創建應用後在我的應用界面，查看已創建應用的Client ID和Clien ...
  • FastReport.OpenSource .Net下開源免費報表列印組件
    解決了這個問題：《winForm下，fastReport.net 從.net framework 升級到.net5遇到的錯誤“Operation is not supported on this platform.”》 本文內容轉載自：https://www.fcnsoft.com/Home/Sho ...
  • 如何在 ASP.NET Core Web API 方法執行前後 “偷偷“ 作一些 “壞“ 事？初識 ActionFilterAttribute
    國內文章 WPF 從裸 Win 32 的 WM_Pointer 消息獲取觸摸點繪製筆跡 https://www.cnblogs.com/lindexi/p/18390983 本文將告訴大家如何在 WPF 裡面，接收裸 Win 32 的 WM_Pointer 消息，從消息裡面獲取觸摸點信息，使用觸摸點 ...
  • 在 ASP.NET Core Web API 中使用異常篩選器捕獲和統一處理異常
    前言 給大家推薦一個專為新零售快消行業打造了一套高效的進銷存管理系統。 系統不僅具備強大的庫存管理功能，還集成了高性能的輕量級 POS 解決方案，確保頁面載入速度極快，提供良好的用戶體驗。 項目介紹 Dorisoy.POS 是一款基於 .NET 7 和 Angular 4 開發的新零售快消進銷存管理 ...
  • AbpHelper CLI積累與實戰分享
    ABP CLI常用的代碼分享 一、確保環境配置正確 安裝.NET CLI： ABP CLI是基於.NET Core或.NET 5/6/7等更高版本構建的，因此首先需要在你的開發環境中安裝.NET CLI。這可以通過訪問Microsoft官網下載並安裝相應版本的.NET SDK來實現。 安裝ABP ...
  • 記一次HttpClient使用問題分析
    問題 問題是這樣的：第三方的webapi，需要先調用登陸介面獲取Cookie，訪問其它介面時攜帶Cookie信息。 但使用HttpClient類調用登陸介面，返回的Headers中沒有找到Cookie信息。 分析 首先，使用Postman測試該登陸介面，正常返回Cookie信息，說明是HttpCli ...
  • .NET周刊【9月第3期 2024-09-15】
    國內文章 關於.NET在中國為什麼工資低的分析 https://www.cnblogs.com/thinkingmore/p/18406244 .NET在中國開發者的薪資偏低，主要因市場需求、技術棧選擇和企業文化等因素所致。歷史上，.NET曾因微軟的閉源策略發展受限，儘管後來推出了跨平臺的.NET ...
  • 我的網站集成ElasticSearch初體驗
    在WPF開發應用中，動畫不僅可以引起用戶的註意與興趣，而且還使軟體更加便於使用。前面幾篇文章講解了畫筆（Brush），形狀（Shape），幾何圖形（Geometry），變換（Transform）等相關內容，今天繼續講解動畫相關內容和知識點，僅供學習分享使用，如有不足之處，還請指正。 ...
  • 第23篇 委托的概述
    什麼是委托？ 委托可以說是把一個方法代入另一個方法執行，相當於指向函數的指針；事件就相當於保存委托的數組； 1.實例化委托的方式： 方式1：通過new創建實例： public delegate void ShowDelegate(); 或者 public delegate string ShowDe ...
所有分類