前端学习笔记

今日内容概要

  • 筛选器方法
  • 操作标签
  • 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/
posted @   空白o  阅读(31)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
点击右上角即可分享
微信分享提示