- 计时器作业
- jQuery操作标签
- jQuery事件操作
- jQuery动画效果(了解)
- 前端第三方框架Bootstrap(基础)
"""
1.一定要明确你手上的标签到底是什么对象
如果是原生js代码查找出来的对象 那么只能调用原生js的对象方法
如果是jQuery查找出来的对象 那么只能调用jQuery对象方法
2.原生js对象与jQuery对象的关系(**)
可以将jQuery对象看成是数组包了标签对象
原生js对象就是标签对象
eg:
['jason', ]
'jason'
$('#d1')[0] // jQuery对象转原生js对象
$(标签对象) // 原生js对象转jQuery对象
"""
补充：
原生js代码查找标签绑定的变量名推荐使用 xxxEle jQuery代码查找标签绑定的变量名推荐使用 $xxxEle二、 jQuery操作标签
- 核心：语法上肯定比js简洁
- class 操作
jQuery操作 DOM操作 addClass() classList.add() removeClass() classList.remove() hasClass() classList.contains() toggleClass() classList.toggle()
- 样式操作
$divEle.css('border','5px solid black')
- 位置操作
$(window).scrollTop() 获取左侧滚动条距离顶端的位移量
"""
实时监测距离
$(window).scroll(function () {
if($(window).scrollTop() > 600){
alert('超过600了 架不住了')
}
})
"""
二、 文本值操作
jQuery DOM text() innerText html() innerHTML val() value 转js对象 files '''不写值就是获取 写了就是设置'''三、 属性操作
$('div').attr('style') # 获取第一个标签的style属性值
$('div').attr('class','c1') # 批量设置单个
$('div').attr({'name':'jason','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(){})
...
# 克隆操作
六、 悬浮事件
$('#d1').hover(function () {alert(123)})
鼠标悬浮上去和移开各自触发一次
如果想要将悬浮和移开分开执行不同的操作 需要写两个函数
$('#d1').hover(
function () {alert(123)}, # 悬浮触发
function () {alert(123)} # 移走触发
)
七、 值监听事件
"""
jQuery绑定事件有两种方式
$('#d1').click(function(){})
$('#d1').on('click',function(){})
有时候第一种绑定事件的方式无法生效 那么就使用第二种
"""
八、 阻止后续事件
"""
如果给已经有事件的标签绑定事件 那么会依次执行
如果想要取消后续时间的执行 可以使用两种方式阻止
"""
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
- 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-md-offset-3十五、 表格样式
参考官网，直接cv即可
# 表格样式 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' # 按钮颜色 言多必失 言多必失 言多必失 言多必失 言多必失 # 只有五种颜色可以选 # 按钮尺寸 言多必失 #sm 小 言多必失 #lg 中 言多必失 #block 大十八、图标样式
# 更多图标 http://www.fontawesome.com.cn/
