jQuery 使用小结

矫情吗；* 2022-11-13 11:23 126阅读 0赞

# 1.获取对应值 #

var username = $("#username").val();

# 2.添加下拉框元素 #

//初始化"校区"下拉框
    for (var i = 0; i < campus.length; i++) { 
        var op = new Option(campus[i].name, campus[i].id);
        $("#campus").append(op);
    };

# 3.删除被选元素的子元素 #

清空了下拉框中所有元素

$("#apartment").empty();

# 4.设置为空值 #

将下拉框值设置为空，但不清空  
此处注意3 4处的区别

$("#apartment").val("");

# 5.下拉框二级联动 #

//当"校区"变动时,公寓刷新为对应校区
    $("#campus").change(function(){ 
        $("#apartment").empty();
        var campus = $("#campus").val();
        for (var i = 0; i < apartment.length; i++) { 
            if(apartment[i].campusId == campus)
            { 
                var op = new Option(apartment[i].name, apartment[i].id);
                $("#apartment").append(op);
            }  
        }
    });

# 6.多选框获取选中值 #

//多选框初始化
    <div class="aui-list-item-input">
       <label><input class="aui-radio" type="radio" value="1" name="category" checked> 硕士</label>
       <label><input class="aui-radio" type="radio" value="2" name="category"> 博士</label>
    </div>
    //多选框获取选中值
    var category = $("input[type='radio']:checked").val();

# 7.Ajax 请求 #

========post========
    $.ajax({ 
        url: "http://127.0.0.1/login",
        type: 'post',
        async: false,
        data: null,
        processData: false,// 告诉jQuery不要去处理发送的数据
        contentType: false,// 告诉jQuery不要去设置Content-Type请求头
    	success: function (data) { 
            alert(1);
        error:function(){ 
            alert(0);
        }
    });
    ========get========
    $("button").click(function(){ 
      $.get("demo_test.asp",function(data,status){ 
        alert("Data: " + data + "\nStatus: " + status);
      });
    });
    ========post========
    $("button").click(function(){ 
      $.post("demo_test_post.asp",
      { 
        name:"Donald Duck",
        city:"Duckburg"
      },
      function(data,status){ 
        alert("Data: " + data + "\nStatus: " + status);
      });
    });

# 8.重置所有框的值 #

清空所有input框，清空所有select框…

$(":input").val('');
    $(":select").val('');

# 9.按钮触发函数 #

如例5，在上面的例子中，当按钮的点击事件被触发时会调用一个函数：

$("button").click(function() { ..some code... } )

# 参考文献 #

[w3school][]

[w3school]: https://www.w3school.com.cn/jquery/index.asp