07 2018 档案

区别mouseover与mouseenter?
摘要:区别mouseover与mouseenter? * mouseover: 在移入子元素时也会触发, 对应mouseout,进入子元素的时候,父元素显示离开状态 * mouseenter: 只在移入当前元素时才触发, 对应mouseleave,进入子元素时,父元素没有显示离开,离开整个区域才会是离开状 阅读全文

posted @ 2018-07-31 21:12 你若精彩,蝴蝶自来 阅读(820) 评论(0) 推荐(0)

jQuery之_事件绑定与解绑
摘要:使用jQuery实现事件的绑定和解绑 就是所谓的事件操作。 1. 事件绑定(2种): * eventName(function(){}) 绑定对应事件名的监听, 例如:$('#div').click(function(){}); * on(eventName, funcion(){}) 通用的绑定事 阅读全文

posted @ 2018-07-31 20:39 你若精彩,蝴蝶自来 阅读(2771) 评论(0) 推荐(0)

文档的增删改
摘要:1. 添加/替换元素 * append(content) 向当前匹配的所有元素内部的最后插入指定内容 * prepend(content) 向当前匹配的所有元素内部的最前面插入指定内容 * before(content) 将指定内容插入到当前所有匹配元素的前面 * after(content) 将指 阅读全文

posted @ 2018-07-31 11:18 你若精彩,蝴蝶自来 阅读(209) 评论(0) 推荐(0)

全选练习-原生版和jQuery
摘要:今天来做一些练习,做全选练习 原生版的实现: 功能说明: 1. 点击'全选': 选中所有爱好 2. 点击'全不选': 所有爱好都不勾选 3. 点击'反选': 改变所有爱好的勾选状态 4. 点击'提交': 提示所有勾选的爱好 5. 点击'全选/全不选': 选中所有爱好, 或者全不选中 6. 点击某个爱 阅读全文

posted @ 2018-07-30 17:51 你若精彩,蝴蝶自来 阅读(267) 评论(0) 推荐(0)

jQuery之元素查找
摘要:在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签1. children(): 子标签中找2. find() : 后代标签中找3. parent() : 父标签4. prevAll() : 前面所有的兄弟标签5. nextAll() : 后面所有的兄弟标签6. siblings() : 前后 阅读全文

posted @ 2018-07-30 16:42 你若精彩,蝴蝶自来 阅读(197) 评论(0) 推荐(0)

jQuery之过滤元素
摘要:还是那句话,这些知识一个小小的练习,更多的请看jQuery手册 在jQuery对象中的元素对象数组中过滤出一部分元素来1. first()2. last()3. eq(index|-index)4. filter(selector)5. not(selector)6. has(selector) 需 阅读全文

posted @ 2018-07-30 13:15 你若精彩,蝴蝶自来 阅读(1291) 评论(0) 推荐(0)

jQuery之回到顶部
摘要:实现回到顶部的功能,根据学了元素滚动实现,温习知识点。 做之前先理清一下步骤和思路: 1、获得页面的滚动长度 2、设置总时间 var time = 500; 3、设置间隔时间 var intervalTime = 50; 4、使用循环定时器不断滚动 5、/到达顶部, 停止定时器 //获得每次滑动的距 阅读全文

posted @ 2018-07-30 11:20 你若精彩,蝴蝶自来 阅读(443) 评论(1) 推荐(0)

jQuery之_元素滚动
摘要:对应的知识点铺垫,但是有一个很重要的问题就是兼容IE和chorme的 1. scrollTop(): 读取/设置滚动条的Y坐标2. $(document.body).scrollTop()+$(document.documentElement).scrollTop() 读取页面滚动条的Y坐标(兼容c 阅读全文

posted @ 2018-07-27 18:53 你若精彩,蝴蝶自来 阅读(837) 评论(0) 推荐(0)

jQuery之offset,position
摘要:获取/设置标签的位置数据 * offset(): 相对页面左上角的坐标 * position(): 相对于父元素左上角的坐标. 需求: 1. 点击 btn1 打印 div1 相对于页面左上角的位置 打印 div2 相对于页面左上角的位置 打印 div1 相对于父元素左上角的位置 打印 div2 相对 阅读全文

posted @ 2018-07-27 18:30 你若精彩,蝴蝶自来 阅读(193) 评论(0) 推荐(0)

jQuery之css
摘要:设置css样式/读取css值 css() 1. 得到第一个p标签的颜色 2. 设置所有p标签的文本颜色为red 3. 设置第2个p的字体颜色(#ff0011),背景(blue),宽(300px), 高(30px) 阅读全文

posted @ 2018-07-27 18:09 你若精彩,蝴蝶自来 阅读(136) 评论(0) 推荐(0)

jQuery之属性
摘要:1. 操作任意属性 attr() 操作非布尔值的 removeAttr() prop() 操作布尔值的2. 操作class属性 addClass() 添加class属性 removeClass() 移除class属性3. 操作HTML代码/文本/值 html() val() 需求和实现如下: 1. 阅读全文

posted @ 2018-07-27 17:43 你若精彩,蝴蝶自来 阅读(211) 评论(0) 推荐(0)

多tab点击切换
摘要:现在来一个小练习,就是用js实现多tab之间的切换: 对应的css格式如图: 效果图: js实现的结果: 可以实现正常的切换了。 阅读全文

posted @ 2018-07-27 17:41 你若精彩,蝴蝶自来 阅读(545) 评论(0) 推荐(0)

_$工具方法
摘要:因为方法很多,掌握了类似的,查找文档就很容易了,所以不用一个个都去记住,学会一个就好了。下面联系几个$工具方法: 还有的就是文档其实是一个非常好的东西,因为文档说的非常清楚,又比较官方。 1. $.each(): 遍历数组或对象中的数据 2. $.trim(): 去除字符串两边的空格 3. $.ty 阅读全文

posted @ 2018-07-27 11:23 你若精彩,蝴蝶自来 阅读(1070) 评论(0) 推荐(0)

jQuery表单选择器
摘要:现有以下表单: 需求如下: 1. 选择不可用的文本输入框 2. 显示选择爱好 的个数 3. 显示选择的城市名称 现实现如下: 1. 选择不可用的文本输入框 2. 显示选择爱好 的个数 3. 显示选择的城市名称 阅读全文

posted @ 2018-07-27 10:39 你若精彩,蝴蝶自来 阅读(214) 评论(0) 推荐(0)

表格隔行变色
摘要:表格的代码如下: 设置表格的样式: 效果图如下: 隔行变色、隔列变色类似: 实现方式有三种: 第一种,在css中设置: 剩下的是通过js设置: 1、通过选择器 2、通过添加class属性 效果图: 阅读全文

posted @ 2018-07-26 18:37 你若精彩,蝴蝶自来 阅读(280) 评论(0) 推荐(0)

jQuery之过滤选择器
摘要:在原有选择器匹配的元素中进一步进行过滤的选择器 * 基本 * 内容 * 可见性 * 属性 需求 1. 选择第一个div 2. 选择最后一个class为box的元素 3. 选择所有class属性不为box的div 4. 选择第二个和第三个li元素 5. 选择内容为BBBBB的li 6. 选择隐藏的li 阅读全文

posted @ 2018-07-26 12:37 你若精彩,蝴蝶自来 阅读(1908) 评论(0) 推荐(0)

jQuery之层次选择器
摘要:层次选择器: 查找子元素, 后代元素, 兄弟元素的选择器1. ancestor descendant 在给定的祖先元素下匹配所有的后代元素2. parent>child 在给定的父元素下匹配所有的子元素3. prev+next 匹配所有紧接在 prev 元素后的 next 元素4. prev~sib 阅读全文

posted @ 2018-07-26 12:35 你若精彩,蝴蝶自来 阅读(220) 评论(0) 推荐(0)

jQuery之基本选择器
摘要:1. 是什么? - 有特定格式的字符串2. 作用 - 用来查找特定页面元素3. 基本选择器 - #id : id选择器 - element : 元素选择器 - .class : 属性选择器 - * : 任意标签 - selector1,selector2,selectorN : 取多个选择器的并集( 阅读全文

posted @ 2018-07-26 12:33 你若精彩,蝴蝶自来 阅读(171) 评论(0) 推荐(0)

jQuery对象
摘要:1. jQuery对象是一个包含所有匹配的任意多个dom元素的伪数组对象2. 基本行为 * size()/length: 包含的DOM元素个数 * [index]/get(index): 得到对应位置的DOM元素 * each(): 遍历包含的所有DOM元素 * index(): 得到在所在兄弟元素 阅读全文

posted @ 2018-07-26 12:30 你若精彩,蝴蝶自来 阅读(219) 评论(0) 推荐(0)

jQuery核心函数
摘要:<!--1. 作为一般函数调用: $(param) 1). 参数为函数 : 当DOM加载完成后,执行此回调函数 2). 参数为选择器字符串: 查找所有匹配的标签, 并将它们封装成jQuery对象 3). 参数为DOM对象: 将dom对象封装成jQuery对象 4). 参数为html标签字符串 (用得 阅读全文

posted @ 2018-07-26 12:26 你若精彩,蝴蝶自来 阅读(303) 评论(0) 推荐(0)

jQuery的2把利器
摘要:<!-- $是一个函数,首先是给window添加$,然后该值是一个函数,函数返回的值是对象。1. jQuery核心函数 * 简称: jQuery函数($/jQuery) * jQuery库向外直接暴露的就是$/jQuery * 引入jQuery库后, 直接使用$即可 * 当函数用: $(xxx) * 阅读全文

posted @ 2018-07-26 12:24 你若精彩,蝴蝶自来 阅读(194) 评论(0) 推荐(0)

初始jQuery
摘要:刚学完javascript,接着就学一下jQuery,接下来显示jQuery的学习历程,学完后再继续更新css3和less,希望可以坚持学习发博。 1. 了解jQuery * 是什么: What? * 一个JS函数库: write less, do more * 封装简化DOM操作(CRUD) / 阅读全文

posted @ 2018-07-26 12:22 你若精彩,蝴蝶自来 阅读(160) 评论(0) 推荐(0)

JSON:JavaScript 对象表示法
摘要:JSON:JavaScript 对象表示法(JavaScript Object Notation)。 JSON 是存储和交换文本信息的语法。类似 XML。 JSON 比 XML 更小、更快,更易解析。 /* * JSON * - JS中的对象只有JS自己认识,其他的语言都不认识 * - JSON就是 阅读全文

posted @ 2018-07-24 17:09 你若精彩,蝴蝶自来 阅读(705) 评论(0) 推荐(0)

二级菜单实现
摘要:今天来根据之前写的move函数写一个二级菜单 css代码: 阅读全文

posted @ 2018-07-24 16:41 你若精彩,蝴蝶自来 阅读(978) 评论(0) 推荐(0)

类样式的操作
摘要:* 通过style属性来修改元素的样式,每修改一个样式,浏览器就需要重新渲染一次页面 * 这样子的执行的性能是比较差的,而且这种形式当我们修改样多个样式时,也不太方便。 * 希望一行代码就可以修改多个样式 * 我们可以通过修改class的属性来间接的修改样式 * box.className = "b 阅读全文

posted @ 2018-07-23 18:22 你若精彩,蝴蝶自来 阅读(591) 评论(0) 推荐(0)

js实现轮播功能
摘要:先上图,效果大概就是这样子: 实现的功能: 1.鼠标经过第几个正方形,就要展示第几张图片,并且正方形的颜色也发生变化 2.图片自动轮播,(这需要一个定时器) 3.鼠标经过图片,图片停止自动播放(这需要清除定时器) 4.鼠标离开图片,图片继续自动轮播 (重新开始定时器) 二话不说就上代码: 阅读全文

posted @ 2018-07-23 17:24 你若精彩,蝴蝶自来 阅读(537) 评论(0) 推荐(0)

定时器应用-最终版
摘要:根据上一个实例,做到灵活应用和代码复用,把参数大部分改为形参形式传进来。 代码如下: 这里的js是一个内部的js,做到多人应用,需要提取到外部js 新建一个tools.js 应用的时候只要引入就可以了 <script type="text/javascript" src="../js/tools.j 阅读全文

posted @ 2018-07-23 10:08 你若精彩,蝴蝶自来 阅读(251) 评论(0) 推荐(0)

定时器应用-点击按钮,div向右移动
摘要:需求是点击button,div就一直往右移动,给个条件left=800px就停止移动,通过定时器来控制。 代码如下: 希望可以坚持学习新的,这也是作为一个复习,到时候要回顾一看便知,多谢支持! 阅读全文

posted @ 2018-07-20 15:12 你若精彩,蝴蝶自来 阅读(1547) 评论(0) 推荐(0)

通过js读取元素的样式
摘要:/* * 通过元素.style.样式只能获取到内联样式的值,就是style写在元素里面的值,不能获取嵌入式和外联样式的值 * 所以如果要获取除内联样式后的值,就不能通过这个获取 * alert(box1.style.height) * 还有其他的形式,比如获取元素当前显示的样式,就是不管是外联还是嵌 阅读全文

posted @ 2018-07-20 14:53 你若精彩,蝴蝶自来 阅读(3573) 评论(0) 推荐(0)

延时调用
摘要:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>延时调用</title> </head> <script type="text/javascript"> /* * setTimeout 延时调用 * 延时调用一个函数不马上执行,而 阅读全文

posted @ 2018-07-20 11:29 你若精彩,蝴蝶自来 阅读(171) 评论(0) 推荐(0)

定时器应用-切换图片的练习
摘要:需求:根据一定的时间切换图片,类似轮播类操作。 阅读全文

posted @ 2018-07-20 10:42 你若精彩,蝴蝶自来 阅读(462) 评论(0) 推荐(0)

BOM对象属性定时器的调用
摘要:使count中的内容,自动切换 阅读全文

posted @ 2018-07-19 17:00 你若精彩,蝴蝶自来 阅读(228) 评论(0) 推荐(0)

BOM浏览器对象模型
摘要:/* * BOM * 浏览器对象模型,DOM是网页对象模型,就是document * BOM可以使我们通过JS来操作浏览器 * 在BOM中为我们提供了一组对象,用来完成对浏览器的操作 * BOM对象 * Window * 代表整个浏览器的窗口,同时window也是网页中的全局对象 * * 属性: * 阅读全文

posted @ 2018-07-19 15:57 你若精彩,蝴蝶自来 阅读(188) 评论(0) 推荐(0)

键盘移动
摘要:/* * 使div可以根据不同的方向键向不同的方向移动 * 按左键,div向左移 * 按右键,div向右移 * 37 左 * 38 右 * 39 上 * 40 下 修改版,升级版 由于使用按键不仅要向右移动还要控制速度,会出现卡顿的情况。所以可以使用定时器来控制速度,按键是控制方向。 如下是修改后的 阅读全文

posted @ 2018-07-18 18:28 你若精彩,蝴蝶自来 阅读(255) 评论(0) 推荐(0)

键盘事件
摘要:这个来讲一下键盘事件,按键事件 * 键盘事件: * onkeydown --按键被按下 * 对于onkeydown来说如果一直按着某个按键不松手,则事件会一直触发 * 当onkeydown连续触发时,第一次和第二次之间会间隔稍微长一点,其他都比较快 * * onkeyup -- 按键被松开 * * 阅读全文

posted @ 2018-07-18 18:04 你若精彩,蝴蝶自来 阅读(236) 评论(0) 推荐(0)

鼠标滚轮的事件
摘要:这段时间的都是讲事件的,所以今天再来讲一个鼠标滚轮的事件。 要实现的功能是: * 当鼠标滚轮向下滚动时,box1变长 * 当鼠标滚轮向上滚动时,box1变短 废话少说,代码奉上: 阅读全文

posted @ 2018-07-18 17:14 你若精彩,蝴蝶自来 阅读(235) 评论(0) 推荐(0)

事件的拖拽一
摘要:/* * 拖拽的流程 * 1、当鼠标在被拖拽元素上按下时,开始拖拽 onmousedown * 2、当鼠标移动时被拖拽元素跟随鼠标移动onmousemove * 3、当鼠标松开时,被拖拽函数固定在当前位置 onmouseup */ 具体实现流程: 以上是比较简单的情况下,没有考虑到其他的影响下的情况 阅读全文

posted @ 2018-07-17 23:06 你若精彩,蝴蝶自来 阅读(262) 评论(0) 推荐(0)

事件的传播
摘要:首先设置三个具有祖先后代关系的div,也类似事件冒泡的设置。如下图所示 先来个响应函数,相当于回顾上一节课的内容: 来看看事件传播的具体历史发展历程: /* * 事件的传播 * 关于事件的传播网景公司和微软公司有不同的理解 * 微软公司认为事件应该是由内向外传播,也就是当事件触发时,应该先触发当前元 阅读全文

posted @ 2018-07-17 22:38 你若精彩,蝴蝶自来 阅读(224) 评论(0) 推荐(0)

事件的绑定
摘要:实现事件的绑定,一般情况下都是使用onclick等方式实现,但是使用 使用对象.事件 = 函数的形式绑定响应函数, * 它只能同时为一个元素的一个事件绑定一个函数, * 不能绑定多个,如果绑定了多个,则后边会覆盖前边的。 * 如果实现绑定多个,则可以用addEventListener()实现或者at 阅读全文

posted @ 2018-07-16 14:55 你若精彩,蝴蝶自来 阅读(175) 评论(0) 推荐(0)

事件的委派
摘要:有的时候,需要实现一个列表发生响应事件,但是新添加的也实现,又可以提高性能的方法 实现点击链接产生想要的内容,首先是可以使用循环实现: 但是 /* * 为每个超链接都绑定一个单击函数 * 这里我们为每个超链接都绑定一个单击响应函数,这种操作比较麻烦, * 而且这些操作只能为已有的超链接设置事件,而新 阅读全文

posted @ 2018-07-16 13:12 你若精彩,蝴蝶自来 阅读(260) 评论(0) 推荐(0)

事件冒泡
摘要:在工作做事件冒泡经常遇到,但是事件冒泡很多时候是有作用的。比如我弄一个嵌套层事件,来验证事件冒泡。 首先,给span和div和body绑定响应函数: 当点击span的响应函数时,div和body的响应函数都发生了,这是因为冒泡事件。 通过点击span发生响应,div和body都发生响应,这种影响关系 阅读全文

posted @ 2018-07-16 12:11 你若精彩,蝴蝶自来 阅读(168) 评论(0) 推荐(0)

div跟随鼠标移动
摘要:1、目标是实现div跟随鼠标而移动,分三种情况进行实现 a)首先获取div,进行绑定鼠标移动事件,给div开启定位功能 第一种实现方式,假如body的大小跟页面大小一样,则可以用这个方法。 1)获取鼠标的坐标,进行给div坐标赋值,实现如下: 第二种方式,假如body的高度大于可见高度,则会出现滚动 阅读全文

posted @ 2018-07-15 18:13 你若精彩,蝴蝶自来 阅读(1978) 评论(0) 推荐(0)

事件对象
摘要:这次来讲讲HTML 的event对象,事件对象,首先实现的是实现功能:当鼠标在areadiv中移动时,在messdiv中来显示鼠标的坐标。 首先先弄两个div,代码如下: <body> //首先获取两个div var aeradiv = document.getElementById("areadi 阅读全文

posted @ 2018-07-15 13:08 你若精彩,蝴蝶自来 阅读(142) 评论(0) 推荐(0)