JQuery 学习笔记 (1)‏

• 1.       $ 为JQuery 的核心函数 。通过jquery 的$() 引用元素包括通过id 、class 、元素名以及元素的层级关系及dom 或者xpath 条件等方法，且返回的对象为 jquery 对象（集合对象）， 不能直接调用dom 定义的方法。

 

• 2.       只有 jquery 对象才能使用 jquery 定义的方法。注意 dom 对象和 jquery 对象是有区别的

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

·         jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出

 

• 3.       如何获取JQuery 集合对象中的某一项

对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象

• 4.       同一函数实现get ，set 功能

$("#msg").html();    //返回id为msg的元素节点的html内容。
$("#msg").html("<b>new content</b>"); //作为html串写入id为msg的元素节点内容中

• 5.       集合处理

对于JQuery返回的集合，无需遍历集合，就可以对其中对象分别做处理

//实现表格的隔行换色效果

$("tr").each(function(i){this.style.backgroundColor=['#ccc','#fff'][i%2]})

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

• 6.       添加扩展方法

$.extend({
min: function(a, b){return a < b?a:b; },
max: function(a, b){return a > b?a:b; }
}); //为jquery扩展了min,max两个方法
使用扩展的方法（通过“$.方法名”调用）：
alert("a=10,b=20,max="+$.max(10,20)+",min="+$.min(10,20));

 

 

• 7.       绝大对数方法可以支持链式调用

 

• 8.       操作 CSS 样式

$("#msg").css("background");    //返回元素的背景颜色
$("#msg").css("background","#ccc") //设定元素背景为灰色

 

 

• 9.       在 JS 为 HTML 元素注册事件

    <script type="text/javascript">

        $(document).ready(function() {

            $("#btnCheck").click(function() {

                var name = $("#txtUserName").val();

                if (name == "") {

                    alert("name can not be null");

                }

                else {

                    $.get("AjaxProxy.aspx?UserName=" + name, null, processCallBack, "text");

                }

            });

        });

     function processCallBack(response)

     {

        $("#divContent").html(response);

     }

</script>

 

 

• 10. JQuery 中的自定义事件

·        模仿鼠标悬停和离开hover(fn1,fn2)

$("tr").hover(function(){
$(this).addClass("over");
},
function(){
$(this).addClass("out");
});

 

·        DOM 所有元素载入完成ready(fn)

·        每次点击切换调用函数toggle(evenFn,oddFn)

·        在某个元素上触发某类事件

$("p").trigger("click");    //触发所有p元素的click事件

·         元素事件的bind/unbind

$("p").unbind(); //删除所有p元素上的所有事件
$("p").unbind("click") //删除所有p元素上的单击事件