jQuery基本语法

淡淡的烟草味﹌ 2024-03-22 20:05 40阅读 0赞

#### 文章目录 ####

*  1.jQuery语法
 *   *  1.1 文档就绪事件
     *  1.2 注意
 *  2.jQuery选择器
 *   *  2.1 jQuery 选择器
     *  2.2 元素选择器
     *  2.3 \#id 选择器
     *  2.4 .class 选择器
     *  2.5 更多实例
     *  2.6 独立文件中使用 jQuery 函数

## 1.jQuery语法 ##

通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。

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

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

实例:

*  $(this).hide() - 隐藏当前元素
 *  $(“p”).hide() - 隐藏所有 <p> 元素
 *  $(“p.test”).hide() - 隐藏所有 class=“test” 的 <p> 元素
 *  $(“\#test”).hide() - 隐藏 id=“test” 的元素

### 1.1 文档就绪事件 ###

$(document).ready(function(){
     
       // 开始写 jQuery 代码...
     
    });

这是为了防止文档在完全加载（就绪）之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。下面是两个具体的例子：

*  试图隐藏一个不存在的元素
 *  获得未完全加载的图像的大小

简洁写法（与以上写法效果相同）:

$(function(){
     
       // 开始写 jQuery 代码...
     
    });

以上两种方式你可以选择你喜欢的方式实现文档就绪后执行 jQuery 方法。

### 1.2 注意 ###

jQuery 入口函数:

$(document).ready(function(){
        // 执行代码
    });
    或者
    $(function(){
        // 执行代码
    });

JavaScript 入口函数:

window.onload = function () {
        // 执行代码
    }

jQuery 入口函数与 JavaScript 入口函数的区别：

*  jQuery 的入口函数是在 html 所有标签(DOM)都加载之后，就会去执行。
 *  JavaScript 的 window.onload 事件是等到所有内容，包括外部图片之类的文件加载完后，才会执行。

## 2.jQuery选择器 ##

### 2.1 jQuery 选择器 ###

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

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

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

### 2.2 元素选择器 ###

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

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

$("p")

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

$(document).ready(function(){
      $("button").click(function(){
        $("p").hide();
      });
    });

### 2.3 \#id 选择器 ###

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

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

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

$("#test")

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

$(document).ready(function(){
      $("button").click(function(){
        $("#test").hide();
      });
    });

### 2.4 .class 选择器 ###

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

语法如下：

$(".test")

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

$(document).ready(function(){
      $("button").click(function(){
        $(".test").hide();
      });
    });

### 2.5 更多实例 ###

<table> 
 <thead> 
  <tr> 
   <th>$(“*”)</th> 
   <th>选取所有元素</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>$(this)</td> 
   <td>选取当前 HTML 元素</td> 
  </tr> 
  <tr> 
   <td>$(“p.intro”)</td> 
   <td>选取 class 为 intro 的 &lt;p&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>$(“p:first”)</td> 
   <td>选取第一个 &lt;p&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>$(“ul li:first”)</td> 
   <td>选取第一个 &lt;ul&gt; 元素的第一个 &lt;li&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>$(“ul li:first-child”)</td> 
   <td>选取每个 &lt;ul&gt; 元素的第一个 &lt;li&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>$(“[href]”)</td> 
   <td>选取带有 href 属性的元素</td> 
  </tr> 
  <tr> 
   <td>$(“a[target=‘_blank’]”)</td> 
   <td>选取所有 target 属性值等于 “_blank” 的 &lt;a&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>$(“a[target!=‘_blank’]”)</td> 
   <td>选取所有 target 属性值不等于 “_blank” 的 &lt;a&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>$(“:button”)</td> 
   <td>选取所有 type=“button” 的 &lt;input&gt; 元素 和 &lt;button&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>$(“tr:even”)</td> 
   <td>选取偶数位置的 &lt;tr&gt; 元素</td> 
  </tr> 
  <tr> 
   <td>$(“tr:odd”)</td> 
   <td>选取奇数位置的 &lt;tr&gt; 元素</td> 
  </tr> 
 </tbody> 
</table>

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

一般我们将 jQuery 函数放到独立的 .js 文件中。

在使用时直接引入：

[CSS]: https://www.runoob.com/cssref/css-selectors.html