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)