jq 基础语法

最新推荐文章于 2025-06-24 10:48:29 发布

兰韦韦

最新推荐文章于 2025-06-24 10:48:29 发布

阅读量614

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_37928724/article/details/80893018

通过 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" 的元素

文档就绪事件

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

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

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

Query 入口函数:

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

JavaScript 入口函数:

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

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

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

选择器：

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

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

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

元素选择器：

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

实例

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

#id 选择器：

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

实例

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