逆袭之路——python 前端开发之jQuery操作标签、事件操作、牛逼框架 Bootstrap【day44】
今日内容概要
- 计时器作业
- jQuery操作标签
- jQuery事件操作
- jQuery动画效果(了解)
- 前端第三方框架Bootstrap(基础)
今日内容详细
一、计时器作业
"""
1.一定要明确你手上的标签到底是什么对象
如果是原生js代码查找出来的对象 那么只能调用原生js的对象方法
如果是jQuery查找出来的对象 那么只能调用jQuery对象方法
2.原生js对象与jQuery对象的关系(**)
可以将jQuery对象看成是数组包了标签对象
原生js对象就是标签对象
eg:
['jason', ]
'jason'
$('#d1')[0] // jQuery对象转原生js对象
$(标签对象) // 原生js对象转jQuery对象
"""
<script>
// let startBtn = $('#d2')[0];
let startBtn = document.getElementById('d2')
let stopEle = document.getElementById('d3')
let inputEle = document.getElementById('d1')
// 4.专门定义一个展示时间的函数
function showTime(){
// 2.获取当前时间对象
let cTimeObj = new Date()
// 3.添加到input标签value属性中
inputEle.value = cTimeObj.toLocaleString()
}
// 6.定义一个存储定时器对象的全局变量(多个函数都要用)
let timeObj = null;
// 1.先给开始按钮绑定一个点击事件
startBtn.onclick = function () {
// 8.判断变量是否已经指代了定时器 其实就是判断是否已经有了一个任务 如果有了就不要再新建
if(!timeObj){
// 5.循环定时任务
timeObj = setInterval(showTime, 1000) // 如果起了多个任务 变量只能指向最后一个
}
}
// 7.给停止按钮绑定一个取消定时器的点击事件
stopEle.onclick = function () {
clearInterval(timeObj) // 移除任务 并不会清空变量的值
// 清空变量的值
timeObj = null
}
</script>
补充：
原生js代码查找标签绑定的变量名推荐使用 xxxEle
jQuery代码查找标签绑定的变量名推荐使用 $xxxEle
二、 jQuery操作标签
- 核心：语法上肯定比js简洁
- class 操作
jQuery操作 DOM操作
addClass() classList.add()
removeClass() classList.remove()
hasClass() classList.contains()
toggleClass() classList.toggle()
- 样式操作
$divEle.css('border','5px solid black')
- 位置操作
$(window).scrollTop() 获取左侧滚动条距离顶端的位移量
"""
实时监测距离
$(window).scroll(function () {
if($(window).scrollTop() > 600){
alert('超过600了 架不住了')
}
})
"""
二、 文本值操作
jQuery DOM
text() innerText
html() innerHTML
val() value
转js对象 files
'''不写值就是获取 写了就是设置'''
三、 属性操作
$('div').attr('style') # 获取第一个标签的style属性值
$('div').attr('class','c1') # 批量设置单个
$('div').attr({'name':'jason','pwd':123}) # 批量设置多个
$('div').removeAttr('class') # 批量移除
"""
获取标签属性的时候 针对动态属性 尤其是复选框 不建议使用attr()
prop('checked') 结果是布尔值
prop('checked',false) 动态设置
"""
四、 文档处理
- 内部添加
$(A).append(B)// 把B追加到A
$(A).prepend(B)// 把B前置到A
- 外部添加
$(A).after(B)// 把B放到A的后面
$(A).before(B)// 把B放到A的前面
- 清空内容
$('body').empty()
五、 事件操作
'''js绑定'''
标签对象.onclick = function(){}
标签对象.onchange = function(){}
...
'''jQuery绑定'''
jQuery对象.click(function(){})
jQuery对象.change(function(){})
...
# 克隆操作
<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)} # 移走触发
)
七、 值监听事件
"""
jQuery绑定事件有两种方式
$('#d1').click(function(){})
$('#d1').on('click',function(){})
有时候第一种绑定事件的方式无法生效 那么就使用第二种
"""
<input type="text" id="d1">
<script>
$('#d1').on('input',function () {
console.log($(this).val())
})
</script>
八、 阻止后续事件
"""
如果给已经有事件的标签绑定事件 那么会依次执行
如果想要取消后续时间的执行 可以使用两种方式阻止
"""
1.方式1(推荐使用)
$('#d1').click(function () {
alert(123)
return false // 取消当前标签对象后续事件的执行
})
2.方式2(自带关键字)
$('#d1').click(function (e) {
alert(123)
e.preventDefault()
})
九、事件冒泡
"""
在多个标签嵌套的并且都有相同事件的情况下 会出现逐级汇报的现象
"""
方式1
return false
方式2
e.stopPropagation()
十、 事件委托
"""
针对动态创建的标签 提前写好的事件默认是无法生效的
"""
$('body').on('事件类型','选择器',function(){})
# 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})
十一、动画效果
hide
show
slideUp
slideDown
fadeIn
fadeOut
animate
十二、前端框架 牛逼王王Bootstrap
- Bootstrap 框架
内部提供了很多漂亮的标签样式和功能 我们只需要CV使用即可 - Bootstrap 版本
推荐使用的是v3版本 - 基本使用
1）本地导入
2）CDN导入
bootcdn
bootstrap需要使用jQuery来实现动态效果 - 文件组成
bootstrap需要导入两个文件
一个是css文件
一个是js文件
"""使用前端框架 几乎不需要自己写css 只需要写class即可"""
十三、 布局容器
class = 'container' 两边有留白
class = 'container-fluid' 没有留白
十四、栅格系统
class = 'row' 默认开设一行均分12份
class = 'col-md-n' 指定需要几份(电脑屏幕)
# 栅格参数可以做到响应式布局xs sm md lg...
如果一行十二份用不完 可以调整位置
col-md-offset-3
十五、 表格样式
参考官网，直接cv即可
# 表格样式
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> #sm 小
<a href="" class="btn btn-success btn-lg">言多必失</a> #lg 中
<a href="" class="btn btn-success btn-block">言多必失</a> #block 大
十八、图标样式
<span class="glyphicon glyphicon-user"></span>
# 更多图标
http://www.fontawesome.com.cn/
