python学习-Day44-jQuery
目录
jQuery
作业讲解
前情提要
1.一定要明确目前的标签到底是什么对象 如果是原生js代码查找出来的对象 那么只能调用原生js的对象方法 如果是jQuery查找出来的对象 那么只能调用jQuery对象方法 2.原生js对象与jQuery对象的关系(**) 可以将jQuery对象看成是数组包了标签对象 原生js对象就是标签对象 eg: ['jason', ] 'jason' $('#d1')[0] // jQuery对象转原生js对象 $(标签对象) // 原生js对象转jQuery对象 代码
<script> // let startBtn = $('#d2')[0]; let startBtn = document.getElementById('d2') let stopEle = document.getElementById('d3') let inputEle = document.getElementById('d1') // 4.专门定义一个展示时间的函数 function showTime(){ // 2.获取当前时间对象 let cTimeObj = new Date() // 3.添加到input标签value属性中 inputEle.value = cTimeObj.toLocaleString() } // 6.定义一个存储定时器对象的全局变量(多个函数都要用) let timeObj = null; // 1.先给开始按钮绑定一个点击事件 startBtn.onclick = function () { // 8.判断变量是否已经指代了定时器 其实就是判断是否已经有了一个任务 如果有了就不要再新建 if(!timeObj){ // 5.循环定时任务 timeObj = setInterval(showTime, 1000) // 如果起了多个任务 变量只能指向最后一个 } } // 7.给停止按钮绑定一个取消定时器的点击事件 stopEle.onclick = function () { clearInterval(timeObj) // 移除任务 并不会清空变量的值 // 清空变量的值 timeObj = null } </script> 补充
原生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(){}) ... 克隆操作
$(选择器).clone(); 1.clone()：克隆匹配的DOM元素 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力) <button id=b1>屠龙宝刀，点击就送</button> <hr> <button id=b2>屠龙宝刀，点击就送</button> <script src=jquery-3.2.1.min.js></script> <script> // clone方法不加参数true，克隆标签但不克隆标签带的事件 $(#b1).on(click, function () { $(this).clone().insertAfter(this); }); // clone方法加参数true，克隆标签并且克隆标签带的事件 $(#b2).on(click, function () { $(this).clone(true).insertAfter(this); }); </script> 悬浮事件
$('#d1').hover(function () {alert(123)}) 鼠标悬浮上去和移开各自触发一次 如果想要将悬浮和移开分开执行不同的操作 需要写两个函数 $('#d1').hover( function () {alert(123)}, # 悬浮触发 function () {alert(123)} # 移走触发 ) 值监听事件
//jQuery第一种监听事件方法 $(#helloBtn).click(function() { alert(Hello world!); }); //jQuery第二种监听事件方法 $(#helloBtn).bind(click，function() { alert(Hello world!); }); //jQuery第三种监听事件方法 $(#helloBtn).on(click，function() { alert(Hello world!); })； //jQuery第四种监听事件方法 $(body).on({ click: function() { alert(Hello world!); } }, button); //jQuery第五种监听事件方法 $(body).on(click, button, function() { alert(Hello world!); }); }); <body> <button id=helloBtn>Hello</button> </body> 分析
（1）第一种事件监听方法click()，是一种比较常见的、便捷的事件监听方法。 （2）第二种事件监听方法bind()，已被jQuery 3.0弃用。自jQuery 1.7以来被 on() 方法（即第三种事件 监听方法）所取代，虽然在这里也能使用且不报错，而且此方法之前比较常见，但是不鼓励使用它。 （3）第三种事件监听方法on()，从jQuery 1.7开始，所有的事件绑定方法最后都是调用on() 方法来实现的，使用on() 方法实现事件监听会更快、更具一致性。 （4）第四种和第五种方法，监听的是 body 上所有 button 元素的 click 事件。DOM 树里更高层的一个元素监听发生在它的 children 元素上的事件，这个过程叫作事件委托（event delegation）。 阻止后续事件
如果给已经有事件的标签绑定事件 那么会依次执行 如果想要取消后续时间的执行 可以使用两种方式阻止 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(){}) jQuery动画
显示与隐藏
// show()方法和hide()方法是jQuery中最基本的动画方法，具体语法如下： $element.show([speed],[easing],[fn]); $element.hide([speed],[easing],[fn]); speed:三种预定速度之一的字符串（show,normal或者fast)或表示动画数值。 easing:用来指定切换效果，默认是swing,可用参数inear。 fn:在动画完成时执行的函数，每个元素执行一次。 $(element).show(slow); //元素将在600毫秒内慢慢地显示出来 $(element).show(normal); //元素将在400毫秒内慢慢地显示出来 $(element).show(fast); //元素将在200毫秒内慢慢地显示出来 $(element).hide(1000); //元素将在1000毫秒(1秒)内慢慢地隐藏 滑动式动画
// slidUp()和slideDown()方法通过改变高度值实现动画效果。具体语法如下： $element.slidUp([speed],[easing],[fn]); $element.slideDown([speed],[easing],[fn]); speed:三种预定速度之一的字符串（show,normal或者fast)或表示动画数值。 easing:用来指定切换效果，默认是swing,可用参数·inear. fn:在动画完成时执行的函数，每个元素执行一次。 淡入淡出效果
// fadeln()和fadeOut()方法通过改变透明度实现动画效果。具体语法如下： $element.slidUp([speed],[easing],[fn]); $element.slideDown([speed],[easing],[fn]); speed:三种预定速度之一的字符串（show,normal或者fast)或表示动画时长的毫秒数值。 easing:用来指定切换效果，默认是swing,可用参数inear. fn:在动画完成时执行的函数，每个元素执行一次。 animate
语法一：
// jQuery提供了animate()方法完成自定义动画效果 $element.animate(styles,speed,easing,callback) styles // 代表动画属性和最终值的样式属性以及属性值的集合{属性:属性值,属性:属性值} speed // 可选。规定动画的速度。默认是 normal。(毫秒 （比如 1500）slow normal fast) easing // 可选。规定在不同的动画点中设置动画速度的 easing 函数。 callback // 可选。animate 函数执行完之后，要执行的函数。 $(div).animate( {width:1000px},5000,function(){alert(调整完成)}) 语法二：
$element.animate(styles,options) styles // 必需。规定产生动画效果的 CSS 样式和值（同上）。 options // 可选。规定动画的额外选项。 // 可能的值： speed - 设置动画的速度 easing - 规定要使用的 easing 函数 callback - 规定动画完成之后要执行的函数 step - 规定动画的每一步完成之后要执行的函数 queue - 布尔值。指示是否在效果队列中放置动画。如果为 false，则动画将立即开始 specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射，以及它们的对应 easing 函数 通过animate()方法实现动画效果，但不支持以下CSS样式属性:
backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor Color outlineColor 
前端框架 —— 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 表格样式
参考官网即可 有样式有源码 拷贝使用即可 # 表格样式 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/ 总结
尤其是前端框架 几乎都是直接看官网拷贝样式即可 