前端微讲解(七)
jQuery操作标签
1.class操作
| jQuery |
DOM |
描述 |
| addClass() |
classList.add() |
添加类属性 |
| removeClass() |
classList.remove() |
移除类属性 |
| hasClass() |
classList.contains() |
判断类属性是否存在 |
| toggleClass() |
classList.toggle() |
有就移除，没有就添加 |
2.样式操作
标签名.css('属性名','属性值')
3.位置操作
$(window).scrollTop() # 获取左侧滚动条距离顶端的位移量
文本操作
| jQuery |
Dom |
描述 |
| text() |
innerText |
获取文本内容(不识别标签语法) |
| html() |
innerHtml |
获取文本内容(识别标签语法) |
| val() |
value |
值 |
| 转为原生js对象 |
file |
文件 |
属性操作
$('div').attr('style') # 获取第一个标签的style属性值
$('div').attr('class','c1') # 批量设置单个标签
$('div').attr({'name':'oscar','sex':'男'}) # 批量设置多个标签
$('div').removeAttr('class') # 批量移除
'''
获取标签属性的时候，针对动态属性，尤其是复选框，不建议使用attr(),推荐使用prop()
prop('checked') 结果是布尔值
prop('checked',true/false) 动态设置
'''
文档处理
# 1.内部添加
$(A).append(B) # 把B追加到A
$(A).prepend(B) # 把B前置到A
# 2.外部添加
$(A).after(B) # 把B放到A的后面
$(A).before(B) # 把B放到A的前面
# 3.清空内容
$('标签选择器').empty() # 清空标签选择器中的所有内容
事件操作
# 1.jQuery绑定事件
jQuery对象.click(function(){}) # 单击事件
jQuery对象.change(function(){}) # 双击事件
# 2.克隆操作
<p id="d1">克隆操作</p>
<script>
$('#d1').click(function (){
// $('body').append($(this).clone()) //不可隆事件，只能点击我们设置的标签克隆
$('body').append($(this).clone(true)) // 克隆事件，克隆出来的点击也能克隆
})
</script>
悬浮事件
控制鼠标悬浮上去和移开各自触发一次，如果想要将悬浮和移开分开执行不同的操作，就需要两个函数。
<button id="d1">克隆操作</button>
<script>
$('#d1').hover(
function () {alert(123)}), //悬浮触发
function () {alert(456)} //移走触发
</script>
监听事件
# jQuery绑定事件两种方式
方式一:
$('标签名').click(function(){})
方式二:
$('标签名').on('click',function(){})
阻止后续事件
如果给已经有事件的标签绑定事件，那么就会依次执行，就叫做'后续事件'，想要取消后续事件的执行，有两种方式:
方式一: //推荐使用
$('标签名').click(function){
函数体代码
return flase // 取消当前标签对象后续事件的执行
}
方式二:
$('标签名').click(function)(e){
函数体代码
e.preventDefault() // 取消当前标签对象后续事件的执行
}
事件冒泡
在多个标签嵌套并且都有相同事件的情况下，会出现逐级汇报的现象，也就是'冒泡事件'，有两种解决方式:
方式一: // 推荐使用
return false
方式二:
e.stopPropagation()
事件委托
针对动态创建的标签，提前写好的事件默认是无法生效的，但是我们可以用事件委托，达成我们想要的效果:
$('body').on('事件类型'，'选择器',function(){}) # 将body内每某个事件类型的所有事件，全部交给某个选择器处理
动画效果
| 代码 |
效果 |
| hide |
隐藏 |
| show |
显示 |
| slideUp |
向上滑动 |
| slideDown |
向下滑动 |
| fadeIn |
淡入 |
| fadeOut |
淡出 |
| animate |
自定义 |
bootstrap框架
# 1.版本
推荐使用v3版本
# 2.基本使用
先导入后使用，可以下载之后本地导入，也可以cdn加速导入，但是呢bootstrap需要使用jQuery来实现动态效果
# 3.文件组成
bootstrap需要导入两个文件，一个是CSS文件，一个是JS文件
"""使用前端框架，几乎不需要自己写css，只需要写class即可"""
1.布局容器
class = 'container' # 两边有空白
class = 'container-fluid' # 两边没有空白
2.栅格系统
class = 'row' # 默认开设一行均分为12份
class = 'col-md-n' # 指定需要几份
'''
如果一行12份用不完，可以调整位置
col-md-offset-n # 往左边移动几份
'''
3.表格样式
# 1.表格样式
class = "table table-hover table-striped table-bordered"
# 2.单元格颜色
class = "active"
class = "success"
class = "warning"
class = "danger"
class = "info"
4.表单样式
.pull-lift # 左浮
.pull-right # 右浮
'''
class = 'form-control' # 针对单选框和多选框不能加
'''
5.按钮与图片
# 1.按钮样式
class = 'btn'
# 2.按钮颜色
class = 'btn-info'
class = 'btn-danger'
class = 'btn-warning'
class = 'btn-primary'
class = 'btn-success'
# 3.按钮尺寸
class = 'btn-sm'
class = 'btn-lg'
class = 'btn-block'
6.图标样式
<span class="glyphicon glyphicon-user"></span>
# 更多图标
http://www.fontawesome.com.cn/
