jQuery 基础语法使用指南

🎉🎉🎉点进来你就是我的人了
博主主页：🙈🙈🙈戳一戳,欢迎大佬指点!

欢迎志同道合的朋友一起加油喔🤺🤺🤺

---

目录

1. 引入 jQuery

2. jQuery 语法

3. 选择器

4. 事件

5. 效果和动画

6. DOM 操作

7. AJAX

8. 遍历

9 .原生js 和 jquery使用对比

1.获取或替换 HTML 元素的内容（innerHTML）

2. 创建新的子元素并添加

3. 删除元素

4. 修改元素的文本内容

5. 获取或设置属性值

6. 添加或移除类

7. 处理事件：

8. 显示或隐藏元素：

结语

---

---

在编写 Web 应用时，jQuery 是我们不可或缺的工具，它使 JavaScript 变得简洁易用。这篇博文将为你讲述 jQuery 的基础语法，让你能够迅速上手这个强大的库。

1. 引入 jQuery

在使用 jQuery 之前，你需要在 HTML 中引入它。你可以下载 jQuery 库并将其放入项目中，也可以直接使用 CDN。以下是一个示例：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. jQuery 语法

jQuery 语法设计得非常简洁，基本结构为： $(selector).action()

• $ 符号定义 jQuery
• selector 是 jQuery 的查询表达式，用来查找元素
• action() 是在选中的元素上执行的操作

例如，以下代码会在段落被点击时隐藏该段落：

$("p").click(function(){
  $(this).hide();
});

3. 选择器

jQuery 提供了丰富的选择器，这些选择器基于 CSS 选择器，但比 CSS 选择器更强大：

• 标签选择器：$("p") 选取所有的 <p> 元素。
• ID 选择器：$("#myId") 选取 id 为 "myId" 的元素。
• 类选择器：$(".myClass") 选取 class 为 "myClass" 的所有元素。
• 属性选择器：$("input[name='email']") 选取 name 属性为 'email' 的 input 元素。

$(document).ready(function(){
  // 当文档加载完成后，执行这里的函数
  $("button").click(function(){
    // 当 button 被点击后，隐藏所有 class 为 "intro" 的 <p> 元素
    $("p.intro").hide();
  });
});

4. 事件

jQuery 提供了处理事件的强大机制。例如：

1. 使用 .on('click', handler) 绑定事件监听器：在 #myButton 元素上绑定了一个点击事件监听器，当点击按钮时，会执行回调函数中的代码。
2. 使用 .click(handler) 绑定点击事件监听器：与第一种方法类似，使用 .click 方法绑定了一个点击事件监听器。
3. 使用 .on('click', selector, handler) 进行事件委托：在 #myContainer 元素上绑定了一个点击事件监听器，并将事件委托给后代元素中匹配 .myButton 选择器的元素。当点击符合选择器条件的后代元素时，会执行回调函数中的代码。
4. 使用 .trigger('eventName') 触发自定义事件：通过调用 .trigger 方法并指定自定义事件名称，例如 'myCustomEvent'，可以手动触发事件。在示例中，点击 #myButton 元素会触发名为 'myCustomEvent' 的事件。
5. 使用 .click() 方法触发点击事件：通过调用 .click() 方法，可以手动触发 #myButton 元素的点击事件。

// 事件绑定示例,监听第一个参数的事件,事件发生执行回调函数
$('#myButton').on('click', function() {
  console.log('Button clicked!');
});

// 使用事件委托，将点击事件委托给后代元素,后代元素触发事件,执行回调函数
$('#myContainer').on('click', '.myButton', function() {
  console.log('Button clicked!');
});

// 使用 click 方法绑定 click 事件,点击事件发生,直接触发回调函数
$('#myButton').click(function() {
  console.log('Button clicked!');
});

// 触发自定义事件
//这样，当你调用 $('#myButton').trigger('myCustomEvent') 时，
//它将触发绑定在 #myButton 元素上的 'myCustomEvent' 事件的监听器，并执行回调函数中的代码。
$('#myButton').trigger('myCustomEvent');

// 触发元素的 click 事件
//确保在调用 .click() 方法之前，已经绑定了一个点击事件的监听器
//这样触发点击事件时，监听器中的代码才会被执行
$('#myButton').click();

• 点击事件：$('div').click(function(){ /* code */ })
• 鼠标进入事件：$('div').mouseenter(function(){ /* code */ })
• 鼠标离开事件：$('div').mouseleave(function(){ /* code */ })
• 文档加载完成事件：$(document).ready(function(){ /* code */ })

$(document).ready(function(){
  // 当文档加载完成后，执行这里的函数
  $("p").click(function(){
    // 当 <p> 元素被点击后，隐藏被点击的这个 <p> 元素
    $(this).hide();
  });
});

5. 效果和动画

jQuery 也提供了一些用于创建动画和特效的方法，例如：

• 隐藏元素：$("p").hide()
• 显示元素：$("p").show()
• 淡入元素：$("p").fadeIn()
• 淡出元素：$("p").fadeOut()

$(document).ready(function(){
  // 当文档加载完成后，执行这里的函数
  $("button").click(function(){
    // 当 button 被点击后，使用不同速度淡入三个 div，分别为默认速度，慢速，和3秒
    $("#div1").fadeIn(); // 默认速度
    $("#div2").fadeIn("slow"); // 慢速
    $("#div3").fadeIn(3000); // 3秒
  });
});

6. DOM 操作

jQuery 提供了修改 HTML 文档的方法，例如：

• 修改 HTML：$("p").html("Hello <b>world</b>!")
• 修改文本：$("p").text("Hello world!")
• 修改属性：$("img").attr("src", "myimage.jpg")
• 添加类：$("p").addClass("highlight")

$("button").click(function(){
  // 当 button 被点击后，修改 #w3s 的 href 属性值为 "https://www.w3schools.com/jquery"
  $("#w3s").attr("href", "https://www.w3schools.com/jquery");
});

7. AJAX

jQuery AJAX 方法让 HTTP 请求变得简单。例如：

• 发送 GET 请求：$.get("demo_test.asp", function(data, status){ /* code */ })
• 发送 POST 请求：$.post("demo_test_post.asp",{name:"Donald",city:"Duck"},function(data,status){ /* code */ });
• 使用 $.ajax() 方法进行完全自定义的 AJAX 请求：$.ajax({url: "demo_test.txt", success: function(result){ /* code */ }});
• $(document).ready(function() { ... }); 里面的代码将在页面的HTML完全加载后执行。这确保了当你试图选择或操作页面上的元素时，这些元素已经存在于DOM中。
• 这里的data是一个普通的JavaScript对象，其中包含键值对。当你发送AJAX请求时，在默认情况下，jQuery 的 $.ajax 函数会将传递的数据自动转换为表单形式（application/x-www-form-urlencoded）发送给后端
• 如果服务器期望接收JSON格式的数据，你可能需要将这个对象转换为JSON字符串。你可以使用JavaScript的JSON.stringify方法来实现

//确保里面的代码将在页面的HTML完全加载后执行
$(document).ready(function(){
  // 当点击按钮时，发送一个自定义的 AJAX 请求
  $("button").click(function(){
    $.ajax({
      url: "demo_test.asp", // 请求的 URL
      type: "POST", // 请求方法，如 "GET", "POST"
      data: {name: "John", location: "Boston"}, // 要发送的数据
      success: function(result){
        // 请求成功后的回调函数
        alert("Data received: " + result);
      },
      error: function(jqXHR, textStatus, errorThrown){
        // 请求失败后的回调函数
        alert("An error occurred: " + textStatus);
      }
    });
  });
});

8. 遍历

jQuery 提供了强大的遍历功能，例如：

• 遍历所有子元素：$("div").children().css("background-color", "yellow");
• 遍历特定子元素：$("div").children("p.important").css("background-color", "yellow");
• 遍历所有直接和间接子元素：$("div").find("*").css("background-color", "yellow");
• 遍历特定的直接和间接子元素：$("div").find("p").css("background-color", "yellow");

$(document).ready(function(){
  // 当文档加载完成后，执行这里的函数
  $("button").click(function(){
    // 当 button 被点击后，将 div 的所有子元素的文本颜色设置为红色，边框设置为2像素的红色实线
    $("div").children().css({"color": "red", "border": "2px solid red"});
  });
});

9 .原生js 和 jquery使用对比

1.获取或替换 HTML 元素的内容（innerHTML）

innerHTML 获取或设置的是元素的内部 HTML，也就是开始标签和结束标签之间的内容。它不仅包括文本，还包括其中的 HTML 标签和元素。如果你把一个新的字符串赋给一个元素的 innerHTML，那么这个字符串会作为新的 HTML 插入到元素内部，旧的内容会被替换掉。

innerHTML 属性会把你设置的字符串作为 HTML 来解析，如果这个字符串中包含 HTML 标签，这些标签也会被解析并生成对应的 DOM 元素。

  原生 JavaScript:

// 获取元素的内部 HTML
let content = document.getElementById('myDiv').innerHTML;

// 设置元素的内部 HTML
document.getElementById('myDiv').innerHTML = '<p>This is a new paragraph.</p>';

  jQuery:

// 获取元素的内部 HTML
let content = $('#myDiv').html();

// 设置元素的内部 HTML
$('#myDiv').html('<p>This is a new paragraph.</p>');

2. 创建新的子元素并添加

原生 JavaScript:

// 创建新的 div 元素
let newElement = document.createElement('div');

// 设置 div 的文本内容
newElement.textContent = 'Hello, World!';

// 添加新元素为 body 的子元素
document.body.appendChild(newElement);

  jQuery:

// 创建新的 div 元素，并设置文本内容
let newElement = $('<div>').text('Hello, World!');

// 添加新元素为 body 的子元素
$('body').append(newElement);

3. 删除元素

原生 JavaScript:

// 获取要删除的元素
let element = document.getElementById('myElement');

// 从其父元素中移除
element.parentNode.removeChild(element);

 jQuery:

// 直接移除 id 为 myElement 的元素
$('#myElement').remove();

4. 修改元素的文本内容

nnerHTML 会解析内容中的 HTML 标签，并将其作为 DOM 元素进行处理。相反，textContent 会将所有的内容都当作纯文本，HTML 标签也会被当作纯文本。

 原生 JavaScript:

// 设置 id 为 myElement 的元素的文本内容
document.getElementById('myElement').textContent = 'New text';

 jQuery:

// 设置 id 为 myElement 的元素的文本内容
$('#myElement').text('New text');

5. 获取或设置属性值

HTML 元素可以有许多属性，如 id, class, href 等等。除了这些内建的属性，你也可以自定义属性,你可以使用下面的方法来获取或者设置他们的属性值

原生 JavaScript:

• setAttribute 不仅可以修改已有的属性，也可以创建新的属性。
• 如果指定的属性名不存在，setAttribute 会创建一个新的属性。

// 获取元素的 data-info 属性
let attribute = document.getElementById('myDiv').getAttribute('data-info');

// 设置元素的 data-info 属性
document.getElementById('myDiv').setAttribute('data-info', 'New value');

 jQuery:

• 如果你传递一个参数（一个字符串，代表属性的名称），attr 方法将会获取该属性的值。
• 如果你传递两个参数（第一个是属性的名称，第二个是属性的新值），attr 方法将会设置该属性的值。
• jQuery 的 .attr() 方法在设置属性值时，如果指定的属性不存在，它将自动创建这个属性

// 获取元素的 data-info 属性
let attribute = $('#myDiv').attr('data-info');

// 设置元素的 data-info 属性
$('#myDiv').attr('data-info', 'New value');

6. 添加或移除类

在 HTML 中，class 属性是用来标识元素的一种方式，它可以让你应用 CSS 样式或者通过 JavaScript 操控特定的元素。一个元素可以有多个类，类名之间用空格分隔。

例如，你可能有这样一个 HTML 元素：

<div id="myDiv" class="class1 class2">Hello, world!</div>

• 这个 <div> 元素有两个类：class1 和 class2。这意味着任何应用到 class1 或 class2 的 CSS 样式都会应用到这个元素上。如果你通过 JavaScript 选择所有 class1 或 class2 的元素，这个 <div> 元素也会被选中。
• JavaScript 提供了一种方式来动态地添加和移除元素的类。element.classList 属性返回一个类名的列表，你可以在这个列表上调用 add 和 remove 方法来添加和移除类。

原生 JavaScript: (都是添加在class属性上面的)

// 给 id 为 myDiv 的元素添加新的类 newClass
document.getElementById('myDiv').classList.add('newClass');

// 移除 id 为 myDiv 的元素的 newClass 类
document.getElementById('myDiv').classList.remove('newClass');

 jQuery: (都是添加在class属性上面的)

// 给 id 为 myDiv 的元素添加新的类 newClass
$('#myDiv').addClass('newClass');

// 移除 id 为 myDiv 的元素的 newClass 类
$('#myDiv').removeClass('newClass');

 7. 处理事件：

 原生 JavaScript:

addEventListener 是一个 JavaScript DOM 方法，用于向特定元素添加事件监听器。这个方法接受两个参数：

1. 事件类型：它是一个字符串，表示你想要监听的事件的类型，比如 'click'、'mouseover'、'keydown' 等等。
2. 事件处理函数：这是一个函数，当指定的事件发生时，它会被调用。这个函数会接收一个参数，即事件对象，其中包含了关于触发事件的详细信息。

当第一个参数的事件被执行,就会调用第二个参数的回调函数

• 需要注意的是，click 事件不仅仅限于鼠标点击，它还可以由键盘、触摸屏等方式触发。
• 因此，使用 click 事件监听器可以在多种输入方式下捕获元素的点击行为，而不仅仅局限于 onclick 属性的方式。

// 给 id 为 myButton 的元素添加 click 事件的监听
//getElementById方法，它接受一个字符串参数，该参数是元素的 ID。
//因此，你不需要在选择器字符串中使用#符号。
document.getElementById('myButton').addEventListener('click', function() {
  console.log('Button clicked!');
});

//querySelector方法需要使用选择器字符串来选择元素
//所以你需要在选择器字符串中使用 # 符号来表示 ID
document.querySelector('#myButton').addEventListener('click', function() {
  console.log('Button clicked!');
});

 jQuery:

1. 元素选择器：$('#myButton') 使用 $ 符号后面跟上选择器字符串来选择元素。在这个例子中，使用 ID 选择器 # 选择了 ID 为 "myButton" 的元素。

2. 事件绑定：.on('click', function() { ... }) 是事件绑定的语法。.on 方法用于给选择的元素添加事件监听器。第一个参数是事件类型，这里是 'click'，表示要监听元素的点击事件。第二个参数是一个回调函数，当点击事件被触发时，这个回调函数中的代码将会执行。

3. 事件回调函数：function() { console.log('Button clicked!'); } 是事件的回调函数，即当事件被触发时要执行的代码块。在这个例子中，回调函数中的代码是输出 'Button clicked!' 到控制台。

// 给 id 为 myButton 的元素添加 click 事件的监听
$('#myButton').on('click', function() {
  console.log('Button clicked!');
});

8. 显示或隐藏元素：

 原生 JavaScript:

// 隐藏 id 为 myDiv 的元素
document.getElementById('myDiv').style.display = 'none';

// 显示 id 为 myDiv 的元素
document.getElementById('myDiv').style.display = 'block';

 jQuery:

// 隐藏 id 为 myDiv 的元素
$('#myDiv').hide();

// 显示 id 为 myDiv 的元素
$('#myDiv').show();

结语

以上便是 jQuery 的基础语法和使用，只要掌握了这些内容，你就能够在实际项目中熟练应用 jQuery 了。当然，jQuery 还有很多更深入的知识等待你去探索，你可以访问 jQuery 的官方文档，或者查阅更多的相关教程。jQuery 教程 | 菜鸟教程

希望这篇文章能帮助你在 Web 开发的道路上更进一步。如果你有任何问题或者想要讨论更多关于 jQuery 的话题，欢迎在评论区留言！