今日内容概要
- 1 > jQuery操作标签
- 1.1 > class 操作
- 1.2 > 样式操作
- 1.3 > 位置操作
- 1.4 > 文本值操作
- 1.5 > 属性操作
- 1.6 > 文档处理
- 2 > jQuery事件操作
- 2.1 > 事件操作
- 2.2 > 悬浮事件
- 2.3 > 值监听事件
- 2.4 > 阻止后续事件
- 2.5 > 事件冒泡
- 2.6 > 事件委托
- 3 > jQuery动画效果(了解)
- 4 > 前端第三方框架(基础)
- 4.1 > 前端框架
- 4.2 > 布局容器
- 4.3 > 栅格系统
- 4.4 > 表格样式
- 4.5 > 表单样式
- 4.6 > 按钮
- 4.7 > 图标样式
1 > jQuery操作标签
jQuery操作标签在语法上比js简介，它的具体操作语法如下：
1.1 > class 操作
我们讲DOM的操作与jQuery做对比学习。
jQuery 操作代码 DOM操作代码
addClass() classlist.add() # 给标签添加类属性
removeClass() classlist.remove() # 移除标签的某一属性
hasClass() classlist.contains() # 判断标签是否含有某个类
toggleClass() classlist.toggle() # 当标签有某个类时删除没有则添加1.2 > 样式操作
给标签添加css样式。
$divEle.css('border', '5px solid black')
'''
标签对象.css('样式', '样式参数')
'''1.3 > 位置操作
可以用于获取当前页面所在位置，做出相应的响应。例如通过监测离首行距离，添加返回置顶的一键方式。
$(window).scrollTop() # 用于获取左侧滚动条距离顶端的位移量1.4 > 文本值操作
文本值操做与DOM具体用法类似但是语法又不一样，具体语法如下：
jQuery DOM
text() innerText
html() innerHTML
val() value
转js对象 files # 获取文件中数据
'''
这些jQuery代码 若括号内不写值就是获取文本值，写了就是设置文本值
'''1.5 > 属性操作
$('div').attr('style') # 获取第一个标签的style属性值
$('div').attr('class','c1') # 批量设置单个标签对象属性
$('div').attr({'name':'bob','pwd':}) # 批量设置多个标签对象属性并且赋值
$('div').removeAttr('class') # 批量移除
'''
需要注意的就是在获取标签属性的时候，针对动态属性，尤其是复选框不建议使用attr()方法
有一个专门的方法用于获取 prop()
'''
prop('checked') # 结果是布尔值
prop('checked', false) # 动态移除选择
prop('checked', true) # 动态选择选项
1.6 > 文档处理
# 内部添加
$(A).append(B) // 把B追加到A的内部
$(A).append(B) // 把B前置到A的内部
# 外部添加
$(A).after(B) // 把B放到A的后面
$(A).before(B) // 把B放到A的前面
# 清空内容
$(A).empty() // 清空指定标签内所有内容2 > jQuery事件操作
2.1 > 事件操作
当我们向创建一个事件的时候首先应该是将事件与标签相绑定，jQuery绑定的方法与js也有小小的差别，如下：
'''js绑定'''
标签对象.onclick = function(){} # 点击事件
标签对象.onchange = function(){} # 文本域变化事件
'''jQuery绑定'''
jQuery对象.click(function(){}) # 点击事件
jQuery对象.change(function(){}) # 文本域变化事件
'''
克隆事件:将标签对象克隆一份一模一样的出来，功能也可以一样实现叫克隆事件
<button id='d1'>是兄弟就来砍我</button>
<script>
$('#d1').click(function(){
// $('boby').append($(this).clone()) # 只能克隆出它的具体样式功能克隆不出来，称不上是克隆
$('boby').append($(this).clone(true))
})
</script>
'''2.2 > 悬浮事件
悬浮事件的意思就是当用户将鼠标移动至指定标签会触发相应的事件。具体操做如下：
$('#d1').hover(function(){alert(123)})
'''
上述代码意思就是当用户将鼠标移动到指定标签后会触发弹框
如果想要将悬浮和移开分开执行不同的操做就必须写两个参数，如下：
'''
$('#d1').hover(
function(){alert(123)}, # 悬浮触发
function(){alert(123)} # 移走触发
)2.3 > 值监听事件
jQuery绑定事件有两种方式。
$('#d1').click(function(){})
$('#d1').on('click',function(){})有时候第一种绑定事件的方式无法生效 那么就使用第二种。例如：
<input type="text" id="d1">
<script>
$('#d1').on('input', function(){
console.log($(this).val())
})
</script>2.4 > 阻止后续事件
如果给已经有事件的标签绑定事件 那么会依次执行，如果想要取消后续时间的执行 可以使用两种方式阻止。具体操做如下：
方式一:(推荐使用)
$('#d1').click(function(){
alert(123)
return false // 取消当前标签对象后续事件的执行
})
方式二:(自带关键字)
$('#d1').click(function(e){
alert(123)
e.preventDefault()
})2.5 > 事件冒泡
在多个标签嵌套的并且都有相同事件的情况下 会出现逐级汇报的现象，解决办法也是两种方式：
方式一:
return false
方式二:
e.stopPropagtion()2.6 > 事件委托
针对动态创建的标签 提前写好的事件默认是无法生效的，解决方法如下：
'''
针对动态创建的标签，我们可以将body内所有的点击事件都交给button标签处理
'''
$('body').on('click','button',function(){})3 > jQuery动画效果(了解)
// 基本动画效果
show()
hide()
toggle()
// 滑动动画效果
slideDown()
slideUp()
slideToggle()
// 淡入淡出
fadeIn(])
fadeOut()
fadeTo()
fadeToggle()
// 自定义（了解即可）
animate()4 > 前端第三方框架(基础)
4.1 > 前端框架
# bootstrap框架
内部提供了很多漂亮的标签样式和功能 我们只需要cv使用就可以了
# bootstrap版本
推荐使用v3版本的
# 基本使用
必须先导入后使用（两种方式）
1.本地导入
2.cdn导入
bootcdn
bootstrap需要使用jQuery来实现动态效果
# 文件组成
bootstrap需要导入两个文件
一个是css文件
一个是js文件
'''
使用前端框架 几乎不需要自己写css 只需要写class即可
'''4.2 > 布局容器
class = 'container' 两边有留白
class = 'container-fluid' 没有留白4.3 > 栅格系统
class = 'row' 默认开设一行均分12份
class = 'col-md-n' 指定标签需要几份（电脑屏幕）
# 栅格还可以通过改参数做到响应式布局例如: xs sm md lg...
如果一行12份用不完还可以调整位置
col-md-offset-34.4 > 表格样式
参考官网即可 有样式有源码 拷贝使用即可。
# 表格样式
class = "table table-hover tavle-striped table-bordered"
# 设置单元格颜色
class = "active"
class="success"
class="warning"
class="danger"
class="info"4.5 > 表单样式
.pull-left 左浮
.pull-right 右浮
class='form-control'
针对radio和checkbox不能加!!!4.6 > 按钮
# 按钮样式
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>4.7 > 图标样式
<span class="glyphicon glyphicon-user"></span>
# 图表样式可以上网搜
http://www.fontawesome.com.cn/
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
