jquery-selectors入门

Download jquery-selectors eBook

备注

本节概述了jquery-selectors是什么,以及开发人员可能想要使用它的原因。

它还应该提到jquery-selectors中的任何大型主题,并链接到相关主题。由于jquery-selectors的文档是新的,您可能需要创建这些相关主题的初始版本。

安装或设置

1标记名称表示DOM中可用的标记名称。例如$('p') 选择文档中的所有段落<p>

2标记ID表示DOM中给定ID可用的标记。例如$('#some-id') 选择文档中具有some-id ID的单个元素。

3 Tag Class表示DOM中给定类可用的标记。例如$('.some-class') 选择文档中具有某类类的所有元素。

以上所有项目可以单独使用,也可以与其他选择器结合使用。除了一些调整之外,所有jQuery选择器都基于相同的原理。

注 - 工厂function $()jQuery() 函数的同义词。因此,如果你使用任何其他JavaScript库,其中$ sign与其他东西冲突,那么你可以用jQuery名称替换$ sign,你可以使用函数jQuery()而不是$()。

示例以下是使用标记选择器的简单示例。这将选择标签名为p的所有元素,并将其背景设置为“黄色”。

<html>

   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
    
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
    
</html>
 

Jquery选择器

Jquery选择器用于操作DOM(Document对象模型),附加事件,添加元素,在运行时删除元素。

选择描述
元素选择器元素选择器用于选择特定元素
例如: <p>Stackoverflow to help in understanding errors </p>
要访问此“p”标记,我们需要添加此元素并将其包装在jquery语法中,如:$(“p”)。
“$”表示jquery,它只是jquery的别名,如果我们想要,我们可以使用jquery而不是像jQuery()那样的“$”。
如果我们使用与jquery($)具有相同别名的其他库或框架(angular),我们可以使用jquery的$ .noConflict()方法来改变这种冲突。
ID选择器我们可以将Id选择器写为$(“#text of id attribute”)
<div id="selectMe">I am inner content of Div.</div>
这里ID属性的文本是“selectMe”,所以要使用jquery选择这个ID选择器,我们必须写:$(“#selectMe”)。
可以使用逗号分隔Ex:$(“#id1,#id2,#id3 ...”)选择多个ID
类选择器类选择器由点/“”表示。并写为$(“。className”)
<span class="demoClass"> Demo JQuery class Selectors </span>
要访问类选择器,我们编写$(“。demoClass”),可以选择Multiple类作为comman分隔值。 $(”。class1的,.class2,.class3" )
所有元素选择器要选择Complete DOM元素,我们必须包含字符: "*"
$("*") 它引用完整的DOM元素,包括html,head ...

这是p Tag

这是div标签这是span标签$(“*”)//它将引用所有DOM元素|

检查jsfiddle例如: https ://jsfiddle.net/rezjvrum/

各种选择者名单:

  1. “:first” - 选择第一个元素。
  2. “:last” - 选择最后一个元素。
  3. “:even” - 选择所有偶数元素。
  4. “:odd” - 选择所有奇数元素。
  5. “:eq(index)” - 选择索引元素。例如: :eq(1) 将选择第二个子元素。索引从“0”开始。
  6. “:gt(index)” - 显示索引大于索引传递的所有元素。例如: :gt(3) 将返回索引大于3的所有元素。
  7. “:lt(index)” - 显示索引小于索引传递的所有元素。例如: :lt(2) 将返回索引小于2的所有元素。

以上选择器包含在: https//jsfiddle.net/rezjvrum/2/

Stats

46 Contributors: 3
Tuesday, November 15, 2016
许可下: CC-BY-SA

不隶属于 Stack Overflow
Rip Tutorial: info@zzzprojects.com

下载电子书