前端学习笔记
今日内容概要
- 筛选器方法
- 操作标签
- jQuery绑定事件
- 阻止后续事件
- 事件委托
- Bootstrap框架
今日内容详细
筛选器方法
链式操作的底层原理:
对象调用方法之后还会返回一个对象,这个对象继续调用方法从而实现链式操作的效果
方法 | 说明 |
---|---|
$().next() | 同级别往下查找一个 |
$().nextAll() | 同级别往下查找所有 |
$().nextUntil("选择器") | 同级别往下查找所有,直到满足选择器条件 |
$().prev() | 同级别往上查找一个 |
$().prevAll() | 同级别往上查找所有 |
$().prevUntil("选择器") | 同级别往上查找所有,直到满足选择器条件 |
$().parent() | 查找一个父标签 |
$().parents() | 查找所有父标签(一直向上一个级别查找) |
$().parentsUntil("选择器") | 查找所有父标签,直到满足选择器条件 |
$().children() | 查找儿子标签 |
$().siblings() | 同级别上下所有标签(兄弟标签) |
操作标签
class操作
jQuery操作 | 说明 | JS操作 |
---|---|---|
addClass() | 添加指定的css类名 | classList.add() |
removeClass() | 移除指定的css类名 | classList.remove() |
hasClass() | 判断样式存不存在 | classList.contains() |
toggleClass() | 切换css类名,如果有就移除,没有就添加 | classList.toggle() |
样式操作
jQuery操作 | 说明 | JS操作 |
---|---|---|
.css('样式名','样式值') | 设置样式的格式 | style.样式名 = '样式值' |
位置操作
jQuery操作 | 说明 |
---|---|
offset() | 获取匹配元素在当前窗口的相对偏移或设置元素位置 |
position() | 获取匹配元素相对父元素的偏移 |
scrollTop() | 获取匹配元素相对滚动条顶部的偏移 |
scrollLeft() | 获取匹配元素相对滚动条左侧的偏移 |
.offset()
方法允许我们检索一个元素相对于文档(document)的当前位置。
和 .position()
的差别在于: .position()
是相对于相对于父级元素的位移。
文本操作
jQuery操作 | 说明 |
---|---|
html() | 取得第一个匹配元素的html内容 |
html(val) | 设置所有匹配元素的html内容 |
text() | 取得所有匹配元素的内容 |
text(val) | 设置所有匹配元素的内容 |
val() | 取得第一个匹配元素的当前值 |
val(val) | 设置所有匹配元素的值 |
val([val1,val2]) | 设置多选的checkbox,多选select的值 |
属性操作
jQuery操作 | 说明 |
---|---|
attr(attrName) | 返回第一个匹配元素的属性值 |
attr(attrName,attrValue) | 为所有匹配元素设置一个属性值 |
attr({k1:v1,k2,v2}) | 为所有匹配元素设置多个属性值 |
removeAttr() | 从每一个匹配的元素中删除一个属性 |
获取标签属性的时候,针对动态属性,尤其是复选框,不建议使用attr(),而是用prop。
prop('checked') // 结果是布尔值
prop('checked',false) // 动态设置
removeProp() // 移除属性
prop和attr的区别:
attr():静态属性,指的属性是HTML标签属性
prop():动态变换,指的是DOM对象属性
总结:
1.对于标签上有的能看到的属性和自定义属性都用attr
2.对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
文档处理
// 内部添加
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
// 外部添加
$(A).after(B)// 把B放到A的后面
$(A).before(B)// 把B放到A的前面
// 清空内容
remove()// 从DOM中删除所有匹配的元素。移除标签
empty()// 删除匹配的元素集合中所有的子节点。
jQuery绑定事件
JS绑定事件
标签对象.on事件名 = function(){事件代码}
btnEle.onclick = function(){alert(123)}
jQuery绑定事件
方式1
jQuery对象.事件名(function(){事件代码})
$btnEle.click(function(){alter(123)})
方式2
jQuery对象.on('事件名',function(){事件代码})
$btnEle.on('click',function(){alter(123)})
// 有时候使用jQuery的方式1绑定事件如果无法触发 可以切换为方式2
克隆操作
<button id="d1">是兄弟就来砍我!!!</button>
<script>
$('#d1').click(function () {
// $('body').append($(this).clone()) // 不克隆事件,复制标签本身
$('body').append($(this).clone(true)) // 克隆事件,会讲标签绑定的事件一起复制
})
</script>
悬浮事件
// 鼠标悬浮上去和移开各自触发一次
$('#d1').hover(function () {alert(123)})
// 如果想要将悬浮和移开分开执行不同的操作 需要写两个函数
$('#d1').hover(
function () {alert(123)}, # 悬浮触发
function () {alert(123)} # 移走触发
)
值监听事件
<!DOCTYPE html>
<html lang="en">
<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>实时监听input输入值变化</title>
</head>
<body>
<input type="text" id="i1">
<script src="jquery-3.2.1.min.js"></script>
<script>
/*
* oninput是HTML5的标准事件
* 能够检测textarea,input:text,input:password和input:search这几个元素的内容变化,
* 在内容修改后立即被触发,不像onchange事件需要失去焦点才触发
* oninput事件在IE9以下版本不支持,需要使用IE特有的onpropertychange事件替代
* 使用jQuery库的话直接使用on同时绑定这两个事件即可。
* */
$("#i1").on("input propertychange", function () {
alert($(this).val());
})
</script>
</body>
</html>
阻止后续事件
如果给已经有事件的标签绑定事件,会先执行绑定的再去执行默认的
如果想要取消后续时间的执行,可以使用两种方式阻止
能够触发form表单提交数据动作的标签有两个
<input type="submit">
<button></button>
1.方式1(推荐使用)
$(':submit').click(function () {
alert(123)
return false // 取消当前标签对象后续事件的执行
})
2.方式2(自带关键字)
$(':submit').click(function (e) {
alert(123)
e.preventDefault()
})
事件冒泡
涉及到标签嵌套并且有相同事件的时候,那么会逐级往上反馈并执行
$("span").click(function (e) {
alert("span");
return false; //方式1
e.stopPropagation(); //方式2
});
事件委托
事件委托是通过事件冒泡的原理,利用父标签去捕获子标签的事件。
$('body').on('事件类型','选择器',function(){})
事件绑定默认情况下是不会对动态创建的标签生效的,如果想生效需要事件委托。
$('div').on('click','button',function () {
alert('你犯困的样子萌萌哒')
})
上述方式就可以解决动态标签事件的执行问题(注意委托指得是标签内部的标签)
动画效果
// 基本
show() // 展示
hide() // 隐藏
toggle() // 如果在展示中就隐藏起来,如果是隐藏状态就展示出来
// 滑动
slideDown() // 向下滑动
slideUp() // 向上
slideToggle() // 判断状态如何取反
// 淡入淡出
fadeIn() // 淡入
fadeOut() // 淡出
fadeToggle() // 判断状态如何取反
// 自定义(了解即可)
animate(p,[s],[e],[fn])
bootstrap框架
bootstrap框架内部提供了很多漂亮的标签样式和功能,我们只需要CV使用即可.
bootstrap版本推荐使用v3版本.它是一个是css文件和一个js文件组成.bootstrap需要使用jQuery来实现动态效果,一般都是直接导入jQuery和bootstrap的.
基本使用:
必须先导入后使用,bootstrap涉及到js的部分需要使用jQuery
1.本地导入
2.cdn导入
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
布局容器
class = 'container' 两边有留白
class = 'container-fluid' 没有留白
栅格系统
class = 'row' 默认开设一行均分12份
class = 'col-md-n' 指定需要几份(电脑屏幕)
col-md-offset-n 调整位置
栅格参数可以做到响应式布局xs sm md lg...
lg对应屏幕>=1200px, 小于 1920px 台式1920*1080显示器
md对应屏幕>=992px, 小于1200px 适合笔记本
sm对应屏幕>=768px, 小于992px 适合平板
xs对应屏幕<=768px, 手机端屏幕
表格样式
参考官网即可 有样式有源码 拷贝使用即可
表格样式
class="table table-hover table-striped table-bordered"
单元格颜色
class="active"
class="success"
class="warning"
class="danger"
class="info"
表单样式
.pull-left 左浮
.pull-right 右浮
class='form-control'
针对radio和checkbox不能加!!!
按钮与图标样式
按钮样式
class = 'btn'
按钮颜色
<a href="" class="btn btn-info">言多必失</a>
<a href="" class="btn btn-danger">言多必失</a>
<a href="" class="btn btn-warning">言多必失</a>
<a href="" class="btn btn-primary">言多必失</a>
<a href="" class="btn btn-success">言多必失</a>
按钮尺寸
<a href="" class="btn btn-success btn-sm">言多必失</a>
<a href="" class="btn btn-success btn-lg">言多必失</a>
<a href="" class="btn btn-success btn-block">言多必失</a>
图标样式
<span class="glyphicon glyphicon-user"></span>
更多图标
http://www.fontawesome.com.cn/
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库