Jquery 使用点滴

　　如果说现在最火的javascript库是哪个，我想应该是jQuery吧．用VS创建的MVC工程都会把jQuery类库文件添加到工程中，可见它的欢迎程度．那为什么它有这么大的吸引力呢，我认为主要有以下几点：

 

1. 它可以减轻你的工作量

　　同样的功能，用jQuery实现比用原生态的javascript所需编写代码更少，并且在大部分情况下程序运行效率要高．

1. 跨浏览器，支持移动浏览器

　　你不必再为编写能在IE,Firefox, Chrome, Safari 等浏览器上表现一致的脚本苦恼了．有过在IE6上编写脚本的人将深有体会．

1.  它有许许多多的插件

　　你想要实现的某种功能，先搜索下是否有相关插件，说不定有意外心惊喜．    

1. 当别人都在用它的时候，最好也用它．

　　否则一是看别人的代码比较费劲，二是开发风格不能保持一致．

 

下面是最近完成项目中，经常用到的方法的汇总．

1. Ajax:

　　1.1    最简单的Ajax提交，以及做返回处理：

$.post(url, function (data) {//callback});

　　1.2    Ajax操作时传入参数：

 $.get(url, { para1: value1 }, responseHandler);  //responseHandler为回调函数

　　1.3    JSON处理：

$.getJSON(url, { para1:  value1}, responseHandler));

　　1.4    如果以上都不能满足您的需求，直接调用最底层的ajax函数：

$.ajax({   url: url,
                data: { para1: value1},
                dataType: "xml",
                cache: false,
　　　　　 beforeSend:  function() {}, 
                error: function(xml) {//error handler},
                success: function(xml) {//success handler},
　　　　　 complete : function(){}
            });

　

2.  获取操作对象

　　2.1     根据ID获取对象　　

$("#UserName")

　　2.2    查找name='Privileges'的控件　　

$("input[name='Privileges']")
$("div[name='message']").last()

 　　2.3     获取子对象

$("#menubar ul")              //查找ID为menubar下的所有UL对象，递归查询
$("#divProjectInfo > div ") //获取查找ID为divProjectInfo下的div对象，不递归查询
$("#divProjectInfo > div:first") //获取查找ID为divProjectInfo下的第一个div对象

3. 修改或设置属性

　　3.1     取值/隐藏

$("#obj").val()  　//获取值
$("#obj").val(1);　//赋值
$("#obj").text(); //获取文本内容
$("#obj").hide();
$("#obj").show();

　　3.2      增加或删除Class

$("#obj").addClass(className);
$("#obj").removeClass(className);
$("#obj").css({"width": '50px' }); 

　　3.3     直接操作属性

$("#obj").attr("href ", url);
$("#obj").attr("checked", true);
$("#obj").attr("disabled", true)；

 　　3.4     关联日期选择控件

$("#obj").datepicker(datePara);　
$("#obj").datepicker("setDate", endDate);
var datePara = {
    dateFormat: 'yy/mm/dd',
    dayNamesMin: ['日', '一', '二', '三', '四', '五', '六'],
    monthNames: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
}

　　

　　3.5       添加内容

$("#obj").append("<li>");
$("#obj").html("<li>");

　　3.6      Checkbox操作

$("#chkAll").attr("checked");   //判断checkbox是否选中
$(this).is(':checked');         //有时通过attr("checked")获取不到取消状态，需要用这个

$("input[name='Privileges']").each(function() { 　　$(this).attr("checked", checked ? true : false); });

　3.7    radio操作

$('input[name=qIsBorrowing]').is(':checked') 　　　　　　　　　　　　　　　//判断某个radio组是否选中
$("input:radio[name=ContactTypeID]:checked").val() == "3" 　　　　　　　 //判断某个radio项是否选中
$("input:radio[name=ContactTypeID]:eq(0)).attr("checked", true);　　　　//设置radio组第一项选中
$("input:radio[name=ContactTypeID]:[value='3']).attr("checked", true);　//根据值选中

　3.8    下拉选项操作   

$('#obj option:selected').val();  //获取下拉选项的值 
$('#obj').append('<option value="0">title</option>');　//添加
$("#obj").get(0).selectedIndex;　//获取下拉选项选中项索引

// multiple = true 检查是否选中
$("#obj option").each(function () {
    if ($(this).attr("selected")) {
        alert($(this).val());
    }
});   

　　　

4. 其它

　　4.1     健值对

var tt = {"0":"女", "1":"男"};

$.each(tt, function (key1, key2) {
　　　　alert(key1); alert(key2);
});

　　4.2     根据当前对象查找

$(document).ready(function () {
    $("#ulTest li a").click(function () {
        //alert($(this).text());
        $(this).parent("li").hide();
    });
});

　html结构如下

 <ul id="ulTest">
    <li><a>aa</a></li>
    <li><a>bb</a></li>
</ul> 

　　4.3     自定义data-值获取

<div class="ajax-requests">
    <a href="/Home/FetchRouteHits" data-transform="fetchRouteHits_transform">Fetch Route Hits</a>
</div>　

$('.ajax-requests a').click(function() {
    $(this).data('transform')  //输出fetchRouteHits_transform
});

　5， window onload加载函数写法(总是忘记格式，记录一下)

$(function(){

});

  6，绑定事件

$("#batchA").bind("click", batch);