前端学习+项目问题9.18-9.24

先是做项目时遇到的一些问题

1.select

select默认选中一项，当第一项禁用时，会默认选中第二项，当点击了别的项之后再来点击引项才可以触发change事件。

给select写change事件，因为此项默认选中，所以再点击此项，也并没有触发change事件，要禁止select的默认选中状态，这样在点击此项时才会触发select的change事件

$(".select-house")[0].selectedIndex = -1;

zepto返回选中的option不能用selected,例$('option[selected]'),因为selected并不是css的标准属性，zepto返回选中的option用

var selectedoption = $("option").not(function() {

return !this.selected

})

获取选中项的值用selectedoption .text( )

2.flex

flex 将几个项目换行并左对齐

{

display: -webkit-flex;

dispaly: flex;

justify-content: flex-start;

flex-warp: wrap

}

3.想要select未选择时字体颜色是灰色，选择后颜色是黑色，可通过视觉效果来改变

在select位置定位一个相同样式的input,让select在input上方，然后将select颜色和背景色都设置为透明，改变select选中项后将内容赋值给input，同时改变input文字颜色

为input赋值:

$("input).val( )--- （）里是内容

选中select项后发生 的事件用change

4.不能什么都按设计图来，因为设计图是平面的，而页面是动态的，文字和样式可能都要随着需求而变化，要正确的运用元素和布局样式等

5媒体查询 最大宽度为960px包括960

@media screen and (min-width:960px){

    body{

        background:orange;

    }

}

6.tap-highlight-color

设置或检索对象的轻按时高亮

7

.clearfix{

content:' ';

clear: both;

display: block;

overflow: hidden;

}

8.我试图在p 标签里嵌套h1，

<p class="creditp">

<h1>大额信用贷款</h1>

<span>放款快</span>

<span>无需抵押</span>

<span>手续便捷</span>

</p>

但浏览器解析成

<p class="creditp"></p>

<h1>大额信用贷款</h1>

<span>放款快</span>

<span>无需抵押</span>

<span>手续便捷</span>

<p> </p>

p标签里不能自由嵌套，只能 嵌套内联元素

p,h1,div,ol,ul,dl,hr,pre等都属于块级元素，默认独占一行

块级元素只能 嵌套内联元素，默认 几个内联元素都在同一行显示，比如<a><span>

但内联元素不能包含块元素，只能包含其他的内联元素

p标签不能包含其他块级元素，div h1 ul 等

9.body自带8px内边距

h标签 自带12px

p标签自带8px

10.自定义 字体

@font-face { font-family: <YourWebFontName>; src: <source> [<format>][,<source> [<format>]]*; [font-weight: <weight>]; [font-style: <style>]; }

一般字体下载下来是.ttf格式，需要转换才能使用

字体转换网址

http://www.font2web.com//?error=no_file_uploaded

https://www.fontsquirrel.com/tools/webfont-generator

转换需要上传字体，转换完成后会自动下载安装包，解压安装包，将font文件夹下边.eot .woff .ttf .svg四个文件（这是我们自定义字体时需要的）引用到项目目录中，为更好的兼容性，我们采用以下代码

@font-face {

font-family: 'PingFangSCRegular';

src: url('../../fonts/PingFang SC Regular_0.eot');

src: url('../../fonts/PingFang SC Regular_0.eot?#iefix') format('embedded-opentype'),

url('../../fonts/PingFang SC Regular_0.woff') format('woff'),

url('../../fonts/PingFang SC Regular_0.ttf') format('truetype'),

url('../../fonts/PingFang SC Regular_0.svg#PingFangSCRegular') format('svg');

font-weight: normal;

font-style: normal;

}

然后再用font-family引用字体就可以了

body{

font-family: 'PingFangSCRegular'

}

11.yarn remove packname yarn卸载安装包

12.起初开发的时候我用的是给元素绑定onclick事件，但是click事件有3秒延迟，还是应该用zepto自带的tap事件

13.子元素{flex:1}第一个参数为flex-flow:1,等分剩余空间，如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

14.去除select默认样式

.myform select {

/*很关键：将默认的select选择框样式清除*/

appearance:none;

-moz-appearance:none;

-webkit-appearance:none;

/*在选择框的最右侧中间显示小箭头图片*/

background: url("../../images/symbols-下拉.png") no-repeat scroll 92.6% center transparent;

background-color: #fff;

background-size: 13.4px;

/*为下拉小箭头留出一点位置，避免被文字覆盖*/

padding-right: 22.5px;

}

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/

select::-ms-expand { display: none; }

15.写提交申请事件时，将提示文字写在了form窗体外，所以不显示，写在form窗体内就可以了

17.select 下拉框箭头处，取消默认样式 ，为其添加背景图

但一开始最左边的图标我也是直接在背景图上添加的，有两种方法，一种是为元素添加多个背景图

，除了backgroud-color是唯一一个不能使用多个值的background-*元素，所以，我们以上的三个元素都可以使用多个值，两个值之间以逗号相连。

(1)

div {background-image:url(),url();

background-position:0 30px, 0 45px;

backgroud-repeat:no-repeat

}

(2)也可以使用background属性

div { background :url () no-repeat 0 30px;

url() no-repeat 0 45px;

}

另一种是在select外套一个div,把左边用来装饰的背景图加到此div上，把下拉列表背景图加到select元素上。

18

.zepto获取select元素的选中option不能用类似jq的方法$('option[selected]'),因为selected属性不是css的标准属性

应该使用$('option').not(function(){ return !this.selected })

比如：jq:$this.find('option[selected]').attr('data-v') * 1

zepto:$this.find('option').not(function() {return !this.selected}).attr('data-v') * 1

但是获取有select中含有disabled属性的元素可以用$this.find("option:not(:disabled)")因为disabled是标准属性

19.git操作

(1).撤消git commit操作

使用git log查看 commit 日志，日志中包含本次commit的哈希值,找到需要回退的那次commit的哈希值，

使用

git reset --hardcommit_id  命令进行回退

(2).撤消git add 操作

如果是撤销所有的已经add的文件:

git reset HEAD .

如果是撤销某个文件或文件夹：

git reset HEAD -filename

(3).撤消git push操作

方法:

    git reset --hard <commit_id>

    git push origin HEAD --force

其他:

    根据–soft –mixed –hard，会对working tree和index和HEAD进行重置:

    git reset –mixed：此为默认方式，不带任何参数的git reset，即时这种方式，它回退到某个版本，只保留源码，回退commit和index信息

    git reset –soft：回退到某个版本，只回退了commit的信息，不会恢复到index file一级。如果还要提交，直接commit即可

    git reset –hard：彻底回退到某个版本，本地的源码也会变为上一个版本的内容

    HEAD 最近一个提交

    HEAD^ 上一次

(4).git rebase

git rebase用于把一个分支的修改合并到当前分支

如果想要放弃当前rebase操作，用

git rebase --abort

如果冲突已经解决，先add冲突文件，之后

git rebase --continue

20、flex布局

1、Flex是Flexible Box 的缩写，意为弹性布局。用来为盒状模型提供最大的灵活性。

webkit内核的浏览器，必须要加上-webkit的前缀

.box{display: -webkit-flex;/* Safari */display: flex;}

webkit内核八大浏览器包括： chrome,safari,搜狗高速浏览器，傲游浏览器3，qq浏览器，360极速浏览器，世界之窗浏览器（极速版），阿里云浏览器

2、flex属性

flex-wrap: 定义如何换行{no-wrap（默认):不换行

wrap:换行，第一行在上方，

wrap-reverse: 换行，第一行在下方

}

justify-content： 项目在主轴上的对齐方式

{flex-start左对齐

flex-end 右对齐

center居中对齐

space-between两端对齐,项目之间间隔相等

space-around每个项目两侧的间隔相等，即左边距与右边距一样大，所以项目之间的间隔要比项目与大的外边框之间的距离大一倍。

21、在表单中不能使用<button></button>元素，因为不同的浏览器会提交不同的按钮值。请使用 input 元素在 HTML 表单中创建按钮。

22、模块式引入swipper

问题：swipper.js swipper.css不能使用

原因：swipper.js swipper.js没有引入

解决办法：引入 node_modules下的swiper的css 和js

<link rel="stylesheet" href="<%= require('swiper/dist/css/swiper.css') %>">

问题:引入 swipper轮播图无法正常滑动

原因：swipper版本不对 ，npm install swipper默认安装的版本是swipper 4.* beta版，应该安装swipper3.*版本的23、$(document).ready(function(){

function Func(){}

})

第一次写的时候丢了function，这段代码的意思是当页面加载完成后执行此函数里边的函数，所以function(){}不能丢

24、测试js，用return返回不执行下边的函数来观察是否有问题。

二、学习任务

1.zepto支持浏览器

ie10+

chrome 30+

firefox 24+

safiri 6+

ios 5+ safari

andriod 2.3+ browser

2.zepto 模块

* zepto —— default ——核心模块，必须引入

* event ——default —— 通过on() off()处理事件

* ajax —— default —— XMLHttpRequest 和JSONP实用功能

* form —— default —— 序列化提交web表单

* ie —— default —— 增加支持桌面的ie10和windows phone 8

* detect —— 提供$.os $.browser消息（

判断设备和浏览器，zepto.os判断查看设备，返回一个对象{ios:true ,iphoe:true,version:"6.1"}

zepto.browser查看浏览器，返回对象{version:'536.26,webkit:true}

）

* fx —— 提供 animate() 方法

* fx_methods —— 以动画形式的show,hide,toggle.fade*()方法，即可使用show() hide()方法支持动画

var div1 = $("#fool")

div1.animate({

"width"; "300px",

"height": "300px"

),

'slow','ease-in-out',

function {

console.log('div animate callback')

div2.hide('slow',function() {})

div2.fadeOut('slow',function)() {

console.log('div2 animate callback')

})

},2000)

* assets 支持从DOM中移除Image元素并清理 ios内存

mobile safari严格的资源占用限制说起；mobile safari要比桌面版的浏览器的资源占用限制严格的多，当ios加载大文件时会停止加载，这时需要回收这些图片资源 ，因为不能保证垃圾回收机制是否有回收处理掉这些图片，所以我们采用移除image元素后清理内存，释放图片资源。

* data 对data()方法的完整支持，能够在内存中存储内存对象（读取或写入dom的data-* 属性，点像attr，但属性名要加上data-，zepto基本实现 ‘data()’方法只能存储字符串，当读取属性时，会有下列转换：

“true","false""null"转换为相应类型

数字值转换为实际数字类型

有效的JSON值会被解析

其他一切均作为字符串返回

）

* deferred 提供$.Deferred pormised API.依赖"callbakcs"模块

ajax请求或处理结果需要回调函数来执行完成后的操作时，使用deferred作为回调函数解决方案

$.Deferred()生成deferred对象

deferred.done()操作成功时的回调函数

deferred.fail()失败

deferred.promise() 无参时返回对象，运行状态无法改变，有参时作为在参数对象上部署deferred接口

deferre.resolve()改变 deferred对象运行状态为”已完成“触发done()方法

deferre.reject()改变 deferred对象运行状态为”已完成“触发fail()方法

$.when()为多个操作指定回调函数

deferred.then(), ex:$when($.ajax(url).then(successFunc,failureFunc)

deferred.always

ajax版本区别

ajax1.5之前

$.ajax({url:test.html',

success(){},

error(){}

})

ajax 1.5之后 ,返回deferred对象,可链式操作

$.ajax("test.html")

.done({function(){})

.fail(function(){})

允许添加多个回调函数

$.ajax("test.html")

.done({function(){})

.fail(function(){})

.done({function(){})

.fail(function(){})

允许为多个事件指定一个回调函数

* callbacks 为"deferred"模块提供 $.Callbacks.

* selector 支持 jquery css表达式功能（$('div:first')第一个div对象,el.is(':visible')判断el是否为禁用的input或者button

* touch 在触摸设备上触发tap- swipe-相关事件。

基本touch事件：

touchstart 手指触发屏幕上的时候触发

touchmove 手指在屏幕移动的时候触发

touchend 手指离开屏幕的时候触发

touchcancel 系统取消touch事件的时候触发

* gesture 在触摸设备上触发 pinch（手指缩放）事件

* stack （栈）提供andSelf() &end （）链式调用方法

* ios3 String.prototype.trim 和 Array.prototype.reduce 方法 (如果他们不存在) ，以兼容 iOS 3.x.

3.zepto api

(1).$()

//创建元素

#$("<p>hello</p>")

//创建带有属性的元素

$("<p />"),{ text”：’hello',id:"greeting',css:{color:"darkbule"} })

(2).camelCase(string)驼峰命名

(3).$contains(parent,node) 检查父节点是否包含给定的dom节点，如果两者是相同的节点 ，返回false

(4).each(collection,function(index,item){...})遍历数组或心key-value值对方式遍历对象。回调函数返回false停止遍历。

*%d带符号十进制数

%s字符串

（5）$.fn在此对象上添加的方法所有的zepto对象都能调用

（6）$.grep 获取包含回调函数中返回true的数组项

$.grep([1,2,3], function(item) {

return item > 1

})

（7）inArray 返回数组中指定元素的索引值

（8）isNumeric如何该值为有限数值或一个字符串表示则返回true

（9）isPLainObject 测试一个对象是否通过 对象常量（"{}"） 或者 new Object 创建的，如果是，则返回true。

（10) var callback = $.noop引用一个空函数

（11）$.parseJson接受一个标准格式的json并返回解析后的js对象

（12）add 添加元素到当前匹配的元素集合中

$('li').add('p').css('background-color','red')

（13）append在匹配元素末尾插入内容 after在匹配元素后面插入内容

（14）append appendTo区别

$('ul').append('<li> new list item</li>')

$('<li> new list item </li>').appendTo('ul')

（15 ) filter对象，过滤对象集合

（16）forEach与each相似，都是遍历对象集合中的每个元素，但回调函数返回false时不停止遍历

（17）get 从当前对象集合中获取指定的元素或所有元素

ex: $('h2').get()

$('h2').get(0)

( 18 )hasClass 检查对象集合中是否有元素含有指定的class

( 19 )获取或设置元素的html内容，不用innerHTML

( 20 )is判断当前元素集合中第一个元素是否符合css选择器

( 21）offSet获取当前元素在document的位置

（22）offsetParent 找到第一个定位过的祖先元素

（23）parent 获取直接父元素

parents 获取所有祖先元素

（24）pluck 获取对象元素的属性值，返回值是数组

（25）prepend将内容插入到元素开头 prependTo(同appendTo）

（26）prev 获取元素的前一个兄弟节点

（27）prop读取或设置元素属性值，优先于attr

（28）reduce 遍历当前对象集合，memo是上次函数的返回值，迭代进行遍历

reduce(function(memo,item,index,array){}

（29）removeClass 移除class名可用空格分隔

（30）replaceWith 用给定内容替换所有匹配元素

（31）slice（start, [end]) 提取数组的子集

（32）text 方法不能用来获取或设置html，只能获取元素的文本内容

（33）toggleClass 如果匹配元素有此class名就删除它，如果没有就添加它

（34）unwrap 移除集合中每个元素的直接父节点，并把他们的子元素还保留在原来的公交车

（35）wrap 在每个匹配的元素外层包上一个html元素 (".button a').wrap('<span>')

wrapAll 在所有匹配元素外层包一个单独结构 $('a.button').wrapAll('<div id = buttons />')

wrapInner 将每个的内容包在一个单独的结构中 （'ol lu '),wrapInner('<p><em /></p>')

（36）Detect module

该方法可以在不同的环境中微调你的站点或应用，可以识别手机或平板，以及不同系统和浏览器

$.os.phone

$.os.andriod

4.zepto ajax

(1). 默认情况下，ajax事件在document对象上触发。

$(document).on('ajaxBeforeSend', functio(e,xhr,options) {

//页面上的每个ajax请求之前都会触发

//可编辑ajax（）和xhr对象

//通过返回false取消此操作

}

(2). 如果请求的context 是一个dom节点，那么在该dom节点中触发，然后在dom中冒泡。

contenxt用于亩ajax相关回调函数的上下文（this指向）

$.ajax({

//请求方式

type:'GET‘，

//请求地址

url:'/projects',

//请求数据

data:{ name: 'zepto.js'},

//期待服务器返回类型

dataType: 'json',

//请求超时时间

timeout: 3000,

//当前请求的this指向为body

context: $('body')

//成功后的回调

success: function(data) {

{'project':{'id': 41, 'html': '<div> ..'}}

//将返回的json对象（html）附加到上下文对象

this.append(data.project.html)

}

//请求失败后的回调

error: function(xhr,type) {

alert('error')

}

})

//假定请求方式为post

$.ajax({

type:'POST',

url:'/',

data:JSON.Stringfy({'name':'zepto.js'})

//发送请求类型

contentType:'appliction/json'

})

(3).ajaxSettings

包含ajax请求的默认设置对象

(4).$.get('https://api.github.com/users/momo-0902',function(response) {

$(document.body).append(response)

})

!提示错误，Failed to execute 'insertBefore' on 'Node':parameter 1 is not of type 'Node'.

错误原因：无法在“Node”上执行“insertBefore”：参数1不是“Node”类型。

请求回来的结果是一个json字符串，并不是一个Node类型

* append在每个匹配的元素末尾插入内容，内容可为html字符串，dom节点，或者节点组成的数组

将 $(document.body).append(response)改为console.log(response)可看请求成功的数据

$(document.body).append('<li>hahaha</li>')可增加一个li节点 到body中。

(5).$param 序列化一个对象

(6).$.post(url,[data],function(data,status,xhr){},[dataType])

$.post('/creat',

//serialize()在ajax post请求中将用作提交表单值编译成URL编码的字符串。

$("#some_form').serialize(),

function(){

})

(7).load(url, function(data, status, xhr){ ... })载入远程 html内容到当前集合中

$("#some_element“).load('/foo.html #bar') 匹配id为bar的html内容

(8).ex

$("btn").click(function() {

$.ajax({

url:'user',

type:'post',

data:("userName:$("#userName").val(),"password":$("passWord").val()),

async:false,

success: functoin() {

if(data == 0) {

alert('用户名错误')

}else if(data == 2) {

alert('密码错误')

}else {

}

}

}）

}）

5.zepto 事件

（1）.$Event(type,[properties])

创建并初始化一个指定的dom事件，如果给定properties对象，使用它来扩展出新的事件对象。默认情况下，事件被设置为冒泡方式；这个可以通过设置bubbles为false来关闭。

( 2 ).$proxy

接受一个函数，返回一个新函数‘

并且这个新函数始终保持了特定的上下文(context)语境，新函数中this指向context参数。另外一种形式，原始的function是从上下文(context)对象的特定属性读取。

( 3 ) .off 移除通过on添加的事件

( 4 ).on为元素添加事件，事件以空格隔开

( 5 ).one为元素绑定一次性事件

( 6）.trigger 在元素集合上触发指定事件

( 7 ).triggerHandler 在指定元素上触发指定事件

6.抓包工具

抓包是将网络传输发送与接收的数据包进行截获、重发、编辑、转存等操作，也用来检查网络安全，与数据截取等。

chrome开发者工具－－network选项

点击工具条上方小红点record network log，可以记录下整个访问过程中所有抓包结果，否则只记录当前页面的抓包结果。

可查看网页相关数据信息，网址，接口请求状态，js,css,image等加载状态

点击网址可看到有以下几个选项，Headers,Preview,Response,Cookies,Timing

在Headers中包括请求地址，请求方式，请求头，请求方式，响应头，响应内容等

在Response中可单独查看响应状态码的返回，返回数据等

在Timing中可查看时间等

2.Weinre全称WebINspector Remote(翻译过来是远程web检查器),可在PC上直接调试运行在移动端的远程页面，

weinre工作原理

Debug客户端（client)：本地的web检查器，远程调试客户端

Debug服务端(agent)：本地的HTTPServer，为Debug客户端与Debug目标页面建立通信

Debug目标页面：被调试的目标页面，页面已嵌入weinre的远程js

客户端、目标页面与Debug服务端之间使用XMLHttpRequest (XHR)进行HTTP通信，你通常的使用情形是将Debug客户端与服务端搭建在桌面开发环境，Debug目标页面放在移动设备。

安装方式 ：npm install-g weinre

过程中尝试用yarn install 安装，但因为yarn的安装位置问题，导致weinre不可用，所以还是建议用npm 安装

步骤

(1) 在本地开启监听服务器，ipconfig查看本地ip

weinre --boundHost [hostname | ip address |-all-]  --httpPort [port] 

weinre -boundHost 192.168.2.45

(2)可用weinre --httpPort 8081 --boundHost 192.268.2.45

(3)访问weinre及在页面上调用

（4）在调式的页面中加入远程调式所需要的JS代码

<script src="http://192.168.2.45:8080/target/target-script-min.js#anonymous"></script>

（5）点击第一个链接

（6）进入此页面，如果连接成功，网址变成绿色，按钮显示高亮

（7）可下载草料二维码，将浏览器地址的127.0.0.1改为192.168.2.45,端口不变，此端口与weinre服务器端口不一样，此端口是访问页面的端口

（8）多用户调试

改变<script src="http://192.168.2.45:8080/target/target-script-min.js#anonymous"></script>中的id"#anonymous"为自己的id（例#product),

然后访问网址从http://192.168.2.45:8080/client/#anonymous改为http://192.168.2.45:8080/client/#product即可

注意：每次开机都有新的ip地址，这是页面中<script></script>标签中的Ip地址与页面访问ip地址也要做相应更改。

7.chrome开发者工具

1、点击文件中相应代码的行数选择断点，在右侧Breakpoints中有所有打过的断点列表，点击对应checkout的第一行取消该断点，点击下一行，直接跳到该代码处。

2、刷新或者点击页面开始执行断点也调试。

3、6个按钮

（1）

pause script excutio 【单步执行，在断点处暂停，等待调试】暂时后变为

Resume script excution【继续执行】快捷键 F8或者ctrl + \

(2)Step over next function call【单步跳过】跳到下一个断点，快捷键F10或者ctrl+`

在69行和70行分别设置两个断点，先执行69行断点，在jquery中寻找源码后继续执行下一个断点，即alert('123')

如果没有断点了就继续执行完这个click函数，执行$("#txt").val(txt);然后执行if-else分支，但不进入if-else函数中

（3）Step into next function call 【单步进入】进入函数内部调试，快捷键【F11 或者 Ctrl + ;】

继续点击

执行下一步，

直到跳出if条件语句的判断

（4）

Step out of current function 【单步跳出】，跳出当前断点的函数快捷键【Shift + F11 或者 Ctrl + Shift + ;】

（5）

使所有断点临时失效

（6）

Don’t Pause on exceptions:不要在表达式处暂停，

pause on caught exceptions 当抛出错误的时候暂停

(7) 在element处右击dom元素,设置此dom为断点

*子节点变化断点 (subtree modifications)

主要针对子节点增加、删除以及交换顺序等操作，但子节点进行属性修改和内容修改并不会触发断点。

*节点属性断点 (attributes modifications)
*节点移除断点 (node removal)
( 8 ) xhr断点 异步请求时触发断点

（9）事件断点 在所选事件发生时触发断点

（10）js source断点 执行到此断点时会一步步看到当前作用域中所有变量的值

8.Zepto动画

zepto动画需要引入fx模块，用css动画实现

animiate(动画对象，花费时间，动画类型，动画完成时的回调函数）

ex1:

$("#banner ul").animate({marginLeft:"-800px"},600, function () {
                    $("#banner ul").css('marginLeft','0px');
                });

ex2:

$('some_element').animate({

opacity: 0.25,

left: '50px',

color: '#000',

rotateZ: '45deg',

translated3d: '0,10px,0',

},500,

'ease-out')

})

css3动画整理如下

在css3中创建动画，需要@keyframes规则，在keyframes中定义新样式为动画效果

1、@keyframes规则

//从动画开始到结束使用关键词from to

@keyframesmyfirst {

form{background:red}

to{background: yellow}

}

//使用百分比来规定变化发生的时间

@keyframes myfirst {

0% {background: red}

25%{background: yellow}

50%{background: blue}

100%{background: green}

}

2、animat属性

aiimation: animate- name animate-duration animate- timing-function animate-delay

名字 花费时间 速度曲线 延迟

animate-iteration-count animate-direction

播放次数是否反向播放

绑定@keyframes中的动画到元素的animate属性中

div{

ainmation: myfirst 5s

//在此注意要加上浏览器兼容属性，此处省略

}

3.其余动画属性

animation-play-state animation-fill-mode

动画是否正在运行或暂停 对象动画时间之外的状态

9.DOM元素的增删改查

*.appendChild将添加的节点做为元素最后一个子节点

1.增加节点(例添加一个文本节点）

（1）//创建文本节点

var newTextNode = document.createTextNode("这是一个新的节点")

//获取要在其添加节点的dom元素

var div1 = document.getElementById('#div-1')

//将节点添加至dom元素

div1.appendChild(newTextNode)

（2）创建按钮节点

var newBtnNode = document.createElement('ipnut')

newBtnNode.type="button"

newBtnNode .value="一个新按钮"

//获取要在其添加节点的dom元素

var div1 = document.getElementById('#div-1')

//将节点添加至dom元素

div1.appendChild(newBtnNode)

*.insertBefore:在已有的元素前插入一个新元素；

*.insertAfter:在现有的元素后面插入一个新元素；

2.删除节点

//获取节点

var div1 = document.getElementById('#div-1')

//使用div节点的removeNode方法删除，但较少用

div1.removeNode(true)

//一般使用removeChild方法，删除 子节点

//获取div2的父节点，然后使用父节点的removeChild,将div1删除

div1.parentNode.removeChild(div1)

3.替换节点

//用div3节点替换div1节点

var div1 = document.getElementById('#div-1')

var div3 = document.getElementById('#div-3')

div1.parentNode.replaceChild(div3,div1)

4.克隆节点

//克隆一个div3节点替换div1

var div1 = document.getElementById('#div-1')

var newdiv = document.getElementById('#div-new')

var copyDiv3 = div3.cloneNode(true)

div1.parentNode.replaceChild(copyDiv3,div1)

5.jquery对dom元素的增删改查

http://blog.csdn.net/u011530389/article/details/48155017