JQuery学习笔记

最新推荐文章于 2025-02-25 09:51:17 发布

Kong-xin-de-zhu

最新推荐文章于 2025-02-25 09:51:17 发布

阅读量347

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/liuhuanjun222/article/details/50351379

jQuery 专栏收录该内容

6 篇文章

订阅专栏

本文深入探讨了jQuery中选择器的使用方法，包括each()、data()、removeData()等，并详细介绍了如何使用on()替代bind()、delegate()和live()，以及如何在元素上添加多个事件处理程序、自定义事件和向函数传递数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

来源：<a target=_blank href="http://www.php100.com/manual/jquery">点击打开链接</a> <a target=_blank href="http://www.php100.com/manual/jquery">http://www.php100.com/manual/jquery</a>

选择器：

</pre><pre class="html" name="code"></pre><pre class="html" name="code">each()用法：

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("div").each(function(index,domEle){
		// domEle == this
		$(domEle).css("backgroundColor", "yellow");
		if($(this).is("#stop")){
		    $("span").text("Stopped at div index #" + index);
			return false;
		}
	
	});
	  
  });
});
</script>
</head>
<body>
	<button>Change colors</button>
	<span></span> 
	<div></div> 
	<div></div>

	<div></div> 
	<div></div>
	<div id="stop">Stop here</div> 
	<div></div>

	<div></div>
	<div></div>
</body>
</html>

data()、removeData()用法：

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
   testObj=new Object();
   testObj.greet="haha";
   testObj.greet2="haha2";
  $("#btn1").click(function(){
    $("div").data("greeting", "Hello World");
    $("div").data(testObj);
    $("div").data("test", { first: 16, last: "pizza!" });
  });
  $("#btn2").click(function(){
    alert($("div").data("greeting"));
    alert($("div").data("greet"));
    $("div").removeData("greeting");
    alert($("div").data("greeting"));
    alert($("div").data("test").first);
  });
});
</script>
</head>
<body>
<button id="btn1">把数据添加到 div 元素</button><br />
<button id="btn2">获取已添加到 div 元素的数据</button>
<div></div>
</body>
</html>

</pre><pre class="html" name="code"><!DOCTYPE html>$.fn.extend() 
参考文章：<a target=_blank href="http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html">http://caibaojian.com/jquery-extend-and-jquery-fn-extend.html</a>

<html>
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  //扩展 jQuery 元素集来提供新的方法（通常用来制作插件）。
  $.fn.extend({          
    alertWhileClick:function() {            
          $(this).click(function(){                 
                 alert($(this).val());           
           });           
     }       
  });       
  $("#input1").alertWhileClick();  
});
</script>
</head>
<body>
	<input id="input1" value="测试fn.extend"/>
</body>
</html>

从 bind() 改为 on()
如何使用 on() 来达到与 bind() 相同的效果。

Changing from delegate() to on()
如何使用 on() 来达到与 delegate() 相同的效果。

从 live() 改为 on()
如何使用 on() 来达到与 live() 相同的效果。

添加多个事件处理程序
如何向元素添加多个事件处理程序。

使用 map 参数添加多个事件处理程序
如何使用 map 参数向被选元素添加多个事件处理程序。

在元素上添加自定义事件
如何在元素上添加自定义命名空间事件。

向函数传递数据
如何向函数传递数据。

向未来的元素添加事件处理程序
演示 on() 方法也适用于尚未创建的元素。

移除事件处理程序
如何使用 off() 方法移除事件处理程序。