day31-jQuery

游来游去的 · 发表于 2024-5-6 10:48:54

1、jQuery介绍

jQuery是什么

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等

jQuery的版本

目前在市场上, 1.x , 2.x, 3.x 功能的完善在1.x, 2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码。3.x的时候增加es的新特性以及调整核心代码的结构

jQuery的引入

根本上jquery就是一个写好的js文件,所以想要使用jQuery的语法必须先引入到本地

[/code]
[list]
[*]jQuery对象和dom对象的关系
[/list][code]<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul >
<li>123</li>
<li>234</li>
<li>345</li>
</ul>
</body>
</html>

复制代码

2、jQuery的选择器

2.1、直接查找

基本选择器

/*
#id # id选择符
element # 元素选择符
.class # claw43ss选择符
selector1, selector2, selectorN # 同时获取多个元素的选择符
$("#id")
$(".class")
$("element")
$(".class,p,div")
*/

复制代码

组合选择器

/*
ancestor descendant // 包含选择符
parent > child // 父子选择符
prev + next // 下一个兄弟选择符
prev ~ siblings // 兄弟选择符
$(".outer div")
$(".outer>div")
$(".outer+div")
$(".outer~div")
*/

复制代码

属性选择器

/*
[attribute=value] // 获取拥有指定数据attribute,并且置为value的元素
$('[type="checked"]')
$('[class*="xxx"]')
*/

复制代码

表单选择器

/*
$("[type='text']")----->$(":text") 注意只适用于input标签 : $("input:checked")
同样适用表单的以下属性
:enabled
:disabled
:checked
:selected
*/

复制代码

筛选器

/*
// 筛选器
:first // 从已经获取的元素集合中提取第一个元素
:even // 从已经获取的元素集合中提取下标为偶数的元素
:odd // 从已经获取的元素集合中提取下标为奇数的元素
:eq(index) // 从已经获取的元素集合中提取指定下标index对应的元素
:gt(index) // 从已经获取的元素集合中提取下标大于index对应的元素
:last // 从已经获取的元素集合中提取最后一个元素
:lt(index) // 从已经获取的元素集合中提取下标小于index对应的元素
:first-child // 从已经获取的所有元素中提取他们的第一个子元素
:last-child // 从已经获取的所有元素中提取他们的最后一个子元素
:nth-child // 从已经获取的所有元素中提取他们的指定下标的子元素
// 筛选器方法
$().first() // 从已经获取的元素集合中提取第一个元素
$().last() // 从已经获取的元素集合中提取最后一个元素
$().eq() // 从已经获取的元素集合中提取指定下标index对应的元素
*/

复制代码

2.2、导航查找

/*
// 查找子代标签：
$("div").children(".test")
$("div").find(".test")
<input type="button" value="+" >
<input type="text">
// 向下查找兄弟标签
$(".test").next()
$(".test").nextAll()
$(".test").nextUntil()
<input type="button" value="+" >
<input type="text">
// 向上查找兄弟标签
$("div").prev()
$("div").prevAll()
$("div").prevUntil()
// 查找所有兄弟标签
$("div").siblings()
// 查找父标签：
$(".test").parent()
$(".test").parents()
$(".test").parentUntil()
*/

复制代码

3、jQuery的绑定事件

/*
三种用法:
1. on 和 off
// 绑定事件
$().on("事件名",匿名函数)
// 解绑事件,给指定元素解除事件的绑定
$().off("事件名")
2. 直接通过事件名来进行调用
$().事件名(匿名函数)
3. 组合事件,模拟事件
$().ready(匿名函数) // 入口函数
$().hover(mouseover, mouseout) // 是onmouseover和 onmouseout的组合
$().trigger(事件名) // 用于让js自动触发指定元素身上已经绑定的事件
*/

复制代码

案例1：绑定取消事件

<p>限制每次一个按钮只能投票3次</p>
<button id="zan">点下赞(10)</button>

复制代码

案例2：模拟事件触发

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="file" name="avatar">
<button >上传文件</button>
</body>
</html>

复制代码

4、jQuery的操作标签

文本操作

/*
$("选择符").html() // 读取指定元素的内容,如果$()函数获取了有多个元素,则提取第一个元素
$("选择符").html(内容) // 修改内容,如果$()函数获取了多个元素, 则批量修改内容
$("选择符").text() // 效果同上,但是获取的内容是纯文本,不包含html代码
$("选择符").text(内容) // 效果同上,但是修改的内容中如果有html文本,在直接转成实体字符,而不是html代码
*/

复制代码

value操作

$().val()

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="i1">
<select id="i3">
<option value="hebei">河北省</option>
<option value="hubei">湖北省</option>
<option value="guangdong">广东省</option>
</select>
<p> <textarea name="" id="i2" cols="30" rows="10">123</textarea></p>
</body>
</html>

复制代码

属性操作

/*
//读取属性值
$("选择符").attr("属性名"); // 获取非表单元素的属性值,只会提取第一个元素的属性值
$("选择符").prop("属性名"); // 表单元素的属性,只会提取第一个元素的属性值
//操作属性
$("选择符").attr("属性名","属性值"); // 修改非表单元素的属性值,如果元素有多个,则全部修改
$("选择符").prop("属性名","属性值"); // 修改表单元素的属性值,如果元素有多个,则全部修改
$("选择符").attr({'属性名1':'属性值1','属性名2':'属性值2',.....})
$("选择符").prop({'属性名1':'属性值1','属性名2':'属性值2',.....})
*/

复制代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button >全选</button>
<button >取消</button>
<button >反选</button>
<hr>
<table border="1">
<tr>
<td>选择</td>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>张三</td>
<td>23</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>李四</td>
<td>23</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>王五</td>
<td>23</td>
</tr>
</table>
</body>
</html>

复制代码

css样式操作

/*
获取样式
$().css("样式属性"); // 获取元素的指定样式属性的值,如果有多个元素,只得到第一个元素的值
操作样式
$().css("样式属性","样式值").css("样式属性","样式值");
$().css({"样式属性1":"样式值1","样式属性2":"样式值2",....})
$().css("样式属性":function(){
// 其他代码操作
return "样式值";
});
*/

复制代码

class 属性操作

$().addClass("class1 class2 ... ...") // 给获取到的所有元素添加指定class样式
$().removeClass() // 给获取到的所有元素删除指定class样式
$().toggleClass() // 给获取到的所有元素进行判断,如果拥有指定class样式的则删除,如果没有指定样式则添加

复制代码

tab切换案例jQuery版本：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul >
<li >商品介绍</li>
<li>规格与包装</li>
<li>售后保障</li>
<li>商品评论</li>
</ul>
<ul >
<li>商品介绍...</li>
<li >规格与包装...</li>
<li >售后保障...</li>
<li >商品评论...</li>
</ul>
</body>
</html>

复制代码

节点操作

/*
//创建一个jquery标签对象
$("<p>")
//内部插入
$("").append(content|fn) // $("p").append("<b>Hello</b>");
$("").appendTo(content) // $("p").appendTo("div");
$("").prepend(content|fn) // $("p").prepend("<b>Hello</b>");
$("").prependTo(content) // $("p").prependTo("#foo");
//外部插入
$("").after(content|fn) // ("p").after("<b>Hello</b>");
$("").before(content|fn) // $("p").before("<b>Hello</b>");
$("").insertAfter(content) // $("p").insertAfter("#foo");
$("").insertBefore(content) // $("p").insertBefore("#foo");
//替换
$("").replaceWith(content|fn) // $("p").replaceWith("<b>Paragraph. </b>");
//删除
$("").empty()
$("").remove([expr])
//复制
$("").clone([Even[,deepEven]])
*/

复制代码

案例1：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button >添加节点</button>
<button >删除节点</button>
<button >替换节点</button>
<h3>hello JS!</h3>
<h3 >hello world</h3>
</body>
</html>

复制代码

案例2：clone案例

<input type="button" value="+" >
<input type="text">

复制代码

css尺寸

/*
$("").height([val|fn])
$("").width([val|fn])
$("").innerHeight()
$("").innerWidth()
$("").outerHeight([soptions])
$("").outerWidth([options])
*/

复制代码

css位置

/*
$("").offset([coordinates]) // 获取匹配元素在当前视口的相对偏移。
$("").position() // 获取匹配元素相对父元素的偏移，position()函数无法用于设置操作。
$("").scrollTop([val]) // 获取匹配元素相对滚动条顶部的偏移。
*/

复制代码

案例1：返回顶部

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h3>文章...</h3>
返回顶部
</body>
</html>

复制代码

案例2：位置偏移

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button >offset</button>
</body>
</html>

复制代码

5、jQuery的动画

5.1、基本方法

/*
//基本
show([s,[e],[fn]]) 显示元素
hide([s,[e],[fn]]) 隐藏元素
//滑动
slideDown([s],[e],[fn]) 向下滑动
slideUp([s,[e],[fn]]) 向上滑动
//淡入淡出
fadeIn([s],[e],[fn]) 淡入
fadeOut([s],[e],[fn]) 淡出
fadeTo([[s],opacity,[e],[fn]]) 让元素的透明度调整到指定数值
//自定义
animate(p,[s],[e],[fn]) 自定义动画
stop([c],[j]) 暂停上一个动画效果,开始当前触发的动画效果
*/

复制代码

案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<p>
<button >显示</button>
<button >隐藏</button>
</p>
<p>
<button >显示</button>
<button >隐藏</button>
</p>
<p>
<button >显示</button>
<button >隐藏</button>
</p>
<p>
<button >显示</button>
<button >隐藏</button>
</p>
<hr>
</body>
</html>

复制代码

5.2、自定义动画

$(".box").animate(动画最终效果,动画完成的时间,动画完成以后的回调函数)

复制代码

$(".animate").click(function () {
$(".c1").animate({
"border-radius":"50%",
"top":340,
"left":200
},1000,function () {
$(".c1").animate({
"border-radius":"0",
"top":240,
"left":120
},1000,function () {
$(".animate").trigger("click")
})
})
})

复制代码

6、扩展方法 (插件机制)

jQuery.extend(object)

扩展jQuery对象本身。
用来在jQuery命名空间上增加新函数。
在jQuery命名空间上增加两个函数:

复制代码

jQuery.fn.extend(object)

扩展 jQuery 元素集来提供新的方法（通常用来制作插件）
增加两个插件方法：
<body>
<input type="checkbox">
<input type="checkbox">
<input type="checkbox">
</body>

复制代码

7、BootStrap

Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发，是一个CSS/HTML框架。目前，Bootstrap最新版本为4.4。注意，Bootstrap有三个大版本分别是 v2、v3和v4，我们这里学习最常用的v3。
使用Bootstrap的好处：
Bootstrap简单灵活，可用于架构流行的用户界面，具有友好的学习曲线，卓越的兼容性，响应式设计，12列栅格系统，样式向导文档，自定义JQuery插件，完整的类库，基于Less等特性。
下载

bootstap英文官方: https://getbootstrap.com/
bootstrap中文官网：http://www.bootcss.com/
下载地址: http://v3.bootcss.com/getting-started/#download

注意： Bootstrap提供了三种不同的方式供我们下载，我们不需要使用Bootstrap的源码和 sass项目，只需要下载生产环境的Bootstrap即可。

8、今日作业

（1）表格增删改查

Title
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
Toggle navigation
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
[url=https://www.cnblogs.com/#]Brand[/url]
<input type="button" value="+" >
<input type="text">
[list]
[*][url=https://www.cnblogs.com/#]Link (current)[/url]
[*][url=https://www.cnblogs.com/#]Link[/url]
[*] [url=https://www.cnblogs.com/#]Dropdown [/url]
[list]
<input type="button" value="+" >
<input type="text">
[*][url=https://www.cnblogs.com/#]Action[/url]
<input type="button" value="+" >
<input type="text">
[*][url=https://www.cnblogs.com/#]Another action[/url]
<input type="button" value="+" >
<input type="text">
[*][url=https://www.cnblogs.com/#]Something else here[/url]
<input type="button" value="+" >
<input type="text">
[*]
<input type="button" value="+" >
<input type="text">
[*][url=https://www.cnblogs.com/#]Separated link[/url]
<input type="button" value="+" >
<input type="text">
[*]
<input type="button" value="+" >
<input type="text">
[*][url=https://www.cnblogs.com/#]One more separated link[/url]
[/list]
[/list]
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
Submit
<input type="button" value="+" >
<input type="text">
[list]
[*][url=https://www.cnblogs.com/#]Link[/url]
[*] [url=https://www.cnblogs.com/#]Dropdown [/url]
[list]
<input type="button" value="+" >
<input type="text">
[*][url=https://www.cnblogs.com/#]Action[/url]
<input type="button" value="+" >
<input type="text">
[*][url=https://www.cnblogs.com/#]Another action[/url]
<input type="button" value="+" >
<input type="text">
[*][url=https://www.cnblogs.com/#]Something else here[/url]
<input type="button" value="+" >
<input type="text">
[*]
<input type="button" value="+" >
<input type="text">
[*][url=https://www.cnblogs.com/#]Separated link[/url]
[/list]
[/list]
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
Panel heading without title
<input type="button" value="+" >
<input type="text">
Panel content
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
Panel heading without title
<input type="button" value="+" >
<input type="text">
Panel content
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
Panel heading without title
<input type="button" value="+" >
<input type="text">
Panel content
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
添加员工
<input type="button" value="+" >
<input type="text">
[table]
<input type="button" value="+" >
<input type="text">
[tr] 序号姓名年龄部门操作 [/tr]
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
[tr] [td]1[/td] [td]张三[/td] [td]23[/td] [td]销售部[/td] [td]
<input type="button" value="+" >
<input type="text">
删除
<input type="button" value="+" >
<input type="text">
编辑 [/td] [/tr] [tr] [td]2[/td] [td]李四[/td] [td]23[/td] [td]销售部[/td] [td] 删除
<input type="button" value="+" >
<input type="text">
编辑 [/td] [/tr] [tr] [td]3[/td] [td]王五[/td] [td]23[/td] [td]销售部[/td] [td]
<input type="button" value="+" >
<input type="text">
删除
<input type="button" value="+" >
<input type="text">
编辑 [/td] [/tr]
<input type="button" value="+" >
<input type="text">
[/table]
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
×
<input type="button" value="+" >
<input type="text">
[size=3]Modal title[/size]
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
姓名
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
年龄
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
部门
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
销售部
<input type="button" value="+" >
<input type="text">
运营部
<input type="button" value="+" >
<input type="text">
财务部
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
Close
<input type="button" value="+" >
<input type="text">
Save changes
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">
<input type="button" value="+" >
<input type="text">

复制代码

（2）轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul >
<li><a target="_blank" href="https://www.cnblogs.com/"><img src="https://imgcps.jd.com/ling4/100009077475/5Lqs6YCJ5aW96LSn/5L2g5YC85b6X5oul5pyJ/p-5bd8253082acdd181d02fa71/c3196f74/cr/s/q.jpg" alt=""></a></li>
<li ><a target="_blank" href="https://www.cnblogs.com/"><img src="https://img12.360buyimg.com/pop/s590x470_jfs/t1/178599/8/1142/28979/6087858aE1679d862/173e0cfa2612b705.jpg.webp" alt=""></a></li>
<li ><a target="_blank" href="https://www.cnblogs.com/"><img src="https://imgcps.jd.com/ling4/6038430/5Lqs5Lic5aW954mp57K-6YCJ/MuS7tjjmipgz5Lu2N-aKmA/p-5bd8253082acdd181d02fa42/9ea6716c/cr/s/q.jpg" alt=""></a></li>
<li ><a target="_blank" href="https://www.cnblogs.com/"><img src="https://img12.360buyimg.com/pop/s1180x940_jfs/t1/174771/34/8431/98985/6095eaa2E8b8b4847/044f1b6318db4a9f.jpg.webp" alt=""></a></li>
<li ><a target="_blank" href="https://www.cnblogs.com/"><img src="https://img11.360buyimg.com/pop/s1180x940_jfs/t1/180648/29/4209/88436/609f7547Ec7b73259/74a4d25e8d614173.jpg.webp" alt=""></a></li>
</ul>
<ul >
<li ></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul >
<li > < </li>
<li > > </li>
</ul>
</body>
</html>

复制代码

来源:https://www.cnblogs.com/sbhglqy/p/18171092
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】我们会及时删除侵权内容，谢谢合作！

day31-jQuery

本帖子中包含更多资源