正文

轻松入门：jQuery 1.11.0 中文手册，从基础到实践

/0 浏览量
1022

简介

jQuery 是一个快速、小型且功能丰富的 JavaScript 库。它简化了 HTML 文档的遍历、事件处理、动画和 Ajax 交互。本文档旨在帮助初学者轻松入门 jQuery 1.11.0，从基础语法到实际应用。

基础语法

1. 引入 jQuery 库

首先，您需要将 jQuery 库引入到您的 HTML 文件中。可以通过以下两种方式：

<!-- 使用 CDN 引入 -->
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>

<!-- 下载并引入本地文件 -->
<script src="path/to/jquery-1.11.0.min.js"></script>

2. 选择器

jQuery 提供了丰富的选择器，用于选取 DOM 元素。以下是一些常用的选择器：

  • 元素选择器：$("selector") 
    
$("p"); // 选择所有 <p> 元素
$("div#myDiv"); // 选择 id 为 myDiv 的 <div> 元素
$("div.class1"); // 选择 class 为 class1 的 <div> 元素
  • 属性选择器：$("[attribute=value]") 
    
$("input[type='text']"); // 选择 type 属性为 text 的 <input> 元素
$("a[href^='http://']"); // 选择 href 属性以 http:// 开头的 <a> 元素
  • CSS 选择器：$("css-selector") 
    
$("p:first"); // 选择第一个 <p> 元素
$("div:even"); // 选择所有偶数行的 <div> 元素

3. 属性操作

jQuery 允许您轻松地读取和修改元素的属性。以下是一些常用的属性操作方法：

$("#myDiv").attr("title", "Hello, jQuery!"); // 设置 title 属性
var title = $("#myDiv").attr("title"); // 获取 title 属性

4. 文本和内容操作

jQuery 提供了丰富的文本和内容操作方法，例如：

$("#myDiv").text("Hello, jQuery!"); // 设置元素文本
var text = $("#myDiv").text(); // 获取元素文本
$("#myDiv").html("<strong>Hello, jQuery!</strong>"); // 设置元素 HTML 内容
var html = $("#myDiv").html(); // 获取元素 HTML 内容

实践应用

1. 动画

jQuery 提供了强大的动画功能，以下是一些常用的动画方法：

$("#myDiv").animate({left: "100px"}, 1000); // 向右移动 100px，持续 1000 毫秒
$("#myDiv").fadeIn(1000); // 淡入显示，持续 1000 毫秒
$("#myDiv").fadeOut(1000); // 淡出隐藏，持续 1000 毫秒

2. Ajax

jQuery 的 Ajax 功能可以帮助您异步地与服务器进行交互。以下是一个简单的 Ajax 请求示例：

$.ajax({
  url: "example.json",
  type: "GET",
  dataType: "json",
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, status, error) {
    console.error(error);
  }
});

总结

本文档为您介绍了 jQuery 1.11.0 的基础语法和实际应用。通过学习本文档，您应该能够掌握 jQuery 的基本操作，并将其应用于实际项目中。祝您学习愉快！

-- 展开阅读全文 --