jQuery 使用小结

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