幼熙的游戏吧 关注:9贴子:649

回复:【学习记录①】jquery

取消只看楼主收藏回复

jq库提供3个方式来绑定元素的事件处理函数,bind(),live()和delegate()....


52楼2013-12-16 15:19
回复
    .bind(event type,event handler)


    53楼2013-12-16 15:32
    回复
      .live(event type,event handler)
      不仅作用于DOM中当年存在的元素,很作用于将来可能存在(动态生成)的元素。
      适用于:经常在DOM中动态添加或删除元素的web应用。
      不支持:链接调用方式。


      54楼2013-12-16 15:40
      回复
        .delegate(selector,event type,event handler)
        选择器,事件类型,事件处理函数。
        支持链式调用。


        55楼2013-12-16 15:44
        回复
          在事件处理函数中为目标元素设置边框属性(添加边框)。
          $('.firstname').bind('focus',function(){
          $(this).css('boder','1px solid red');
          });


          56楼2013-12-16 16:23
          回复
            5jquery特效
            show(),hide(),toggle() 根据当前状态切换显示/隐藏状态
            slideDown() 以向下滑动展开的方式显示元素
            slideUp() 以向上卷动的方式藏起元素
            slideToggle() 以滑动/卷动方式切换元素的展开/收起状态
            fadeIn() 元素以淡入的方式显示出来
            fadeOut() 元素以淡出的方式消失
            fadeTo() 淡入或淡出到某个透明度


            57楼2013-12-16 16:35
            回复
              吼吼不错,以后计划9点之后开始学习~
              坚持下去!!!


              58楼2013-12-17 08:54
              回复
                5.8链式调用多个效果
                实例2:3条语句,每次选中一个元素并且设定样式:
                方法1:
                $('#politics').css('border','1px solid red');
                $('#finance').css('display','none');
                $('#local').css('border','1px solid green');
                方法2:利用.end()方法实现所有元素和方法的链式调用。
                .end()方法能得到包含上一步操作结果集的jquery对象,从而让其后链接的方法不受.end()函数之前选择器的影响。
                $('#news').find('#politics').css('border','1px solid red').end().find('#finance').hide().end().find('#local').css('border','1px solid blue');


                60楼2013-12-17 09:19
                回复
                  链式调用实例1:
                  .tool-tip元素先被隐藏,接着在900ms的时间内淡入。经过1s的延迟之后,它又花了900ms淡出。
                  $('.tool-tip').hide().fadeIn(900).delay(1000).fadeOut(900);


                  61楼2013-12-17 09:20
                  回复
                    5.9使用多种特效创建一个新闻阅读器RSS小工具
                    抓取静态内容的简单新闻阅读器(淡入和滑动)
                    1.生成基本的html结构。
                    2.在数组变量newsArray中存放10个文章标题。新闻阅读器会遍历这些静态内容。
                    3.创建2个变量:newsLength保存文章数量,newsInterval存放一个ms为单位,用了定义多长是啊金抓取新的而文章标题并放到新闻阅读器中。
                    4.选中元素,并在它后面添加一个无序列表news-feed.
                    $('h1').after('<ul id="news-feed"></ul>');
                    5.生成一个for循环,遍历newsArray中的标题。
                    for(i=0;i<newLength;i++){
                    $('#news-feed').append('<li>'+newsArray[i]+'</li>');
                    }
                    6.特效。选中无序列表的news-feed中的最后一个li元素,克隆他。再把克隆得到的li元素添加到新闻列表的最前头(并让它隐藏).
                    function slideHeadline(){
                    $('#news-feed li:last').clone().prependTo('#news-feed').hide();
                    7.选择step6克隆的元素,然后调用.slideDown()方法让它以滑动方式显示出来。
                    function slideHeadline(){
                    $('#news-feed li:last').clone().prependTo('#news-feed').hide();
                    $('#news-feed li:last').slideDown();
                    }
                    8.第一个条目用500ms的时间滑下,1000ms的时间淡入方式显示。
                    function slideHeadline(){
                    $('#news-feed li:last').clone().prependTo('#news-feed').hide();
                    $('#news-feed li:last').fadeIn(1000).slideDown(500);
                    }
                    9.最后一句删除列表中的最后一项。
                    function slideHeadline(){
                    $('#news-feed li:last').clone().prependTo('#news-feed').hide();
                    $('#news-feed li:last').fadeIn(1000).slideDown(500);
                    $('#news-feed li:last').remove();
                    }
                    10.利用原生的javascript函数setInterval以固定时间间隔(2000ms)不断执行slideHeadline函数。
                    setInterval(slideHeadline,newsInterval);


                    62楼2013-12-17 10:40
                    回复
                      setInterval()和setTimeout()


                      63楼2013-12-17 10:45
                      回复
                        第六章 改进导航:菜单,标签及折叠选项
                        第七章 生成可交互的生动表格
                        第八章 使用jquery制作高级表单


                        64楼2013-12-17 16:05
                        回复