登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

pcwanli的博客

nx

 
 
 

日志

 
 

JQuery 学习笔记 (1)?  

2010-12-24 00:34:09|  分类: jQuery |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
  • 1.       $ JQuery的核心函数。通过jquery$()引用元素包括通过idclass、元素名以及元素的层级关系及dom或者xpath条件等方法,且返回的对象为jquery对象(集合对象),不能直接调用dom定义的方法。

 

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

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

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

 

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

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

  • 4.       同一函数实现getset功能

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

  • 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元素上的单击事件
  评论这张
 
阅读(417)| 评论(0)

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018