![](https://img-blog.csdnimg.cn/20201014180756780.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
笔记
Harding Duan
这个作者很懒,什么都没留下…
展开
-
用transition以及left实现轮播图
用transition以及left实现轮播图:html代码如下 <div class="slide"> <ul class="viewbox"> <li><img src="../06选项卡/img/01.jpg" alt="" /></li>原创 2018-07-16 21:14:56 · 1197 阅读 · 0 评论 -
属性节点,文本节点,文档片段节点
属性节点属性本身就是一个对象(Attr对象),但是实际上我们都是操作的Element对象来进行操作属性。(可读可写)Element.idElement.src=""如果某个属性是标准属性,我们可以直接用这个属性Element.attibutes返回一个伪数组,包含了当前元素所有的属性名。console.log(img.attributes) //返回i...原创 2018-08-18 15:01:16 · 601 阅读 · 0 评论 -
错误处理
错误类型JavaScript 解析或运行时,一旦发生错误,引擎就会抛出一个错误对象SyntaxError是解析代码时发生的语法错误ReferenceErrorReferenceError对象是引用一个不存在的变量时发生的错误。另一种触发场景是,将一个值分配给无法分配的对象,比如对函数的运行结果或者this赋值。RangeErrorRangeError对象是一个值超出有效范围时...原创 2018-08-18 15:02:15 · 132 阅读 · 0 评论 -
事件模型与事件流
事件模型,事件流一个事件发生后,会在子元素和父元素之间传播。这种传播分成三个阶段。window→documen→...→目标节点第一阶段:捕获阶段,从window对象传导到目标节点第二阶段:目标阶段,事件在目标节点上触发第三阶段:冒泡阶段,从目标节点传回window对象IE678的事件模型只有冒泡阶段。阻止事件冒泡event.stopPropagation()s...原创 2018-09-08 17:01:19 · 1111 阅读 · 0 评论 -
DOM事件绑定
DOM 2 级事件element.addEventListener(type,handler,boolean)第一个值代表事件类型,不加on。第二个是执行的方法。(事件处理函数)第三个值是一个布尔值,默认为false,只在冒泡阶段执行。true为在捕获阶段执行element.removeEventListener(type,handler,boolean)第一个值代表事件类型,不...原创 2018-09-08 17:03:31 · 106 阅读 · 0 评论 -
事件对象与事件委托
事件对象Event 对象代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。event.composedPath()返回一个数组,包含了目标节点冒泡经过的所有节点event.target返回事件的目标节点(触发该事件的节点)event.currentTarget返回当前事件所在的节点。与this一致。event.srcElementIE中返回...原创 2018-09-08 17:04:43 · 314 阅读 · 0 评论 -
鼠标事件
click:单击事件。dblclick:双击事件。mousedown:按下鼠标键时触发。mouseup:释放按下的鼠标键时触发。mousemove:鼠标移动事件。mouseover:移入事件。mouseout:移出事件。mouseenter:移入事件。mouseleave:移出事件。contextmenu:右键事件。mouseover事件和mouseenter事件,都是鼠标进...原创 2018-09-08 17:07:26 · 2539 阅读 · 0 评论 -
CSS操作
element.style既可以设置行内样式,也可以读取行内样式。可读可写Element.style.cssText用来读写当前元素的所有行内样式。如果设置cssText值为“”(空字符串),则会清空该元素的所有行内样式。Element.style.length返回该元素有多少条行内样式。Element.style.getPropertyValue()获取某个属性的属性值...原创 2018-09-08 17:08:42 · 179 阅读 · 0 评论 -
AJAX
一、ajax的原理:通过XMLHttpRequest()对象 向服务器发出 异步 请求;从服务器获取数据 通过js Dom操作更新页面异步:向服务器发送请求 不阻碍用户的操作 实现无刷新数据更新二、Ajax的优点:1、最大的一点是能在不刷新整个页面的情况下维持与服务器通信 这使得web应用程序迅捷的响应用户交互,在页面内与服务器通信给用户的体验非常好。2、使用异步方式与服务...原创 2018-10-13 16:50:39 · 100 阅读 · 0 评论 -
正则表达式(Regular Expression)
一、正则表达式是什么?匹配想要的东西为什么使用正则表达式:可以1.测试字符串内的模式2.替换文本3.基于模式匹配从字符串中提取字符串二、.正则表达式的创建语法:var reg=/内容/修饰词var reg=new RegExp(pattern,modifiers)pattern:模式modifiers:修饰词方法:test()验证字符串是否满足正则表达式e...原创 2018-10-13 17:33:28 · 817 阅读 · 0 评论 -
完美运动框架
完美运动框架封装function getStyle (ele,attr) { return parseFloat(window.getComputedStyle(ele)[attr]) }function startMove (ele,obj,fn) { //传入三个值,第一个是元素,第二个是对象,第三个是一个回调函数, //代表执行...原创 2018-10-13 17:59:22 · 356 阅读 · 0 评论 -
使用完美运动框架写无缝轮播
html<div class="slide"> <ul class="viewbox"> <li><img src="img/05.jpg" alt="" /></li> <li><img src="img/01.jpg&q原创 2018-10-13 18:06:21 · 393 阅读 · 0 评论 -
Cookie封装
取某个cookie种的数据 function getCookie (name) { var str = document.cookie; var arrStr=str.split("; ") //遍历数组 for (var i = 0; i < arrStr.length; i++) { ...原创 2018-10-28 18:49:34 · 702 阅读 · 0 评论 -
Element节点
Element节点对象对应网页的 HTML 元素。每一个 HTML 元素在 DOM 树上都会转化成一个Element节点对象元素节点的属性Element.id返回当前元素的id名Element.tagName返回当前元素的标签名Element.className返回当前元素的class名,它的值是一个字符串,每个class之间用空格分割。可读可写。Element.clas...原创 2018-08-18 14:59:54 · 869 阅读 · 0 评论 -
document节点
document节点对象是文档的根节点,每张网页都有自己的document对象。window.document属性就指向这个对象。只要浏览器开始载入 HTML 文档,该对象就存在了,可以直接使用。document节点的属性document.doctype获取doctype节点(获取文档类型节点)(如果该网站没有声明文档类型.则返回null)console.log(document...原创 2018-08-18 14:58:53 · 359 阅读 · 0 评论 -
DOM节点
DOM 是 JavaScript 操作网页的接口,全称为“文档对象模型”(Document Object Model)。它的作用是将网页转为一个 JavaScript 对象,从而可以用脚本进行各种操作(增删改查)DOM树:浏览器会根据 DOM 模型,将结构化文档(比如 HTML 和 XML)解析成一系列的节点,再由这些节点组成一个树状结构(DOM Tree)。DOM树:浏览器会根据 DOM...原创 2018-08-18 14:56:45 · 102 阅读 · 0 评论 -
BOM浏览器对象模型
window对象window对象的属性window对象是是指浏览器窗口。它是当前页面的顶层对象console.log(window.screenX,window.screenY) //这两个属性代表浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离(单位像素)。//这两个属性只读。console.log(window.in...原创 2018-07-29 11:55:50 · 157 阅读 · 0 评论 -
浏览器环境
浏览器环境五大主流浏览器内核1.火狐Firefox: Gecko 引擎 2.苹果Safari: WebKit 引擎 3.谷歌Chrome: Blink 引擎 4.IE浏览器: ...原创 2018-07-29 12:08:57 · 503 阅读 · 0 评论 -
时间对象
什么是时间对象Date对象是 JavaScript 原生的时间库。它以1970年1月1日00:00:00作为时间的零点,可以表示的时间范围是前后各1亿天(单位为毫秒)。我们需要获取时间就需要用到时间对象。用法1.可以当做普通函数调用返回当前时间 Date()2.也可以使用构造函数调用var now = new Date()不传参数返回当前时间var then...原创 2018-07-29 12:18:36 · 221 阅读 · 0 评论 -
定时器timer
JavaScript 提供定时执行代码的功能,叫做定时器。它们向任务队列添加定时任务。setTimeout( 函数 || 执行的代码 ,time)//setTimeout只能运行一次,叫延时调用//第一种写法:setTimeout("console.log(1)",1000)//第二种写法:setTimeout(function(){console.log(1)},1000) ...原创 2018-07-29 12:22:46 · 137 阅读 · 0 评论 -
数组array
数组(数据的组合) 数组的定义: 数组是按次序排列的一组值。每个值的位置都有编号(从0开始),整个数组用方括号表示。数组的赋值与读取:下标:数组中每个值的索引号,除了在定义时赋值,数组也可以先定义后赋值。数组的方法: 1.数组的length属性,返回数组的成员数量 2.arr.push() 向数组后...原创 2018-07-15 20:31:50 · 180 阅读 · 0 评论 -
原生js实现选项卡效果
最简易的选项卡代码如下:<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;list-s原创 2018-07-15 20:51:09 · 699 阅读 · 0 评论 -
用transition以及opacity实现轮播图
用transition以及opacity实现轮播图:<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css&qu原创 2018-07-22 20:08:28 · 1989 阅读 · 0 评论 -
事件event
鼠标事件:onclick 点击事件 鼠标单击触发的事件ondblclick 双击事件 鼠标双击触发的事件 onmousedown ...原创 2018-07-22 21:23:39 · 192 阅读 · 0 评论 -
函数
定义:函数是一段可重复调用的代码块。写法: 第一种:函数声明 function 函数名(参数1,参数2) {函数体; } 匿名函数:function (){console.log(1); } 同样也可以传参 第二种:函数表达式 va...原创 2018-07-23 08:35:58 · 109 阅读 · 0 评论 -
字符串
定义: 字符串就是零个或多个排在一起的字符,放在单引号或双引号之中。转义: 双引号中可以使用单引号,单引号中可以使用双引号. 非要在双引号中使用双引号,需要转义.转义符号\ var str0="str'i'ng"console.log(str0) //控制台返回的值为str'i'ngva...原创 2018-07-23 09:17:00 · 111 阅读 · 0 评论 -
对象
JavaScript 中的所有事物都是对象,如:字符串、数值、数组、函数等,每个对象带有属性和方法。对象的属性:反映该对象某些特定的性质的,如:字符串的长度、图像的长宽等对象的方法:能够在对象上执行的动作。例如,表单的“提交”(Submit),时间的“获取”(getYear)等;JavaScript 提供多个内建对象,比如 String、Date、Array 等等,使用对象前先定义,如下使用...转载 2018-08-11 20:22:42 · 121 阅读 · 0 评论 -
JQuery
jq:一个优秀的js库,简化js操作,兼容,提供了大量的方法链式操作原理:jq对象调用jq方法时 当方法执行结束后返回当前的这个jq对象本身,继续进行方法调用.$() 里面可以传哪几种类型的对象1.$("选择器")2.$(function(){}) --> (window.onload=function(){})3.$(obj) ...原创 2018-11-19 11:43:51 · 118 阅读 · 0 评论