HTLM Day07
理清DOM对象和 jQuery对象
DOM对象 通过js获取的对象 DOM对象能使用js固有的方法，但是不能使用jQuery里面的方法。 jQuery操作 通过jQuery包装DOM对象后产生的对象 jQuery对象是jQuery独有的 # 虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法， # 同理 DOM对象也没不能使用 jQuery里的方法
# 互相转换 ''' jQuery对象是一个数组对象 用[0]转成DOM对象 对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jquery对象了，方法为$(dom对象); ''' 1.jQuery对象转DOM对象 var $variable = jQuery对象 var variable = DOM对象 $variable[0] # 得到DOM对象 可使用DOM操作 2.DOM对象转jQuery对象 # $(dom对象) var variable = document.getElementById('d1') # DOM对象 var $variable = $(variable) # 得到jQuery对象 可使用jQuery操作
jQuery操作标签
# class操作（就是class=操作里面的属性） jQuery操作 DOM操作 addClass() classList.add() removeClass() classList.remove() hasClass() classList.contains() toggleClass() classList.toggle() # 样式操作 $divEle.css('border','5px solid black') ''' jQuery对象.css('属性名','属性值') DOM对象.style.属性名 = '属性值' ''' # 位置操作 $(window).scrollTop() 获取左侧滚动条距离顶端的位移量 实时监测距离 $(window).scroll(function () { if($(window).scrollTop() > 600){ alert('超过600了 架不住了') } })
返回顶部案例
<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Title</title> <style> #d1 { height: 500px; background: deepskyblue; } #d2 { height: 500px; background: mediumpurple; } #d3 { height: 500px; background: greenyellow; } #d4 { height: 500px; background: deeppink; } a { text-decoration: none; } #backtop { height: 50px; width: 50px; background: white; position: fixed; bottom: 100px; right: 50px; visibility: hidden; /*方法2 visibility*/ /*display: none; !* 方法2 display*!*/ } /*方法3*/ .hide { display: none; } </style> <script src=jQuery3.6.js></script> </head> <body> <div id=d1></div> <div id=d2></div> <div id=d3></div> <div id=d4></div> <button id=backtop>回到顶部</button> <!--方法1 2--> <!-- <button id=backtop class=hide>回到顶部</button> <!–方法3–>--> <script> // 方法1.jquery自带的show() hide() 显示隐藏标签 // $('#backtop').hide() // $(window).scroll(function () { // if ($(window).scrollTop() > 600) { // $('#backtop').show() // } // else { // $('#backtop').hide() // } // }) // 方法2. // 用visibility的visible\hidden 控制显示隐藏。 将visibility初始设为hidden; // 或用display的inline\none 控制显示隐藏。 将display初始设为none; $(window).scroll(function () { if ($(window).scrollTop() > 600) { $('#backtop').css(visibility,visible) // $('#backtop').css(display,inline) } else { $('#backtop').css(visibility,hidden) // $('#backtop').css(display,none) } }) // 方法3.jquery操作标签 addClass() removeClass() 移除添加class hide // 初始要添加class hide // $(window).scroll(function () { // if ($(window).scrollTop() > 600) { // // $('#backtop').removeClass('hide') // // } // else { // // $('#backtop').addClass('hide') // } // }) $(#backtop).on(click, function () { $(window).scrollTop(0); }) </script> </body> </html>
文本值操作
jQuery DOM text() innerText html() innerHTML val() value 转js对象 files '''不写值就是获取 写了就是设置'''
属性操作
$('div').attr('style') # 获取第一个标签的style属性值 $('div').attr('class','c1') # 批量设置单个 $('div').attr({'name':'cc','pwd':123}) # 批量设置多个 $('div').removeAttr('class') # 批量移除 ''' DOM对象.getAttribute('属性名') 获取指定属性 DOM对象.setAttribute('属性名','属性值') 设置属性 DOM对象.removeAttribute('属性名') 移除指定属性 ''' 获取标签属性的时候 针对动态属性 尤其是复选框 不建议使用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... 如果一行十二份用不完 可以调整位置 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/