常用的jQuery选择器事件笔记

最新推荐文章于 2024-07-16 21:46:04 发布

原创最新推荐文章于 2024-07-16 21:46:04 发布 · 175 阅读

CC 4.0 BY-SA版权

本文详细介绍了jQuery的选择器语法，包括元素、ID、类、属性等选择方式，以及:first、:even等过滤选择器。同时，深入讲解了jQuery事件处理，如click、dblclick、mouseenter、mouseleave等事件绑定与触发，提供了丰富的示例代码。

jQuery选择器

$("p")
jQuery 元素选择器基于元素名选取元素。
$("#test") 
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
$(".test") 
jQuery 类选择器可以通过指定的 class 查找元素。
$("*")
选取所有元素
$(this)
选取当前 HTML 元素
$("p.intro")
选取 class 为 intro 的 <p> 元素
$("p:first")
选取第一个 <p> 元素
$("ul li:first")
选取第一个 <ul> 元素的第一个 <li> 元素 
$("ul li:first-child")
选取每个 <ul> 元素的第一个 <li> 元素 
$("[href]")
选取带有 href 属性的元素
$("a[target='_blank']")
选取所有 target 属性值等于 "_blank" 的 <a> 元素
$("a[target!='_blank']")
选取所有 target 属性值不等于 "_blank" 的 <a> 元素
$(":button")
选取所有 type="button" 的 <input> 元素 和 <button> 元素
$("tr:even")
选取偶数位置的 <tr> 元素
$("tr:odd")
选取奇数位置的 <tr> 元素

jQuery事件

点击元素事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>点击事件</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
//$(document).ready() 方法允许我们在文档完全加载完后执行函数。
  $("p").click(function(){
  /*click() 方法是当按钮点击事件被触发时会调用一个函数。
该函数在用户点击 HTML 元素时执行。
在下面的实例中，当点击事件在某个 <p> 元素上触发时，隐藏当前的 <p> 元素：*/
    $(this).hide();
    //$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jquery的方法和属性值。
  });
});
</script>
</head>
<body>

<p>Reset点击消失P1</p>
<p>Reset点击消失P2</p>
<p>Reset点击消失P3</p>

</body>
</html>

双击元素事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>双击元素事件</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
  $("p").dblclick(function(){
  //当双击元素时，会发生 dblclick 事件。
//dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>Reset双击消失P1</p>
<p>Reset双击消失P2</p>
<p>Reset双击消失P3</p>
</body>
</html>

鼠标穿过元素事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>鼠标穿过元素事件</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
  $("p").mouseenter(function(){
  //当鼠标穿过元素时，会发生 mouseenter 事件。
//mouseenter() 方法触发mouseenter事件，或规定当发生mouseenter事件时运行的函数：
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>Reset鼠标穿过消失P1</p>
</body>
</html>

鼠标移出元素事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>鼠标移出元素事件</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
  $("p").mouseleave(function(){
  //当鼠标移出元素时，会发生 mouseleave 事件。
//mouseleave() 方法触发mouseleave事件，或规定当发生mouseleave事件时运行的函数：
    $(this).hide();
  });
});
</script>
</head>
<body>

<p>Reset鼠标移出消失P1</p>
</body>
</html>

事件可以结合使用如下，鼠标移入移出事件结合使用案例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>鼠标移入移出元素事件</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</script>
<script>
$(document).ready(function(){
  $("p").mouseenter(function(){
  //当鼠标移入元素时，会触发 mouseenter 事件。
    $(this).hide(1000);
    //$(this).hide(1000);1000为规定移出时用的时间（毫秒）
  });
	$("p").mouseleave(function(){
		//当鼠标移出元素时，会触发mouseleave事件
	  $(this).show(1000);				   
  });
});
</script>
</head>
<body>

<p>Reset鼠标移入消失，移出显示P1</p>
</body>
</html>