- 博客(90)
- 资源 (1)
- 收藏
- 关注
原创 23-纯js实现拖拽的对话框
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .login-header { width: 100%; text-align: center;...
2019-06-08 23:38:04
359
原创 22-纯js-图片跟着鼠标飞的效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> *{ margin: 0; padding: 0; } body{ ...
2019-06-08 23:35:13
220
原创 20-js-动画函数的封装
一、匀速动画函数的封装 //设置任意的一个元素,移动到指定的目标位置 function animate(element, target) { clearInterval(element.timeId); //先清理定时器,这样无论怎么点击按钮都不会变快 //定时器的id值存储到对象的一个属性中 element.timeId = setInte...
2019-06-06 21:45:24
479
1
原创 19-js-关于定时器setInterval、
一、第一种定时器 setInterval(函数,事件)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定时器</title> <script> //BOM中有两个定时器---计时器 //定时...
2019-06-06 21:39:37
1288
原创 18-js-关于userAgent、history、location
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <!--=============================================BOM============...
2019-06-06 21:34:42
380
原创 17-js轮播图
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; ...
2019-06-06 21:32:23
791
原创 16-js百度搜索框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> #box { width: 450px; margin: 200px auto; ...
2019-06-06 21:25:50
346
转载 15事件冒泡,事件委托,事件捕获·
事件委托:就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件,大大的减少与dom的交互次数,提高性能事件冒泡:就是事件从最深的节点开始,然后逐步向上传播事件,举个例子:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul>div事件捕获:从父级...
2019-06-06 21:15:47
209
原创 14-js 为元素绑定多个事件兼容处理
为元素绑定事件(DOM):一种,但是不兼容,有两种1 、对象.addEventListener(“事件类型”,事件处理函数,false);–谷歌和火狐支持,IE8不支持为按钮绑定点击事件:参数1:事件的类型—事件的名字,没有on参数2:事件处理函数—函数(命名函数,匿名函数)参数3:布尔类型,目前就写falsemy$("btn").addEventListener("c...
2019-06-06 19:56:29
223
原创 13动态创建列表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } ul { ...
2019-06-06 19:08:32
165
原创 12点击按钮创建一个列表
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>title</title> <style> div { width: 300px; height: 400px; ba...
2019-06-06 19:04:32
431
原创 12-元素创建
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> /* * * 元素创建-----为了提高用户的体验 ...
2019-06-06 10:57:57
249
原创 11-全选和全不选
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { ...
2019-06-05 19:01:45
151
原创 10-隔行变色(节点)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="button" value="变色" id="btn"&g...
2019-06-05 18:53:23
222
原创 09-关于节点
一、节点基础内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>节点知识</title></head><body> <div id="dv"> <s...
2019-06-05 18:50:02
255
原创 08-tab切换案例实现
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { ...
2019-06-05 18:46:10
282
原创 07-自定义属性
一、自定义属性的映入<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> ul{ list-style-type: none; cursor: poi...
2019-06-05 18:43:25
107
原创 06-innerText和innerHTML的区别
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> div{ width: 300px; height: 200px; border: 2...
2019-06-05 18:37:27
148
原创 05-案例验证文本框密码长度
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body><input type="text" value="" id="txt"/><scri...
2019-06-05 18:34:18
514
原创 04-案例模拟搜索框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> input { color: gray; } </style></head&g...
2019-06-05 18:33:18
192
原创 03-获取元素的方法
根据id属性的值获取元素,返回来的是一个元素对象document.getElementById(“id属性的值”);根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象document.getElementsByTagName(“标签名字”);!!!下面的几个,有的浏览器不支持:根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对...
2019-06-05 18:31:34
318
原创 1-02体验DOM的小案例
一、排他功能<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>按钮排他功能</title></head><body> <input type="button" value="没怀...
2019-06-05 18:25:01
270
原创 1-01DOM概念基础
一、js三部分js分为三部分:ECMAScript: js基本的语法DOM: Document Object Model 文档对象模型,操作界面的元素BOM: Browser Object Model 浏览器对象模型,操作的是浏览器二、js基本概念DOM:文档对象模型文档(documnet):把一个html文件看出一个文档,由于万物皆对象,所以把这个文档看成是一个...
2019-05-27 22:35:30
121
原创 035 基本包装类型
基本包装类型:本身是基本类型,但是在执行过程中,如果这种类型的变量调用了属性或者方法,那么这种类型就不再是基本类型了,而是基本包装类型,这个变量也不再是普通变量,而是基本包装类型对象记住两句话:普通变量(基本类型)不能直接调用属性或者方法对象可以直接调用属性和方法 var str="hello"; //普通变量 基本类型 str=str.replace...
2019-05-09 08:26:15
125
原创 034 Array常用方法
/**.Array.isArray(对象) 用来判断对象是否为数组* .Array.from( )*.concat(数组,数组,数组,…) 组合成一个新的数组* .every(函数) 返回值是布尔类型,函数作为参数使用,函数中有三个参数,分别为 元素值,元素索引,原数组* 如果这个数组中的每个元素都符合条件,最后才返回的是true* .filter(函数) 返回的是这个数组中...
2019-05-09 01:30:51
142
原创 033 String
一、String对象string ---->字符串类型----基本类型String---->字符串类型----引用类型js中没有字符类型注意!!!!!!js中无论是单引号的还是双引号的都是字符串其他语言:字符类型 单引号字符串类型 双引号 var str="hello"; //可以看成是一个字符数组 for(var i=0;i<str.l...
2019-05-06 22:30:15
149
原创 031 简单类型和复杂类型
原始数据类型: number,string,boolean,undefined, null,object基本类型(简单类型),值类型: number,string,boolean复杂类型(引用类型):object空类型:undefined,null值类型的值在哪一块空间中存储? 栈中存储引用类型的值在哪一块空间中存储?对象在堆上存储,地址在栈上存储值类型作为函数的参数,传递的是值引用...
2019-04-25 00:08:56
195
原创 030 JSON格式的数据
JSON格式的数据:一般都是成对的,键值对JSON也是一个对象,数据都是成对的,一啊不能JSON格式的数据无论是键还是值都是用双引号括起来的 var json={ "name":"小林", //这是一对键值对 "age":18, "sex":"男", };注意!!!!!遍历对象是不能通过fo循...
2019-04-25 00:02:00
124
原创 029 工厂模式常见对象
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>工厂模式常见对象</title> <script> /* * * 如何获取该变量(对象)是不是属于...
2019-04-24 23:56:42
138
原创 028 创建对象
编程思想编程思想:把一些生活中做事的经验融入到程序中面向过程:凡事都要亲力亲为,每件事的具体过程都要知道,注重的是过程面向对象:根据需求找对象,所有的事都用对象来做,注重的是结果面向对象特性:封装,继承,多态 (抽象性)js不是面向对象的语言,但是可以模拟面向对象的思想js是一门基于对象的语言:万物皆对象:---------->程序猿 程旭媛什么是对象?看的见,摸得到,具体...
2019-04-24 23:53:21
182
原创 027预解析
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> //预解析中,变量的提升,只会在当前的作用域中提升,提前到当前的作用域的最上面 ...
2019-04-23 00:08:11
107
原创 021预解析
预解析:提前解析代码预解析:就是在解析代码之前预解析做什么事?把变量的声明提前了----提前到当前所在的作用域的最上面函数的声明也会被提前—提前到当前所在的作用域的最上面变量预解析://把变量的声明提前了 console.log(num); //undefined var num=10;相当于: var num; console.log(num); ...
2019-04-22 23:47:48
124
原创 020 作用域链
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>作用域链</title> <script> var num=10; function f1() { ...
2019-04-22 23:19:41
167
1
原创 019 作用域,作用链
作用域: 使用范围全局变量:声明的变量是使用var声明的,那么这个变量就是全局变量,全局变量可以在页面的任何位置使用除了函数以外,其他的任何位置定义的变量都是全局变量局部变量:在函数内部定义的变量,是局部变量,外面不能使用全局变量,如果页面不关闭,那么就不会释放,就会占空间,消耗内存隐式全局变量:声明的变量没有var,就叫隐式全局变量全局变量是不能被删除的,隐式全局变量是可以被删除的...
2019-04-22 23:15:16
153
原创 018 函数作为参数,作为返回值,数据类型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>函数</title> <script> //======================================数据类型====...
2019-04-22 22:58:48
404
原创 017函数定义的两种定义方式
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>函数定义方式</title> <script> //命名函数; 函数有名字 //匿名函数:函数没有名字 ...
2019-04-22 22:57:35
523
原创 016 arguments
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>arguments</title> <script> //定义一个函数,如果不确定用户是否传入了参数,或者不确定用户传入了多少个参数,可...
2019-04-22 22:55:56
96
原创 015 函数练习
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>函数练习</title> <script> // - 求2个数中的最大值 // function getM...
2019-04-22 22:54:11
107
原创 014 019 函数的基础知识.html
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>函数基础知识</title> <script> //------------------------------------------...
2019-04-17 23:21:18
127
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人