随笔 - 224  文章 - 12  评论 - 13  阅读 - 45万

JQuery笔记

一、简单取值和绑定：

1、

input、select：

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

2、select:

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

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

3、radio：

取值：

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

$('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" />

4、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");

}

})

}

}

 

5、单个checkbox radio：取值：$("#course_isfp").is(":checked") 赋值：$("#course_iszlb").attr(":checked"); $("#course_iszlb").prop(":checked");

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

 

4、



 


$.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使用


1、验证部分


复制代码


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


复制代码


2、提交代码




OnClientClick="return inputchenk();"




 


 


1、A标签




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




 




?
1
<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、选择器


复制代码


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的节点元素


复制代码


2、常用事件




?
1
2
3
4
5
6
7
8
9
2、Jquery事件器的介绍
 
$(selector).click()  被选元素的点击事件
$(selector).dblclick()   被选元素的双击事件
$(selector).focus()  被选元素的获得焦点事件
$(selector).mouseover()  被选元素的鼠标悬停事件
$(selector).css();   被选元素的CSS事件
$(selector). hide();     被选元素的隐藏事件
$(selector). show('slow');   被选元素的显示事件




5、文本选择


 


获得内容 - 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");
});


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


1、设置value为pxx的项选中


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


2、设置text为pxx的项选中


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


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


    这里有一个中括号的用法，中括号里的等号的前面是属性名称，不用加引号。很多时候，中括号的运用可以使得逻辑变得很简单。


3、获取当前选中项的value


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


4、获取当前选中项的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);


});


5、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常用功能：


1、登录窗口最顶端




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




2、登录详解


 




//登录按钮绑定事件
$(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;
    }
}



复制代码


 




?
1
2
3
4
5
var value = $('#<%=RadioButtonList1.ClientID%>').find("[checked]").val();           
           if ("undefined" == typeof(value)) {
               alert("请选择用户类型！")
               return false;
           }




　　




?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
随着Jquery的作用越来越大，使用的朋友也越来越多。在Web中，由于 CheckBox、Radiobutton 、DropDownList等控件使用的频率比较高，就关系到这些控件在Jquery中的操作问题。由于Jquery的版本更新很快，代码的写法也改变了 许多，以下Jquery代码适query1.4版本以上。
 
<strong>Radio    
  </strong>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){
     //写入代码
});
 
<strong>DropDownList
</strong>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




?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<script type="text/javascript">
       function checksave() {
           if ($("#txtUserName").val() == "") {
               $("#txtUserName").focus();
               alert("请填写用户名！");
               return false;
           }
 
           if ($("#txtPwd1").val() == "") {
               $("#txtPwd1").focus();
               alert("请输入密码！");
               return false;
           }
 
           if ($("#txtPwd2").val() == "") {
               $("#txtPwd2").focus();
               alert("请输入确认密码！");
               return false;
           }
 
           if ($("#txtPwd2").val() != $("#txtPwd1").val()) {
               $("#txtPwd1").focus();
               alert("两次密码不一致，请核对！");
               return false;
           }
 
           if ($("#txtYEYMC").val() == "") {
               $("#txtYEYMC").focus();
               alert("请输入幼儿园名称！");
               return false;
           }
 
           if ($("#txtYBND").val() == "") {
               $("#txtYBND").focus();
               alert("请填写办园时间(年份)！");
               return false;
           }
 
           reg = /^\d{4}$/;
           if (!reg.test($("#txtYBND").val())) {
               $("#txtYBND").focus();
               alert("请填写正确的办园时间(年份)，如2014！");
               return false;
           }
           if ($("#txtYDJND").val() != "") {
               if (!reg.test($("#txtYDJND").val())) {
                   $("#txtYDJND").focus();
                   alert("请填写正确的定级时间(年份)，如2014！");
                   return false;
               }
           }
 
           if ($("#ddlSXSM1").val() == "-1") {
               $("#ddlSXSM1").focus();
               alert("请选择县区");
               return false;
           }
           var sxm2 = $("#ddlSXSM2").val();
           if ($("#ddlSXSM2").val() == null || $("#ddlSXSM2").val() == "-1") {
               $("#ddlSXSM2").focus();
               alert("请选择县区！");
               return false;
           }
           if (sxm2.substring(4, 6) != '01') {
               //如果没有乡镇就不用检查
               if ($("select[name=ddlXZSM] option").size() > 1) {
                   if ($("#ddlXZSM").val() == null || $("#ddlXZSM").val() == "-1") {
                       $("#ddlXZSM").focus();
                       alert("请选择乡镇！");
                       return false;
                   }
               }
           }
 
           if ($("#txtJDDZ").val() == "") {
               $("#txtJDDZ").focus();
               alert("请输入具体地址！");
               return false;
           }
 
           if ($("#ddlSBDJ").val() == "-1") {
               $("#ddlSBDJ").focus();
               alert("请选择等级！");
               return false;
           }
           if ($("#ddlSZDXZ").val() == "-1") {
               $("#ddlSZDXZ").focus();
               alert("请选择所在地性质！");
               return false;
           }
           if ($("#txtYZBM").val() == "") {
               $("#txtYZBM").focus();
               alert("请输入邮政编码！");
               return false;
           }
           if ($("#ddlBYXZ").val() == "-1") {
               $("#ddlBYXZ").focus();
               alert("请选择办园性质！");
               return false;
           }
           if ($("#ddlCQXZ").val() == "-1") {
               $("#ddlCQXZ").focus();
               alert("请选择园舍产权性质！");
               return false;
           }
           if ($("#ddlJJLYXZ").val() == "-1") {
               $("#ddlJJLYXZ").focus();
               alert("请选择经费来源性质！");
               return false;
           }
           if ($("#ddlFWXS").val() == "-1") {
               $("#ddlFWXS").focus();
               alert("请选择服务形式！");
               return false;
           }
 
           if ($("#txtYEYDH").val() == "") {
               $("#txtYEYDH").focus();
               alert("请输入幼儿园电话！");
               return false;
           }
           if ($("#txtDZYX").val() == "") {
               $("#txtDZYX").focus();
               alert("请输入电子邮箱信息！");
               return false;
           }
           if ($("#txtZBDWMC").val() == "") {
               $("#txtZBDWMC").focus();
               alert("请输入主办单位(人)名称！");
               return false;
           }
           if ($("#txtZBDWDH").val() == "") {
               $("#txtZBDWDH").focus();
               alert("请输入主办单位(人)电话！");
               return false;
           }
           if ($("#txtFRXM").val() == "") {
               $("#txtFRXM").focus();
               alert("请输入法人代表姓名！");
               return false;
           }
           if ($("#txtFRDH").val() == "") {
               $("#txtFRDH").focus();
               alert("请输入法人代表电话！");
               return false;
           }
           if ($("#txtYZXM").val() == "") {
               $("#txtYZXM").focus();
               alert("请输入园长姓名！");
               return false;
           }
           if ($("#txtYZDH").val() == "") {
               $("#txtYZDH").focus();
               alert("请输入园长手机！");
               return false;
           }
       }
   </script>




　　


 






	
posted on 
 
雪夜 
阅读(356) 
评论(0) 
编辑 
收藏 
举报












    
    

    
    



    

        
    

        

            
                
                
            
        

    

编辑推荐：



· 从二进制到误差：逐行拆解C语言浮点运算中的4008175468544之谜
    

· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
    

· 软件产品开发中常见的10个问题及处理方法
    

· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
    

· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
    



    

    阅读排行：
    

 ·          Windows桌面应用自动更新解决方案SharpUpdater5发布
        

 ·          我的家庭实验室服务器集群硬件清单
        

 ·          C# 13 中的新增功能实操
        

 ·          Supergateway：MCP服务器的远程调试与集成工具
        

 ·          Vue3封装支持Base64导出的电子签名组件
        



    

    











	
		

			

			




    
        

            
                

                    
                        

                            
                                <
                            
                            2025年3月
                            
                                >
                            
                        

                    
                

            		
        

    

        日
        一
        二
        三
        四
        五
        六
    

            

                            23
                            24
                            25
                            26
                            27
                            28
                    
                        1
                    
            

                

                        
                            2
                        
                            
                                3
                            
                            
                                4
                            
                            
                                5
                            
                            
                                6
                            
                            
                                7
                            
                        
                            8
                        
                

                

                        
                            9
                        
                            
                                10
                            
                            
                                11
                            
                            
                                12
                            
                            
                                13
                            
                            
                                14
                            
                        
                            15
                        
                

                

                        
                            16
                        
                            
                                17
                            
                            
                                18
                            
                            
                                19
                            
                            
                                20
                            
                            
                                21
                            
                        
                            22
                        
                

                

                        
                            23
                        
                            
                                24
                            
                            
                                25
                            
                            
                                26
                            
                            
                                27
                            
                            
                                28
                            
                        
                            29
                        
                

                

                        
                            30
                        
                            
                                31
                            
                            
                                1
                            
                            
                                2
                            
                            
                                3
                            
                            
                                4
                            
                        
                            5
                        
                

    

                
                    

			































                    

	





	Powered by: 博客园
	Copyright © 2025 雪夜

Powered by .NET 9.0 on Kubernetes










    

    
    








  

  
点击右上角即可分享

  微信分享提示