jQuery 与 Bootstrap
目录
一.jQuery操作标签
1.class操作
# class操作
jQuery操作
addClass() # 添加指定css类名
removeClass() # 移除指定css类名
hasClass() # 判断样式是否存在
toggleClass() # 切换css类名，存在移除，不存在新增
2.样式操作
$divEle.css('border','5px solid black')
'给div块级标签 添加5px厚度的 边框 为红色'
3.位置操作
offset() # 获取匹配元素在当前窗口的相对偏移或设置元素位置
position() # 获取匹配元素相对父元素的偏移
scrollTop() # 获取匹配元素相对滚动条顶部的偏移
scrollLeft() # 获取匹配元素相对滚动条左侧的偏移
可以通过获取滚动条进行额外的操作
二.文本值操作
text()
html() # 括号内写值设置所有匹配元素的内容 不写值就是获取所有匹配元素的内容
val()
'files需要转化为js对象'
三.属性操作
$('div').attr('style') # 获取第一个标签的style属性值
$('div').attr('class','c1') # 批量设置单个
$('div').attr({'name':'jason','pwd':123}) # 批量设置多个
$('div').removeAttr('class') # 批量移除
'获取标签属性的时候 针对动态属性 不适用attr()'
'针对动态属性的默认标签checked'
'通过attr获取checked什么都没有'
'而通过prop可以获取checked对应的布尔值 有就true 没有false'
对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。
四.文档处理
# 内部添加
$(A).append(B) # 把B追加到A
$(A).prepend(B) # 把B前置到A
# 外部添加
$(A).after(B) # 把B放到A的后面
$(A).before(B) # 把B放到A的前面
# 清空内容
$('body').empty()
五.事件操作
1.1克隆事件
click(function(){...}) 关键字.clone
克隆事件代码
<button id="d1">晚安</button>
<script>
$('#d1').click(function () {
// $('body').append($(this).clone()) // 不克隆事件
$('body').append($(this).clone(true)) // 克隆事件
})
</script>
1.2悬浮事件
hover(function(){...})
悬浮事件代码
$('#d1').hover(function () {alert(123)})
$('#d1').hover(
function () {alert(123)}, # 悬浮触发
function () {alert(123)} # 移走触发
)
1.3值监听事件
$('#d1').on('click',function(){})
值监听代码
<input type="text" id="d1">
<script>
$('#d1').on('input',function () {
console.log($(this).val())
})
</script>
1.4阻止后续事件
方式1. return faklse # 消当前标签对象后续事件的执行
方式2. 关键字.preventDefault()
组织后续事件
1.方式1(推荐使用)
$('#d1').click(function () {
alert(123)
return false // 取消当前标签对象后续事件的执行
})
2.方式2(自带关键字)
$('#d1').click(function (e) {
alert(123)
e.preventDefault()
})
1.5冒泡事件
# 多个标签嵌套相同的事件，会重复执行事件
方式1. return false # 阻止事件传播
方式2. 关键字.stopPropagation()
1.6委托事件
'针对动态创建的标签 提前写好的事件默认是无法生效的'
关键字 on
$('body').on('事件类型','选择器',function(){})
'将body内所有的点击事件交给选择器标签处理'
六.动画效果
hide # 隐藏
show # 显示
# 滑动显示
slideUp
slideDown
# 淡入淡出
fadeIn
fadeOut
animate
七.bootstrap框架
# 1.bootstrap版本
推荐使用v3版本
# 2.基本使用
本地导入
cdn导入 'bootcdn'
bootstrap需要使用jQuery来实现动态效果
'必须先导入后使用'
# 3.文件组成
bootstrap需要导入两个文件
一个是css文件
一个是js文件
八.bootstrap框架基本使用
# 布局容器
class = 'container' # 两边有留白
class = 'container-fluid' # 没有留白
# 栅格系统
class = 'row' 默认开设一行均分12份
class = 'col-md-n' 指定需要几份(电脑屏幕) # 栅格参数可以做到响应式布局xs sm md lg...
如果一行十二份用不完 可以调整位置 # col-md-offset-3
# 表格样式
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'btn-info
# 按钮颜色
class="btn btn-info"
class="btn btn-danger"
class="btn btn-warning"
class="btn btn-primary"
class="btn btn-success"
# 按钮尺寸
class="btn btn-success btn-sm"
class="btn btn-success btn-lg"
class="btn btn-success btn-block"
# 图标
http://www.fontawesome.com.cn/ 更多图标
