jQuery其他操作与bootstrap框架
标签操作
样式操作
class属性操作
| jQuery语法 | 相当于DOM | 描述 |
|---|---|---|
| addClass() | classList.add() | 添加class属性值 |
| removeClass() | classList.remove() | 移除class属性值 |
| hasClass() | classList.contains() | 查询是否有class属性值 |
| toggleClass() | classList.toggle() | 如果已有属性值，那么删除；如果没有这个属性值，那么添加； |
css操作
jQuery里操作css样式的语法更为简单
标签对象.css(属性,值) // 等价于DOM中：标签对象.style.属性 = 值
如：设置第一个p标签颜色为红色
$('p:first').css('color', 'red')
// 等价于DOM中：document.getElementsByTagName('p')[0].style.color = 'red'
位置操作
| 方法 | 描述 |
|---|---|
| scrollTop() | 获取匹配元素相对滚动条顶部的偏移 |
| scrollLeft() | 获取匹配元素相对滚动条左侧的偏移 |
| position() | 获取匹配元素相对父元素的偏移 |
| offset() | 获取匹配元素在当前窗口的相对偏移或设置元素位置 |
常用操作
$(window).scrollTop() // 获取滚动条距离顶端的偏移量
实时监测距离顶部的距离：
$(window).scroll(function () {
if($(window).scrollTop() > 600){
alert('超过600了 架不住了')
}
})
文本值操作
| jQuery语法 | 描述 | 相当于DOM |
|---|---|---|
| text() | 只获取文本 | innerText |
| html() | 获取文本和标签 | innerHTML |
| val() | 获取标签的value值 | value |
如果括号内不写值，那么就是获取；如果括号内写了值，那么就是设置。
属性操作
| 方法 | 描述 |
|---|---|
| attr(属性名) | 返回第一个匹配元素的属性值 |
| attr(属性名, 属性值) | 为所有匹配元素设置一个属性值 |
| attr({属性1: 值1, 属性2:值2}) | 为所有匹配元素设置多个属性值 |
| removeAttr(属性名) | 从每一个匹配的元素中删除一个属性 |
| prop(属性名) | 动态返回第一个匹配元素的布尔值 |
| prop(属性名,属性值) | 动态为所有匹配元素设置一个属性值 |
attr在对一些动态属性时，不建议使用，比如单选框、复选框，网页选择更改时，attr获取的属性值并不会更改。
所以再对一些动态属性时，可以使用prop动态获取和设置。
文档处理
| 方法 | 描述 |
|---|---|
| $(A).append(B) | 把B追加到A内容的末尾 |
| $(A).prepend(B) | 把B放在A内容的最前面 |
| $(A).after(B) | 让B跟在A后 |
| $(A).before(B) | 把B放到A的前面 |
| $(A).empty() | 清空A的内容 |
| $(A).clone() | 克隆A，参数为true会同时克隆事件 |
事件操作
常见事件
| 事件 | 描述 |
|---|---|
| click() | 单击事件 |
| dbclick() | 双击事件 |
| hover() | 鼠标指针悬停事件和鼠标指针离开事件 |
| focus() | 聚焦事件 |
| blur() | 失焦事件 |
绑定方式
// 第一种
$().click(function(){
})
// 第二种
$().on('click',function(){
})
克隆案例
<button id="d1">克隆按钮</button>
<script>
$('#d1').click(function () {
// $('body').append($(this).clone()) // 不克隆事件
$('body').append($(this).clone(true)) // 克隆事件
})
</script>
悬浮事件hover()
hover()有两次触发条件：鼠标悬浮和鼠标移开，如果要使这两个事件有不同操作，需要写两个函数。
$('p').hover(
function () { // 悬浮触发
this.style.color = 'red'
},
function () { // 移走触发
this.style.color = 'black'
}
)
监听input输入值事件
<input type="text" id="i1">
<script>
$('#i1').on('input',function () {
console.log($(this).val())
})
</script>
阻止后续事件
如果给已经有事件的标签绑定事件，那么会依次执行；比如form表单中的重置按钮已经有了一个重置的事件。
如果想要取消后续事件的执行，可以使用两种方式阻止：
方式一：函数返回false
$('#d1').click(function () {
alert(123)
return false // 取消当前标签对象后续事件的执行
})
方式二：使用特殊方法
$('#d1').click(function (e) {
alert(123)
e.preventDefault()
})
事件冒泡概念
在多个标签嵌套的并且都有相同事件的情况下，会出现逐级汇报的现象，称为事件冒泡。
事件委托
针对动态创建的标签，提前写好的事件默认是无法生效的。比如我先给所有p标签设置了单击事件，打开网页后添加的p标签都是没有单击事件的。
这时候就需要用到事件委托：把一个标签里的一个事件都委托给子标签。
// 将body内所有的点击事件交给p标签处理
$('body').on('click', 'p', function (){
$(this).css('color','red')
})
动画效果
| 动画(speed单位毫秒) | 描述 |
|---|---|
| hide(speed) | 以左上角为终点消失 |
| show(speed) | 以左上角为起点出现 |
| slideUp(speed) | 以顶部为终点收起 |
| slideDown(speed) | 以顶部为起点展开 |
| fadeIn(speed) | 淡入 |
| fadeOut(speed) | 淡出 |
| animate() | 自定义动画 |
自定义动画实现点赞效果：
点赞动画示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="x-ua-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>点赞动画示例</title>
<style>
div {
position: relative;
display: inline-block;
}
div>i {
display: inline-block;
color: red;
position: absolute;
right: -16px;
top: -5px;
opacity: 1;
}
</style>
</head>
<body>
<div id="d1">点赞</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$("#d1").on("click", function () {
var newI = document.createElement("i");
newI.innerText = "+1";
$(this).append(newI);
$(this).children("i").animate({
opacity: 0
}, 1000)
})
</script>
</body>
</html>
bootstrap框架
bootstrap框架内部提供了很多好看的标签样式和功能，我们只需要在编写时给标签加上class属性值就可以使用样式了。
在使用bootstrap框架之前，需要导入css、js，如果要使用动态效果还需要jQuery。
详情：全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
布局容器
| class值 | 作用 |
|---|---|
| container | 固定宽度并在页面居中，两边留有空白 |
| container-fluid | 宽度占满页面 |
栅格系统
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
| class值 | 作用 |
|---|---|
| row | 默认开设一行均分12份 |
| col-md-1 | 占一行的1/12 |
| col-md-2 | 占一行的2/12 |
| ... | ... |
| col-md-12 | 占一行的12/12 |
| 偏移量 | |
| col-md-offset-1 | 向右偏移1/12 |
| col-md-offset-2 | 向右偏移2/12 |
| ... | .. |
| col-md-offset-12 | 向右偏移12/12 |
| 其他设备 | |
| col-xs- | 超小屏幕 手机 (<768px) |
| col-sm- | 小屏幕 平板 (≥768px) |
| col-md- | 中等屏幕 桌面显示器 (≥992px) |
| col-lg- | 大屏幕 大桌面显示器 (≥1200px) |
表格样式
链接：表格样式官网说明
| class值 | 作用 |
|---|---|
| table | 美化表格 |
| table-hover | 每一行对鼠标悬停状态作出响应 |
| table-striped | 每一行增加斑马条纹样式 |
| table-bordered | 为表格和其中的每个单元格增加边框 |
| table-condensed | 表格更加紧凑 |
| 状态类 | 通过这些状态类可以为行或单元格设置颜色 |
| active | 鼠标悬停在行或单元格上时所设置的颜色 |
| success | 标识成功或积极的动作（浅绿） |
| info | 标识普通的提示信息或动作（浅蓝） |
| warning | 标识警告或需要用户注意（淡黄） |
| danger | 标识危险或潜在的带来负面影响的动作（淡红） |
表单样式
链接：表单样式官网说明
| class值 | 作用 |
|---|---|
| form-control | 设置宽度为100%并美化 |
按钮
链接：按钮详细说明
| class值 | 作用 |
|---|---|
| btn | 按钮样式 |
| 颜色 | |
| btn-default | 默认样式 |
| btn-primary | 蓝色（首选项） |
| btn-success | 绿色（成功） |
| btn-info | 浅蓝（一般信息） |
| btn-warning | 黄色（警告） |
| btn-danger | 红色（危险） |
| 尺寸 | |
| btn-lg | 大按钮 |
| btn-sm | 小按钮 |
| btn-xs | 超小尺寸 |
| btn-block | 拉伸至父元素100%的宽度，并变为了块级元素 |
图片
链接：图片详细说明
| class值 | 作用 |
|---|---|
| img-rounded | 图片四个角变圆滑 |
| img-circle | 图片border-radius设为50% |
| img-thumbnail | 图片有个边框 |
组件
链接：组件
更多图标：http://www.fontawesome.com.cn/
JS效果
链接：JS效果
练习
1.编写一个回到顶部的案例
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<!-- <script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>-->
<!-- <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">-->
<style>
.d1 {
height: 600px;
width: 200px;
background-color: #1b6d85;
}
.d2 {
height: 600px;
width: 200px;
background-color: salmon;
}
.d3 {
height: 600px;
width: 200px;
background-color: aqua;
}
#d4 {
width: 40px;
height: 40px;
background-color: #bce8f1;
position: fixed;
right: 50px;
bottom: 100px;
padding: 5px;
text-align: center;
display: none;
}
#d4:hover {
background-color: #2e6da4;
}
</style>
</head>
<body>
<div class="d1">
</div>
<div class="d2">
</div>
<div class="d3">
</div>
<div id="d4">返回顶部</div>
<script>
$(window).scroll(function () {
if ($(window).scrollTop() > 600) {
$('#d4').fadeIn(1000)
}
})
$('#d4').click(function () {
$(window).scrollTop(0)
$(this).fadeOut(1000)
})
</script>
</body>
</html>
2.编写一个简易版本的全选功能，扩展:反选 取消等功能
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
</style>
</head>
<body>
<form action="">
<input id="all" type="checkbox">全选
<input class="c1" type="checkbox">1
<input class="c1" type="checkbox">2
<input class="c1" type="checkbox">3
</form>
<script>
$('#all').on('input', function () {
if ($(this).prop('checked') === true) {
$('.c1').prop('checked', 'checked')
} else {
$('.c1').prop('checked', null)
}
})
$('.c1').on('input', function () {
for(var i = 0;i < $('.c1').length;i++) {
if ($('.c1')[i].checked === false) {
$('#all').prop('checked', null)
return
}
}
$('#all').prop('checked', 'checked')
})
</script>
</body>
</html>
3.编写一个删除单元格的功能
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.min.css">
<style>
</style>
</head>
<body>
<div class="container">
<table class="table table-striped table-hover table-bordered">
<thead>
<tr class="row">
<th class="col-md-3">编号</th>
<th class="col-md-3">姓名</th>
<th class="col-md-3">年龄</th>
<th class="col-md-3">操作</th>
</tr>
</thead>
<tbody class="tbody">
<tr class="row" id="tbody-tr">
<td class="col-md-3">1</td>
<td class="col-md-3">tom</td>
<td class="col-md-3">18</td>
<td class="col-md-3"><button class="btn add">添加</button> <button class="btn delete">删除</button></td>
</tr>
</tbody>
</table>
</div>
<script>
var row = 1
$('.add').click(function () {
$('.tbody').append($(this).parent().parent().clone(true))
row++
})
$('.delete').click(function () {
if(row === 1) {
alert('别删了，再删就没了！')
return
}
$(this).parent().parent().empty()
row--
})
</script>
</body>
</html>
jQuery其他操作与bootstrap框架的更多相关文章
- jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架
jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...
- python操作三大主流数据库(4)python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示
python操作mysql④python服务端flask和前端bootstrap框架结合实现新闻展示 参考文档http://flask.pocoo.org/docs/0.11/http://flask ...
- Sublime text代码补全插件(支持Javascript、JQuery、Bootstrap框架)
Sublime text代码补全插件(支持Javascript.JQuery.Bootstrap框架) 插件名称:javascript-API-Completions 支持Javascript.J ...
- Web前端学习笔记：Bootstrap框架
很久之前就有很多人给我推荐twitter的Bootstrap框架,但是直到前几天我才真正学习了下Bootstrap,的确是相当棒的框架,至少从视觉体验上超越了很多以前碰到了前端UI框架.今天我要聊聊B ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- Bootstrap框架(基础篇)
本文引用慕课网http://www.imooc.com/learn/141 作者大漠 讲的很详细,我没有全篇都引用,其中很多是添加了自己的一些理解. Bootstrap框架是基于JQuery 所以 ...
- python全栈开发day51-jquery插件、@media媒体查询、移动端单位、Bootstrap框架
一.昨日内容回顾 技术行业 (1)ajax技术 XMLHttpRequest() <1>创建XMLHttpRequest()对象 <2>检测状态(通过readyState的改变 ...
- Bootstrap 框架、插件
Bootstrap,前端工程师比较常用的框架.插件,根据它的定义,我们不妨这样理解,Bootstrap就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自 ...
- 如何使用bootstrap框架
Bootstrap是前端工程师比较常用的框架.插件,根据它的定义,Bootstrap就是用于前端开发的一个模板,就是别人做好了我们直接可以搬过来直接使用或者根据自己需要略加修改设计自己的页面效果的成品 ...
随机推荐
- fetch和axios区别，摘自Stack Overflow网站答案
fetch 请求let url = 'https://someurl.com'; let options = { method: 'POST', mode: 'cors', headers: { 'A ...
- /application/zabbix/sbin/zabbix_server: error while loading shared libraries: libmysqlclient.so.20: cannot open shared object file: No such file or directory
在启动/usr/local/zabbix/sbin/zabbix_server 时报错如下 此时需要配置一个软连接指向该位置. ln -s /usr/local/mysql/lib/libmysqlc ...
- 痞子衡嵌入式：大话双核i.MXRT1170之单独在线调试从核工程的方法(IAR篇)
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家分享的是i.MXRT1170下单独在线调试从核工程的方法(基于IAR). 两年前痞子衡写过一篇<双核i.MXRT1170之Cortex-M ...
- Python Windows 快捷键自动给剪贴板（复制）图片添加水印
编写一个能在windows上使用的按下快捷键自动给剪贴板(复制)的图片添加水印的小工具.plyer.PIL.pyinstaller.pynput.win32clipboard库.记录自己踩过的坑,部分 ...
- OpenHarmony 3.1 Beta 版本关键特性解析——ArkUI canvas组件
(以下内容来自开发者分享,不代表 OpenHarmony 项目群工作委员会观点) 江英杰 华为技术有限公司 canvas 是 ArkUI 开发框架里的画布组件,常用于自定义绘制图形.因为其轻量.灵活. ...
- 罗马数字转整数，Java执行时间超过100%用户的写法
执行用时:2 ms, 在所有 Java 提交中击败了100.00%的用户 题目 https://leetcode-cn.com/problems/roman-to-integer 罗马数字包含以下七种 ...
- XCTF练习题---CRYPTO---告诉你个秘密
XCTF练习题---CRYPTO---告诉你个秘密 flag:TONGYUAN 步骤解读: 1.观察题目,下载附件 2.打开附件,内容好像有点像十六进制,先进行一下十六进制转换,得到一串字符 网址:h ...
- Linux C++ Reactor模式
文件结构 reactor_main.cpp reactor_server.cpp reactor_server.h CMakeLists.txt CMakeLists.txt cmake_minimu ...
- VSCODE调试时在cygwin.S中发生段错误
起因: C++实现矩阵类和向量类 当看了我实现的矩阵类后,一个同学问我: 然后我就试了试1000维,结果运行时在cygwin.S里引发了奇奇怪怪的Segmentation fault,而且这个文件还是 ...
- Metalama简介5.配合VisualStudio自定义重构或快速操作功能
使用基于Roslyn的编译时AOP框架来解决.NET项目的代码复用问题 Metalama简介1. 不止是一个.NET跨平台的编译时AOP框架 Metalama简介2.利用Aspect在编译时进行消除重 ...