null - 程序员宅基地

JQuery-程序员宅基地

技术标签：前端 jquery

是什么？

为什么需要这个技术？

是什么？

JQuery是一个js文件。具体来说，JQuery是一个快速、小巧且功能丰富的JavaScript库。

为什么需要这个技术？

原生JavaScript操作dom元素代码量可能较大，特别是对于复杂的DOM操作，还需要手动处理跨浏览器兼容性问题。

jQuery则通过封装和扩展JavaScript的功能，提供了更简洁、更易于使用的API，操作dom元素代码简洁易读，解决了跨浏览器兼容性问题。

具体来说，jQuery相对于原生的JavaScript代码编写方面更具有易用性和可维护性吧，并消除了各种浏览器兼容性问题。

PS：另一个优点，jQuery支持链式操作，这使得开发者可以将多个操作链接在一起，形成一个流畅的操作序列。这种特性不仅使得代码更加简洁易读，而且提高了代码的可维护性和复用性。

下载jQuery文件

浏览器直接下载

https://code.jquery.com/{jquery的版本}

下载示例：

https://code.jquery.com/jquery-3.6.0.min.js

PS：访问之后直接将页面另存为后即可。

怎么用？

使用jQuery分为引入jQuery库和编写jQuery代码两步。

引入jQuery库：首先需要在HTML文档中引入jQuery库。这通常通过<script>标签的src属性来完成，指向jQuery的CDN链接或本地jQuery文件。

使用jQuery的CDN链接：

<head>  
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>  
</head>

使用本地jQuery（需要先下载到本地）：

<script src="path/local/jquery-3.6.0.min.js"></script>

编写jQuery代码：一旦jQuery库被加载，您就可以在<script>标签中编写jQuery代码了。通常，我们会将这些代码放在一个单独的<script>标签中，以确保它们在页面加载完成后执行。

<script>  
    $(document).ready(function(){  
        // 在这里编写您的jQuery代码  
        $("p").click(function(){  
            $(this).hide();  
        });  
    });  
</script>

操作dom元素

需要先找到要操作的元素，然后才可以对这个元素进行一系列的操作。

前置需要了解

$表示什么？

$是一个别名或简称，用于表示 jQuery 函数

$("")表示什么？

是一个基本的函数调用(实际上是调用jQuery对象的方法)，用于选择DOM（文档对象模型）元素，jQuery 选择器函数或 $ 函数。它接受一个字符串参数，该参数是CSS样式的选择器，用于指定要从DOM中获取(选择)哪些元素。

jQuery中的dom元素是什么？

指的是通过jQuery选择器从网页的文档对象模型（Document Object Model，简称DOM）中选取出来的HTML元素。这些元素被封装为jQuery对象，使得开发者可以使用jQuery提供的方法和属性来操作它们。

常用方法

选择器方法

方法名称	作用
`$()`	用于选择页面上的元素，并返回包含这些元素的jQuery对象
`.find()`	在当前jQuery对象所代表的元素集合中查找满足选择器的元素
`.eq()`	根据索引值选取匹配的元素集合中的一个元素
`.filter()`	过滤当前jQuery对象所代表的元素集合，只保留满足特定条件的元素

属性操作方法

方法名称	作用
`.attr()`	获取或设置被选元素的属性值
`.removeAttr()`	从被选元素中移除一个或多个属性
`.prop()`	获取或设置被选元素的属性（property）值
`.removeProp()`	移除被选元素的属性（property）

内容操作方法

方法名称	作用
`.text()`	获取或设置被选元素的文本内容
`.html()`	获取或设置被选元素的HTML内容
`.val()`	获取或设置被选元素的值（常用于表单元素）
`.empty()`	从被选元素中移除所有子节点

CSS操作方法

方法名称	作用
`.css()`	获取或设置被选元素的样式属性
`.addClass()`	为被选元素添加一个或多个类
`.removeClass()`	从被选元素中移除一个或多个类
`.toggleClass()`	在被选元素上切换一个或多个类（如果存在则移除，否则添加）

遍历方法

方法名称	作用
`.each()`	为每个被选元素执行一个函数
`.parent()`	获取被选元素的直接父元素
`.children()`	获取被选元素的所有直接子元素
`.siblings()`	获取被选元素的所有同胞元素

事件处理方法

方法名称	作用
`.on()`	在被选元素上绑定一个或多个事件处理函数
`.off()`	从被选元素上移除一个或多个事件处理函数
`.trigger()`	触发被选元素上绑定的事件处理函数
`.click()`	触发或绑定click事件处理函数

动画效果方法

方法名称	作用
`.show()`	显示被选元素
`.hide()`	隐藏被选元素
`.toggle()`	切换被选元素的可见状态
`.slideDown()`	通过滑动效果显示被选元素

使用层面功能描述

获取元素

通过ID获取元素

var element = $("#myId");

通过类名获取元素

var elements = $(".myClass");

PS：这个方法会返回一个包含所有匹配元素的jQuery对象。

通过元素类型获取元素

var elements = $("p"); // 获取所有的<p>元素

通过属性获取元素

var elements = $("[name='myName']"); // 获取所有name属性为'myName'的元素

组合选择器

可以组合上述选择器来获取更具体的元素。

var elements = $(".myClass p"); // 获取所有类名为'myClass'的<p>元素

获取子元素

需要在获取元素后使用空格来指定一个元素的子元素。

var elements = $("#parentId .childClass"); // 获取ID为'parentId'的元素中所有类名为'childClass'的子元素

获取父元素

需要在获取元素后使用 .parent()方法。

var parent = $("#childId").parent(); // 获取ID为'childId'的元素的父元素

获取元素的值

获取元素的值通常取决于元素的类型。对于表单元素，如输入框（input）、文本域（textarea）或选择框（select），可以使用 .val() 方法来获取或设置值。对于其他元素，如文本或链接，你可能需要使用 .text()或 .html() 方法来获取或设置其内容。

获取输入框的值

var inputValue = $('input[name="myInput"]').val();  
console.log(inputValue);

获取单选框选中的值

var radioValue = $('input[name="myRadio"]:checked').val();  
console.log(radioValue);

获取复选框选中的值

var checkboxValues = [];  
$('input[name="myCheckbox"]:checked').each(function() {  
    checkboxValues.push($(this).val());  
});  
console.log(checkboxValues);

获取下拉框选中的值

var selectValue = $('select#mySelect').val();  
console.log(selectValue);

获取元素的属性值

// 假设你有一个链接，其HTML如下：  
// <a id="myLink" href="https://example.com">点击这里</a>  
  
// 使用jQuery获取链接的href属性值  
var linkHref = $("#myLink").attr("href");  
console.log(linkHref); // 输出: https://example.com

获取多行文本的值

var textareaValue = $('textarea#myTextarea').val();  
console.log(textareaValue);

获取元素的文本内容

var textContent = $('#myElement').text();  
console.log(textContent);

获取元素的HTML内容

var htmlContent = $('#myElement').html();  
console.log(htmlContent);

设置元素的值

设置输入框的值

// 假设你有一个ID为"myTextInput"的文本输入框  
$('#myTextInput').val('新的文本值');

设置单选框选中状态

// 取消选中ID为"myRadio"的单选框  
$('#myRadio').prop('checked', false);

设置复选框选中状态

// 选中ID为"myCheckbox"的复选框  
$('#myCheckbox').prop('checked', true);

设置下拉框选中的值

// 假设你有一个ID为"mySelect"的下拉列表，并且你想选中值为"optionValue"的选项  
$('#mySelect option[value="optionValue"]').prop('selected', true);

// 假设你有一个ID为"mySelect"的下拉列表，并且你想选中文本为"Option Text"的选项  
$('#mySelect option:contains("Option Text")').prop('selected', true);

设置元素的属性值

// 假设你有一个链接，其HTML如下：  
// <a id="myLink" href="https://old-example.com">点击这里</a>  
  
// 使用jQuery设置链接的href属性值  
$("#myLink").attr("href", "https://new-example.com");  
  
// 现在链接的href属性已被更新为https://new-example.com

设置多行文本的值

// 假设你有一个ID为"myTextarea"的多行文本框  
$('#myTextarea').val('新的文本内容');

设置元素的文本内容

// 假设你有一个ID为"myText"的文本框  
$('#myText').text('新的文本内容');

设置元素的HTML内容

// 假设你有一个ID为"myHtml"的文本框  
$('#myHtml').html('<p>新的HTML内容</p>');

添加元素

往指定元素的内部末尾插入内容

// 假设你有div标签并且这个标签的ID为"parentElement"
$('#parentElement').append('<p>这是一个新段落。</p>');
$('<p>这是一个新段落。</p>').appendTo('#parentElement');

往指定元素之后插入内容

$("#targetElement").after("<p>这是目标元素之后的新段落。</p>");
$("<p>这是目标元素之后的新段落。</p>").insertAfter("#targetElement");

往指定元素之前插入内容

$("#targetElement").before("<p>这是目标元素之前的新段落。</p>");
$("<p>这是目标元素之前的新段落。</p>").insertBefore("#targetElement");

删除元素

删除被选元素及其子元素

$("p").remove(); // 删除所有的 <p> 元素  
$("#myElement").remove(); // 删除ID为myElement的元素

删除被选元素的子元素

$("div").empty(); // 清空所有的 <div> 元素的内容

包装元素

wrap() 将每个被选元素分别用指定的HTML内容或元素包裹。
wrapAll() 将所有被选元素用指定的HTML内容或元素包裹起来。
wrapInner() 将每个被选元素的内部内容用指定的HTML内容或元素包裹。

// 使用 wrap() 方法  
$("#myElement").wrap("<div class='wrapper'></div>");  
  
// 使用 wrapAll() 方法  
$("p").wrapAll("<div class='all-wrappers'></div>");  
  
// 使用 wrapInner() 方法  
$("#myElement").wrapInner("<div class='inner-wrapper'></div>");

对元素样式的操作

获取元素的样式

/ 假设你有一个元素，其HTML如下：  
// <div id="myDiv" style="color: red; font-size: 16px;"></div>  
  
// 使用jQuery获取该元素的color样式属性值  
var color = $("#myDiv").css("color");  
console.log(color); // 输出: rgb(255, 0, 0) 或者 #ff0000，取决于浏览器实现

设置元素的样式

ID为myElement的标签之前有样式则为设置。

// 设置单个样式属性  
$("#myElement").css("color", "red"); // 将ID为myElement的元素的文本颜色设置为红色  
  
// 设置多个样式属性  
$("#myElement").css({  
  "color": "red",  
  "background-color": "yellow",  
  "font-size": "20px"  
}); // 同时设置多个样式属性

添加元素的样式

ID为myElement的标签之前没有样式则为添加。

// 添加单个样式属性  
$("#myElement").css("color", "red"); // 将ID为myElement的元素的文本颜色设置为红色  
  
// 添加多个样式属性  
$("#myElement").css({  
  "color": "red",  
  "background-color": "yellow",  
  "font-size": "20px"  
}); // 同时添加多个样式属性

删除元素的样式

将ID为myElement的标签的样式设为空则为删除。

$("#myElement").css("color", ""); // 将颜色样式重置为默认值或继承值

使用样式类修改元素样式

使用场景：当你有一组预定义的CSS类，并希望根据条件动态地添加或删除或切换这些类时。

//添加样式
$("#myElement").addClass("highlight"); // 为ID为myElement的元素添加highlight类
//删除样式
$("#myElement").removeClass("highlight"); // 移除ID为myElement的元素上的highlight类
//切换样式类（如果类存在则删除，如果不存在则添加）
$("#myElement").toggleClass("highlight");

//根据条件添加或删除样式类
// 假设有一个条件变量condition，如果为true则添加类，如果为false则移除类  
var condition = true; // 或者 false  
$("#myElement").toggleClass("highlight", condition);

事件处理

页面加载完成后事件

// 当页面加载完成后执行  
$(document).ready(function() {  
    alert('页面加载完成！');  
});

//可简写为
$(function() {  
    // 这里的代码同样会在DOM加载完成后执行  
    console.log('DOM加载完成');  
});

添加事件

on方法用于绑定一个或多个事件处理函数到选定的元素上。

// 当按钮被点击时，执行函数  
$("#myButton").on("click", function() {  
    alert("按钮被点击了！");  
});

删除事件

off方法用于移除一个或多个事件处理函数。

// 先绑定一个点击事件处理函数  
$("#myButton").on("click", function() {  
    alert("按钮被点击了！");  
});  
  
// 然后移除它  
$("#myButton").off("click");

提交事件

用于绑定表单提交时的事件处理函数，或者提交表单。

//绑定事件处理函数
$("#myForm").submit(function(event) {  
    // 阻止表单的默认提交行为（即不跳转到新页面）  
    event.preventDefault();  
    alert("表单已提交，但页面不会跳转。");  
});

//触发事件
// 假设有一个表单，当某个按钮被点击时自动提交表单  
$("#mySubmitButton").click(function() {  
    $("#myForm").submit();  
});

点击事件

// 绑定事件处理函数
$("#myButton").click(function() {  
    alert("按钮被点击了！");  
});

// 触发事件
// 假设有一个按钮，当页面加载完成后自动触发点击事件  
$(document).ready(function() {  
    $("#myButton").click();  
});

悬停事件

$("#myElement").hover(  
    function() {  
        // 鼠标指针进入元素时执行的函数  
        $(this).css("background-color", "yellow");  
    }, function() {  
        // 鼠标指针离开元素时执行的函数  
        $(this).css("background-color", "white");  
    }  
);

键盘按键事件

绑定键盘按键按下时的事件。

$(document).keydown(function(event) {  
    if (event.keyCode == 13) { // 如果按下的是回车键（键码为13）  
        alert("你按下了回车键！");  
    }  
});

动画效果

// 隐藏一个元素，带有滑动效果  
$('#myElement').slideUp();  
  
// 显示一个元素，带有淡入效果  
$('#myElement').fadeIn();  
  
// 自定义动画  
$('#myElement').animate({  
    opacity: 0.5,  
    left: '+=50',  
    height: 'toggle'  
}, 5000, function() {  
    alert('动画完成！');  
});

Ajax

是什么?

Ajax（Asynchronous JavaScript and XML）是一种用于创建异步 web 请求的技术，它允许在不重新加载整个页面的情况下，从服务器加载数据，并在网页上更新部分内容。

jQuery中的Ajax

jQuery中的Ajax方法是封装后的。jQuery对原生的JavaScript Ajax功能进行了封装，提供了简单易用的 Ajax 方法，使得开发者能够轻松实现复杂的 web 应用。

ajax方法

$.ajax({  
    url: 'example.com/api/data', // 请求的 URL  
    type: 'GET', // 请求类型：GET、POST 等  
    dataType: 'json', // 预期服务器返回的数据类型  
    success: function(data, textStatus, jqXHR) {  
        // 请求成功时调用的函数  
        console.log(data);  
    },  
    error: function(jqXHR, textStatus, errorThrown) {  
        // 请求失败时调用的函数  
        console.error("请求失败: " + textStatus);  
    }  
});

get和post方法

$.get() 和 $.post() 是 $.ajax() 的简化版本，分别用于发送 GET 和 POST 请求。

// 使用$.get发送GET请求  
$.get('example.com/api/data', function(data) {  
    console.log(data);  
});  
  
// 使用$.post发送POST请求  
$.post('example.com/api/submit', { key: 'value' }, function(response) {  
    console.log(response);  
});

getJSON方法

加载 JSON 格式的数据。

$.getJSON('example.com/api/data', function(data) {  
    console.log(data);  
});

getScript方法

加载并执行 JavaScript 文件。

$.getScript('path/to/script.js', function() {  
    console.log('脚本已加载并执行');  
});

load方法

用于将服务器响应直接加载到选定的元素中。

$('#result').load('example.com/api/content #someElement');
/*说明：
#result 是要填充内容的元素
'example.com/api/content #someElement' 是请求的 URL
只加载 #someElement 的内容。*/

PS：当你需要发送表单数据时，可以使用 $.param()来序列化表单数据，或者 serialize() 方法来序列化表单元素本身。

//$.param() 序列化 JavaScript 对象
var data = { key1: 'value1', key2: 'value2' };  
var paramString = $.param(data);  
$.post('example.com/api/submit', paramString, function(response) {  
    // 处理响应  
});

//serialize() 方法来序列化表单元素
var formData = $('#myForm').serialize();  
$.post('example.com/api/submit', formData, function(response) {  
    // 处理响应  
});

与原生JavaScript在功能、性能、易用性等方面的差异

一、功能

JavaScript是一种编程语言，用于在浏览器中实现交互效果，包括动态更新页面内容、响应用户操作等。它提供了丰富的API，可以操作DOM、处理事件、发送网络请求等。

jQuery是一个快速、小巧且功能丰富的JavaScript库。它封装了JavaScript常用的功能和代码，使得开发者可以更方便地操作DOM、处理事件、发送Ajax请求等。此外，jQuery还提供了一些JavaScript没有的高级功能，比如动画效果和链式操作等。

示例：

假设我们有一个id为"myButton"的按钮，当点击这个按钮时，我们想要改变一个id为"myText"的元素的文本内容。

使用原生JavaScript，代码可能如下：

document.getElementById('myButton').addEventListener('click', function() { 
    document.getElementById('myText').innerHTML = 'Hello, jQuery!'; 
});

而使用jQuery，代码可以简化为：

$('#myButton').click(function() { 
    $('#myText').text('Hello, jQuery!'); 
});

从这个例子中可以看出，jQuery通过简洁的语法和强大的选择器，使得开发者可以更方便地操作DOM和处理事件。

二、性能

在性能方面，原生JavaScript通常会比jQuery更快，因为它直接操作浏览器提供的API，没有额外的封装和抽象。而jQuery虽然提供了很多方便的功能，但也因此增加了一些额外的开销。

然而，这种性能差异在大多数情况下并不明显，除非是在处理大量DOM元素或进行复杂的计算时。在大多数情况下，开发者更关注的是代码的易用性和可维护性，而不是微小的性能差异。

三、易用性

在易用性方面，jQuery无疑优于原生JavaScript。jQuery的语法简洁明了，易于学习和使用。它还提供了一套完整的API和文档，使得开发者可以快速地查找和使用需要的功能。

此外，jQuery还具有良好的兼容性，可以在不同的浏览器上运行。开发者能够更专注于实现功能，而不是处理浏览器差异。

PS：jQuery和JavaScript各有其优势和适用场景。对于简单的页面交互和效果，原生JavaScript可能就足够了。而对于更复杂的Web应用和开发任务，使用jQuery可能会更加高效和便捷。

本文链接：https://blog.csdn.net/weixin_46485886/article/details/137399213

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

EBS R12基本概念与应用基础-程序员宅基地

文章浏览阅读1.8k次。摘自： [ORACLE EBS 入门及供应链核心系统详解教程] (书籍)EBS基础功能架构（13个核心模块，业财一体化）业务运营管理，价值增值财务会计管理，价值实现应用架构Finance财务，资金流Accounting财务管理Bisuness业务，实物流核心业务，与财务高度集成；PUR、INV、制造、订单履行等间接业务，or专业业务，为核心业务提供支持；HR..._ebs r12

Java中Date和Timestamp的区别_java date timestamp区别-程序员宅基地

文章浏览阅读838次。转载：https://blog.csdn.net/ccecwg/article/details/39546307_java date timestamp区别

如何用原生js封装一个类似jq的选择器_原声js实现jq元素选择器-程序员宅基地

文章浏览阅读1.4k次。1、我们先了解一下原生js中的选择器ID选择器（在整个文档中获取id为xxx的元素）document.getElementId([ID]);类名选择器（在整个文档中或者在指定上下文中获取类名为xxx的元素）document.getElementsByClassName(' ');[context].getElementsByClassName(' ');标签名选择器（在整个文档中或者..._原声js实现jq元素选择器

Hive中partition by和distribute by区别_partition by distribute by-程序员宅基地

文章浏览阅读1.2k次，点赞3次，收藏4次。通常查询时会对整个数据库查询，而这带来了大量的开销，因此引入了partition的概念，在建表的时候通过设置partition的字段, 会根据该字段对数据分区存放，更具体的说是存放在不同的文件夹,这样通过指定设置Partition的字段条件查询时可以减少大量的开销。1）partition by [key..] order by [key..]只能在窗口函数中使用，而distribute by [key...] sort by [key...]在窗口函数和select中都可以使用。_partition by distribute by

游标（cursor ）是什么？_c# cursor-程序员宅基地

文章浏览阅读7.3k次。Private SQL Area A private SQL area holds information about a parsed SQLstatement and other session-specific information for processing. When a serverprocess executes SQL or PL/SQL code, the process_c# cursor

listview使用的一些心得_listview的使用——购物商城实验心得-程序员宅基地

文章浏览阅读616次。近日在用ListView中的一些注意点，和公用代码，整理如下1.ListView.Items.Clear而不是ListView.Clear一般如果ListView是动态填充的，我们在填充之前都会先进行清理。但需要注意一下，我们是清理Items,如果去直接Clear整个ListView，就连原先定义好的列都没有了2.给ListView绑定数据ListView并不能直接_listview的使用——购物商城实验心得

随便推点

java 注解处理器的作用_深入理解Java：注解（Annotation）--注解处理器-程序员宅基地

文章浏览阅读110次。如果没有用来读取注解的方法和工作，那么注解也就不会比注释更有用处了。使用注解的过程中，很重要的一部分就是创建于使用注解处理器。Java SE5扩展了反射机制的API，以帮助程序员快速的构造自定义注解处理器。注解处理器类库(java.lang.reflect.AnnotatedElement)：Java使用Annotation接口来代表程序元素前面的注解，该接口是所有Annotation类型的父接口..._java注解处理器作用

全国职业技能大赛高职组(最新职业院校技能大赛_大数据应用开发2023国赛样题解析-模块C：实时数据处理-任务二：实时指标计算)_大数据国赛样题-程序员宅基地

文章浏览阅读1.8k次，点赞27次，收藏28次。全国职业技能大赛高职组(最新职业院校技能大赛_大数据应用开发样题解析-模块B：数据采集-任务一：离线数据采集-程序员宅基地。_大数据国赛样题

ssm+mysql+微信小程序疫情防控小程序-计算机毕业设计源码73691_ssm+微信小程序-程序员宅基地

文章浏览阅读926次。本系统分为管理员和注册用户两个角色，主要有疫情新闻、疫情案例介绍、健康信息申报、行程信息申报、就医流程介绍、举报、在线留言、用户管理、信息统计等模块。用户需要先注册成为会员，成功登录后，可以查看网站发布的疫情新闻，可以查看疫情相关病例介绍，有助于疫情防范，还可以查看网站发布的重大疫情案例，了解疫情的发展状况，出行时候好做好防护，同时通过网站可以上报健康信息，以及上报行程信息，方便社区了解自己的出行情况；网站还发布了疫情状态下的就医流程，方便大家就医时候做好准备；同时网站还提供了举报功能，如果发现外来人员或_ssm+微信小程序

Linux 操作系统 022-串口/U盘/共享文件夹-程序员宅基地

文章浏览阅读296次，点赞3次，收藏9次。本节关键字：Linux、centos、串口、U盘、共享文件夹本节相关指令：echo、cat、mkdir、mount

解密C++新特性：内联函数、auto和基于范围的for循环-程序员宅基地

文章浏览阅读1.3k次，点赞45次，收藏29次。本篇主题为：解密C++新特性：内联函数、auto关键字和基于范围的for循环。

上岸整理：2023前端面试题-vue，小程序，js，css_今年的前端面试难不难-程序员宅基地

文章浏览阅读774次，点赞4次，收藏11次。1、浏览器常见的报错信息与含义2、304与204的区别，http缓存，强缓存，协商缓存3、浏览器从输入地址到渲染，经历了什么状态？4、vue的界面渲染，经过哪些过程（生命周期）5、三次握手，四次挥手6、重排与重绘7、用css实现一个三角形8、常见的flex布局，有哪些功能9、用css实现一个水平垂直居中10、null与undefined的区别11、虚拟dom12、深拷贝与浅拷贝13、es6新增的功能15、async await 与promise。_今年的前端面试难不难

JQuery-程序员宅基地

是什么？

为什么需要这个技术？

下载jQuery文件

怎么用？

操作dom元素

前置需要了解

$表示什么？

$("")表示什么？

jQuery中的dom元素是什么？

常用方法

选择器方法

属性操作方法

内容操作方法

CSS操作方法

遍历方法

事件处理方法

动画效果方法

使用层面功能描述

获取元素

通过ID获取元素

通过类名获取元素

通过元素类型获取元素

通过属性获取元素

组合选择器

获取子元素

获取父元素

获取元素的值

获取输入框的值

获取单选框选中的值

获取复选框选中的值

获取下拉框选中的值

获取元素的属性值

获取多行文本的值

获取元素的文本内容

获取元素的HTML内容

设置元素的值

设置输入框的值

设置单选框选中状态

设置复选框选中状态

设置下拉框选中的值

设置元素的属性值

设置多行文本的值

设置元素的文本内容

设置元素的HTML内容

添加元素

往指定元素的内部末尾插入内容

往指定元素之后插入内容

往指定元素之前插入内容

删除元素

删除被选元素及其子元素

删除被选元素的子元素

包装元素

对元素样式的操作

获取元素的样式

设置元素的样式

添加元素的样式

删除元素的样式

使用样式类修改元素样式

事件处理

页面加载完成后事件

添加事件

删除事件

提交事件

点击事件

悬停事件

键盘按键事件

动画效果

相关疑问

text方法疑问

html方法疑问

Ajax

是什么?

jQuery中的Ajax

ajax方法

get和post方法

getJSON方法

getScript方法

load方法

与原生JavaScript在功能、性能、易用性等方面的差异