蔡蔡动起来-CSDN博客

原创 h5测试

<input type="search"/>当点击输入框中的"x"时，输入框中的内容会被删除。<meter></meter><!DOCTYPE html><html><body><p>显示度量值：</p><me

2018-10-05 07:50:27 674

原创 H5标签变化1(DTD、新增标签：结构标签，多媒体标签，web应用标签还有其他标签、删除标签、重定义标签)

h5新增标签html5约等于HTML+CSS+Javascript+APIWebApp HTML5新增了离线存储、更丰富的表单、js线程、socket、标准扩展embed、css3...流媒体与多媒体引擎 Audio、video、Canvas、webgl等等搜索引擎和无障碍领域h5是唯一一个通吃PC、Mac、iPhone、Android等主流平台的...

2018-09-28 10:04:06 788

原创 H5属性变化2(表单属性autocomplete、autofocus、multiple和其他属性)

autocomplete属性：默认on。退出之后输入内容消失，双击有记录。<form action="9.html" autocomplete="on"> <input type="text" name="text"/> <input type="submit"/></form&g

2018-09-27 10:33:42 1899

原创 H5属性变化1(input)

input:email/url/range/Date picker/search/color/tel 表单属性：autocomplete/autofocus/multiple/placeholder/required 链接属性：<link>的size属性/<base>的target属性/超链接<a> 其他属性：script/ol/html/styleEm...

2018-09-26 10:43:42 301

原创 H5表单验证2(h5自带验证美化)

h5自带验证美化：要做出不一样的表单验证，我们要了解一些伪类及css选择器。:required和:optional :in-range和:out-of-range :valid和:invalid :read-only和:read-write//:required和:optional<style> .container{ max-w...

2018-09-25 19:31:46 5159

原创 H5表单验证1

前台提交信息到后台有Ajax无刷新页面提交、Form表单提交。h5表单中新增了哪些类型？ email、url、number、range、date(date、month、week、time、datetime、datetime-local)、search、color、tel等文本框中，输入一次，下一次再输入会自动提示是哪个属性？ autocomplete='off/on' 提示选择如何实...

2018-09-23 15:48:20 1372

原创 js中的正则表达式

复习字符串操作search 查找 substring 获取子字符串 charAt 获取某个字符 split 分割字符串，获得数组找出字符串中的所有数字：用传统字符串操作完成用正则表达式完成<script> var str='12 fff 87 er334 233 -=-=fa80';...

2018-09-21 11:37:36 139

原创 COOKIE基础与应用

什么是cookie页面用来保存信息（自动登陆、记住用户名） cookie的特性：同一个网站中所有页面共享一套cookie 数量、大小有限(4-10k) 过期时间 js中使用cookie document.cookie使用cookiecookie的使用设置cookie ...

2018-09-19 19:38:59 168

原创 BOM应用(open、close、scrollTop)

打开、关闭窗口：open<body><input type="button" value="打开窗口" onclick="window.open('http://www.baidu.com')"/></body>document.write:先清空然后再写。<body><input type=&qu

2018-09-19 12:14:27 407

原创 js面向对象实例

实例：面向对象的选项卡原则：不能有函数套函数，但可以有全局变量。过程 onload ---- 构造函数全局变量 ---- 属性函数 ---- 方法改错 this、事件、闭包、传参对象与闭包通过闭包传递th...

2018-09-18 19:59:47 1304

原创 js面向对象基础02

2018-09-17 19:51:25 129

原创 js面向对象基础01

面向对象：不了解原理的情况下，会使用功能。对象：黑盒子，不了解内部的结构，知道表面的各种操作。对外提供和一些操作。JS中的面向对象面向对象编程(OOP)的特点抽象：抓住核心问题。（抽：把最主要的特征、跟问题相关的特征抽出来）封装：不考虑内部实现，只考虑功能使用。继承：从已有对象上，继承出新的对象。（遗传）从父类继承...

2018-09-17 18:23:34 156

原创 Ajax2

创建ajax对象。连接到服务器告诉服务器要哪个文件（发送请求）接收返回值<script> //用没有定义的变量--报错 //用没有定义的属性--undefined alert(a)//报错 alert(window.a)//undefined</script>同步：多件事一起 ...

2018-09-16 19:34:56 187

原创 Ajax1

使用Ajax 基础：请求并显示静态TXT文件字符集编码缓存、阻止缓存动态数据：请求js(或json)文件 eval的使用 DOM创建元素局部刷新：请求并显示部分网页文件Ajax：不刷新页面去服务器上读取、刷新数据，让js...

2018-09-16 17:04:51 173

原创 js事件高级应用01（事件绑定、高级拖拽）

事件绑定 IE方式 attachEvent(事件名称、函数)，绑定事件处理函数 detachEvent(事件名称、函数)，解除绑定 DOM方式 addEventListener(事件名称，函数，捕获) removeEventListener(...

2018-09-16 11:02:10 368

原创 js事件高级应用02（带框拖拽、自定义滚动条）

带框拖拽： <style> #div1{ width: 100px; height: 100px; background: red; position: absolute; } .box{ border: 1px ...

2018-09-15 19:50:15 340

原创 js事件中级（默认行为，拖拽）

默认行为：浏览器自带的行为。阻止默认/右键事件：<script> document.oncontextmenu=function(){ return false;//阻止默认事件 }</script>例子：屏蔽右键菜单弹出自定义右键菜单只能输入数字的输入框 keydown keyup事件的区别//屏蔽...

2018-09-14 16:41:44 297

原创 js事件基础（事件event对象,事件冒泡，鼠标键盘事件）

事件对象（获取事件的详细信息）和事件冒泡：什么是event对象：获取事件的详细信息：鼠标位置、键盘按键。 document本质：document.childNodes[0].tagName获取event对象（兼容性写法）：var oEvent=ev||event;//点击界面没有反应。因为body里面没有内容，没有撑开。<script&gt...

2018-09-14 10:08:38 2084

原创多物体运动框架1

多物体同时运动多个div,鼠标移入变宽单定时器，存在问题每个Div一个定时器多物体运动不能共用一个定时器，每个div定一个定时器。多物体运动不能共用一个属性，所有东西不能共用。鼠标一接触，其宽度到300px.<style> div{ ...

2018-09-10 20:04:13 185

原创 js运动基础2 右侧悬浮框缓冲运动匀速运动的停止条件

缓冲运动：逐渐变慢，最后停止距离越远速度越大（速度由距离决定速度=（目标值-当前值）/缩放系数）例子：缓冲菜单（Bug:速度取整）缓冲运动：随着距离减小，速度也越来越小。用除数控制速度。速度用整数。oDiv.offsetTop //滚动条滚动的距离+窗口距离-物体宽度<style> #div1{ width: 100px; ...

2018-09-09 16:31:28 870

原创 js运动基础1

运动中的bug:不会停止速度取某些值会无法停止除了本节讲的以外还可以用Math.abs()绝对值来判断在下一节。到达位置后再点击还会运动重复点击速度加快解决方法：一个定时器，用if else ，先clearInterval()想要控制物体快慢：改变speed的大小。<style> body{ width: 7...

2018-09-08 16:45:08 213

原创 DOM操作应用高级表格应用

获取 tBodies、tHead、tFoot、rows、cells(tHead tFoot获取的不是数组而是一个元素，tBodies是一个数组)<script> window.onload=function(){ var oTab=document.getElementById('tab1'); /...

2018-09-08 10:08:06 239

原创 DOM基础2

创建、插入和删除元素：创建DOM元素：createElement(标签名) appendChild(节点)插入元素：insertBefore(节点,原有节点) 在已有元素前插入删除DOM元素：removeChild(节点)创建元素：li <script> window.onload=function(){ ...

2018-09-06 20:28:17 161

原创 DOM基础1

JS中的DOM基础DOM documentchildNodes: <script> window.onload=function(){ var oDiv=document.getElementById('ul1'); //在IE6-8没问题。 alert(oDiv.chil...

2018-09-06 19:31:58 163

原创定时器 Date 无缝滚动

JS BOM之window对象定时器setInterval(functionName,milisec); setInterval(function,milisec);采用匿名内部类的方法。setInterval()有返回值，返回的就是定时器。打开和关闭定时器：<script> window.onload=function(){ ...

2018-09-05 11:16:34 179

原创深入js

函数返回值：<script> //一个函数只返回一种类型的值。 function show(a,b){ return;//undefined.如果没有return，也是 undefined } alert(show(3,5))</script>函数传参：可变参(不定参)，arguments:可以有无数个参数。...

2018-09-03 14:46:09 313

原创 js基础

运算符算术：+ - * / % (实例：隔行变色秒转时间)赋值：= += -= *= /= %=关系：< > <= >= == === != !==逻辑：&& || ! (全选与反选)运算符优先级：括号。隔行变色：<script> window.onload=f...

2018-09-03 09:02:43 121

原创初探js魅力 (鼠标提示框、换肤、函数、重用、函数传参、.和[]、全选不选和反选、选项卡)

第一个JS特效：鼠标提示框鼠标移入到input时，让div1显示。鼠标移出input时，div1隐藏。<style> #div1{ width: 200px; height: 100px; background-color: #cccccc; border: 1px solid #999; ...

2018-09-02 08:18:41 224

医院实战总结

cssbackground background-position 知道了position的用法。 background-img不占容器的内容。直接用padding 即可。.content-close .list,.content-news .list{ padding: 15px 20px 13px 35px; line-height: 29px; b...

2018-08-29 08:46:46 166

原创瀑布流追加效果

json是JavaScript对象表示法，是轻量级的文本数据交换格式；属性与属性之间用逗号分开；属性与属性值之间用冒号分开。json只能用双引号。data[0].srcdata[2].title 追加条件：最后一个盒子的top值+其高度<document高度值+滚动条滚动的值<script> //模拟数据 var data=[{ "...

2018-08-22 10:36:28 230

原创瀑布流 jQuery和js区别

瀑布流是什么：瀑布流式布局。一种网站页面布局，视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。布局优点：有效降低界面复杂度，节省空间。无需复杂的页码导航链接或按钮。对触屏设备来说，交互方式更符合直觉更高的参与度知识点：box-sizing 属性可以被用来调整这些表现: content-box 是默认值。如果你...

2018-08-22 08:28:41 107

原创弹出层

弹出层的介绍：使用场景：注册、登录（表单基本校验）。统一的消息提示框（代替alert）。减少页面跳转、刷新的一些操作。使用思路：1.遮罩层。2.弹出层窗口。都是通过div实现的。使用jQuery动态控制隐藏显示。我们还会对弹出层做简单的封装。让弹出层结构得到重复利用。html: ...

2018-08-21 10:42:41 304

原创 jQuery事件模型

提供了统一的事件处理方法允许添加多个事件处理函数使用标准的事件名称(不带on) 事件实例做为事件处理函数的第一个参数标准化事件实例最常用的属性提供了统一的事件取消和阻止默认行为的方法添加事件处理on(eventType[,selector][,data],handler) eventType事件名称，多个用空格隔开。handler事件处理函数。<h2>t...

2018-08-21 09:09:30 670

原创 DOM事件模型

浏览器事件模型：DOM 0级事件模型 DOM 2级事件模型DOM 0级事件模型：<input type="button" onclick="doSomething()" /> input.onclick=function(){...} event =event||window.event;兼容性问题 var target=event.target||event.src...

2018-08-20 10:13:50 1942

原创 jQuery的介绍以及基本概念

jQuery是一款JavaScript库。可以方便地处理HTML、事件、动画等。Query是一个快速的简介的javascript库。也算是javascript的一个框架jquery可以实现html页面保持代码和html内容分离。也就是说，在html中不用插入一堆js来调用命令了。优势1.轻量级2.强大的选择器3.出色的DOM操作封装（对DOM节点属性的改变）4.完善的事件和事件对...

2018-08-19 14:08:28 227

原创在页面中操作DOM元素二

第三章：修改jquery对象的内容和样式。修改元素样式：className attr()修改类。但是一般不这么改。添加或修改class：addClass(names) removeClass(names) <style> .box{ width: 100px; height: 100px; background-color: #cc...

2018-08-19 12:23:14 239

原创在页面中操作DOM元素一、操作元素的特性、属性和数据

元素的特性attributes和属性properties：1. attribute翻译为特性，是HTML标签内自带的属性（如id、name、value…）2. property翻译为属性，HTML标签元素返回为Dom元素后，Dom元素作为一个对象，给这个Dom对象重新添加的属性。（如firstChild、lastChild…）3. HTML标签默认自带的属性也添加到了Dom的属性中，也可以...

2018-08-19 12:22:45 349

原创 jQuery的add() not() filter() has() slice() map() each() is() end() addBack()方法详解

通过查询实现添加删除。添加元素：.add() $(function(){ console.log($(".item1,.item2")) console.log($(".item1").add(".item2").add('.item3')); })删除元素：not(selector)删除掉选择器中的元素。 filter(selector...

2018-08-11 16:54:17 182

原创查找jQuery对象的方法children() contents() find() parent() closet() next() pre() siblings()

通过关系查找jQuery对象的方法：children([selector]) contents() find(selector) parent([selector]) parents([selector]) parentsUntil([selector]) closet(selector)children()和contents()都是查找子元素，不查找孙子元素。<di...

2018-08-11 11:32:35 1091

原创 jQuery基础

通过jQuery选择器获取到的无论是多个元素、0个元素还是1个元素都会被封装到类数组中，我们也可以把它称为jQuery对象集合或者jQuery元素集合。当提到jQuery对象、jQuery集合、jQuery对象集合、jQuery元素集合一样。操作jQuery对象：检查数量父子邻居关系过滤元素的集合遍历DOM对象和jQuery对象区别： DOM对象也可以说是DOM元...

2018-08-11 10:08:24 122

MVC MVP MVVM面试题

空空如也