JQuery

最新推荐文章于 2023-07-07 14:28:52 发布

Will1997

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量140

点赞数

分类专栏： JavaEE学习总结

本文链接：https://blog.youkuaiyun.com/qq_42371269/article/details/82286011

版权

JavaEE学习总结专栏收录该内容

23 篇文章

订阅专栏

本文介绍了 JQuery 这一流行的 JavaScript 框架的基本用法，涵盖了版本选择、基本选择器、层级选择器、筛选器等多种实用技巧，帮助读者快速掌握如何使用 JQuery 操作 DOM 和实现网页交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JQuery: 流行的 js 框架

1）版本
1.x 兼容性更好，支持很多旧的浏览器， ie6,ie7
3.x 更新，体积更小

2）使用

<head>

<head>

3) JQuery API 所有的函数名都以 $ 命名

（1）基本选择器: #id .class 元素

格式: $(" 选择器 ")

$(" * ") : 选择所有的标签

$(" 选择器1 ，选择器2 ，... ") : 多个选择器并用

（2）层级选择器
`空格` 祖先后代选择
`>` 父子选择器

格式： $("祖先标签后代标签 ")

$("父标签 > 子标签 ")

（3）筛选器 $ (" 筛选器 ")
标签:first 找到结果中的第一个
:last 找到结果中的最后一个
:eq(n) 找第n个元素（n从0开始）
:odd 找下标为奇数的
:even 找下标为偶数的
:gt(n) 下标大于n的
:lt(n) 下标小于n的
p:not(p:first) 取反除了第一个段落以外的其它段落
:not(p:first) 取反除了第一个段落以外的其它所有标签

（4）属性选择器
$("input[name]"); // 选中有name属性的input
$("input[name=aaa]"); // 选中有name属性，并且值为aaa的input
可以同时匹配多个属性
$("input[type=button][name=aaa]"); // 必须type是按钮，并且name为aaa的input

（5）子元素选择器
标签:nth-child(n) // 该元素是作为第几个子元素，n从1开始,
:first-child // 作为第一个孩子
:last-child // 作为最后一个孩子
例：
$("td:nth-child(1)") // 选中表格中第一列
$("td:nth-child(4)") // 选中表格中第四列

（6）表单选择器
input[type=button] 等价于 :button // 匹配所有的按钮
:radio // 单选按钮
:password // 密码框
:checkbox // 复选框
:submit // 提交按钮
:reset // 重置按钮
:checked // 单选框或复选框是否被选中
例：
$(" :checkbox:checked ") // 找到被选中的复选框

(7) 对标签执行的操作

1：修改标签的内容：
.text(); // 获取标签的内容，功能上等价于：innerText;
.text(新内容); // 将标签的内容改为新的，功能上等价于：innerText;
.html(); // 获取标签内容功能上等价于：innerHTML
.html(新内容); // 将标签的内容改为新的功能上等价于：innerHTML
.empty(); // 清空内容, 不删除标签

2：删除标签
.remove(); // 删除整个标签，功能上等价于子标签.parentNode.removeAttribute(子标签);

3：修改属性
.prop("属性名"); // 获取属性的值
.prop("属性名", "新值"); // 修改属性

.val(); // 获取value属性的值
.val(新值); // 修改value属性的值

4：样式属性
// 推荐用class的方式操作样式
.addClass("样式"); // 操作的标签的class属性, 添加一个class值
.removeClass("样式"); // 操作的标签的class属性, 移除一个class值

.css("样式名", "样式值"); // 操作的是style属性, 修改一个style样式
.css("样式名"); // 操作的是style属性, 获取一个style样式值

5：显示隐藏
.hide() 隐藏标签 // 操作的是style标签：加了display:none;
.show() //显示标签
.toggle() //切换显示与隐藏的效果

.hide(毫秒值); // 会有动画效果，动画效果会持续该毫秒值 .slideUp(); .fadeOut();
.show(毫秒值); // 会有动画效果，动画效果会持续该毫秒值 .slideDown(); .fadeIn();

6: 尺寸
.width(); // 仅包括内容部分的宽度
.innerWidth(); // 宽度 = 内容宽度+ 内间距宽度
.outerWidth(); // 宽度 = 内容宽度+ 内间距宽度 + 边框宽度

.height(); //内容部分的高度
.innerHeight(); // 高度 = 内容高度 + 内间距高度
.outerHeight(); // 高度 = 内容高度 + 内间距高度 + 边框高度

$(window) // 把原始的window对象，包装成了jquery的window对象，就具备了jquery中的方法

$(window).width(); // 窗口的宽
$(window).height();// 窗口的高

7：动画方法

.animate({样式对象}, 动画时间); // 其中样式对象，表示动画结束时的坐标
例： $("div:first").animate({left:100}, 2000);

（8）创建标签：

方法1：添加属性添加值添加到 body 标签里
$("<input>").prop("type", "button").val("按钮").appendTo("body"); // 追加到body, 作为body的子元素
// 链式调用, 大部分方法返回都是this

方法2：

$(' < input type="button" value="按钮"> ').appendTo("body"); // 根据整段的html创建按钮

（9）添加事件： jquery中添加事件，是先用选择器找到要加事件的标签
格式： $(选择器).事件方法(匿名函数);

例： $(选择器).click(function(){ 要执行的代码 }); //单击 $(选择器).dblclick(...); // 双击
$(选择器).mouseover(...); // 鼠标移入
$(选择器).mouseout(...); // 鼠标移出

注意：整个html的解析顺序，script 如果放在head部分，执行时会找不到body中尚未解析的标签

解决办法：

方式一：把script 标签放在body的最后

方式二： $(document).ready(function(){ ... }); // ready 事件：会在所有html标签加载完成后触发

$(function(){ ... }); // 等价写法