jQuery
1.简介：
jQuery是一个快速、简洁的 框架，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装 常用的功能代码，提供一种简便的 设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
2.jQuery的核心特性：
1）具有独特的链式语法和短小清晰的多功能接口；
2）具有高效灵活的css选择器，并且可对CSS选择器进行扩展；
3）拥有便捷的插件扩展机制和丰富的插件。
jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
1.如何使用
在项目中导入jquery的.js文件，并且在<head></head>标签中导入
例：
<head>
<!--一般把.js文件放到一个js文件夹中-->
< src=\"路径/js文件名\"></ >
</head>
2.选择器
2.1.基本选择器
格式：
#id值：根据给定的ID匹配一个元素
.class值：根据给定的css类名匹配元素
标签名：根据给定的元素标签名匹配所有元素
例：
<div id=\"a1\" class=\"b1\">内容1</div>
<p id=\"a2\" class=\"b2\">内容2</p>
<span id=\"a3\" class=\"b3\">内容3</span>
<style>
#a1 {background-color: blue}
.b2 {background-color: burlywood}
span {background-color: red}
</style>
效果展示：
![\"在这里插入图片描述\"](\"/images/csdn/154504486715450z4M4r8467.png\")
2.2. 层级选择器
格式：
祖先后代选择：ancestor descendant
父子选择器：parent > child
例：
<form>
<div>
<p>内容1</p>
<span>内容2</span>
</div>
<p>内容3</p>
</form>
<style>
/*后代选择器*/
form p{background-color: red}
</style>
效果展示：
<style>
/*父子选择器*/
form > p{background-color: red}
</style>
效果展示：
2.3.筛选器
:first 找到结果中的第一个
:last 找到结果中的最后一个
:eq(n) 找第n个元素（n从0开始）
:odd 找下标为奇数
:even 找下标为偶数
:gt(n) 下标大于n的
:lt(n) 下标小于n
:not() 取反
例:
$(\"tr:first\").css(\"color\",\"red\"); //选择tr元素中第一个元素
$(\"tr:last\").css(\"color\",\"red\"); //选择tr元素中第二个元素
$(\"tr:eq(2)\").css(\"color\",\"red\"); //选择tr元素中索引为2的一个元素
$(\"tr:odd\").css(\"color\",\"red\"); //选择tr元素中索引为奇数的所有元素
$(\"tr:even\").css(\"color\",\"red\"); //选择tr元素中索引为偶数的所有元素
$(\"tr:gt(3)\").css(\"color\",\"red\"); //选择tr元素中索引大于3的所有元素
$(\"tr:lt(3)\").css(\"color\",\"red\"); //选择tr元素中索引小于3的所有元素
$(\"p:not(p:first)\").css(\"color\",\"red\"); //除了第一个段落以外的其它段落
$(\":not(p:first)\").css(\"color\",\"red\"); //除了第一个段落以外的其它所有标签
2.4.属性选择器
$(\"input\"); //选中所有的input
$(\"input[name]\"); //选中有name属性的input
$(\"input[name=a]\"); //选中有name属性，并且值为a的input
$(\"input[type=button][name=a]\"); //type为button且name为a的input
2.5.子元素选择器
:nth-child(n) // 该元素是作为第几个子元素，n从1开始,
:first-child // 作为第一个孩子
:last-child // 作为最后一个孩子
例：
$(\"td:nth-child(1)\").css(\"color\",\"red\"); // 选中表格中第一列
$(\"td:nth-child(4)\").css(\"color\",\"red\"); // 选中表格中第四列
$(\"td:first-child\").css(\"color\",\"red\"); // 选中表格中第一列
$(\"td:last-child\").css(\"color\",\"red\"); // 选中表格中最后一列
2.6.表单选择器
input[type=button] // 匹配所有的按钮
:button // 匹配所有的按钮
:radio // 匹配所有的单选按钮
:password // 匹配所有的密码框
:checkbox // 匹配所有的复选框
:submit // 匹配所有的提交按钮
:reset // 匹配所有的重置按钮
:checked // 单选框或复选框是否被选中
:checkbox:checked // 找到被选中的复选框
3.对标签执行的操作
3.1.修改内容
.text(); // 获取标签的内容，功能上等价于：innerText;
.text(新内容); // 将标签的内容改为新的，功能上等价于：innerText;
.html(); // 获取标签内容，功能上等价于：innerHTML
.html(新内容); // 将标签的内容改为新的，功能上等价于：innerHTML
.empty(); // 清空内容, 不删除标签
例：
$(\"p\").text(); //把获取标签p的内容
$(\"p\").text(11); //把标签p的内容全部修改为11
$(\"p\").html(); //把获取标签p的内容
$(\"p\").html(11); //把标签p的内容全部修改为11
$(\"p\").empty(); //清空标签p的内容
3.2.添加元素
.append(\"内容\"); // 在被选中元素结尾插入内容
.prepend(\"内容\"); // 在被选中元素开头插入内容
.after(\"内容\"); // 在被选中元素之后插入内容
.before(\"内容\"); // 在被选中元素之前插入内容
3.3.删除元素
.empty(); // 清空标签体
.remove(); // 删除整个标签(移除绑定事件和绑定数据）
.detach(); // 删除当前对象(保留绑定事件和绑定数据)
例：
$(\"#a1\").empty(); // 删除id为a1的标签的内容
$(\"#a1\").remove(); // 删除id为a1的标签(移除绑定事件和绑定数据）
$(\"#a1\").detach(); // 删除id为a1的标签(保留绑定事件和绑定数据)
3.4.修改属性
.prop(\"属性名\"); // 获取属性的值
.prop(\"属性名\", \"新值\"); // 修改属性
.val(); // 获取value属性的值
.val(新值); // 修改value属性的值
例：
$(\"#b1\").prop(\"value\"); // 获取标签id为b1的value
$(\"#b1\").prop(\"value\",\"11\"); // 把标签id为b1的value改为11
$(\"#b1\").val(); // 获取标签id为b1的value属性的值
$(\"#b1\").val(11); // 修改标签id为b1的value属性的值为11
3.5.样式属性
.addClass(\"样式\"); // 向被选元素添加一个或多个类
.removeClass(\"样式\"); // 从被选元素删除一个或多个类
.css(\"样式名\", \"样式值\"); // 操作的是style属性, 修改一个style样式
.css(\"样式名\"); // 操作的是style属性, 获取一个style样式值
例：
.a
{
font-family: 楷体;
}
.b
{
color:blue;
}
$(\"p\").addClass(\"a\");
$(\"div\").addClass(\"a b\");
$(\"div\").removeClass(\"blue\");
$(\"p\").css(\"background-color\");
$(\"p\").css(\"background-color\",\"red\");
$(\"p\").css({\"background-color\":\"red\",\"font-family\":\"楷体\"});
3.6.尺寸
.width(); // 设置或返回元素的宽度（不包括内边距、边框或外边距）
.innerWidth(); // 宽度 = 内容宽度+ 内间距宽度
.outerWidth(); // 宽度 = 内容宽度+ 内间距宽度 + 边框宽度
.height(); // 设置或返回元素的高度（不包括内边距、边框或外边距）
.innerHeight(); // 高度 = 内容高度+ 内间距高度
.outerHeight(); // 高度 = 内容高度+ 内间距高度 + 边框高度
$(window) // 把原始的window对象,包装成了jquery的window对象,就具备了jquery中的方法
$(window).width(); // 窗口的宽
$(window).height();// 窗口的高
3.8.效果
3.7.1.显示隐藏
.hide(毫秒值); // 会有动画效果，动画效果会持续该毫秒值
.show(毫秒值); // 会有动画效果，动画效果会持续该毫秒值
.toggle(毫秒值); // 切换显示与隐藏的效果（显示被隐藏的元素，隐藏已显示的元素）
3.7.2.淡入淡出
.fadeIn(毫秒值); // 淡入已隐藏的元素
.fadeOut(毫秒值); // 淡出可见元素
.fadeToggle(毫秒值); // 如果元素已淡出，则添加淡入效果;如果元素已淡入，则添加淡出效果
3.7.3.滑动
.slideUp(毫秒值); // 向上滑动元素
.slideDown(毫秒值); // 向下滑动元素
.slideToggle(毫秒值); // 如果元素向下滑动，则可向上滑动它们;如果元素向上滑动，则可向下滑动它们
3.7.3.动画
.animate({样式对象}, 动画时间); // 其中样式对象，表示动画结束时的坐标
$(\"div:first\").animate({left:100}, 2000);
4.创建
方法1：
$(\"<input>\").prop(\"type\", \"button\").val(\"按钮\").appendTo(\"body\"); // 把<input type=\"button\" value=\"按钮\">追加到body后，作为body的子元素
//等价于
var input = document.createElement(\"input\");
input.type = \"button\";
input.value = \"按钮\";
document.body.appendChild(input);
方法2：
$(\'<input type=\"button\" value=\"按钮\">\').appendTo(\"body\"); // 根据整段的html创建按钮
5.添加事件
<input type=\"button\" value=\"按钮\" =\"函数名()\">
例：
$(选择器).事件方法(匿名函数);
$(选择器).click(function(){ 要执行的代码 });
注：
1）把 标签放在body的最后
2）利用jquery提供的ready事件
否则，执行时会找不到body中尚未解析的标签
ready 事件：
//两种写法等价
$(document).ready(function(){ ... });
$(function(){ ... });
事件类型:
$(选择器).click(...); //单击
$(选择器).dblclick(...); // 双击
$(选择器).keydown(...); // 键盘按钮按下
$(选择器). keyup(...); // 键盘按钮松开
$(选择器).mouseover(...); // 鼠标移入
$(选择器).mouseout(...); // 鼠标移出
$(选择器).submit(...); // 提交表单
继续阅读与本文标签相同的文章
-
草图大师怎么垂直旋转？su软件垂直旋转模型的方法
2026-05-18栏目： 教程
-
数字技术让“诗和远方”融为一体
2026-05-18栏目： 教程
-
“成人网站”免费让人上钩，其背后有什么不为人知的猫腻，网友：不敢惹
2026-05-18栏目： 教程
-
网络互连技术之路由协议
2026-05-18栏目： 教程
-
信息技术助力物流行业转型升级
2026-05-18栏目： 教程