前端开发(7)

• jQuery操作标签

• jQuery事件操作

• jQuery动画效果

• 前端第三方框架

 

jQuery操作标签

# class操作
    jQuery操作                DOM操作
    addClass()                 classList.add()  # 添加指定的css类名
    removeClass()            classList.remove()  # 移除指定的css类名
    hasClass()                classList.contains()  # 判断样式存不存在
    toggleClass()            classList.toggle()  # 切换css类名 如果有就移除 没有就添加
   
# 样式操作
$divEle.css('border','5px solid black')
​
# 位置操作
$(window).scrollTop()   获取左侧滚动条距离顶端的位移量
"""
实时监测距离
    $(window).scroll(function(){
        if($(window).scrollTop() > 600){
            alert('不能超过600')
        }
    }
    )
"""

文本值操作

jQuery                      DOM
text()                      interText
html()                      innerHTML
val()                       value
转js对象                   files
'''不写值就是获取 写了就是设置'''

属性设置

$('div').attr('style')  # 获取第一个值的style属性值
$('div').attr('class','c1')  # 批量设置单个
$('div').attr({'name':'faker','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框架
    内部提供了很多漂亮的标签样式和功能 我们只需要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...
   
如果一行12份用不完 可以调整
    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'
# 按钮颜色
<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>

图标样式

<span class="glyphicon glyphicon-user"></span>
# 更多图标
http://www.fontawesome.com.cn/p