jQuery操作标签、bootstrap简介及基本使用
jQuery操作标签
class 操作
// 语法上肯定比js简洁
// class 操作
jQuery操作
addClass() // 添加指定的CSS类名
removeClass() // 移除指定的css类名
hasClass() // 判断样式存不存在
toggleCLass() // 切换CSS类名,如果有就移除,没有就添加
// DOM操作
classList.add()
classList.remove()
classList.contains()
classList.toggle()
样式操作
$divEle.css('border','5px solid black')
位置操作
offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移
/*
实时监测距离
$(window).scroll(function () {
if($(window).scrollTop() > 600){
alert('超过600了 架不住了')
}
})
*/
文本值操作
HTML代码:
html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容
文本值:
text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容
值:
val()// 取得第一个匹配元素的当前值
val(val)// 设置所有匹配元素的值
val([val1, val2])// 设置多选的checkbox、多选select的值
事件操作
'''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()
})
事件冒泡
// 在多个标签嵌套的并且都有相同事件的情况下 会出现逐级汇报的现象
<div id='d1'>我是div
<p id='d2'>我是p标签
<span id='d3'>我是span标签</span>
</p>
</div>
方式1
return false
方式2
e.stopPropagation()
eg:
<script>
$('#d1').click(function () {
alert('div')
// return false
})
$('#d2').click(function () {
alert('p')
// return false
})
$('#d3').click(function (e) {
alert('span')
// return false
e.stopPropagation() /*关键字取消*/
})
</script>
事件委托
// 针对动态创建的标签 提前写好的事件默认是无法生效的
$('body').on('事件类型','选择器',function(){})
# 将body内所有的点击事件交给button标签处理
$('body').on('click','button',function(){})
动画效果 animate()
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-xs
平板:col-sm
桌面显示器:col-md
大桌面显示器:col-lg
如果一行十二份用不完 可以调整位置
col-md-offset-1~12
表格样式
参考官网即可 有样式有源码 拷贝使用即可
# 表格样式
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>
图标样式
图标网站:http://www.fontawesome.com.cn/
<span class="glyphicon glyphicon-user"></span>
# 更多图标
bootstrap官网查看更多内容
https://v3.bootcss.com/