Skip to content

H
howtodoinjava-zh

OpenDocCN / howtodoinjava-zh
大约 1 年 前同步成功

通知 1
Star 82
Fork 8
H
howtodoinjava-zh

体验新版 GitCode，发现更多精彩内容 >>

提交 0eb98d5a 编写于 作者: W wizardforcel
浏览文件
操作

2020-06-07 11:03:19

上级 926e1527
隐藏空白更改
内联 并排
Showing with 68 addition and 66 deletion
docs/misc/256.md
浏览文件 @ 0eb98d5a
# jQuery 选择器–完整列表
# jQuery 选择器 – 完整列表
> 原文： [https://howtodoinjava.com/jquery/jquery-selectors/](https://howtodoinjava.com/jquery/jquery-selectors/)
......@@ -12,7 +12,7 @@ $(selector).methodName();
`selector`是一个字符串表达式，用于标识将被收集到要操作的匹配集合中的 DOM 元素集合。 jQuery 选择器返回 jQuery 对象，而不是从 JavaScript 选择器返回的 DOM 对象。
If you want to use any of the meta characters, such as `.#()`, as a part of a class/id/name, you will need to escape the character with `\\` two backslashes. For example, if you have an element with `id="my.element"`, you would use the selector `$("#my\\.element")`.
如果要使用任何元字符（例如`.#()`）作为类 / id / 名称的一部分，则需要使用`\\`两个反斜杠对字符进行转义。 例如，如果您的元素带有`id="my.element"`，则可以使用选择器`$("my\\.element")`。
jQuery 提供了许多应用这些选择器的方法。 大致来说，您可以将它们分为以下几类：
......@@ -31,6 +31,7 @@ Filtered Selectors
基本选择器集中于 HTML 元素的 **id 属性**，**类属性**和**标签名称**。
| 语法/范例 | 描述 |
| --- | --- |
| 所有选择器`("*")` | 选择页面中的所有元素 |
| 类选择器`(".className")` | 选择具有给定类的所有元素。 |
| 元素选择器`("element")` | 选择具有给定标签名称的所有元素。 |
......@@ -41,24 +42,26 @@ Filtered Selectors
使用 jQuery 选择器的另一种方法是根据 HTML 元素的属性值来选择它们。 它可以是默认属性或任何自定义属性。 在选择器语法中，属性值用`[]`括号括起来，例如 `$("a[rel='nofollow']")`。
These selectors see attribute values as a single string. For example, `$("a[rel='nofollow']")`, will select **<a href=”example.html” rel=”nofollow”>Some text</a>** but not **<a href=”example.html” rel=”nofollow otherValue”>Some text</a>**.
这些选择器将属性值视为单个字符串。 例如，`$("a[rel='nofollow']")`将选择`<a href=”example.html” rel=”nofollow”>Some text</a>`，但不会`<a href=”example.html” rel=”nofollow otherValue”>Some text</a>`。
| Syntax/Example | Description |
| 语法/示例 | 描述 |
| --- | --- |
| `[attributeName]` | 选择具有指定属性且具有任何值的元素。 |
| `[attributeName = "value"]` | 选择具有指定属性且其值与特定值完全相等的元素。 |
| `[attributeName != "value"]` | 选择具有指定属性的元素，该元素的值恰好以给定字符串开头。 |
| `[attributeName ^= "value"]` | Selects elements that have the specified attribute with a value beginning exactly with a given string. |
| `[attributeName ^= "value"]` | 选择具有指定属性的元素，该元素的值恰好以给定字符串开头。 |
| `[attributeName $= "value"]` | 选择具有指定属性且其值完全以给定字符串结尾的元素。 比较是区分大小写的。 |
| `[attributeName ~= "value"]` | 选择具有指定属性的元素，该元素的值包含以空格分隔的给定单词。 |
| `[attributeName *= "value"]` | 选择具有指定属性且其值包含给定子字符串的元素。 |
| `[attributeName &#124;= "value"]` | 选择具有指定属性的元素，该元素的值等于给定字符串或以该字符串开头，后跟连字符（-）。 |
| `[attributeName &#124;= "value"]` | 选择具有指定属性的元素，该元素的值等于给定字符串或以该字符串开头，后跟连字符（`-`）。 |
| `[attributeName = "value"][attributeName2="value2"]` | 匹配与所有指定的属性过滤器匹配的元素。 |
## 内容选择器
内容选择器允许您基于 HTML 元素内的内容选择 HTML 元素。
| Syntax/Example | Description |
| 语法/示例 | 描述 |
| --- | --- |
| `:contains()` | 选择所有包含指定文本的元素。 |
| `:empty` | 选择所有没有子元素的元素（包括文本节点）。 |
| `:has()` | 选择包含至少一个与指定选择器匹配的元素的元素。 |
......@@ -68,17 +71,19 @@ These selectors see attribute values as a single string. For example, `$("a[rel=
层次选择器允许您基于 DOM 层次选择 HTML 元素。 这使您能够通过仅基于 DOM 树中的父项，子项或围绕它们的其他元素来选择内容，从而编写具有更多内容意识的动态代码。
| Syntax/Example | Description |
| 子选择器`("parent > child")` | 选择“父”指定的元素的“子”指定的所有直接子元素。 |
| 语法/示例 | 描述 |
| --- | --- |
| 子选择器`("parent > child")` | 选择`parent`指定的元素的`child`指定的所有直接子元素。 |
| 后代选择器`("ancestor descendant")` | 选择作为给定祖先的后代的所有元素。 |
| 下一个相邻选择器`("prev + next")` | 选择所有与“ next”匹配的 next 元素，并紧随其后的是“ prev”。 |
| 下一兄弟姐妹选择器`("prev ~ siblings")` | 选择“ prev”元素之后的所有兄弟元素，它们具有相同的父元素，并与过滤“ siblings”选择器匹配。 |
| 下一个相邻选择器`("prev + next")` | 选择所有与“`next`”匹配的`next`元素，并紧随其后的是“`prev`”。 |
| 下一兄弟姐妹选择器`("prev ~ siblings")` | 选择“`prev`”元素之后的所有兄弟元素，它们具有相同的父元素，并与过滤“`siblings`”选择器匹配。 |
## 表单选择器
表单选择器使您可以根据表单元素的状态选择表单中的元素。
| Syntax/Example | Description |
| 语法/示例 | 描述 |
| --- | --- |
| `:button`选择器 | 选择所有按钮元素和按钮类型的元素。 |
| `:checkbox`选择器 | 选择所有类型的元素复选框。 |
| `:checked`选择器 | 匹配所有选中或选中的元素。 |
......@@ -86,20 +91,21 @@ These selectors see attribute values as a single string. For example, `$("a[rel=
| `:enabled`选择器 | 选择所有启用的元素。 |
| `:file`选择器 | 选择文件类型的所有元素。 |
| `:focus`选择器 | 选择当前处于焦点状态的元素。 |
| `:image`选择器 | 选择类型为 image 的所有元素。 |
| `:image`选择器 | 选择类型为图像的所有元素。 |
| `:input`选择器 | 选择所有输入，文本区域，选择和按钮元素。 |
| `:password`选择器 | 选择类型为 password 的所有元素。 |
| `:password`选择器 | 选择类型为密码的所有元素。 |
| `:radio`选择器 | 选择单选类型的所有元素。 |
| `:reset`选择器 | 选择所有类型为 reset 的元素。 |
| `:reset`选择器 | 选择所有类型为重置的元素。 |
| `:selected`选择器 | 选择所有选定的元素。 |
| `:submit`选择器 | 选择类型为 Submit 的所有元素。 |
| `:submit`选择器 | 选择类型为提交的所有元素。 |
| `:text`选择器 | 选择文本类型的所有输入元素。 |
## 可见性选择器
如果使用可见性来控制网页组件的流程和交互，则使用可见性 jQuery 选择器可以轻松选择隐藏或可见的 HTML 元素。
| Syntax/Example | Description |
| 语法/示例 | 描述 |
| --- | --- |
| `:hidden`选择器 | 选择所有隐藏的元素。 |
| `:visible`选择器 | 选择所有可见的元素。 |
......@@ -107,22 +113,23 @@ These selectors see attribute values as a single string. For example, `$("a[rel=
通常，您将需要将 jQuery 选择器优化为更具体的子集。 一种实现方法是使用过滤的选择器。 筛选的选择器在选择器语句的末尾附加一个筛选器，以限制选择器返回的结果。
| Syntax/Example | Description |
| 语法/示例 | 描述 |
| --- | --- |
| `:animated`选择器 | 运行选择器时，选择动画进行中的所有元素。 |
| `:eq()`选择器 | 选择匹配集中索引 n 处的元素。 |
| `:even`选择器 | 选择零索引的偶数元素。 |
| `:odd`选择器 | 选择零索引的奇数元素。 |
| `:first`选择器 | 选择第一个匹配的元素。 |
| `:last`选择器 | 选择最后一个匹配的元素。 |
| `:focus` Selector | Selects element if it is currently focused. |
| `:focus`选择器 | 选择当前处于焦点状态的元素。 |
| `:gt()`选择器 | 选择索引大于匹配集中索引的所有元素。 |
| `:lt()`选择器 | 选择索引小于匹配集中索引的所有元素。 |
| `:header`选择器 | 选择所有作为标头的元素，例如 h1，h2，h3 等。 |
| `:header`选择器 | 选择所有作为标头的元素，例如`h1`，`h2`，`h3`等。 |
| `:lang()`选择器 | 选择指定语言的所有元素。 |
| `:not()`选择器 | 选择与给定选择器不匹配的所有元素。 |
| `:root`选择器 | 选择作为文档根目录的元素。 |
| `:target`选择器 | 选择由文档 URI 的片段标识符指示的目标元素。 |
不可能在上面给出所有 **jQuery 选择器的示例，因此我们将在单独的文章中了解这些选择器。**
不可能在上面给出所有 **jQuery 选择器的示例**，因此我们将在单独的文章中了解这些选择器。
学习愉快！
\ No newline at end of file
docs/misc/257.md
浏览文件 @ 0eb98d5a
# jQuery –所有选择器（“ *”）–通用选择器
# jQuery – 所有选择器（“`*`”） – 通用选择器
> 原文： [https://howtodoinjava.com/jquery/jquery-all-or-universal-selector/](https://howtodoinjava.com/jquery/jquery-all-or-universal-selector/)
jQuery all `("*")`选择器选择文档中的所有元素，包括 html，head 和 body。
jQuery `("*")`所有选择器选择文档中的所有元素，包括`html`，`head`和`body`。
```java
Syntax : $("*")
```
* **全部选择器**非常慢，因此请小心使用。
* **所有选择器**非常慢，因此请小心使用。
* 如果您的浏览器启用了将`script`或`link`元素插入 DOM 的扩展/附加组件，则该元素也将被计入。
请参见 [CodePen](https://codepen.io) 上的 Lokesh 的 Pen [jQuery –所有选择器](https://codepen.io/howtodoinjava/pen/mVXYRw/)（ [@howtodoinjava](https://codepen.io/howtodoinjava) ）。
请参见 [CodePen](https://codepen.io) 上的 Lokesh 的 [jQuery –所有选择器](https://codepen.io/howtodoinjava/pen/mVXYRw/)（[@howtodoinjava](https://codepen.io/howtodoinjava)）。
如果`("*")`选择器与另一个元素一起使用，它将选择指定元素中的所有子元素。
......@@ -21,6 +21,6 @@ Syntax : $("*")
Syntax : $("ul *")
```
请参见 [CodePen](https://codepen.io) 上的 Pen [jQuery – Lokesh 元素](https://codepen.io/howtodoinjava/pen/GoQadQ/)中的所有选择器（ [@howtodoinjava](https://codepen.io/howtodoinjava) ）。
请参见 [CodePen](https://codepen.io) 上的 [jQuery – Lokesh 元素](https://codepen.io/howtodoinjava/pen/GoQadQ/)中的所有选择器（[@howtodoinjava](https://codepen.io/howtodoinjava)）。
学习愉快！
\ No newline at end of file
docs/misc/258.md
浏览文件 @ 0eb98d5a
# jQuery –检测剪切，复制或粘贴事件
# jQuery – 检测剪切，复制或粘贴事件
> 原文： [https://howtodoinjava.com/jquery/jquery-detect-cut-copy-or-paste-events/](https://howtodoinjava.com/jquery/jquery-detect-cut-copy-or-paste-events/)
如果您从事的项目涉及具有客户端输入验证的动态 UI，那么您可以回想起 QA /测试人员非常普遍的做法，即他们尝试复制大量垃圾文本以创建无效的方案并将它们记录为错误。 我不会评论这类问题的有效性。 在本文的这篇文章中，我将为您提供一个解决方案，如果遇到此问题，您可以使用该解决方案。
如果您从事的项目涉及具有客户端输入验证的动态 UI，那么您可以回想起 QA / 测试人员非常普遍的做法，即他们尝试复制大量垃圾文本以创建无效的方案并将它们记录为错误。 我不会评论这类问题的有效性。 在本文的这篇文章中，我将为您提供一个解决方案，如果遇到此问题，您可以使用该解决方案。
Please note that this will work always. No matter you generate these events with keyboard or mouse.
请注意，这将始终有效。 无论您使用键盘还是鼠标生成这些事件。
![jquery_logo](img/5ade7672922b927bd760e8a881839896.png)
**阅读更多：[按键事件和击键事件之间的差异](//howtodoinjava.com/2013/12/20/jquery-keyup-function-demo/ "jQuery: difference between keypress and keydown events")** 和 [**检测 ENTER 键**](//howtodoinjava.com/scripting/jquery-detect-if-enter-key-is-pressed/ "jQuery: Detect if ENTER key is pressed")
**阅读更多**：[按键事件和击键事件之间的差异](//howtodoinjava.com/2013/12/20/jquery-keyup-function-demo/ "jQuery: difference between keypress and keydown events")和[**检测`ENTER`键**](//howtodoinjava.com/scripting/jquery-detect-if-enter-key-is-pressed/ "jQuery: Detect if ENTER key is pressed")
**检测剪切复制或粘贴事件**
......@@ -33,7 +33,6 @@ $(document).ready(function() {
**尝试一下**
<iframe height="100%" src="//howtodoinjava.com/wp-content/uploads/Detect_Cut_copy_paste_jquery.html" style="border: medium none;" width="100%"></iframe>
```java
<html>
......
docs/misc/259.md
浏览文件 @ 0eb98d5a
# jQuery 检测 ENTER 键按下事件
# jQuery 检测`ENTER`键按下事件
> 原文： [https://howtodoinjava.com/jquery/jquery-detect-if-enter-key-is-pressed/](https://howtodoinjava.com/jquery/jquery-detect-if-enter-key-is-pressed/)
学习在 jQuery 中检测 ENTER 键示例。 这是常识，如果您必须检测浏览器中按下的键，则必须检入键码（ascii）值。 简单容易。 当您不知道如何正确使用此功能时，就会出现问题。 例如 您是否需要绑定按键或按键？ ENTER 键的 ascii 值是多少？
学习在 jQuery 中检测`ENTER`键示例。 这是常识，如果您必须检测浏览器中按下的键，则必须检入键码（ascii）值。 简单容易。 当您不知道如何正确使用此功能时，就会出现问题。 例如 您是否需要绑定按键或按键？ `ENTER`键的 ascii 值是多少？
## 1\. jQuery 检测 ENTER 键
## 1\. jQuery 检测`ENTER`键
注意，**“ ENTER”键由 ASCII 代码“ 13”** 表示。 检查此 [ASCII 图表](http://www.asciitable.com/)。
注意，**“`ENTER`”键由 ASCII 代码“13”** 表示。 检查此 [ASCII 图表](http://www.asciitable.com/)。
要检查用户是否在网页或任何输入元素上按下 ENTER 键，可以将*键按下*或*键按下*事件绑定到该元素或文档对象本身。 然后在`bind()`功能中检查所按下键的键码是否为 13。
要检查用户是否在网页或任何输入元素上按下`ENTER`键，可以将`keypress`或`keydown`事件绑定到该元素或文档对象本身。 然后在`bind()`功能中检查所按下键的键码是否为 13。
如果按键的 ASCII 码为 13，则按“ ENTER”键； 否则，将按下其他键。
如果按键的 ASCII 码为 13，则按“`ENTER`”键； 否则，将按下其他键。
> **阅读更多：[按键事件和按键事件之间的区别](//howtodoinjava.com/2013/12/20/jquery-keyup-function-demo/ "jQuery: difference between keypress and keydown events")**
> **阅读更多：[`keypress`事件和`keydown`事件之间的区别](//howtodoinjava.com/2013/12/20/jquery-keyup-function-demo/ "jQuery: difference between keypress and keydown events")**
## 2\. jQuery 检测在文本框中按下的 ENTER 键
## 2\. jQuery 检测在文本框中按下的`ENTER`键
```java
$('#someTextBox').keypress(function(event){
......@@ -26,7 +26,7 @@ $('#someTextBox').keypress(function(event){
```
## 3\. jQuery 检测在文档对象上按下的 ENTER 键
## 3\. jQuery 检测在文档对象上按下的`ENTER`键
```java
$(document).keypress(function(event){
......@@ -38,11 +38,9 @@ $(document).keypress(function(event){
```
In Firefox, you have to use event.which to get the keycode; while IE support both `event.keyCode` and `event.which`.
在Firefox中，您必须使用`event.which`来获取键码； IE支持“`event.keyCode`”和“`event.which`”。
## 4\. jQuery 检测 ENTER 键–尝试一下
<iframe src="https://howtodoinjava.com/wp-content/uploads/Detect_ENTER_KEY.html" style="border: medium none;" width="100%"></iframe>
## 4\. jQuery 检测`ENTER`键 – 尝试一下
```java
<html>
......
docs/misc/260.md
浏览文件 @ 0eb98d5a
# jQuery – Keypress 和 Keydown 事件之间的区别
# jQuery – `Keypress`和`Keydown`事件之间的区别
> 原文： [https://howtodoinjava.com/jquery/jquery-difference-between-keypress-and-keydown-events/](https://howtodoinjava.com/jquery/jquery-difference-between-keypress-and-keydown-events/)
jQuery 支持 3 种类型的键盘事件，而我们是：
1. **keyup()**：释放键盘上的某个键时会触发该事件。
2. **keydown()**：按下键盘上的某个键时触发事件。
3. **按下** :(）按下键盘上的某个键时会触发该事件。
1. **`keyup()`**：释放键盘上的某个键时会触发该事件。
2. **`keydown()`**：按下键盘上的某个键时触发事件。
3. **`keypress()`**：按下键盘上的某个键时会触发该事件。
根据以上定义，看起来 **keydown()**和 **keypress()**是同一回事。 但是，实际上它们并不完全相同。
根据以上定义，看起来`keydown()`**和**`keypress()`是同一回事。 但是，实际上它们并不完全相同。
让我们看看它们有何不同。
## **1）特殊键（例如 CTRL 或 ALT 或 SHIFT）**
## **1）特殊键（例如`CTRL`或`ALT`或`SHIFT`）**
如果您按下任何特殊键，浏览器将仅触发 keydown()事件，而不触发 keypress()事件。
如果您按下任何特殊键，浏览器将仅触发`keydown()`事件，而不触发`keypress()`事件。
#### 尝试一下
尝试按一些常规键，然后按一些特殊键。
<iframe height="100%" src="//howtodoinjava.com/wp-content/uploads/keypress_keydown_demo1.html" style="border: medium none;" width="100%"></iframe>
```java
<html>
......@@ -61,18 +60,17 @@ $( document ).ready(function(){
## **2）捕获键码或键 [ascii](http://www.asciitable.com/ "ascii") 值**
如果您打字母 a 和 A（大写字母），则会发现以下事件行为。
如果您打字母`a`和`A`（大写字母），则会发现以下事件行为。
1. keydown()将显示 a = 65，A = 65（**不区分大小写**）。
2. keypresss()将显示 a = 97，A = 65（**区分大小写**）。
1. `keydown()`将显示`a = 65`，`A = 65`（**不区分大小写**）。
2. `keypresss()`将显示`a = 97`，`A = 65`（**区分大小写**）。
如果要捕获实际字符键入，请始终使用 keypress()事件。
如果要捕获实际字符键入，请始终使用`keypress()`事件。
#### Try Yourself
#### 试一试
尝试在[Caps Lock]打开的情况下按一些键，然后再将其关闭。
尝试在`[Caps Lock]`打开的情况下按一些键，然后再将其关闭。
<iframe src="//howtodoinjava.com/wp-content/uploads/keypress_keydown_demo2.html" style="border: medium none;" width="100%"></iframe>
```java
<html>
......@@ -111,20 +109,20 @@ $( document ).ready(function(){
```
The event.keyCode is not working in FireFox , but work perfect in IE. To get the event.keyCode in Firefox, you should use the event.which instead, and jQuery recommend it as well. So the better way should be
`event.keyCode`在 FireFox 中无法运行，但在IE中可以完美运行。 要在 Firefox 中获取`event.keyCode`，您应该改用`event.which`，jQuery 也会推荐它。 所以更好的方法应该是：
var keycode =（event.keyCode？event.keyCode：event.which）;
```java
var keycode =(event.keyCode? event.keyCode: event.which);
```
## **3）长按任意键**
在这种情况下，根据 docs，keydown()事件被触发一次，但是 keypress()事件将一直触发直到释放键为止。 无论如何，这是浏览器特定的行为，我不会建议您使用此功能。 这应该仅限于您的知识。
在这种情况下，根据文档，`keydown()`事件被触发一次，但是`keypress()`事件将一直触发直到释放键为止。 无论如何，这是浏览器特定的行为，我不会建议您使用此功能。 这应该仅限于您的知识。
#### Try Yourself
#### 试一试
按任意键并保持按下状态。
<iframe src="//howtodoinjava.com/wp-content/uploads/keypress_keydown_demo1.html" style="border: medium none;" width="100%"></iframe>
```java
<html>
<head>
......@@ -162,7 +160,7 @@ $( document ).ready(function(){
```
If above demo is not working in your browser then do not worry. You are not alone. Please refer section 2.2 (Events Triggered on Auto-Repeat) from [http://unixpapa.com/js/key.html](http://unixpapa.com/js/key.html).
如果以上演示在您的浏览器中不起作用，请不要担心。 你不是一个人。 请参阅 [http://unixpapa.com/js/key.html](http://unixpapa.com/js/key.html) 中的 2.2 节（自动重复触发的事件）。
如果您有任何疑问或建议，请告诉我。
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或