【Web】关于jQuery萌新必须要知道的那些基础知识

目录

DOM对象和jQuery包装集对象

jQuery选择器

jQuery操作元素的属性，样式，内容

jQuery创建元素和添加元素，删除元素和遍历元素

jQuery-ready加载事件

jQuery绑定事件

jQuery中ajax的使用

---

DOM对象和jQuery包装集对象

DOM对象：
DOM对象是指原生的JavaScript对象，它表示网页中的HTML元素或节点。通过使用document.getElementById()或其他DOM方法，可以获取到DOM对象。DOM对象具有一些原生的属性和方法，可以直接在JavaScript中使用

示例：

// 获取DOM对象
var element = document.getElementById("myElement");// 修改DOM对象的属性
element.style.color = "red";// 调用DOM对象的方法
element.addEventListener("click", function() {alert("Clicked!");
});

jQuery包装集对象：
jQuery包装集对象是由jQuery库创建的特殊对象，它是对DOM对象的封装和扩展。通过将DOM对象传递给jQuery函数（$或jQuery），可以将其转换为jQuery对象，进而可以使用jQuery提供的丰富功能和方法来操作和处理元素。

示例：

// 获取jQuery包装集对象
var $element = $("#myElement");// 修改jQuery对象的样式
$element.css("color", "red");// 调用jQuery对象的事件处理方法
$element.click(function() {alert("Clicked!");
});

jQuery选择器

jQuery选择器是一种用于查找HTML元素的表达式，可以根据元素的ID、类名、属性等特征来定位和选择元素。jQuery提供了多种类型的选择器，包括基础选择器、层次选择器和表单选择器等。

1. 基础选择器： 基础选择器是最常用的选择器类型，可以根据元素的标签名、ID、类名等特征来选择元素。以下是一些常见的基础选择器：

   • 标签选择器：使用元素的标签名来选择元素 示例代码：$("p") 选中所有的段落元素

   • ID选择器：使用元素的ID来选择元素 示例代码：$("#myId") 选中ID为"myId"的元素

   • 类选择器：使用元素的类名来选择元素 示例代码：$(".myClass") 选中所有类名为"myClass"的元素

   • 属性选择器：使用元素的属性值来选择元素 示例代码：$("input[type='text']") 选中所有type属性为"text"的input元素

2. 层次选择器： 层次选择器是一种选择器类型，可以根据元素的父子关系或兄弟关系来选择元素。以下是一些常见的层次选择器：

   • 后代选择器：使用空格来选择元素的后代元素 示例代码：$("div p") 选中所有div元素内的p元素

   • 子元素选择器：使用">"来选择元素的子元素 示例代码：$("ul > li") 选中所有ul元素的直接子元素li元素

   • 兄弟选择器：使用"+"或"~"来选择元素的相邻兄弟元素或所有兄弟元素 示例代码：$("p + span") 选中所有紧跟在p元素后面的span元素

3. 表单选择器： 表单选择器是一种选择器类型，可以根据元素的表单属性来选择元素。以下是一些常见的表单选择器：

   • :input选择器：选择所有的input、select、textarea和button元素 示例代码：$(":input") 选中所有的表单元素

   • :checked选择器：选择所有被选中的复选框或单选按钮元素 示例代码：$(":checked") 选中所有被选中的表单元素

   • :enabled选择器：选择所有可用的表单元素 示例代码：$(":enabled") 选中所有可用的表单元素

jQuery操作元素的属性，样式，内容

1.操作元素属性：
使用jQuery的attr()方法可以获取或设置元素的属性值。以下是一些常见的操作元素属性的代码示例：

    获取属性值：var value = $("img").attr("src");
    设置属性值：$("img").attr("src", "newsrc.jpg");

除了attr()方法外，还有prop()方法可以获取或设置元素的属性值。

2.操作元素样式：
使用jQuery的css()方法可以获取或设置元素的样式属性值。以下是一些常见的操作元素样式的代码示例：

    获取样式属性值：var value = $("div").css("color");
    设置样式属性值：$("div").css("color", "red");

可以通过传递一个对象参数来同时设置多个样式属性值：

$("div").css({"color": "red","background-color": "yellow"
});

3.操作元素内容：
使用jQuery的html()方法可以获取或设置元素的HTML内容，而text()方法可以获取或设置元素的纯文本内容。以下是一些常见的操作元素内容的代码示例：

    获取HTML内容：var htmlContent = $("div").html();
    设置HTML内容：$("div").html("<p>New HTML content</p>");
    获取纯文本内容：var textContent = $("p").text();
    设置纯文本内容：$("p").text("New text content");

另外还有val()方法可以获取或设置表单元素的值。

jQuery创建元素和添加元素，删除元素和遍历元素

1. 创建元素： 使用jQuery的$()函数可以创建新的HTML元素。以下是一些常见的创建元素的代码示例：

   • 创建div元素：var newDiv = $("<div>");
   • 创建带有文本内容的p元素：var newParagraph = $("<p>New paragraph content</p>");

   这些新创建的元素可以与现有的元素一样被添加到页面上。

2. 添加元素： 使用jQuery的append()、prepend()、after()和before()方法可以将元素添加到指定的位置上。以下是一些常见的添加元素的代码示例：

   • 在某个元素内部的末尾添加新元素：$("div").append("<p>New paragraph content</p>");
   • 在某个元素内部的开头添加新元素：$("div").prepend("<p>New paragraph content</p>");
   • 在某个元素后面添加新元素：$("div").after("<p>New paragraph content</p>");
   • 在某个元素前面添加新元素：$("div").before("<p>New paragraph content</p>");

   可以通过传递一个jQuery对象或HTML元素作为参数来添加已经存在的元素。

3. 删除元素： 使用jQuery的remove()方法可以从DOM中删除元素。以下是一些常见的删除元素的代码示例：

   • 删除某个元素：$("div").remove();
   • 删除某个元素的子元素：$("div").empty();

4. 遍历元素： 使用jQuery的each()方法可以遍历一个或多个元素，并对它们进行操作。以下是一些常见的遍历元素的代码示例：

   • 遍历所有的段落元素并打印它们的文本内容：$("p").each(function() { console.log($(this).text()); });
   • 遍历某个元素的子元素并添加类名：$("div").children().each(function() { $(this).addClass("myClass"); });

   each()方法接受一个回调函数作为参数，该函数在每次遍历到一个元素时被调用。在回调函数中，this指向当前遍历到的元素，可以使用jQuery的包装器函数$(this)将其转换为jQuery对象。

jQuery-ready加载事件

jQuery的ready()方法是一个很有用的事件，它会在文档加载完成后立即执行。它可以确保在JavaScript代码执行之前，页面中所需的所有DOM元素都已加载并可以使用。

以下是使用jQuery的ready()方法的代码示例：

$(document).ready(function() {// 在这里编写需要在DOM加载完成后执行的代码
});

上面的代码将在文档加载完成后执行其中的回调函数。可以在回调函数中编写需要在DOM加载完成后执行的JavaScript代码，如绑定事件、修改元素属性等操作。

为了简化代码，可以使用缩写形式来写ready()方法：

$(function() {// 在这里编写需要在DOM加载完成后执行的代码
});

上面的代码与之前的代码等效，都会在文档加载完成后执行其中的回调函数。

jQuery绑定事件

在jQuery中，可以使用on()方法来绑定事件处理程序，该方法可以用于绑定多种类型的事件，如点击事件、鼠标移入事件、键盘按下事件等。

以下是一个简单的示例，演示了如何在页面加载完成后使用jQuery来绑定一个按钮的点击事件：

$(document).ready(function() {// 选取按钮元素，并绑定点击事件处理程序$("#myButton").on("click", function() {alert("按钮被点击了！");});
});

在上面的示例中，on()方法用于为ID为myButton的按钮元素绑定一个点击事件处理程序。当按钮被点击时，弹出一个警告框显示"按钮被点击了！"。

除了点击事件，on()方法还可以用于绑定其他类型的事件。例如，可以使用下面的代码来在鼠标悬停在某个元素上时触发事件：

$(document).ready(function() {// 选取元素，并绑定鼠标悬停事件处理程序$(".hoverMe").on("mouseenter", function() {$(this).css("color", "red");});// 当鼠标移出时恢复原来的颜色$(".hoverMe").on("mouseleave", function() {$(this).css("color", "black");});
});

上面的代码为类名为hoverMe的元素绑定了鼠标悬停和鼠标离开事件处理程序，当鼠标悬停在元素上时，文字颜色变为红色，当鼠标移出时恢复原来的颜色。

另外，on()方法还可以用于动态绑定事件处理程序，通过传递选择器作为第二个参数，可以绑定未来添加到DOM中的元素的事件处理程序。这对于动态生成的内容或通过AJAX加载的内容非常有用。

jQuery中ajax的使用

在jQuery中，可以使用$.ajax()方法来执行异步的HTTP请求。这个方法提供了在网页和服务器之间进行数据交换的强大功能，可以用于获取服务器上的数据、发送数据到服务器以及更新页面上的部分内容。

下面是一个简单的示例，演示了如何使用$.ajax()方法向服务器发送GET请求并处理返回的数据：

$.ajax({url: "example.php", // 要请求的URLmethod: "GET", // 请求方法，可以是"GET"或"POST"data: { name: "binjie", age: 25 }, // 发送到服务器的数据success: function(response) {// 成功时执行的回调函数console.log("成功获取到数据：", response);},error: function(xhr, status, error) {// 失败时执行的回调函数console.log("发生错误：", error);}
});

在上面的示例中，我们使用$.ajax()方法向example.php发送了一个GET请求，同时传递了一些数据。如果请求成功，服务器返回的数据将会被传递给success回调函数；如果请求失败，将会执行error回调函数。

除了简单的GET请求，$.ajax()方法还可以执行POST请求、JSONP请求、跨域请求等。下面是一个执行POST请求的示例：

$.ajax({url: "submit_data.php", // 请求的URLmethod: "POST", // 请求方法data: { username: "binjie", password: "123456" }, // 发送到服务器的数据success: function(response) {// 成功时执行的回调函数console.log("数据提交成功：", response);},error: function(xhr, status, error) {// 失败时执行的回调函数console.log("提交数据时发生错误：", error);}
});

在实际项目中，通常会将$.ajax()方法封装成一个函数，以便复用和统一处理错误。例如：

function fetchData(url, method, requestData, successCallback, errorCallback) {$.ajax({url: url,method: method,data: requestData,success: successCallback,error: errorCallback});
}// 使用封装好的函数
fetchData("example.php", "GET", { id: 123 }, function(response) {console.log("成功获取到数据：", response);
}, function(xhr, status, error) {console.log("发生错误：", error);
});