JavaScript操控CSS -1

DOM编程艺术(第二版) 第九章, 根据书上的代码自己做了一下笔记


getNextNode(node) 是检测元素节点类型,好像用到了递归..


<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>JS-操作CSS</title>
<script type=”text/javascript”>
function testCSS(){
var get_pid=document.getElementById(“pid”);
alert(“p元素是个什么类型:”+typeof get_pid.nodeName);//type of判断函数是个什么类型 比如p就是str(字符串)型的 var num =1 用typeof判断就是数字类型
alert(“style是什么类型:”+typeof get_pid.style);//style也是一个对象
alert(“style颜色:”+get_pid.style.color);//获取pid颜色
alert(“style字体:”+get_pid.style.fontFamily);//js里-号会被认为是运算符 所以采用驼峰式命名
alert(“style字体大小:”+get_pid.style.fontSize);//获取字体大小;
get_pid.style.color=”blue”;//设置pid颜色为蓝色
alert(“style更改后的颜色”+get_pid.style.color);//获取更改后的颜色

}
function changecss(){//更改h1兄弟元素的style属性
var css_h1=document.getElementsByTagName(“h1”);//获取文档中h1标签

for (var i = 0; i < css_h1.length; i++) {//遍历h1标签
var elem =getNextNode(css_h1[i].nextSibling);//设置变量elem,调用getNextNode函数返回的结果 这里传递给getNextNode函数的属性是(h1标签的下一个节点);节点有三种类型 文本,属性,元素,
//因为我们要更改元素的css属性,所以我只要获取到元素节点就行了。其他的都不行。
elem.style.color=”blue”;//设置elem的颜色是蓝色
elem.style.fontSize=”24px”;//设置elem字体大小为24px
};
}
function getNextNode(node){//开始检测节点类型函数
if (node.nodeType==1) {//nodeType有三种类型 1-元素节点 2-属性节点 3-文本节点 判断是否是元素节点
return node;//是 返回node
};
if (node.nextSibling) {//检测node下一个节点是否存在 存在执行
return getNextNode(node.nextSibling);//再次调用函数getNextNode函数 检测Node的下一个节点.
//即h1的下一个节点的下一个节点,相当于再次循环.. 好好理解下 应该不难
};
return null;//如果node下一个节点不存在 返回空
}
window.onload=function(){//网页加载完毕加载函数
// testCSS();
changecss();

}


</script>
</head>
<body>
<p id=”pid” style=”color: red; font-family: sans-serif;font-size: 24px;”>hello soul</p>
<h1>测试文本1</h1>
<p>测试文本2</p>
<p>测试文本3</p>
<h1>测试文本4</h1>
<p>测试文本5</p>

</body>
</html>

 

一个页面中多个window.onload = function(){}冲突问题解决方案

本文转自http://blog.csdn.net/zndxlxm/article/details/7878298


假如在一个js里面需要window.onload两个方法:
方法1:写成这样就可以了
window.onload=function(){function(a);function(b);}
也就是集中window.onload一次。

方法2:


window.onload=function(){ //创建一个页面加载完毕函数
alert(“加载完成”); //弹出加载完成
onload2(); //加载onload2函数
onload3(); //加载onloado3函数
//onload2()的()可以传递参数
}
function onload2(){
alert(“onload2加载完成”);
}
function onload3(){
alert(“onload3加载完成”);
}

 

分分钟解决sublime2插件下载不了,弹出报错问题

Pack One

前几天在某下载站下载了sublime2作为开发文本工具.在下载插件的时候遇到了问题.


使用一招分分钟解决


删除Pristine Packages,data/Packages,data/Pristine Packages;原本汉化的packagecontrol


然后再去 https://packagecontrol.io/ 下载放至data/Installed Packages下安装


唯一缺点就是对英文不可视症 会感觉到一点点不舒服..


Pack Two



安装sublimecodeintel后弹出报错 插件-设置 用户 加入

, “detect_slow_plugins”:false即可 //,逗号是用来分隔的 请务必加入

<如果没加逗号报错 找到报错文件 加上逗号 OK


JavaScript遍历-1

本文针对有一定基础或者初学JavaScript的童鞋..其实就是自己的笔记罢了,哈哈


JavaScript遍历数组,也是从DOM 编程艺术书本上学到的,并且加以理解。


<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>JS-遍历-1</title>
<script type=”text/javascript”>
function bianLi(){
var bianli_p =document.getElementsByTagName(“p”);//设置变量bianlian_p等于文档中的p标签
for (var i = 0; i < bianli_p.length; i++) {//开始循环 如果i小于bianli_p标签的长度,比如这个文档p有三个长度,然后设置i=0 0肯定小于3对吧 然后开始循环
var bianli_p_txt =bianli_p[i].firstChild.nodeValue;//设置bianlian_txt等于bianlian_p[i]的文本内容 [i]是0就是第一个,别忘了数组从0开始
alert(“遍历第”+i+”次|内容为”+bianli_p_txt);//弹出遍历
};
}
window.onload =function(){//网页加载完毕后加载函数
bianLi();
}

</script>
</head>
<body>
<p>Hello 我是文字</p>
<p>hello 我是文字2</p>
<p>hello 我是文字3</p>

</body>
</html>

看来难度不够,再加点难度 不过在加点难度之前请把节点这个内容理解哦 JavaScript节点


<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>JS-遍历-1</title>
<script type=”text/javascript”>
function bianLi(){
var bianli_p =document.getElementsByTagName(“p”);//设置变量bianlian_p等于文档中的p标签
for (var i = 0; i < bianli_p.length; i++) {//开始循环 如果i小于bianli_p标签的长度,比如这个文档p有三个长度,然后设置i=0 0肯定小于3对吧 然后开始循环
var bianli_p_txt =bianli_p[i].firstChild.nodeValue;//设置bianlian_txt等于bianlian_p[i]的文本内容 [i]是0就是第一个,别忘了数组从0开始
alert(“遍历第”+i+”次|内容为”+bianli_p_txt);//弹出遍历
};
}
window.onload =function(){//网页加载完毕后加载函数
// bianLi();
// bianLiAdv();
}
function bianLiAdv(){
// var x,hello,soul;
// var x=null;
// var shuzu=[];
// shuzu[hello]=”hello”;
// shuzu[soul]=”hello2”;
// for(x in shuzu){
// // var shuzu_into=shuzu[x];
// document.write(shuzu[x]);}
//以上代码是我犯的一个错误代码,如果这样输出发现只能只能输出一个”hello2”
//因为hello未加””双引号,因为浏览器会理解hello是一个数字,而hello没有赋值,实际上在某些浏览器这样运行会直接报错。
//未赋值变量,很多情况下被强制转换成需要的类型,比如false,0,”” 等
//你可以在var x,hello,soul下面写一句 var hello=0;那么发现能够正常输出
//
var x,hello,soul;//定义变量x,hello,soul未赋值的变量是undefined;
var shuzu=[];//定义数组
shuzu[“hello”]=”hello”;//加上双引号后就正常了
shuzu[“soul”]=”hello2”;//设置数组下标
for (x in shuzu){//开始遍历
alert(“遍历下标为”+x+”数组内容为”+shuzu[x]);//弹出。
}
}

</script>
</head>
<body>
<p soul=”标题1”>Hello 我是文字</p>
<p soul=”标题2”>hello 我是文字2</p>
<p soul=”标题3”>hello 我是文字3</p>

</body>
</html>

再深入一点点


<!doctype html>
<html lang=”en”>
<head>
<meta charset=”UTF-8”>
<title>JS-遍历-1</title>
<script type=”text/javascript”>
function bianLi(){
var bianli_p =document.getElementsByTagName(“p”);//设置变量bianlian_p等于文档中的p标签
for (var i = 0; i < bianli_p.length; i++) {//开始循环 如果i小于bianli_p标签的长度,比如这个文档p有三个长度,然后设置i=0 0肯定小于3对吧 然后开始循环
var bianli_p_txt =bianli_p[i].firstChild.nodeValue;//设置bianlian_txt等于bianlian_p[i]的文本内容 [i]是0就是第一个,别忘了数组从0开始
alert(“遍历第”+i+”次|内容为”+bianli_p_txt);//弹出遍历
};
}
window.onload =function(){//网页加载完毕后加载函数
// bianLi();
// bianLiAdv();
bianLiSR();
}
function bianLiAdv(){
// var x,hello,soul;
// var x=null;
// var shuzu=[];
// shuzu[hello]=”hello”;
// shuzu[soul]=”hello2”;
// for(x in shuzu){
// // var shuzu_into=shuzu[x];
// document.write(shuzu[x]);}
//以上代码是我犯的一个错误代码,如果这样输出发现只能只能输出一个”hello2”
//因为hello未加””双引号,因为浏览器会理解hello是一个数字,而hello没有赋值,实际上在某些浏览器这样运行会直接报错。
//未赋值变量,很多情况下被强制转换成需要的类型,比如false,0,”” 等
//你可以在var x,hello,soul下面写一句 var hello=0;那么发现能够正常输出
//
var x,hello,soul;//定义变量x,hello,soul未赋值的变量是undefined;
var shuzu=[];//定义数组
shuzu[“hello”]=”hello”;//加上双引号后就正常了
shuzu[“soul”]=”hello2”;//设置数组下标
for (x in shuzu){//开始遍历
alert(“遍历下标为”+x+”数组内容为”+shuzu[x]);//弹出。
}
}
//下面可以利用上面的来深入一点点
function bianLiSR(){
var shuzu=[]//设置数组,如果在for循环里面设置,每一次都会重新定义数组,最终只能得到最后一个内容.
var get_p=document.getElementsByTagName(“p”);//设置变量get_p等于p标签
for (var i = 0; i < get_p.length; i++) {//开始遍历循环p标签
var get_p_soul =get_p[i].getAttribute(“soul”);//设置get_p_soul等于get_p[i]的soul属性内容
var get_p_xiabiao =get_p[i].getAttribute(“xiabiao”);
// alert(get_p_soul+”|”+get_p_xiabiao);//测试弹出get_p_soul内容是否正确
shuzu[get_p_soul]=get_p_xiabiao;//设置数组自定义下标 get_p_soul等于soul属性内容

//get_p_xiabiao等于下标属性内容,那么第一次循环就是 shuzu[标题1]=[我是下标1];
//具体的去测试就ok了
// alert(shuzu[get_p_soul]);//测试shuzu[soul]=xiabiao内容是否正确
};
for(get_p_soul in shuzu){//开始遍历
alert(“数组下标是:”+get_p_soul+”|数组内容是:”+shuzu[get_p_soul]);//弹出遍历内容.
}

}
</script>
</head>
<body>
<p soul=”标题1” xiabiao=”我是下标1”>Hello 我是文字</p>
<p soul=”标题2” xiabiao=”我是下标2”>hello 我是文字2</p>
<p soul=”标题3” xiabiao=”我是下标3”>hello 我是文字3</p>

</body>
</html>

 

JavaScript节点

JavaScript节点是一个很重要的环节.不多说直接上代码


<!doctype html>
<html lang=”cn”>
<head>
<meta charset=”UTF-8”>
<title>JS-DOM方法</title>
<script type=”text/javascript”>
function divIn(){
var soul_div =document.getElementById(“soul”);//设置soul_div等于id:soul
var soul_p=document.createElement(“p”);//新建个p元素存储为soul_p 元素节点
soul_div.appendChild(soul_p);//在soul_div节点下插入p元素
var soul_p_txt=document.createTextNode(“hello soul”);//创建个文本节点储存为 soul_p_txt
soul_p.appendChild(soul_p_txt);//在P元素节点下插入文本节点
}
window.onload=function(){//页面加载完毕后加载函数
divIn();
}


</script>
</head>
<body>
<div id=”soul”>

</div>


</body>
</html>

21


 


上图代码节点大概就是这么分布的。


高级版 insertAftet(before,after) 调用的变量请不要用before,after 换成这样应该好理解点insertAftet(hello,soul);


function starIMGP(){
var star_img=document.createElement(“img”);//创建一个新元素节点img
star_img.setAttribute(“id”,”shit”);//设置img id属性等于shit
star_img.setAttribute(“width”,”500px”);//设置宽属性节点
star_img.setAttribute(“height”,”500px”);//设置高属性节点
star_img.setAttribute(“src”,””);//设置src属性节点
var star_p=document.createElement(“p”);//创建一个新元素节点p
star_p.setAttribute(“id”,”p_node”);//设置p id属性等于p_node
var star_p_txt=document.createTextNode(“pnode”);//创建一个文本节点节点
star_p.appendChild(star_p_txt);//star_p元素节点下添加star_p_txt属性节点
var star_ul=document.getElementById(“ul_all”);//获取ul id
// star_ul.parentNode.insertBefore(star_img,star_ul);//把star_img插入star_ul前面
insertAftet(star_img,star_ul);//将star_img插入star_ul之后
insertAftet(star_p,star_img);//将star_p插入star_img之后


}
function insertAftet(before,after){//定义函数insertAftet
var parent_node =after.parentNode;//设置变量parent_node等于after父级元素
if(parent_node.lastChild==parent_node){//如果after父级元素就是after自己
after.appendChild(before);//在after元素之后插入before元素
}else{//如果不是
parent_node.insertBefore(before,after.nextSibling);//在after与下一个元素之间插入before元素
}

}
//2015年3月8日更新一处错误

 

windows.onload弹性加载

代码来源于 DOM编程艺术第二版(6.3)


因为想对这些代码做更深的了解于是自己重新编写了一下,当然意思都还是一样的


function addWin(func){//定义函数addWin并且自定义一个变量func
var oldevent=window.onload;//设置oldevent等于window.onload 意思就是把原来的函数存储起来
if(typeof window.onload == “function”){//如果win.onload类型是函数,当然如果原来没写过window.onload那么就不是函数了
window.onload =function(){//设置window.onload
oldevent();//添加上原来的老函数
func();//添加上新的函数
}
}else{//如果原来没写过window.onload那么执行
window.onload =func;//设置window.onload=func
}
}
addWin(hello);//hello就相当于func 那么window.onloado=func;相当于window.onload=hello;
function hello(){
alert(“hello”)

}

 


 

DOM-编程艺术第二版(5.4)-JavaScript弹窗

window.open(url,name,style)

 

这就是JavaScript弹窗代码, 写一个函数然后再编写个a标签然后设置好href添加上onclick后就变成了这样

function tc(){


window.open(“http://www.baidu.com","hello soul”,”width=300,height=300”);


}


<a href=”” onclick=”tc()”>弹窗测试</a>


测试后没问题 ,然后我想要tc这个函数自己获取到a标签的href属性这样就方便很多了。于是稍微修改了下代码


<a href=”http://www.old.com“ onclick=”tc(this)”></a>//this的意思我理解为返回当前a标签中的href,然后传递给link于是代码意思就变成了window.open(“http://www.old.com","hello soul”,”width=300,height=300”)


function tc(link){


window.open(link,”hello soul”,”width=300,height=300”)


}


差不多了,但是我写了好几个a标签 我只想要一个属性fh=”soul”的a标签可以弹窗 于是我这么写了.



function aTest() {

var alink = document.getElementsByTagName(“a”); //获取全部的a标签
for (var i = 0; i < alink.length; i++) { //递归a标签
if (alink[i].getAttribute(“fh”) == “test”) { //检测fh=“test”的a标签
var tz_titile =[];//设置变量tz_title等于数组
var tz =[];//设置变量tz等于数组
tz_titile[i] = alink[i].getAttribute(“title”); //设置tz_title[i]=a标签的标题
tz[i] = alink[i].getAttribute(“href”); //设置tz[i]=a标签的href(PS:这里的a标签指的是fh=soul的a标签
alink[i].onclick = function() { //给fh属性=soul的a标签加个onclick函数,等同 onlick= testcl(tz[i],tz_title[i]);return false)
testck(tz[i], tz_titile[i]); //返回tz[i],tz_title[i]
return false; //阻止a标签跳转
}
}
};
}

window.onload = aTest; //页面加载完毕后加载aTest函数

function tc(a, b) {

window.open(a, b, “width=300,height=300”); //name属性设置无效. 窗口标题根本就不是设置的那样啊喂!

}

</script>

 


 

After Effects错误:调用增效工具“AEDynamicLinkServer出错

 


aeerror


 


因为AE PR已删,图片就从网上copy.先说说事情起因.


起因


某天想用AE制作一下片头,顺便学习一下AE,然后打开深藏多年(两个月)的AE…这不打开不要紧,一打开就报错了..


随后打开PR,PR显示已停止工作..不提示任何错误,但是PS AI又能够正常使用。尼玛,还能愉快的玩耍不?


随后(随后是个shen me gui?)


推度娘后,没得出一个什么结果.在搜索了一个多小时后,果断翻墙奔google,搜索了将近30几分钟HP已将为0…


于是深夜自己捣鼓,先把Adobe AE PR全部卸载 用的是Adobe Clean Tools 清理后重启电脑,继续安装。


十五分钟后….关机 默默的走到窗边 拿出一瓶XX矿泉水…


忽闻是显卡问题,奔回电脑,更新显卡驱动至最新版本.重启电脑,打开AE..怒砸板凳,这不坑爹呢?


怀疑是权限问题.把D盘 C盘 全部设置成Everyone权限..启动AE….


隔壁老王告诉我 C:\Users\你的用户名\Application Data 还有Adobe文件夹 斩草要除根! 于是递归搜索C盘包含Adobe名字的文件夹..删之~


删后发现重新安装好的AE又要安装一次..用Adobe Clean Tools也没发现有AE..于是在控制面板-程序-删除了AE。重启电脑~安装~打开…打开..开…


有小伙伴说是quick time 播放器问题。于是删除了quick time 播放器..重新下载最新的…重启电脑~打开…………..


说了这么多废话 得出的结论是什么呢?


MotherFucker,


前人经验告诉大家重装系统吧!

DOM-编程艺术第二版(4.3)-JavaScript图片库

今天买的神器到手了,然后着手开始写代码..


4.3节是怎么做JavaScript图片库的,…码完以后发现onclick加了return false却还是跳转了


<li><a href=”img/Pepsized_Blur_01.jpg “ title=”A fireworks display” onclick=”showPic(this);return false;” title=”ssdas”>one</a></li>


反复查了好久,推度娘不下一百次,..终于发现问题所在了。


通过文本对比工具发现一处错误!!这错误竟然是!


论getAttention 和getAttribute 差别 WTF!!!


更改过来后 问题解决…




下面开始JavaScript图片库


function clickSP(){
var ul_all = document.getElementById(“ul_all”);//获取元素id=”ul_all”
var add_showpic = ul_all.getElementsByTagName(“a”);//设置add_showpic=ul_all下的a标签
for (var i = 0; i < add_showpic.length; i++) {//递归ul_all下的a标签
if (add_showpic[i].getAttribute(“fh”)!=”stop”) {//如果a标签fh属性不等于stop 执行
add_showpic[i].onclick=function(){//为a标签添加onclick事件
showPic(this);//添加showPic(this);
return false;//等同于 onclick=”showPic(this);return false;”
}

}
};
}
window.onload =function(){//页面加载完毕后加载函数clickSP
clickSP();
}
function showPic(whichpic)
{var source = whichpic.getAttribute(“href”);//设置变量 source等于点击a标签的href属性
var placeholder = document.getElementById(“shit”);//获取img标签id=”shit“
placeholder.setAttribute(“src”,source); //设置img标签的src属性等于变量sour//ce


//不好理解我举个例子 <a href=”/img/1.jpg” onclick=”showPic(this)”>one</a> 我点击这个a////标签就相当于拿到了这个便签的href并且存储起来了(存储变量为source) 然后再把这个href传送给//img标签的src
//<img src=”sdsa” id=”shit”>这个imgsrc是乱的但是我通过showPic这个函数后 src就变成了点
//击a便签的href 即 src=”/img/1.jpg”


var get_a_title=whichpic.getAttribute(“title”);//获取到a标签的标题属性内容
// alert(“title”+get_a_title);//测试ok 测试代码已经注释不用管
var get_pid =document.getElementById(“p_node”);//获取到p标签id为”p_node”
// alert(p_node.childNodes[0].nodeValue);//获取到P_node文本;测试ok
get_pid.firstChild.nodeValue=get_a_title;//firstChild等同于childNodes[0] 设
//置P_node文本等于get_a_title内容; 至于为什么是childNodes[0]这个我也没弄懂 childNodes
//[1]不行嘛?
}


//以下是html代码
<ul id=”ul_all”>
<li><a href=”img/Pepsized_Blur_01.jpg “ title=”hello soul” onclick=”showPic(this);return false;” title=”ssdas”>one</a></li>
<li><a href=”img/Pepsized_Blur_02.jpg” title=”soul seeker” onclick=”showPic(this);return false;” title=”ssds”>two</a></li>
<li><a id=”testa” href=”img/Pepsized_Blur_03.jpg” title=”by soul” onclick=”showPic(this);return false;” >three</a></li>
<li><a fh=”stop” href=”#”>stop</a></li>

</ul>
<img id=”shit” width=”500px” height=”500px” src=”img/Pepsized_Blur_01.jpg” />
<p id=”p_node”>pnode</p>

 

该死的全角分号-JavaScript

用惯了搜狗输入法,懒得换输入法了,用搜索输入法写代码的时候一时间把符号调成全角后,会发生一些莫名其妙的BUG。有时候排查要排查好久。


18


比如检查右图的代码都是编写正确的,但是运行的时候回莫名其妙的 报错


Uncaught SyntaxError: Unexpected token ILLEGAL


19


 


 


结果发现13行分号是全角。


囧!Damn!