`
yuexiaowen
  • 浏览: 124727 次
  • 性别: Icon_minigender_2
  • 来自: 咸阳
社区版块
存档分类
最新评论

jquery学习笔记(1)

阅读更多

  1.首先学习了$(document).ready()与onload方法有着相同的效果。但是$(document).ready()的优先级高于onload()方法。这两种方法可以和平共处

 

<table>
    <tr>
     <th>11111</th>
     <th>22222</th>
    </tr>
    <tr>
     <td>Hery</td>
     <td>cary</td>
    </tr>
     <tr>
      <td>aa</td>
      <td>bb</td>
     </tr>
     <tr>
      <td>cc</td>
      <td>dd</td>
     </tr>
    </table>

<script type="text/javascript">
    $(document).ready(
    function(){
      $('the').parent().addClass('titleClass');
      $('tr:not(th):odd').addClass('odd');
      $('tr:not(th):even').addClass('even');
      $('tr:contains("Hery")').next().addClass('hightlight');
     }
    );

</script>

<style type="text/css">
  .odd
  {
     background-color: red; 
  }
  .even
  {
     border-color: blue;
  }

</style>

这是第一个小例子可以实现斑马线。

 

 

 

/////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

Jquery复合事件处理程序。

<script>

$(document).ready(
     function(){
       $('switcher h3').toggle(
        function(){
          $('switcher .button').addClass('hidden');
        },
        function(){
          $('switcher .button').removeClass('hidden');
        }
       );
     }
    );

 

</script>

//备注:1.switcher为id,h3,.button是一个本来就有的css样式,hidden为要加的css样式。此段的js的意思是当点击时,会出现显示和隐藏的效果。

            2.toggle()方法接收2个参数,而且这2个参数都是函数。第一次在元素单击时,会调用第一个函数,依次类推。

              函数是交替替换的。这样就实现了。

 ///////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////

<style>

#switcher .hover{
  cursor:pointer;
  background-color:#afa;
}

</style>

<script>

$(document).ready(
 function(){
 $('#switcher .button').hover(function(){
  $(this).addClass('hover');
}),function(){
  $(this).removeClass('hover');
}
}
);

</script>

//备注:当鼠标移到到id位switcher的时候,和移走的时候效果是不一样的,动态改变样式。

 

///////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////

 

stopPropagation()方法避免其他DOM元素响应事件。

unbind()方法将一种事件类型作为第一个参数,将要移除的函数作为第二个参数。

trigger()方法可以完成模拟事件的操作。比如,当装载页面的时候,也没折叠起来就可以这样:

$(document).ready(function(){$('#switcher').trigger('click')});
$('#switcher').click(toggleStyleSwitcher );
 var toggleStyleSwitcher = function(){
   $('#switcher .button').toggleClass('hidden');
};

分享到:
评论

相关推荐

    Jquery学习笔记1

    ### Jquery 学习笔记1 本篇笔记主要围绕 jQuery 的基本使用方法展开,包括了 DOM 操作、选择器的使用、属性与过滤器等内容。jQuery 是一款优秀的 JavaScript 库,它极大地简化了 HTML 文档遍历、事件处理、动画等...

    Jquery学习笔记Jquery学习笔记

    Jquery学习笔记 Jquery学习笔记是指使用Jquery框架来实现javascript编程的笔记记录,本笔记记录了Jquery-1.2的基本用法、Ajax异步交互、XMLHttpRequest对象的基本应用等知识点。 一、Jquery基本用法 Jquery是一个...

    jQuery学习笔记(一)

    **jQuery学习笔记(一)** 在深入探讨jQuery之前,我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...

    锋利的JQuery学习笔记.pdf

    锋利的JQuery学习笔记

    jquery 学习笔记总结

    **jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...

    jQuery 语法学习笔记

    jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...

    jquery 学习笔记

    **jQuery学习笔记** jQuery,作为一个轻量级的JavaScript库,极大地简化了JavaScript的DOM操作、事件处理、动画设计以及Ajax交互。这篇学习笔记将深入探讨jQuery的核心概念和实用技巧,帮助初学者快速上手。 ## 一...

    韩顺平jquery学习笔记及练习

    《韩顺平jQuery学习笔记及练习》是一份珍贵的学习资源,由知名讲师韩顺平的课程实录整理而成,旨在帮助学习者深入理解和掌握jQuery这一强大的JavaScript库。jQuery简化了HTML文档遍历、事件处理、动画设计和Ajax交互...

    JQuery学习笔记

    以下是对JQuery学习笔记的详细解析: 首先,JQuery的出现是为了弥补JavaScript在处理浏览器兼容性和控件操作上的不足。不同浏览器对JavaScript的实现存在差异,导致开发跨浏览器的网页应用变得复杂。为了统一这些...

    javascript and jquery学习笔记与资料

    这里,我们有针对这两个主题的学习笔记和参考资料,包括JavaScript培训、jQuery API、JavaScript基础、函数详解以及jQuery使用手册等内容。让我们逐一探讨这些知识点。 首先,`JavaScript培训.zip`可能包含的是对...

    jquery学习笔记.rar

    《jQuery学习笔记详解》 jQuery,作为一款广泛应用于前端开发的JavaScript库,因其简洁的语法和强大的功能,深受开发者喜爱。这份"jQuery学习笔记.rar"包含的资源旨在帮助你全面掌握jQuery,无论你是初学者还是有...

    Ajax和jQuery学习笔记

    ### Ajax和jQuery学习笔记 #### 一、Ajax基础与原理 **1.1 什么是Ajax?** Ajax(Asynchronous JavaScript and XML,异步JavaScript和XML)是一种用来创建快速动态网页的技术,通过在后台与服务器进行少量数据...

    JQuery学习笔记合集

    **jQuery学习笔记合集概述** jQuery是一个广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作以及Ajax交互等任务。这个"JQuery学习笔记合集"包含了三个部分,旨在帮助开发者从初级到高级...

    JQuery学习笔记(日常积累)

    1. **元素引用**: jQuery通过`$()`函数来选取元素,支持多种方式,包括id、class、元素名以及层级关系和DOM或XPath条件。返回的结果是一个jQuery对象,也称为jQuery集合,即使只选取了一个元素,返回的也是一个...

    jQuery学习笔记 jQuery API

    **jQuery学习笔记 jQuery API** jQuery,作为一款广泛使用的JavaScript库,极大地简化了DOM操作、事件处理、动画制作和Ajax交互。本笔记旨在帮助开发者快速上手并深入理解jQuery的核心概念和API。 ### 1. jQuery...

    Jquery学习笔记分享

    **jQuery学习笔记分享** 在Web开发中,jQuery是一个非常重要的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章:...

    JQuery学习笔记(技术文档)

    ### JQuery学习笔记(技术文档) #### 一、JQuery能做什么? JQuery 是一款轻量级的 JavaScript 库,它的设计宗旨是“write less, do more”,即“写得更少,做得更多”。通过JQuery,可以实现以下功能: 1. **...

    jQuery学习笔记

    **jQuery学习笔记** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript代码的编写,使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记,以HTML页面的形式呈现,方便阅读和...

    圣思源的jquery学习笔记

    《圣思源jQuery学习笔记详解》 jQuery,作为一款强大的JavaScript库,自2006年发布以来,因其简洁易用的API和丰富的插件生态,迅速成为了前端开发者的重要工具。圣思源张龙老师的jQuery学习笔记,深入浅出地剖析了...

Global site tag (gtag.js) - Google Analytics