""" 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
'''语法上肯定比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(){})
// 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:在动画完成时执行的函数,每个元素执行一次。
// 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 函数
backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor Color outlineColor
# 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/
尤其是前端框架 几乎都是直接看官网拷贝样式即可