JQuery asp.net 简单入门

一、简单取值和绑定：

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标签

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

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、常用事件

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

 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

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