极客教程jQuery选择器和事件方法
jQuery是一个强大的JavaScript库。它比JavaScript更强大。jQuery的代码比标准的JavaScript代码更精确、更短、更简单。它可以执行各种功能。
在这篇文章中，我们将学习jQuery选择器，jQuery事件方法和一些有用的方法。
jQuery selectors:
jQuery选择器是用来选择HTML元素的，并允许你以我们想要的方式操作HTML元素。它在一个可变的参数上选择HTML元素，如他们的名字，类，ID，类型，属性，属性值等。jQuery中所有的选择器都是用一个特殊的符号，即美元符号和括号来选择。
$("selector-name")
元素选择器
元素选择器根据其名称来选择元素。
示例:
在这个例子中，当用户点击按钮的时候， <h1>元素会被隐藏。
代码:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<h1>Welcome to Geeks for Geeks !</h1>
<h2>This is Web Technology section </h2>
<br/>
<button>Hide</button>
<script type="text/javascript">
("button").click(function() {
("h1").hide();
});
</script>
</body>
</html>
输出:
在点击隐藏按钮之前。
点击隐藏按钮后。
id选择器
id选择器是根据元素的id来选择的。
示例:
在这个例子中，当用户双击按钮时，id=”gfg “的元素被隐藏。
代码:-
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<p id="gfg">Welcome to Geeks for Geeks !</p>
<p id="GFG">Computer Science Portal </p>
<br/>
<button>Hide</button>
<script type="text/javascript">
("button").dblclick(function() {
("#gfg").hide();
});
</script>
</body>
</html>
输出:
在双击隐藏按钮之前。
双击隐藏按钮后。
类选择器
类选择器是根据元素的类别来选择的。
示例:
在这个例子中，当用户点击按钮时，类=”GFG “的元素被隐藏。
代码:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
</head>
<body>
<p class="gfg">Welcome to Geeks for Geeks !</p>
<p class="GFG">Explore More about GfG </p>
<br/>
<button>Hide</button>
<script type="text/javascript">
("button").click(function() {
(".GFG").hide();
});
</script>
</body>
</html>
输出:
在点击隐藏按钮之前。
点击隐藏按钮后。
jQuery事件方法
事件是指网站访问者在与网站（或网页）互动过程中所执行的行动。可以有各种类型的事件，如
- 用户点击按钮。
- 用户在图像上移动鼠标指针。
- 用户按了键盘上的任何键，等等。
给出了一些事件的方法
| 方法名称 | 描述 |
|---|---|
| click() | click() 方法包含一个用于事件处理的函数，当用户点击特定的HTML元素时，该函数会被调用。 |
| dblclick() | dblclick()方法包含一个用于事件处理的函数，当用户双击特定的HTML元素时被调用。 |
| mouseenter() | mouseenter()方法包含一个事件处理函数，当鼠标指针进入特定的HTML元素时，该函数被调用。 |
| mouseleave() | mouseleave()方法包含一个事件处理函数，当鼠标指针从先前选择的特定HTML元素上移开时，该函数被调用。 |
| mousedown() | mousedown()方法包含一个用于事件处理的函数，当鼠标指针在HTML元素上时，鼠标左键、右键或中键被按下时，该函数被调用。 |
| mouseup() | mouseup()方法包含一个事件处理函数，当鼠标指针在HTML元素上时，鼠标左键、右键或中键被释放时，该函数被调用。 |
| hover() | hover()方法包含一个事件处理函数，当鼠标指针进入和离开HTML元素时被调用。它是mouseenter()和mouseleave()方法的组合。 |
获取和设置方法。
jQuery有各种方法来获取一个属性的值，并将该属性设置为特定的值。其中一些方法是。
- text() – 该方法用于获取或设置所选HTML元素的文本内容。
- html() – 该方法用于获取或设置所选元素的内容（包括HTML元素）。
- val() – 该方法用于获取或设置网页中各种表格字段的值。
- attr() – 该方法用于获取或设置网页中各种属性的值。
- css() – 该方法用于获取或设置网页中各种CSS属性的值。
示例:
代码:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<style type="text/css">
#e5 {
width: 100px;
height: 100px;
border-radius: 0px;
background-color: aqua;
}
</style>
</head>
<body>
<p id="e1">Welcome.</p>
<p id="e2">Learn and Explore</p>
<p>
<input type="text" id="e3" value="jQuery is powerful!" />
</p>
<p id="e4" align="left">Geeks for Geeks</p>
<p>
<div id="e5"></div>
</p>
<button id="gfg1">Change Text</button>
<button id="gfg2">Change HTML</button>
<button id="gfg3">Change Value</button>
<button id="gfg4">Change Alignment</button>
<button id="gfg5">Change Shape</button>
<script type="text/javascript">
("#gfg1").click(function() {
("#e1").text("Geeks for Geeks");
});
("#gfg2").click(function() {
("#e2").html("<b>Enrich your Knowledge.</b>");
});
("#gfg3").click(function() {
("#e3").val("jQuery at Geeks for Geeks");
});
("#gfg4").click(function() {
("#e4").attr("align", "center");
});
("#gfg5").click(function() {
("#e5").css("border-radius", "50px");
});
</script>
</body>
</html>
输出:
在点击按钮之前。
点击按钮后。
