07前端开发jQuery
作业讲解
""" 一定要明确手上的标签是什么对象 如果原生的js代码查找出来的对象 那么只能调用原生的js方法 如果原生的jQuery代码查找出来的对象 那么只能调用原生的jQuery方法 原生js与jQuery对象的关系 可以将jQuery对象看成是数组包了标签对象 原生js就是标签对象 eg：['jason', ] 'jason' $('#d1')[0] // jQuery对象转原生js对象 $(标签对象) // 原生js对象转jQuery对象 """
补充
原生js代码查找标签绑定变量名推荐使用： xxxEle
jQuery代码查找标签绑定变量名推荐使用： $xxxEle
jQuery操作标签
"""语法上比js更简洁""" #class操作 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).appendTo(B) // 把A追加到B $(A).prepend(B) // 把B前置到A $(A).prependTo(B) // 把A前置到B #外部添加 $(A).after(B) // 把B放到A的后面 $(A).before(B) // 把B放到A的前面 #情况内容 $('body').empty()
#克隆
.clone() 只是克隆文本，不克隆文本的功能
.clone（ture） 文本的功能和文本都克隆，可以说是一模一样
悬浮事件
$('#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文件
保留以上三个就足够了！！
布局容器
class = 'container' 两边有留白 class = 'container-fluid' 没有留白
栅格系统
class = 'row' 默认开设一行均分12份 class = 'col-md-n' n表示指定需要几份（电脑屏幕） #栅格参数可以做到响应式布局xs超小屏幕 sm平板屏幕 lg 超大屏幕。。。 如果一行12份用不完 可以调整位置 col-md-offset-n #这里的n表示向右移动n份
css样式
参考官网即可 有样式有源码 拷贝使用即可 #表格样式 class = "table table-hover table-striped table-border" #表格 样式 表格颜色深浅 表格边框 #单元格颜色 class = "active" class = "success" class = "warning" class = "danger" class = "info"
表单样式
.pull-left 左浮 .pull-right 右浮 class= 'form-control' 加了可以装饰的好看一些 针对radio和checkbox不能加，加了很丑
按钮图片
#按钮样式 class = 'btn' #按钮颜色 btn-info btn-danger btn-warning btn-primary btn-success #按钮尺寸 btn-sm #小按钮 btn-lg #大按钮 btn-block #全屏
图标样式
<span> class = "glyphicon glyphicon-user"</span> #更多图标 http://www.fontawesome.com.cn/
总结
尤其是前端框架 几乎都是直接看官网拷贝样式即可
作业
1.编写一个回到顶部的案例 2.编写一个简易版本的全选功能 课外扩展：反选 取消等功能
