这里有新鲜出炉的 jQuery 示例,程序狗速度看过来!
jQuery 是一个兼容多浏览器的 javascript 框架,核心理念是 write less,do more(写得更少, 做得更多)。jQuery 在 2006 年 1 月由美国人 John Resig 在纽约的 barcamp 发布,吸引了来自世界各地的众多 JavaScript 高手加入,由 Dave Methvin 率领团队进行开发。
本文主要对 jquery 中的 each 用法进行介绍,相信会对大家学习 each 方法会很有帮助,下面就跟小编一起来看下吧
1 种 通过 each 遍历 li 可以获得所有 li 的内容
- <!-- 1种 -->
- <ul class="one">
- <li>
- 11a
- </li>
- <li>
- 22b
- </li>
- <li>
- 33c
- </li>
- <li>
- 44d
- </li>
- <li>
- 55e
- </li>
- </ul>
- <button>
- 输出每个li值
- </button>
- <script>
- // 1种 通过each遍历li 可以获得所有li的内容
- $("button").click(function() {
- $(".one > li").each(function() {
- // 打印出所有li的内容
- console.log($(this).text());
- })
- });
- </script>
2 种 通过 each 遍历 li 通过 $(this) 给每个 li 加事件
- <!-- 2种 -->
- <ul class="two">
- <li>
- 2222
- </li>
- <li>
- 22b
- </li>
- <li>
- 3333
- </li>
- <li>
- 44d
- </li>
- <li>
- 5555
- </li>
- </ul>
- <script>
- // 2种 通过each遍历li 通过$(this)给每个li加事件
- $('.two > li').each(function(index) {
- console.log(index + ":" + $(this).text());
- // 给每个li加click 点那个就变颜色
- $(this).click(function() {
- alert($(this).text());
- $(this).CSS("background", "#fe4365");
- });
- });
- </script>
4 种 遍历所有 li 给所有 li 添加 class 类名
- <!-- 4种 -->
- <ul class="ctn3">
- <li>
- Eat
- </li>
- <li>
- Sleep
- </li>
- <li>
- 3种
- </li>
- </ul>
- <span>
- 点击3
- </span>
- <script>
- // 4种 遍历所有li 给所有li添加 class类名
- $('span').click(function() {
- $('.ctn3 > li').each(function() {
- $(this).toggleClass('example');
- })
- });
- </script>
5 种 在 each() 循环里 element == $(this)
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>
- each练习2
- </title>
- <style>
- div { width: 40px; height: 40px; margin: 5px; float: left; border: 2px
- blue solid; text-align: center; } span { width: 40px; height: 40px; color:
- red; }
- </style>
- </head>
- <body>
- <div>
- </div>
- <div>
- </div>
- <div>
- </div>
- <div id="stop">
- Stop here
- </div>
- <div>
- </div>
- <div>
- </div>
- <button>
- Change colors
- </button>
- <span>
- </span>
- </body>
- <script src="jquery-1.11.1.min.js">
- </script>
- <script>
- // 在each()循环里 element == $(this)
- $('button').click(function() {
- $('div').each(function(index, element) {
- //element == this;
- $(element).css("background", "yellow");
- if ($(this).is("#stop")) {
- $('span').text("index :" + index);
- return false;
- }
- })
- })
- </script>
- </html>
来源: http://www.phperz.com/article/17/0428/329586.html