jquery中的语法以及选择器

悠悠 2021-09-15 07:36 390阅读 0赞

## jQuery 语法 ##

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法： **$(*selector*).*action*()**

*  美元符号定义 jQuery
 *  选择符（selector）"查询"和"查找" HTML 元素
 *  jQuery 的 action() 执行对元素的操作

实例:

*  $(this).hide() - 隐藏当前元素
 *  $("p").hide() - 隐藏所有 <p> 元素
 *  $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
 *  ## 文档就绪事件 ##
    
    您也许已经注意到在我们的实例中的所有 jQuery 函数位于一个 document ready 函数中：
    
    $ ( document ) . ready ( function ( ) \{   //  开始写 jQuery 代码...   \} ) ;
    
    这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
    
    如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：
    
     *  试图隐藏一个不存在的元素
     *  获得未完全加载的图像的大小
    
    **提示：**简洁写法（与以上写法效果相同）:
    
    $ ( function ( ) \{   //  开始写 jQuery 代码...   \} ) ;
    
    以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。
    
    $("\#test").hide() - 隐藏所有 id="test" 的元素

\-----------------------------------------------------------------------------------------------------------------------------

## jQuery 选择器 ##

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 [CSS 选择器][CSS]，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头：$()。

--------------------

## 元素选择器 ##

jQuery 元素选择器基于元素名选取元素。

在页面中选取所有 <p> 元素:

**实例**

用户点击按钮后，所有 <p> 元素都隐藏：

</html>

![70][]

## \#id 选择器 ##

jQuery \#id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 \#id 选择器。

通过 id 选取元素语法如下：

$("\#test")

**实例**

当用户点击按钮后，有 id="test" 属性的元素将被隐藏：

</body>

这里可以看出 p取id选择器的时候在jq中调用用户按钮提示时只针对id选择器中的test进行操作隐藏

## .class 选择器 ##

jQuery 类选择器可以通过指定的 class 查找元素。

语法如下：

$(".test")

**实例**

用户点击按钮后所有带有 class="test" 属性的元素都隐藏：

## 更多实例 ##

![70 1][]

## 独立文件中使用 jQuery 函数 ##

如果您的网站包含许多页面，并且您希望您的 jQuery 函数易于维护，那么请把您的 jQuery 函数放到独立的 .js 文件中。

当我们在教程中演示 jQuery 时，会将函数直接添加到 <head> 部分中。不过，把它们放到一个单独的文件中会更好，就像这样（通过 src 属性来引用文件）：

## 实例 ##

< head >  < script  src = " http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js " >  </ script >  < script  src = " my\_jquery\_functions.js " > </ script >  </ head >

通过 $(":button") 可以选取所有 type="button" 的 <input> 元素 和 <button> 元素，如果去掉冒号，$("button")只能获取 <button> 元素。

<p id="test1">点进这里测试  <b>button</b></p>
    <p id="test2">点进这里测试 <b>:button</b></p>
    <button>Button 按钮</button>
    <input type="button" value="Input 按钮">

关于 **:** 和 **\[\]** 这两个符号的理解

**：**可以理解为种类的意思，如：p:first，p 的种类为第一个。

**\[\]** 很自然的可以理解为属性的意思，如：\[href\] 选取带有 href 属性的元素。

[CSS]: http://www.runoob.com/cssref/css-selectors.html
[70]: /images/20210813/4d58593cc01b4578aaa682264f5d565a.png
[70 1]: /images/20210813/a38cf2529545435e98fbd97683295bb2.png