JQuery筆記

時間  2019-12-08
標籤 jquery 筆記 欄目 JQuery 简体版
原文   原文鏈接

1、簡單取值和綁定：javascript

一、css

input、select：html

取值：$("#course_bt").val() 賦值：$("#course_bt").val('123456') select 是value賦值

二、select:java

value: 取值：$("#course_bt").val() 賦值：$("#course_bt").val('123456') select 是value賦值jquery

text:：取值 ：$(".selector").find("option:selected").text();  賦值：$(".selector").find("option[text='pxx']").attr("selected",true);ajax

三、radio：服務器

取值：app

$("input[name='radioName'][checked]").val();dom

$('input:radio:checked').val();異步

$("input[type='radio']:checked").val();

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

 賦值：

$("input:radio[value='rd2']").attr('checked','true');

$("input[value='rd2']").attr('checked','true');

$("input[name='radioName'][value=2]").attr("checked",true); 

//設置選中
$("input[name='b'][value=" + theApplyType + "]").prop("checked", true);
//取值
var applyType = $('input[name="b"]:checked').val();

<input type="radio" name="b" value="0" />
<input type="radio" name="b" value="1" />
<input type="radio" name="b" value="2" />

四、checkbox：

<input type="checkbox" value="1" name="sProblem">check1
<input type="checkbox" value="2" name="sProblem">check2
<input type="checkbox" value="3" name="sProblem">check3
<input type="checkbox" value="4" name="sProblem">check4

//取值 1，2，3方式

function getTheCheckBoxValue(){

var chb= $("input[name='sProblem']:checked");

var checkBoxValue = ""; 

chb.each(function(){

checkBoxValue += $(this).val()+",";

})

checkBoxValue = checkBoxValue.substring(0,checkBoxValue.length-1);

}

//賦值

function setTheCheckBoxValue(){

var checkBox = "1,2,3";

var checkBoxArray = checkBox.split(",");

for(var i=0;i<checkBoxArray.length;i++){

$("input[name='sProblem']").each(function(){

if($(this).val()==checkBoxArray[i]){

$(this).attr("checked","checked");

}

})

}

}

 

五、單個checkbox radio：取值：$("#course_isfp").is(":checked") 賦值：$("#course_iszlb").attr(":checked"); $("#course_iszlb").prop(":checked");

Number($("#course_iszlb").is(":checked"))//true 爲1 false 爲0

 

四、

 

 
 

$.ajax({
    type: 'POST', url: url, success(function(data){ //判斷是否爲JSON對象 if(typeof(data) == "object" && Object.prototype.toString.call(data).toLowerCase() == "[object object]" && !data.length){ alert("is JSON 0bject"); } //判斷是否存在某字段 console.info(datas["key"] != undefined); //此方式不嚴謹，若是key定義了 並就是賦值爲undefined 則會出問題 console.info("key" in datas); console.info(datas.hasOwnProperty("key")); }) })
 

 
 

 
 

ASP.Net使用
 

一、驗證部分
 

 
 
 function inputchenk() {
            //if ($("input[id*='RadioButtonList1']:checked").val() == null)
            //{
            //    layer.alert('請選擇 類型！', { icon: 5 });
            //    return false;
            //}
　　　　　　　//var value = $('#<%=RadioButtonList1.ClientID%>').find("input[type='radio']:checked").val(); 

            if ($("#ddlts_xqid").val() == "0")
            {               
                layer.alert('請選擇 縣區！', { icon: 5 });
                return false;
            }
            if ($("#ddldw_stid").val() == "0") {
                layer.alert('請選擇 學校類型！', { icon: 5 });
                return false;               
            }
            if ($("#ddldw_school").val() == "0") {
                layer.alert('請選擇 學校！', { icon: 5 });
                return false;              
            }
            if ($("#ddldw_school").val() == "0") {
                layer.alert('請選擇 學校！', { icon: 5 });
                return false;
            }
            if ($("#txtlook_date").val() == "") {
                layer.alert('請選擇 隨訪日期！', { icon: 5 });
                return false;               
            }
            if ($("input[id*='zrqlist']:checked").length<1) {
                layer.alert('請選擇 參與人員！', { icon: 5 });
                return false;
            }            
            else {
                return true;
            } 
        }
 

 

二、提交代碼
 

 
 
OnClientClick="return inputchenk();"
 

 

 
 

 
 

一、A標籤
 

 
 
<a href="javascript:setURL('Invelogin.aspx');">Login.aspx</a>

 

 

 
 

 
 
<a href="javascript:window.location.replace('http://www.baidu.com')"> open a link 5</a>

 

 

　　
 

JQuery 選擇 
 

 
 
        $(function () {
            $("#<%=chkSelectAll.ClientID %>").click(function () {
                // 很簡單，一行代碼搞定 
                $("#<%=chkList.ClientID %> input[type=checkbox]").attr("checked", $("#<%=chkSelectAll.ClientID %>").is(":checked"));
            });
        });
 

 

 
 

一、選擇器
 

 
 
1、Jquery選擇器的各類用法

$(this)     當前元素
$("p")     全部<p>元素
$("input")     全部input元素
$(".intro")     全部 class=「intro」 的元素
$("p.intro")     全部 class="intro" 的<p>元素
$("#intro")     id="intro" 的第一個元素
$("ul > li") ul下的全部li節點
$("ul li:first")     每一個 <ul> 的第一個 <li> 元素
$("[href$='.jpg']")    全部帶有以 ".jpg" 結尾的 href 屬性的屬性
$("div#intro .head")    id="intro" 的 <div> 元素中的全部 class="head" 的元素
$(li[a:contains('Register')]")     內容包含Register的<a>元素
$("input[@name=bar]")     name是bar的<input>元素
$("input[@type=radio][@checked]")    type是radio的<input>元素
$(「li」).not(「ul」)     li下沒有包含ul節點的節點元素
$("span[@id]")     包含id屬性的<span>元素
$("[@id=span1]")     id爲span1的節點元素
 

 

二、經常使用事件
 

 
 
二、Jquery事件器的介紹

$(selector).click()	 被選元素的點擊事件
$(selector).dblclick()	 被選元素的雙擊事件
$(selector).focus()	 被選元素的得到焦點事件
$(selector).mouseover()	 被選元素的鼠標懸停事件
$(selector).css();	 被選元素的CSS事件
$(selector). hide();	 被選元素的隱藏事件
$(selector). show('slow');	 被選元素的顯示事件

 

 

五、文本選擇
 

 
 

得到內容 - text()、html() 以及 val()
 

三個簡單實用的用於 DOM 操做的 jQuery 方法：
 

     
 
  • text() - 設置或返回所選元素的文本內容
    •  
 
  • html() - 設置或返回所選元素的內容（包括 HTML 標記）
    •  
 
  • val() - 設置或返回表單字段的值
    •  

 

下面的例子演示如何經過 jQuery text() 和 html() 方法來得到內容：
 

實例
 

$("#btn1").click(function(){
  alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
  alert("HTML: " + $("#test").html());
});
 

$("#btn1").click(function(){
  $("#test1").text("Hello world!");
});
$("#btn2").click(function(){
  $("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
  $("#test3").val("Dolly Duck");
});
 

四、select選自
 

 
 

好比<select id="touid"></select> 
 

$("#touid  option:selected").text("張金");//text設置
 

$("#touid  option:selected").text();//取text值
 

$("#touid  option:selected").val();//取text值
 

$("#touid  option:selected").val(id);//取text值
 

 
 

$("#tid").find("option[text='"+slr+"']").attr("selected",true);//設定select text 值爲slr 爲選中狀態
 

$("#pcs").val(dpt_code);//設定select vale 值爲dpt_code爲選中狀態 
 

 
 

好比<select class="selector"></select>
 

一、設置value爲pxx的項選中
 

     $(".selector").val("pxx");
 

二、設置text爲pxx的項選中
 

　 $("#touid  option:selected").text("張步金");
 

    $(".selector").find("option[text='pxx']").attr("selected",true);
 

    這裏有一箇中括號的用法，中括號裏的等號的前面是屬性名稱，不用加引號。不少時候，中括號的運用可使得邏輯變得很簡單。
 

三、獲取當前選中項的value
 

    $(".selector").val();
 

四、獲取當前選中項的text
 

    $(".selector").find("option:selected").text();
 

　 jQuery("#select1  option:selected").text();
 

    這裏用到了冒號，掌握它的用法並觸類旁通也會讓代碼變得簡潔。 
 

不少時候用到select的級聯，即第二個select的值隨着第一個select選中的值變化。這在jquery中是很是簡單的。
 

如：$(".selector1").change(function(){
 

     // 先清空第二個
 

      $(".selector2").empty();
 

     // 實際的應用中，這裏的option通常都是用循環生成多個了
 

      var option = $("<option>").val(1).text("pxx");
 

      $(".selector2").append(option);
 

});
 

五、getJSON 同步異步 默認異步
 

 
 
    $.ajaxSettings.async = false; //同步
    $.getJSON('__MODULE__/Tool/code/'+id,function(data){
        var sel = $('#cid').get(0);
        sel.options.length=1;
        $.each(data,function(i,o){
            sel.options.add(new Option(o.fullname, o.id));
            
        });
    });
$("#cid").find("option[text='"+slr+"']").attr("selected",true);//按text來賦值

 

 

 
 

 
 
//input TextBox
  if ($("#txtuser_name1").val() == "") {               
                $("#Label1").text("身份證不能爲空!"); //span Lable             
                return false;
            }
                        
            if ($('#ddlPosition_name option:selected').text() == "==選擇==") { //DropDownList              
                //var strErr = document.getElementById("Label1");
                //strErr.innerHTML = "請選擇 職務名稱！";
                $("#Label1").text("請選擇 職務名稱！"); 
                return false;
            }
 

 

 
 

--------------
 

JQuery經常使用功能：
 

一、登陸窗口最頂端
 

 
 
 $(window).load(function () {if (window != top) { top.location.href = location.href; }});
 

 

二、登陸詳解
 

 
 

 
 
//登陸按鈕綁定事件
$(document).ready(function () {
    $("#btn_login").click(function () {
        postlogin();
        return false;
    });
});
 

 

 
 
//登陸按鈕綁定事件
//友情提示注意js部分中的 $("#btn_login")中的return false；這個能夠阻止迴轉服務器否則仍是會刷新
 
 
$(document).ready(function () {

    $("#btn_login").click(function () {
        postlogin();
        return false;
    });
}); 

function postlogin() {
    if (checkUserName() && checkUserPwd()) {
        var username = $('#txt_loginname').val();
        var userpass = $('#txt_loginpass').val();
        $.post("../UserLogin.aspx", { UserName: username, UserPass: userpass }, function (result) {
            if (result == "1") {
                alert("登陸成功！");
            } else if (result == "3") {
                alert("用戶名不正確!");
            } else if (result == "2") {
                alert("密碼不正確!");
            } else {
                alert("登陸失敗!請重試!" + result);
            }
        });
    }
}

function checkUserName() {
    if ($("#txt_loginname").val().length == 0) {
        alert('用戶名不能爲空!');
        return false;
    } else {
        return true;
    }
}
function checkUserPwd() {
    if ($("#txt_loginpass").val().lenght == 0) {
        alert('密碼不正確!');
        return false;
    } else {
        return true;
    }
}

 

 

 
 

 
 
 var value = $('#<%=RadioButtonList1.ClientID%>').find("[checked]").val();           
            if ("undefined" == typeof(value)) {
                alert("請選擇用戶類型！")
                return false;
            }

 

 

　　
 

 
 
隨着Jquery的做用愈來愈大，使用的朋友也愈來愈多。在Web中，因爲 CheckBox、Radiobutton 、DropDownList等控件使用的頻率比較高，就關係到這些控件在Jquery中的操做問題。因爲Jquery的版本更新很快，代碼的寫法也改變了 許多，如下Jquery代碼適query1.4版本以上。

Radio    
  
 
  
 
1.獲取選中值，三種方法均可以：
$('input:radio:checked').val()；
$("input[type='radio']:checked").val();
$("input[name='rd']:checked").val();
2.設置第一個Radio爲選中值：
    $('input:radio:first').attr('checked', 'checked');
或者
$('input:radio:first').attr('checked', 'true');
注：attr("checked",'checked')= attr("checked", 'true')= attr("checked", true)
3.設置最後一個Radio爲選中值：
$('input:radio:last').attr('checked', 'checked');
或者
$('input:radio:last').attr('checked', 'true');
4.根據索引值設置任意一個radio爲選中值：
$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2....
或者
$('input:radio').slice(1,2).attr('checked', 'true');
5.根據Value值設置Radio爲選中值
$("input:radio[value=http://www.2cto.com/kf/201110/'rd2']").attr('checked','true');
或者
$("input[value=http://www.2cto.com/kf/201110/'rd2']").attr('checked','true');
6.刪除Value值爲rd2的Radio
$("input:radio[value=http://www.2cto.com/kf/201110/'rd2']").remove();
7.刪除第幾個Radio
$("input:radio").eq(索引值).remove();索引值=0,1,2....
如刪除第3個Radio:$("input:radio").eq(2).remove();
8.遍歷Radio
$('input:radio').each(function(index,domEle){
     //寫入代碼
});

DropDownList

 
  
 
1.   獲取選中項：
獲取選中項的Value值：
      $('select#sel option:selected').val();
     或者
       $('select#sel').find('option:selected').val();
獲取選中項的Text值：
      $('select#seloption:selected').text();
     或者
       $('select#sel').find('option:selected').text();
2.   獲取當前選中項的索引值：
$('select#sel').get(0).selectedIndex;
3.   獲取當前option的最大索引值：
$('select#sel option:last').attr("index")
4.   獲取DropdownList的長度：
$('select#sel')[0].options.length;
或者
$('select#sel').get(0).options.length;
5.  設置第一個option爲選中值：
$('select#sel option:first').attr('selected','true')
或者
 $('select#sel')[0].selectedIndex = 0;
6.   設置最後一個option爲選中值：

 

 

　　
 

checkbox


        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程