Jquery常用技巧总结

Jquery常用技巧总结
1、页面元素引用
                  jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象）;
 
2、Jquery对象与dom对象的转换

普通的dom对象一般可以通过$()转换成jquery对象。

如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。


    $("#msg").html();
    $("#msg")[0].innerHTML;
    $("#msg").eq(0)[0].innerHTML;
    $("#msg").get(0).innerHTML;

 
3、获取jQuery集合的某一项

    $("div").eq(2).html();              //调用jquery对象的方法
    $("div").get(2).innerHTML;       //调用dom的方法属性

 
4、同一函数实现set和get

    $("#msg").html();              //返回id为msg的元素节点的html内容。
    $("#msg").html("<b>new content</b>");      
    //将"<b>new content</b>" 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
    $("#msg").text();              //返回id为msg的元素节点的文本内容。
    $("#msg").text("<b>new content</b>");      
    //将"<b>new content</b>" 作为普通文本串写入id为msg的元素节点内容中,页面显示粗体的<b>new content</b>
    $("#msg").height();               //返回id为msg的元素的高度
    $("#msg").height("300");           //将id为msg的元素的高度设为300
    $("#msg").width();              //返回id为msg的元素的宽度
    $("#msg").width("300");           //将id为msg的元素的宽度设为300
    $("input").val(");               //返回表单输入框的value值
    $("input").val("test");           //将表单输入框的value值设为test
    $("#msg").click();           //触发id为msg的元素的单击事件
    $("#msg").click(fn);           //为id为msg的元素单击事件添加函数,同样blur,focus,select,submit事件都可以有着两种调用方法

 
5、集合处理功能
包括两种形式：

    $("p").each(function(i){this.style.color=['#f00','#0f0','#00f']})      
    //为索引分别为0，1，2的p元素分别设定不同的字体颜色。

    $("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})      
    //实现表格的隔行换色效果

 

    $("p").click(function(){.html())})              
    //为每个p元素增加了click事件，单击某个p元素则弹出其内容

 
6、扩展我们需要的功能

    $.extend({
           min: function(a, b){return a < b?a:b; },
           max: function(a, b){return a > b?a:b; }
    });       //为jquery扩展了min,max两个方法

 
7、支持方法的连写

    $("p").click(function(){.html())})
    .mouseover(function(){})
    .each(function(i){this.style.color=['#f00','#0f0','#00f']});

 
8、操作元素的样式

    $("#msg").css("background");              //返回元素的背景颜色
    $("#msg").css("background","#ccc")       //设定元素背景为灰色
    $("#msg").height(300); $("#msg").width("200");       //设定宽高
    $("#msg").css({ color: "red", background: "blue" });//以名值对的形式设定样式
    $("#msg").addClass("select");       //为元素增加名称为select的class
    $("#msg").removeClass("select");       //删除元素名称为select的class
    $("#msg").toggleClass("select");       //如果存在（不存在）就删除（添加）名称为select的class

 
9、完善的事件处理功能

    $("#msg").click(function(){})       //为元素添加了单击事件
    $("p").click(function(i){this.style.color=['#f00','#0f0','#00f']})
    //为三个不同的p元素单击事件分别设定不同的处理


hover(fn1,fn2)：一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数，这个函数用的比较多，比如离开文本框的时候，框框变颜色，或者验证什么的，都很适用。
 

更多请见：http://www.mark-to-win.com/tutorial/51888.html