jquery 雜記

 

 

---

 

設置或返回元素的屬性值：

       $("#imgId").attr('src');   // 獲取元素的屬性值

　　$("#imgId").attr('src',path); // 設置元素的屬性值

　　$("#imgId").getAttribute(「src」) ;  // getAttribute() 方法返回指定屬性名的屬性值。

 

　　

　　用JQuery操做元素的style屬性:

  　 $("p").css("color");  //獲取p元素的樣式顏色

　　$("p").css("color","red");  //設置p元素的樣式顏色爲紅色

 

　　$("#id").show();  //表示display:block,  

　　$("#id").hide();   //表示display:none;  

　　$("#id").toggle(); //切換元素的可見狀態。若是元素是可見的，切換爲隱藏的；若是元素是隱藏的，切換爲可見的。  

       $("#id").css('display','none');  

       $("#id").css('display','block');

 

　　判斷是否隱藏顯示：

　　　　.is(':visible')  // 是否顯示

　　　　is(":hidden") // 是否隱藏

 

---

 

 

 獲取元素的值、設置元素的值：

　　獲取value值： $("#id").val()

　　設置value值： $("#id").val(「hello」)

---

 

form表單：

序列化表單值： $('#formid').serialize()   建立 URL 編碼文本字符串。 如：name=aa&tel=13166666661

 

---

 

選擇器：

　　經過類獲取節點： $('.xz);　　

　　經過id獲取節點：$('#xz);

　　

　　選擇器：

　　$("input[name=xxx][value=xxx]").val();

 　  $(".demo  li") 

 

　　通配符：

  　 　　$("input[id^='code']");//id屬性以code開始的全部input標籤

  　　　 $("input[id$='code']");//id屬性以code結束的全部input標籤

　　      $("input[id*='code']");//id　　屬性包含code的全部input標籤

---

 

節點的：插入、複製、替換、刪除 等操做：

 

　　添加節點：

 

    append() - 在被選元素的結尾插入內容
    prepend() - 在被選元素的開頭插入內容
    after() - 在被選元素以後插入內容
    before() - 在被選元素以前插入內容

 

　　　　　　$("p").append("<b>123</b>");  //向p元素中追加<b>節點，結果：<p> <b>123</b> </p>　　

　　　　      $("<b>123</b>").appendTo("p");   //將<b>追加到p元素中
    　　　　  $("p").prepend("<b>123</b>");   //向p中前置<b>
    　　　　  $("<b>123</b>").prependTo("p");   //將<b>前置到p元素中
　　　　      $("p").after("<b>123</b>");   //向p元素後插入<b>
　　　　      $("<b>123</b>").insertAfter("p");   //將<b>插入到p元素後邊
　　　　      $("p").before("<b>123</b>");   //在p元素以前添加<b>
　　　　      $("<b>123</b>").insertBefore("p");   //將<b>插入到p元素前面　　　　　　

　　刪除節點：

　　     var $li=$("ul li:eq(1)").　　　　();//刪除ul節點中第2個元素節點
           $("ul").append($li);//把剛刪除的元素節點重新添加到ul元素中去
           $("ul li").remove("li[title!=菠蘿]");//將ul元素下title屬性不等於"菠蘿"的li元素刪除
           $("ul li:eq(1)").empty();//清空ul節點下第2個li元素的內容

 

---

jquery 循環和遍歷：

　　

循環遍歷元素節點：

$(".demo li").each(function(){
    alert($(this).text())
  });

 

循環遍歷數組：

    // 要提早把數組轉換爲json格式 var anArray = ['one','two','three']; $.each(anArray,function(n,value){ alert(n); alert(value); } // alert(n) 輸出：0 1 2 // alert(value) 輸出： one two three var anObject = {one:1,two:2,three:3};//對json數組each $.each(anObject,function(name,value) { alert(name); 　　 alert(value); });

 

---

 數組操做：

　　定義數組：

　　　　var a = new Array();
　　       a[0] = 10;
　　　　a[1] = "aaa";
　　　　a[2] = 12.6;

　　循環數組：

var a = [1,2,3,4,5,6];
for(var i =0; i<a.length; i++){
alert(a[i]);
}

　　數組的經常使用函數：

　　　　一、判斷某元素是否在數組中  或 返回數組中指定元素的索引值

　　　　　　jQuery.inArray()方法：　　用於在數組中查找指定值，並返回它的索引值（若是沒有找到，則返回-1）　　　　

jQuery.inArray( value, array [, fromIndex ] ) 

 

                  

　　

---

 

 

 if判斷：

　　運算符要不支持and/or，要使用&&/||

　　if(val1 != '' && val1 < 100){

---

字符串處理：

把字符串中的某個字符所有替換：

var start = '11-11-21';
start = start.replace(/-/gm,'');
alert(start);

 

 

---

獲取上一個兄弟節點：prev()　　　　　　

獲取下一個兄弟節點：next()

查找兄弟節點，不分先後：siblings()   　　例：this.siblings(".selected")　 查找當前元素的全部類名爲 "selected" 的全部同胞元素：　　　   

獲取父節點：parent()

獲取第一個子元素：children(":first")  或者 children(":eq(0)")

獲取第二個子元素：children(":eq(1)")

　　$("div").children(".selected").css("color", "blue");   找到類名爲 "selected" 的全部 div 的子元素，並將其設置爲藍色：

　　$("div ul").children(":eq(1),:eq(7)").css("color","red");

---

刪除節點：

            //將class="carousel-inner"，子元素的class!='item active'的div節點所有刪除
            $(".carousel-inner").children("div[class!='item active']").remove();

 

 

 

---

 

jquery頁面刷新：

        $(function(){  //這是當文檔載入完畢就執行的意思
            $("#refresh").click(function(){  //頁面加載時綁定按鈕點擊事件
                window.location.reload();//刷新當前頁面.
            });
        });

 

---

 

jquery事件綁定：

方式一：當文檔載入完畢，執行綁定

        $(function(){  //這是當文檔載入完畢就執行的意思
　　        $(".check-list li").on("click",function(){
　　        　　$(this).addClass("sel");
　　        })
        });

　　　　// 或者
        $(document).ready(function() {  //這是當文檔載入完畢就執行的意思
　　        $(".check-list li").on("click",function(){
　　        　　$(this).addClass("sel");
　　        })
        });
        // 推薦：ready裏面執行的事件，整合放到一個function裏面，這樣的話，發佈從新綁定事件（好比添加新元素時）
        $(document).ready(function() {  //這是當文檔載入完畢就執行的意思
             xxxx（）；// 全部的事件，都放到這個function裏面　　        
        });

 

方式二：將事件和函數綁定到元素

    $('#travelmemberlogin').bind('keyup change blur',function () {
        getTravelMemberInfo();
    });

 

　　on() 方法在被選元素及子元素上添加一個或多個事件處理程序。

　　自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。該方法給 API 帶來不少便利，咱們推薦使用該方法，它簡化了 jQuery 代碼庫。

　　注意：使用 on() 方法添加的事件處理程序適用於當前及將來的元素（好比由腳本建立的新元素）。

---

元素的顯示：show()

元素的隱藏：hide()

---

 

正則表達式：

       test() 方法用於檢測一個字符串是否匹配某個模式. 
       若是字符串中有匹配的值返回 true ，不然返回 false。

　　例：判斷手機號的格式：

        var phone = /^1([38]\d|4[57]|5[0-35-9]|7[0135-8]|8[89])\d{8}$/;

        if(!phone.test($("#telephone").val())){
            alert('用車聯繫人的電話格式不正確！');
        }

 

 

---

當元素的值發生改變時，會發生 change 事件：

$('#renttype').change(function() {
       …………
});

---

 獲取select選中的值：

$("#selectid  option:selected").val();

或：var id = $(this).find("option:selected").val();

 

獲取radio選中的值：

$("input[name='rd']:checked").val();

 

獲取自定義data-*屬性的值:

$("#awesome").data('myid');

 

---

 

經過獲取jquery節點、獲取值：

經過name獲取節點： $("li[name='sheng']")

                   $("input[id='sheng']")

 

獲取雙標籤之間的字符（html）：

                  document.getElementById('dialog').innerhtml="標籤中的內容"   （js實現）

                  $("#dialog").html("標籤中的內容"); 

 

---

 

JQuery獲取input type="text"中的值的各類方式：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml>

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>JQuery獲取文本框的值</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<script src="jquery-1.5.1.min.js" type="text/javascript"></script>
		
		<script type="text/javascript">
		//使用id的方式獲取    （切記：使用id獲取節點的值時，代碼中不能有id重名的，不然會失敗！！！） $(document).ready(function(){ //1 $("#button_text1").click(function(){ var result1 = $("#input_text1").val(); alert("result1 = " + result1); }); //2 $("#button_text2").click(function(){ var result2 = $("input[id='input_text2']").val(); alert("result2 = " + result2); }); //3 $("#button_text3").click(function(){ var result3 = $("input[id='input_text3']").attr("value"); alert("result3 = " + result3); }); //4. 能夠經過type的值來獲取input中的值（未演示） /* $("#button_text4").click(function(){ var result4 = $("input[type='text']").val(); alert("result4 = " + result4); }); */ //5. 能夠經過name的值來獲取input中的值（未演示） /* $("#button_text5").click(function(){ var result5 = $("input[name='text']").val(); alert("result5 = " + result5); }); */ }); </script> </head> <body> <!-- 獲取文本框的值：方式一 --> <div id="test1"> <input id="input_text1" type="text" value="test1" style="width: 100px;" /> <button id="button_text1">test1</button> </div> <!-- 獲取文本框的值：方式二 --> <div id="test2"> <input id="input_text2" type="text" value="test2" style="width: 100px;" /> <button id="button_text2">test2</button> </div> <!-- 獲取文本框的值：方式三 --> <div id="test3"> <input id="input_text3" type="text" value="test3" style="width: 100px;" /> <button id="button_text3">test3</button> </div> </body> </html>　　

---

兼容性：

當不兼容360瀏覽器的極速模式時，如下面方式能夠兼容：

1：有些瀏覽器不兼容onclick()事件，

    $(document).ready(function() {
        // 爲下拉框綁定事件
        $('#roleid').change(function () {
            showcheckarea();
        });

        // 頁面加載完成後也要執行一次
        showcheckarea();
    });

    function showcheckarea() {
        var roleid = $('#roleid option:selected').val();
        if(roleid == 2) {
            $('#checkprincipalarea').show();
        }else {
            $('#checkprincipalarea').hide();
            $('#checkid').val("0");
        }
    }

 

 

 

---

---

代碼判斷：

            $('select[name="select-commonappoint"]').change(function(){
                var id = $(this).attr("id");
                var selectval = $('#'+id+' option:selected').attr('value');
                var appointfromid = ($('#'+id).prev()).prev().attr("id");
                $('#'+appointfromid).attr('value',selectval);
            });

 

 

---

---

 

jquery插件:

　　一：confirm  確認對話框按鈕和連接

 

 

　　二 : jQuery彈出層插件 - layer  

　　　　1-官網：http://layer.layui.com/

            2-效果：　半透明的彈窗

          　  

            3-使用方法：
　　　　　　第一步：把插件的壓縮包放到項目目錄
　　　　　　

　　　　　　第二步：引入 <script type="text/javascript" src="/js/layer/layer.js"></script>
　　　　　　

　　　　　　第三步：調用  （就這麼簡單，直接調用就能夠了）

<script>
    function xxx() {
        layer.msg('xxx不能爲空');
    }
</script>

　　　　　　

    

 

---

jquery獲取第二個class：
　　var var1=$(this).attr("class");
　　var var2=var1.split(' ');
　　alert(var2[1]);

---

jquery 經常使用事件：

一、keyup 按鍵被按下，而後按鍵被鬆開並復位時觸發。

// 當按下按鍵時，改變文本域的顏色
$("input").keyup(function(){
  $("input").css("background-color","#D6D6FF");
});

 

二、onchange 事件會在域的內容改變時發生。

 

三、oninput 事件在value改變時實時觸發（除IE以外的大多數瀏覽器支持的事件）

 

 

---

 

---

 

定時、週期：

setInterval()     // 按照指定的週期（以毫秒計）來調用函數或計算表達式。
setTimeout()     // 在指定的毫秒數後調用函數或計算表達式。

 　　

頁面跳轉：

    location.href = "www.xxx.com"; 

 

---

 

四捨五入：

  　 var num = 13.37;
　　alert(num.toFixed(1));     // 四捨五入，保留一位小數

       輸入：13.4

 

---

 

alert 打印對象：

　　方法一：

　　　　

將object變成可見的json格式的字符串。

即 alert(JSON.stringify(object));

 

　　方法二：

假設將對象賦給test，此時test是也是對象。
var test = object;
1、查看對象內容(一級對象)。

for(i in test ){
  alert(i);           //得到屬性
  alert(test[i]);  //得到屬性值

}

2、查看對象裏的對象(二級及以上)

for(i in test ){
  alert(i);
  alert(test[i].toSource());

}

 

 

---

 

 

百度地圖 - 已知經緯度，獲取城市名稱：

方法1：百度地圖  =》 JavaScript API =》 逆地址解析服務：http://lbsyun.baidu.com/index.php?title=jspopular/guide/geocoding

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=你的key"></script>

<div id="l-map"></div>

<script>
                var latitude = "";  // 緯度
                var longitude = '';  // 經度

                var map = new BMap.Map("l-map");
                // 建立地理編碼實例
                var myGeo = new BMap.Geocoder();
                // 根據座標獲得地址描述
                myGeo.getLocation(new BMap.Point(longitude, latitude), function(result){
                    if (result){
//                        alert(JSON.stringify(result));
                        var res_city = result.addressComponents.city;
                        if(!res_city) {
                            // 默認城市
                            res_city = '臨沂市';
                        }
                        alert(res_city);
                    }
                });

</script>            

 

方法2：百度地圖 =》WEB 服務API =》正/逆地理編碼服務 ：http://lbsyun.baidu.com/index.php?title=webapi/guide/webservice-geocoding

 

 

 

---

 

 

hasClass() 方法檢查被選元素是否包含指定的 class。

removeClass() 方法從被選元素移除一個或多個類。

addClass() 方法向被選元素添加一個或多個類。

 

 

---

 

判斷身份證的格式：   （身份證號：老的是15位，新的是18位）

 

function checkIdentity(identity){
            var reg = /^[1-9]{1}[0-9]{14}$|^[1-9]{1}[0-9]{16}([0-9]|[xX])$/;
            if(reg.test(identity)){
                return true;
            }else{
                return false;
            }
}