function(e):

事件包括事件源和事件数据，事件源是指是谁触发的这个事件，谁就是事件源（div,按钮,span都可以是事件源），时间数据是指比如点击鼠标的事件中，事件数据就是指点击鼠标的左建或者右键，还是双击，这就是事件数据，时间数据存放在e中.

全选：

  1. <body>
  2. <input type="checkbox" id="qx" /> 全选
  3. <input type="checkbox" value="01" class="ck" />
  4. <input type="checkbox" value="02" class="ck" />
  5. <input type="checkbox" value="03" class="ck" />
  6. <input type="checkbox" value="04" class="ck" />
  7. <input type="checkbox" value="05" class="ck" />
  8. </body>
  9.  
  10. <script type="text/javascript">
  11. $("#qx").click(function(){
  12.     var xz = $(this).prop("checked");//设置($this)这个全选按钮自身的属性是"checked"
  13.     var ck = $(".ck").prop("checked",xz);//xz放入之前的prop里的属性为ture
  14. })
  15. </script>

下拉：

  1. <select id="sel">
  2.     <option value="1111">1111</option>
  3.     <option value="2222">2222</option>
  4.     <option value="3333">3333</option>
  5. </select>
    <input type="button" value="取下拉" id="b1" />

  6.  
  7. <script type="text/javascript">$("#b1").click(function(){
        alert($("#sel").val());        
    })
  8. </script>

单选：

  1. <input type="radio" value="01" class="rd"  name="a"/>
  2. <input type="radio" value="02" class="rd" name="a" />
  3. <input type="radio" value="03" class="rd" name="a" />
  4. <input type="radio" value="04" class="rd" name="a" />
  5. <input type="radio" value="05" class="rd" name="a" />
  6. <input type="button" value="取单选" id="b2" />

  7. <script type="text/javascript">
  8. $("#b2").click(function(){
  9.     var rd = $(".rd");
  10.     for(var i=0;i<rd.length;i++)
  11.     {
  12.         if(rd[i].checked)
  13.         {
  14.             alert(rd[i].value);
  15.         }
  16.     }
  17. })
  18. </script>

加事件：

  1. <style type="text/css">
  2. .aaa{ width:150px; height:150px; background-color:#06F}
  3. </style>

  4. <body>
  5. <div class="aaa">111111</div>
  6. <div class="aaa">222222</div>
  7. <div class="aaa">333333</div>
  8. </body>
  9. <script type="text/javascript">
  10. $(document).ready(function(e) {
  11.     $(".aaa").click(function(){
  12.         $(".aaa").css("background-color","#06f");
  13.         $(this).css("background-color","red");
  14.         })
  15. });
  16. </script>

挂事件：

  1. <input type="button" value="挂事件" id="btn" />
  2. <input type="button" value="移除事件" id="btn1" />
  3. <div id="a" style="width:100px; height:100px">cccc</div>
  4.  
  5. <script type="text/javascript">
  6. $(document).ready(function(e) {
  7.     $("#btn").click(function(){
  8.         $("#a").bind("click",function(){
  9.             $("#a").css("background-color","red");
  10.             alert("事件");
  11.             })
  12.         })
  13.     $("#btn1").click(function(){
  14.         $("#a").unbind("click");
  15.         })
  16. });
  17. </script>

 1、parent("#a")语法:找到a的父级元素

  1. <style type="text/css">
  2. div.ex
  3. {
  4. background-color:#e5eecc;
  5. padding:7px;
  6. border:solid 1px #c3c3c3;
  7. }
  8. </style>
  9.  
  10. <body>
  11. <h3>中国办事处</h3>
  12. <div class="ex">
  13. <button class="hide" type="button">隐藏</button>
  14. <p>联系人：张先生<br />
  15. 北三环中路 100 号<br />
  16. 北京</p>
  17. </div>
  18.  
  19. <h3>美国办事处</h3>
  20. <div class="ex">
  21. <button class="hide" type="button">隐藏</button>
  22. <p>联系人：David<br />
  23. 第五大街 200 号<br />
  24. 纽约</p>
  25. </div>
  26. </body>
  27.  
  28. <script type="text/javascript">
  29. $(document).ready(function(){
  30.   $(".ex .hide").click(function(){
  31.     $(this).parents(".ex").hide("slow");     //点击按钮，找到这个按钮的父级元素隐藏(parents:父级元素),slow->慢
  32.   });
  33. });
  34. </script>

 2、slideToggle() 方法通过使用滑动效果（高度变化）来切换元素的可见状态：如果被选元素是可见的，则隐藏这些元素，如果被选元素是隐藏的，则显示这些元素

  1. <style type="text/css">
  2. div.panel,p.flip
  3. {
  4. margin:0px;
  5. padding:5px;
  6. text-align:center;
  7. background:#e5eecc;
  8. border:solid 1px #c3c3c3;
  9. }
  10. div.panel
  11. {
  12. height:120px;
  13. display:none;
  14. }
  15. </style>
  16.  
  17. <body>
  18. <div class="panel">
  19. <p>W3School - 领先的 Web 技术教程站点</p>
  20. <p>在 W3School，你可以找到你所需要的所有网站建设教程。</p>
  21. </div>
  22. <p class="flip">请点击这里</p>
  23. </body>
  24.  
  25. <script type="text/javascript">
  26. $(document).ready(function(e) {
  27.     $(".flip").click(function(){
  28.         $(".panel").slideToggle("slow");
  29.         })
  30. });
  31. </script>

3、animate()语法:

语法：$(selector).animate({params},speed,callback);

*必需的 params 参数定义形成动画的 CSS 属性。

*可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

*可选的 callback 参数是动画完成后所执行的函数名称。

*所有 HTML 元素都有一个静态位置，且无法移动。如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

*当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right:

*也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=：

实例1:

  1. <script>
  2. $(document).ready(function(){
  3.   $("button").click(function(){
  4.     $("div").animate({
  5.       left:'250px',
  6.       height:'+=150px',
  7.       width:'+=150px'
  8.     });
  9.   });
  10. });
  11. </script> 
  12.  
  13. <body>
  14.  
  15. <button>开始动画</button>
  16. <p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
  17. <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
  18. </div>
  19.  
  20. </body>

实例2:

  1. <body>
  2. <button>开始动画</button>
  3. <p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
  4. <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
  5. </div>
  6. </body>
  7.  
  8. <script>
  9. $(document).ready(function(){
  10.   $("button").click(function(){
  11.     var div=$("div");
  12.     div.animate({height:'300px',opacity:'0.4'},"slow");
  13.     div.animate({width:'300px',opacity:'0.8'},"slow");
  14.     div.animate({height:'100px',opacity:'0.4'},"slow");
  15.     div.animate({width:'100px',opacity:'0.8'},"slow");
  16.   });
  17. });
  18. </script>

4、通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

  • fadeIn()   用于淡入已隐藏的元素,语法：$(selector).fadeIn(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒
  • fadeIn()例子：
    1. <script>
    2. $(document).ready(function(){
    3.   $("button").click(function(){
    4.     $("#div1").fadeIn();
    5.     $("#div2").fadeIn("slow");
    6.     $("#div3").fadeIn(3000);
    7.   });
    8. });
    9. </script>
    10.  
    11. <body>
    12. <p>演示带有不同参数的 fadeIn() 方法。</p>
    13. <button>点击这里，使三个矩形淡入</button>
    14. <br><br>
    15. <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div>
    16. <br>
    17. <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div>
    18. <br>
    19. <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
    20. </body>
  • fadeOut()  用于淡出可见元素,语法：$(selector).fadeOut(speed,callback);可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒,
  • fadeOut()例子：
    1. <script src="/jquery/jquery-1.11.1.min.js"></script>
    2. <script type="text/javascript">
    3. $(document).ready(function(){
    4.   $("button").click(function(){
    5.     $("#div1").fadeOut();
    6.     $("#div2").fadeOut("slow");
    7.     $("#div3").fadeOut(3000);
    8.   });
    9. });
    10. </script>
    11.  
    12. <body>
    13. <p>演示带有不同参数的 fadeOut() 方法。</p>
    14. <button>点击这里，使三个矩形淡出</button>
    15. <br><br>
    16. <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
    17. <br>
    18. <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
    19. <br>
    20. <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
    21. </body>
  • fadeToggle() 

    jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。

    如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。

    如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。

    语法：$(selector).fadeToggle(speed,callback);

    可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

    可选的 callback 参数是 fading 完成后所执行的函数名称

  • fadeToggle() 例子：
    1. <script>
    2. $(document).ready(function(){
    3.   $("button").click(function(){
    4.     $("#div1").fadeToggle();
    5.     $("#div2").fadeToggle("slow");
    6.     $("#div3").fadeToggle(3000);
    7.   });
    8. });
    9. </script>
    10.  
    11. <body>
    12.  
    13. <p>演示带有不同参数的 fadeToggle() 方法。</p>
    14. <button>点击这里，使三个矩形淡入淡出</button>
    15. <br><br>
    16. <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
    17. <br>
    18. <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
    19. <br>
    20. <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
    21. </body>
  • fadeTo()  方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

    语法：$(selector).fadeTo(speed,opacity,callback);

    必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

    fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。

    可选的 callback 参数是该函数完成后所执行的函数名称

  • fadeTo() 例子：
    1. <script>
    2. $(document).ready(function(){
    3.   $("button").click(function(){
    4.     $("#div1").fadeTo("slow",0.15);
    5.     $("#div2").fadeTo("slow",0.4);
    6.     $("#div3").fadeTo("slow",0.7);
    7.   });
    8. });
    9. </script>
    10.  
    11. <body>
    12.  
    13. <p>演示带有不同参数的 fadeTo() 方法。</p>
    14. <button>点击这里，使三个矩形淡出</button>
    15. <br><br>
    16. <div id="div1" style="width:80px;height:80px;background-color:red;"></div>
    17. <br>
    18. <div id="div2" style="width:80px;height:80px;background-color:green;"></div>
    19. <br>
    20. <div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
    21.  
    22. </body>

    5、toggle() 方法：

  • 切换元素的可见状态。 如果被选元素可见，则隐藏这些元素，如果被选元素隐藏，则显示这些元素

    语法$(selector).toggle(speed,callback,switch)

    1. <body>
    2. <button type="button">切换</button>
    3. <p>这是一个段落。</p>
    4. <p>这是另一个段落。</p>
    5. </body>
    6.  
    7. $(document).ready(function(){
    8.   $("button").click(function(){
    9.   $("p").toggle();
    10.   });
    11. });

  • append() 方法:

    定义和用法

    append() 方法在被选元素的结尾（仍然在内部）插入指定内容。

    提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容的位置和选择器

    1. <html>
    2. <head>
    3. <script type="text/javascript" src="/jquery/jquery.js"></script>
    4. <script type="text/javascript">
    5. $(document).ready(function(){
    6.   $("button").click(function(){
    7.     $("p").append(" <b>Hello world!</b>");
    8.   });
    9. });
    10. </script>
    11. </head>
    12. <body>
    13. <p>This is a paragraph.</p>
    14. <p>This is another paragraph.</p>
    15. <button>在每个 p 元素的结尾添加内容</button>
    16. </body>
    17. </html>

    add()方法:

    1. add() 将元素添加到匹配元素的集合中。这是jQuery参考手册上的表述。但其提供的例子链接错误，因此没有对add()的实例说明。这里就提供几个例子，以便更好的掌握add()的用法。
    2.  
    3. 例一
    4.  
    5. [html] view plain copy
    6.  
    7.     <!DOCTYPE html>
    8.     <html>
    9.     <head>
    10.     <style>
    11.     div { width:60px; height:60px; margin:10px; float:left; }
    12.     p { clear:left; font-weight:bold; font-size:16px;
    13.     color:blue; margin:0 10px; padding:2px; }
    14.     </style>
    15.     <script language="JavaScript" type="text/JavaScript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
    16.     <script>
    17.     $(document).ready(function(){
    18.         $("div").css("border", "2px solid red").add("p").css("background", "yellow");
    19.     });
    20.     </script>
    21.     </head>
    22.     <body>
    23.     <div></div>
    24.     <div></div>
    25.     <div></div>
    26.     <div></div>
    27.     <div></div>
    28.     <div></div>
    29.     <p>Added this… (notice no border)</p>
    30.     </body>
    31.     </html>  
    32.  
    33. 结果如下图所示：
    34.  
    35. 解说：这里的add("p")相当于和的意思，就是说$("div")的css和p的css。这里注意的是div是有边框的。而p没有。
    36.  
    37. 例二
    38.  
    39. [html] view plain copy
    40.  
    41.     <body>
    42.     <p>Hello</p><span>Hello Again</span>
    43.     </body>  
    44.  
    45. [javascript] view plain copy
    46.  
    47.     $("p").add("span").css("background", "yellow");  
    48.  
    49. 结果如下图所示：
    50.  
    51. p和span的css，相当于
    52.  
    53. [javascript] view plain copy
    54.  
    55.     $("p,span").css("background","yellow");  
    56.  
    57. 例三：
    58.  
    59. [html] view plain copy
    60.  
    61.     <body>
    62.     <p>Hello</p>
    63.     </body>  
    64.  
    65. [javascript] view plain copy
    66.  
    67.     $("p").clone().add("<span>Again</span>").appendTo(document.body);  
    68.  
    69. 结果如下：
    70.  
    71. clone()复制的意思；复制一个p和把<span>Again</span>插入到文档的body中。
    72.  
    73. 这里插一句：如果不用clone()，则原来的p不存在了。看下面例子：
    74.  
    75. [html] view plain copy
    76.  
    77.     <script>
    78.     $(document).ready(function(){
    79.       $("p").add("<span>Again</span>").appendTo(document.body);
    80.       alert($("body").html());
    81.     });
    82.     </script>
    83.     </head>
    84.     <body>
    85.     <p>Hello</p>
    86.     </body>
    87.     </html>  
    88.  
    89. 结果如下图所示：
    90.  
    91. 例四：
    92.  
    93. [html] view plain copy
    94.  
    95.     <body>
    96.     <p>Hello</p><span id="a">Hello Again</span>
    97.     </body>  
    98.  
    99. [javascript] view plain copy
    100.  
    101.     $("p").add(document.getElementById("a")).css("background", "yellow");  
    102.  
    103. 结果如下：
    104.  
    105. 这表明add()中的参数不仅可以是选择器，也可以是DOM元素

Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法的更多相关文章

  1. jQuery，您可以实现元素的淡入淡出效果。

    fadeIn() fadeOut() fadeToggle() fadeTo() jQuery fadeIn() 用于淡入已隐藏的元素 $("button").click(func ...

  2. Jquery 组 checkbox全选按钮

    <!DOCTYPE html><html lang="zh-cn"><head> <meta charset="utf-8&qu ...

  3. jquery中实现全选按钮

    <html>   <head>   <script type='text/javascript' src='js/jquery-1.5.1.js'></scr ...

  4. JQuery显示，隐藏和淡入淡出效果

    为了把JQuery搞熟悉,看着菜鸟教程,一个一个例子打,边看边记,算是一晚上的一个小总结吧.加油,我很本但是我很勤奋啊.系统的了解它,就要花时间咯. <!DOCTYPE html> < ...

  5. 11月8日下午Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  6. jQuery取复选框值、下拉列表里面的属性值、取单选按钮的属性值、全选按钮、JSON存储、*去空格

    1.jquery取复选框的值<!--引入jquery包--> <script src="../jquery-1.11.2.min.js"></scri ...

  7. Jquery取属性值（复选框、下拉列表、单选按钮）、做全选按钮、JSON存储、去空格

    1.jquery取复选框的值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "htt ...

  8. jquery中checkbox全选失效的解决方法

    这篇文章主要介绍了jquery中checkbox全选失效的解决方法,需要的朋友可以参考下     如果你使用jQuery 1.6 ,代码if ( $(elem).attr(“checked”) ),将 ...

  9. 微信小程序全选，微信小程序checkbox，微信小程序购物车

    微信小程序,这里实现微信小程序checkbox,有需要此功能的朋友可以参考下. 摘要: 加减商品数量,汇总价格,全选与全不选 设计思路: 一.从网络上传入以下Json数据格式的数组  1.标题titl ...

随机推荐

  1. jq查找父类元素三个函数的区别

    parent是找当前元素的第一个父节点,parents是找当前元素的所有父节点 parent().parents()与closest()方法两两之间有类似又有不同,本篇简短的区分一下这三个方法.通过本 ...

  2. javascript优化--03高质量编码

    使用Object的直接量实例构造轻量级的字典: 使用for/in循环,使用对象字面量来构建,并确保不增加Object.prototype属性来导致for/in循环:(考虑到兼容性,如Array.pro ...

  3. http://blog.csdn.net/jiazimo/article/details/17265061

    http://blog.csdn.net/jiazimo/article/details/17265061

  4. 找规律/数位DP HDOJ 4722 Good Numbers

    题目传送门 /* 找规律/数位DP:我做的时候差一点做出来了,只是不知道最后的 is_one () http://www.cnblogs.com/crazyapple/p/3315436.html 数 ...

  5. CSS创建三角形（小三角）的几种方法

    你可以在很多地方看到三角形(小三角):tooltips提示框.下拉菜单.甚至在loading载入动画里.不管你喜欢还是不喜欢,这些小元素对各UI元素之间的联系关系式很重要的. 有一些不同的方法来设计并 ...

  6. CentOS6.4 内核优化

    vi /etc/sysctl.conf net.ipv4.tcp_syncookies = net.ipv4.tcp_tw_reuse = net.ipv4.tcp_tw_recycle = net. ...

  7. 【POJ】2653 Pick-up sticks（计算几何基础+暴力）

    http://poj.org/problem?id=2653 我很好奇为什么这样$O(n^2)$的暴力能过.... 虽然说这是加了链表优化的,但是最坏不也是$O(n^2)$吗...(只能说数据太弱.. ...

  8. event.keycode大全(javascript)

    keycode 8 = BackSpace BackSpace keycode 9 = Tab Tab keycode 12 = Clear keycode 13 = Enter keycode 16 ...

  9. QDir, QFileInfo 和 QDirIterator 区别

    这三个类相互有关联,但是有不尽相同,首先从名字上看,QDir 和 QDirIterator 是针对于文件目录的,也就是文件夹,我们知道,对于一个文件夹,可以包含很多文件,也可以包含其他文件夹,通常是一 ...

  10. WPF 傻瓜生成 .dbml文件，以及文件用途原理是什么