JQuery选择器&事件

最新推荐文章于 2021-06-17 08:45:51 发布

Rapper_cl

最新推荐文章于 2021-06-17 08:45:51 发布

阅读量158

点赞数

分类专栏： jQuery 文章标签： JQuery选择器&amp;事件

本文链接：https://blog.csdn.net/m0_37510446/article/details/90040767

版权

jQuery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

jQuery选择器很强大，
支持对HTML元素组或单个元素进行操作
可以于基于元素的Id,类，类型，属性，属性值等"查找或选择"HTML元素
其所有的选择器都是以美元符号开头$()，该符号也称为JQuery定义符
接下来我们分别来看看：
选择器：通过元素名称和ID来选取元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(function(){
/*通过选择button元素，为其设置一个点击方法*/
$("button").click(function(){
$("p").hide();
});
$("#test").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h1>通过元素来选取元素</h1>
<p>我是p元素</p>
<p>我是P元素</p>
<h1 id="test"> 点击，可以使我消失</h1>
<button>点击，让P元素消失</button>
</body>
</html>

$("*") 选取所有元素
$(this) 选取当前 HTML 元素
$(“p.intro”) 选取 class 为 intro 的 p 元素
$(“p:first”) 选取第一个 p 元素
$(“ul li:first”) 选取第一个 ul 元素的第一个li 元素
$(“ul li:first-child”) 选取每个 ul 元素的第一个li元素
$("[href]") 选取带有 href 属性的元素等

JQuery事件
JQuery事件主要有以下几个事件：
单击元素：click(),上面的实例就是单击很好的例子
双击元素：dblclick()：
鼠标穿过元素时,mouseenter()
鼠标离开时，mouseleave()
在元素上松开鼠标:mouseup()
在元素上按下鼠标：mousedown()
移动到元素上： Hover ()好比是mouseenter&mouseleave
大致写几个程序，其他都是同理，所以就不全写了
双击元素：dblclick()：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(function(){
/*通过选择button元素，为其设置一个点击方法*/
$("button").dblclick(function(){
$("p").hide();
});
$("#test").dblclick(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h1>通过元素来选取元素</h1>
<p>我是p元素</p>
<p>我是P元素</p>
<h1 id="test"> 双击，可以使我消失</h1>
<button>双击，让P元素消失</button>
</body>
</html>

鼠标穿过元素时,mouseenter()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(function(){
/*通过选择button元素，为其设置一个点击方法*/
$("button").mouseenter(function(){
$("p").hide();
});
$("#test").mouseenter(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h1>通过元素来选取元素</h1>
<p>我是p元素</p>
<p>我是P元素</p>
<h1 id="test"> 滑过我，可以使我消失</h1>
<button>滑过我，让P元素消失</button>
</body>
</html>

鼠标离开时，mouseleave()

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(function(){
/*通过选择button元素，为其设置一个点击方法*/
$("button").mouseleave(function(){
$("p").hide();
});
$("#test").mouseleave(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h1>通过元素来选取元素</h1>
<p>我是p元素</p>
<p>我是P元素</p>
<h1 id="test"> 滑过并离开我，可以使我消失</h1>
<button>滑过并离开我，让P元素消失</button>
</body>
</html>

Rapper_cl

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery选择器&事件

jQuery选择器很强大，支持对HTML元素组或单个元素进行操作可以于基于元素的Id,类，类型，属性，属性值等"查找或选择"HTML元素其所有的选择器都是以美元符号开头$()，该符号也称为JQuery定义符接下来我们分别来看看：选择器：通过元素名称和ID来选取元素：<!DOCTYPE html><html><head><meta char...
复制链接

扫一扫

专栏目录