Harding Duan-CSDN博客

原创 JQuery

jq:一个优秀的js库,简化js操作,兼容,提供了大量的方法链式操作原理:jq对象调用jq方法时当方法执行结束后返回当前的这个jq对象本身,继续进行方法调用.$() 里面可以传哪几种类型的对象1.$("选择器")2.$(function(){}) --> (window.onload=function(){})3.$(obj) ...

2018-11-19 11:43:51 114

原创 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 697

原创使用完美运动框架写无缝轮播

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 387

原创完美运动框架

完美运动框架封装function getStyle (ele,attr) { return parseFloat(window.getComputedStyle(ele)[attr]) }function startMove (ele,obj,fn) { //传入三个值,第一个是元素,第二个是对象,第三个是一个回调函数, //代表执行...

2018-10-13 17:59:22 349

原创正则表达式(Regular Expression)

一、正则表达式是什么？匹配想要的东西为什么使用正则表达式：可以1.测试字符串内的模式2.替换文本3.基于模式匹配从字符串中提取字符串二、.正则表达式的创建语法：var reg=/内容/修饰词var reg=new RegExp（pattern，modifiers）pattern：模式modifiers：修饰词方法：test（）验证字符串是否满足正则表达式e...

2018-10-13 17:33:28 814

原创 AJAX

一、ajax的原理：通过XMLHttpRequest()对象向服务器发出异步请求；从服务器获取数据通过js Dom操作更新页面异步：向服务器发送请求不阻碍用户的操作实现无刷新数据更新二、Ajax的优点：1、最大的一点是能在不刷新整个页面的情况下维持与服务器通信这使得web应用程序迅捷的响应用户交互，在页面内与服务器通信给用户的体验非常好。2、使用异步方式与服务...

2018-10-13 16:50:39 95

原创 AJAX封装与调用

AJAX封装function ajax(obj){ //1.创建ajax对象 var xhr if(window.XMLHttpRequest){ 支持此对象 xhr=new XMLHttpRequest() ...

2018-10-04 22:19:48 2047

原创 PHP数据库

初识数据库1.创建新数据库，找到排序方式为utf8_general_ci2.数据库中还要有数据表，字段代表表头的个数3.给数据表的每个字段添加名字，类型以及长度4.点击结构，可以查看数据表结构5.钥匙所在的名字就是主键6.点击插入，可以插入数据7.点击执行可以完成插入SQL语句SELECT INSERT UPDATE DELETE增删改查SELECT name,id...

2018-10-04 22:13:22 197

原创 PHP基础

PHP( Hypertext Preprocessor) 超文本预处理器PHP 是一种创建动态交互性站点的强有力的服务器端脚本语言。PHP安装1.本机地址:127.0.0.1 也可以用localhost代替, 也可以通过局域网IP代替2.输入到网址栏3.ok,找到安装的xampp地址，打开文件夹下的htdocs创建php文件夹。我们以后所有写的php文件都放在这里4.php目录里一...

2018-10-04 22:10:38 801

原创放大镜效果

HTML代码<div class="box"> <img src="img/08.jpg"/> <div class="slider"></div></div><div class="lens"> <img src="img

2018-09-08 17:41:24 257

原创爬楼梯,楼层效果

HTML代码<div class="wrap"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div&a

2018-09-08 17:32:25 614

原创 CSS操作

element.style既可以设置行内样式，也可以读取行内样式。可读可写Element.style.cssText用来读写当前元素的所有行内样式。如果设置cssText值为“”（空字符串），则会清空该元素的所有行内样式。Element.style.length返回该元素有多少条行内样式。Element.style.getPropertyValue()获取某个属性的属性值...

2018-09-08 17:08:42 178

原创鼠标事件

click：单击事件。dblclick：双击事件。mousedown：按下鼠标键时触发。mouseup：释放按下的鼠标键时触发。mousemove：鼠标移动事件。mouseover：移入事件。mouseout：移出事件。mouseenter：移入事件。mouseleave：移出事件。contextmenu：右键事件。mouseover事件和mouseenter事件，都是鼠标进...

2018-09-08 17:07:26 2504

原创事件对象与事件委托

事件对象Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。event.composedPath()返回一个数组，包含了目标节点冒泡经过的所有节点event.target返回事件的目标节点（触发该事件的节点）event.currentTarget返回当前事件所在的节点。与this一致。event.srcElementIE中返回...

2018-09-08 17:04:43 305

原创 DOM事件绑定

DOM 2 级事件element.addEventListener(type,handler,boolean)第一个值代表事件类型，不加on。第二个是执行的方法。(事件处理函数)第三个值是一个布尔值，默认为false，只在冒泡阶段执行。true为在捕获阶段执行element.removeEventListener(type,handler,boolean)第一个值代表事件类型，不...

2018-09-08 17:03:31 104

原创事件模型与事件流

事件模型，事件流一个事件发生后，会在子元素和父元素之间传播。这种传播分成三个阶段。window→documen→...→目标节点第一阶段：捕获阶段，从window对象传导到目标节点第二阶段：目标阶段，事件在目标节点上触发第三阶段：冒泡阶段，从目标节点传回window对象IE678的事件模型只有冒泡阶段。阻止事件冒泡event.stopPropagation()s...

2018-09-08 17:01:19 1103

原创错误处理

错误类型JavaScript 解析或运行时，一旦发生错误，引擎就会抛出一个错误对象SyntaxError是解析代码时发生的语法错误ReferenceErrorReferenceError对象是引用一个不存在的变量时发生的错误。另一种触发场景是，将一个值分配给无法分配的对象，比如对函数的运行结果或者this赋值。RangeErrorRangeError对象是一个值超出有效范围时...

2018-08-18 15:02:15 120

原创属性节点,文本节点,文档片段节点

属性节点属性本身就是一个对象（Attr对象)，但是实际上我们都是操作的Element对象来进行操作属性。(可读可写)Element.idElement.src=""如果某个属性是标准属性，我们可以直接用这个属性Element.attibutes返回一个伪数组，包含了当前元素所有的属性名。console.log(img.attributes) //返回i...

2018-08-18 15:01:16 595

原创 Element节点

Element节点对象对应网页的 HTML 元素。每一个 HTML 元素在 DOM 树上都会转化成一个Element节点对象元素节点的属性Element.id返回当前元素的id名Element.tagName返回当前元素的标签名Element.className返回当前元素的class名,它的值是一个字符串，每个class之间用空格分割。可读可写。Element.clas...

2018-08-18 14:59:54 863

原创 document节点

document节点对象是文档的根节点，每张网页都有自己的document对象。window.document属性就指向这个对象。只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用。document节点的属性document.doctype获取doctype节点(获取文档类型节点)(如果该网站没有声明文档类型.则返回null)console.log(document...

2018-08-18 14:58:53 344

原创 DOM节点

DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（增删改查)DOM树:浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。DOM树:浏览器会根据 DOM...

2018-08-18 14:56:45 92

JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用...

2018-08-11 20:22:42 114

原创定时器timer

JavaScript 提供定时执行代码的功能，叫做定时器。它们向任务队列添加定时任务。setTimeout( 函数 || 执行的代码 ,time)//setTimeout只能运行一次,叫延时调用//第一种写法:setTimeout("console.log(1)",1000)//第二种写法:setTimeout(function(){console.log(1)},1000) ...

2018-07-29 12:22:46 135

原创时间对象

什么是时间对象Date对象是 JavaScript 原生的时间库。它以1970年1月1日00:00:00作为时间的零点，可以表示的时间范围是前后各1亿天（单位为毫秒）。我们需要获取时间就需要用到时间对象。用法1.可以当做普通函数调用返回当前时间 Date（）2.也可以使用构造函数调用var now = new Date（）不传参数返回当前时间var then...

2018-07-29 12:18:36 213

原创浏览器环境

浏览器环境五大主流浏览器内核1.火狐Firefox： Gecko 引擎 2.苹果Safari： WebKit 引擎 3.谷歌Chrome： Blink 引擎 4.IE浏览器: ...

2018-07-29 12:08:57 492

原创 BOM浏览器对象模型

window对象window对象的属性window对象是是指浏览器窗口。它是当前页面的顶层对象console.log(window.screenX,window.screenY) //这两个属性代表浏览器窗口左上角相对于当前屏幕左上角的水平距离和垂直距离（单位像素）。//这两个属性只读。console.log(window.in...

2018-07-29 11:55:50 153

原创字符串

定义: 字符串就是零个或多个排在一起的字符，放在单引号或双引号之中。转义: 双引号中可以使用单引号,单引号中可以使用双引号. 非要在双引号中使用双引号,需要转义.转义符号\ var str0="str'i'ng"console.log(str0) //控制台返回的值为str'i'ngva...

2018-07-23 09:17:00 106

原创函数

定义:函数是一段可重复调用的代码块。写法: 第一种：函数声明 function 函数名(参数1，参数2) {函数体; } 匿名函数:function (){console.log(1); } 同样也可以传参第二种：函数表达式 va...

2018-07-23 08:35:58 101

原创事件event

鼠标事件：onclick 点击事件鼠标单击触发的事件ondblclick 双击事件鼠标双击触发的事件 onmousedown ...

2018-07-22 21:23:39 188

原创用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 1978

原创用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 1192

原创原生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 697

原创数组array

数组(数据的组合) 数组的定义: 数组是按次序排列的一组值。每个值的位置都有编号（从0开始），整个数组用方括号表示。数组的赋值与读取:下标：数组中每个值的索引号,除了在定义时赋值，数组也可以先定义后赋值。数组的方法: 1.数组的length属性，返回数组的成员数量 2.arr.push() 向数组后...

2018-07-15 20:31:50 170

段位十足的博客