其他回答(2)
打开什么？新页面还是什么？
$("#btn").click(function(){
var div=$("#div");
if(div.css("display")!="none")
{div.css("display","none");}
else{div.css("display","block")}
园豆：24014
&&&您需要以后才能回答，未注册用户请先。2015年2月 总版技术专家分月排行榜第二
2015年2月 Web 开发大版内专家分月排行榜第一2015年1月 Web 开发大版内专家分月排行榜第一2014年12月 Web 开发大版内专家分月排行榜第一2014年11月 Web 开发大版内专家分月排行榜第一2014年10月 Web 开发大版内专家分月排行榜第一
2014年9月 Web 开发大版内专家分月排行榜第二
2014年10月 Web 开发大版内专家分月排行榜第三2014年6月 .NET技术大版内专家分月排行榜第三
2015年2月 总版技术专家分月排行榜第二
2015年2月 Web 开发大版内专家分月排行榜第一2015年1月 Web 开发大版内专家分月排行榜第一2014年12月 Web 开发大版内专家分月排行榜第一2014年11月 Web 开发大版内专家分月排行榜第一2014年10月 Web 开发大版内专家分月排行榜第一
2014年9月 Web 开发大版内专家分月排行榜第二
2014年10月 Web 开发大版内专家分月排行榜第三2014年6月 .NET技术大版内专家分月排行榜第三
2015年2月 总版技术专家分月排行榜第二
2015年2月 Web 开发大版内专家分月排行榜第一2015年1月 Web 开发大版内专家分月排行榜第一2014年12月 Web 开发大版内专家分月排行榜第一2014年11月 Web 开发大版内专家分月排行榜第一2014年10月 Web 开发大版内专家分月排行榜第一
本帖子已过去太久远了，不再提供回复功能。　　这两天更进一步的了解了JS，老师让我们用原生的js编写图片切换和改变点击按钮样式，就是让我们学会怎么去把一个问题拆分，怎么将一个大问题拆分成许多的小问题，再用函数封装起来。比如一个点击按钮，让其点击时背景色发生改变，点击另一个时，上一个按钮要变回原来本有的颜色：这个问题用jquery，一行代码就搞定，但是用原生js就得分三个部分来考虑：
　　1.添加改变背景的样式。
　　2.怎么获取到除了当前点击的按钮以外其他的兄弟节点。
　　3.怎么去除按钮的样式属性。
&　　也讲了事件委托，实现了可以删除新添加的元素的功能。后面我会把代码贴出来。
　　这两天上课讲得一些笔记：
　　　　1.需要注意的两个细节：（1）、不要随意修改别的对象的属性值，比如图片切换这个例子，要获取li的索引时，不能改变节点的index属性。
　　　　　　　　　　　　　　　（2）、实现某个功能时，要封装好业务逻辑，做到改变dom节点时，不用改变业务逻辑。
　　　　2.属性：（1）、dom.parentNode& ：dom节点的父元素。
　　　　　　　　（2）、dom.children : Element的属性，代表元素节点的所有子元素，Element是Node的扩展，也是他多种类型中的一种。
　　　　　　　　（3）、dom.childNode: Node中的属性，代表节点的所有子元素，而节点又分为元素节点、文本节点、属性节点、注释节点、文档节点等。
　　　　　　　　　　e.g：
　　　　　　　　　　　　Node的children属性为undefined.因为Node代表DOM中的节点，而上面也提到了children只是元素节点的属性。
　　　　　　　　（4）、dom.className : 为节点添加class名。
　　　　 3.方法 ：& （1）、dom.appendChild&:appendChild() 方法向节点添加最后一个子节点。
　　　　　　　　　 （2）、dom.removeChild: removeChild() 方法指定元素的某个指定的子节点,以 Node 对象返回被删除的节点，如果节点不存在则返回 null。
　　　　 4. push()方法 : 用法： arr.push(Arr[i])& ,将Arr的第i个元素插入到arr数组中。
　　　　 5. "==" 和"==="的区别： "=="只会比较值是否相等，比如 1 == "1" 是对的，但会true,而"==="是值和数据类型都会比较，完全相等才返回true,所以1 === "1" 返回false。
　　　　 6. 关于函数讲了两个重要的点：（1）、函数可以被调用很多次，调用执行后，函数就会被销毁，这是函数的机制。
　　　　　　　　　　　　　　　　　　& （2）、闭包是里面的函数若没有调用执行，那么外部的函数不会被销毁。
　　　　 7. 原生js创建文本节点、元素节点，删除节点，添加文本节点到元素节点：
　　　　　　（1）、var txt = document.createTextNode("text");& //创建文本节点的方法。
　　　　　　（2）、var elem = document.createElement("li"); //创建元素节点 "li"。
　　　　　　（3）、elem.appendChild(txt); & //添加文本节点到元素节点的最后子节点上。
　　　　　　（4）、ul.appendChild(elem) ; & //在ul里添加li元素节点。
　　　　　　（5）、ul.removeChild(elem); & //删除ul中的elem元素节点。
　　　　下面是用这些方法实现的添加水果和删除水果的功能的代码：
1 &!DOCTYPE html&
2 &html lang="en"&
&meta charset="UTF-8"&
&title&dom节点添加删除&/title&
11 &/head&
&input type="text" id="foods"&
&input type="button" id="add" value="添加"&
&ul id="ul"&
&span class="del"&删除&/span&
&span class="del"&删除&/span&
&span class="del"&删除&/span&
&span class="del"&删除&/span&
var foods = document.getElementById("foods");
var add = document.getElementById("add");
var ul = document.getElementById("ul");
var li = ul.getElementsByTagName("li")
add.onclick = function(){
var elemLi = document.createElement("li");
var foodsVal = foods.
var txt = document.createTextNode(foodsVal);
elemLi.appendChild(txt);
ul.appendChild(elemLi);
var elemSpan = document.createElement("span");
elemSpan.className = "del";
var txtDelete = document.createTextNode(" 删除");
elemSpan.appendChild(txtDelete);
elemLi.appendChild(elemSpan);
//下面的删除节点用的是事件委托，可以删除新添加上li。
ul.onclick = function(event){
if(event.target.className == "del"){
//event.target就代表在ul的所有子元素下当前点击的元素。
ul.removeChild(event.target.parentNode);
　　　　8. 事件冒泡和时间捕获的问题：　　　　
　　　　　　这里就要提到addEventListener()方法，addEventListener()与removeEventListener()用于处理指定和删除事件处理程序操作。所有的DOM节点中都包 含这两种方　　　　　法，并且它们都接受3个参数：要处理的时间名、作为事件处理程序的函数和一个布尔值。最后这个布尔值参数是true，表示在捕获阶段调用事件处 理程序；如果是false，　　　　表示在冒泡阶段调用事件处理程序。
　　　　addEventListener的参数一共有三个，语法为：
　　　　　　element.addEventListener(type,listener,useCapture)
　　　　下面是需要注意的事项：
　　　　　　（1）其中element是要绑定函数的对象。
　　　　　　（2）type是事件名称，要注意的是"onclick"要改为"click","onblur"要改为"blur",也就是说事件名不要带"on"。
　　　　　　（3）listener当然就是绑定的函数了，记住不要跟括号。
　　　　　　（4）最后一个参数是个布尔值，表示该事件的响应顺序。
　　　　　下面是关于addEventListener的一个小例子：
1 &!DOCTYPE html&
2 &html lang="en"&
&meta charset="UTF-8"&
&title&事件冒泡&/title&
#outer,#inner,#con{
padding: 50px 0;
height: 250
width: 300
background-color: #999;
height: 150
width: 200
background-color: #
height: 50
width: 100
background-color: #
27 &/head&
&div id="outer"&
&div id="con"&
&div id="inner"&&/div&
var outer = document.getElementById("outer");
var inner = document.getElementById("inner");
var con = document.getElementById("con");
inner.addEventListener("click",function(){
console.log("inner");
outer.addEventListener("click",function(){
console.log("outer");
con.addEventListener("click",function(){
console.log("con");
　　　　上面这个例子中，如果你点击id为inner的盒子，控制台会输出 outer con inner 以事件捕获的顺序调用程序。如果不用这个方法，只用单纯的点击事件，那么他会按冒泡　　顺序调用执行程序。
　　　　9.回调函数
　　　　　　定义：将一个函数作为参数传给另一个函数或者方法，常见的setInterval(function(),1000) 就是将function函数传到了setInterval方法中。上面的　　　　　　　　　addEventListener方法也是回调函数。
　　　　　　下面有个例子
1 function fun(Fun){
//函数名fun 形参是Fun
//这里调用名为Fun的函数，因为程序走到这里并没有执行，因为在后面调用是才执行。
console.log("xixi~");
5 fun(function(){
//调用函数fun ，实参为一个函数，这里这个函数就是作为参数传给了fun函数，这时候fun函数执行，Fun()调用函数就可以执行被当作参数的函数了，即控制台会输出haha~。
console.log("haha~");
　　下面是用原生JS编写的图片切换按钮背景颜色改变的例子：
1 &!DOCTYPE html&
2 &html lang="en"&
&meta charset="UTF-8"&
&title&banner_roll_change&/title&
margin: 0;
padding: 0;
list-style:
width: 30%;
height: 300
width: 100%;
left: 50%;
margin-left: -60
height: 10
background-color: #999;
border-radius: 50%;
margin-right: 20
background-color:
41 &/head&
&img src="images/5.jpg" alt="" id="pic"&
&li class="list"&&a href="#"&&/a&&/li&
&li class="list"&&a href="#"&&/a&&/li&
&li class="list"&&a href="#"&&/a&&/li&
&li class="list"&&a href="#"&&/a&&/li&
// &script src="jquery-1.11.1.js"&&/script&
//用jquery编写点击背景色改变
// $("a").click(function(){
$(this).addClass("active").parent().siblings().find("a").removeClass("active");
//用原声js
var lis = document.getElementsByClassName("list");
var pic = document.getElementById("pic");
var picArr = ["images/5.jpg","images/6.jpg","images/7.jpg","images/8.jpg"];
for(var i = 0;i&lis.i++){
lis[i].onclick = function(ind){
return function(){
pic.src = picArr[ind];
addClass(this,"active");
var sib = siblings(this);
for(var j = 0;j&sib.j++){
removeClass(sib[j],"active");
function addClass(obj,name){
//添加样式函数
obj.className = obj.className + " " +
function siblings(obj){
//获取到除当前按钮以外其他按钮
var sibArr = obj.parentNode.
var sibNewArr = [];
for(var i = 0;i&sibArr.i++){
if(sibArr[i] != obj){
sibNewArr.push(sibArr[i]);
return sibNewA
function removeClass(obj,name){
//删除样式函数
var classStr = obj.classN
var classArr = classStr.split(" ");
var classNewArr = [];
for(var i = 0;i&classArr.i++){
if(classArr[i] != name){
classNewArr.push(classArr[i]);
obj.className = classNewArr.join(" ");
103 &/body&
104 &/html&
阅读(...) 评论()温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
All the splendor in the world is not worth a good friend!!
Hello my friend!!
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
阅读(19635)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_095069',
blogTitle:'JS点击按钮后，改变按钮文字',
blogAbstract:'&&&&&& 在网页中，点击一个按钮，按钮的文字会改变，就像全癣反选功能的按钮一样，有时候我们需要这种按钮功能，代码易懂，修改方便，希望能够帮上你的忙！ \r\n代码如下：\r\n&html&&head&&title&点击改变按钮文字-Codefans.net&/title&&meta http-equiv=\"content-Type\" content=\"text/charset=gb2312\"&&/head&&body&&script language=\"JavaScript\"&function hao() {&&',
blogTag:'',
blogUrl:'blog/static/',
isPublished:1,
istop:false,
modifyTime:0,
publishTime:1,
permalink:'blog/static/',
commentCount:0,
mainCommentCount:0,
recommendCount:3,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'All the splendor in the world is not worth a good friend!!\r\nHello my friend!! ',
hmcon:'1',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}}