【奇淫巧技】Javascript入门笔记，打造最绚丽网页特效！

Javascript 入门笔记

这是小编当初自学javascript的时候写的笔记，自觉比较容易理解，适合小白入门，拿出来分享吧，过段时间再来一个进阶篇的笔记，嘿嘿，整理好了再发出来。

什么是Javascript？

JavaScript是一种脚本语言，是一种动态类型、弱类型、基于原型的语言。它的解释器被称为JavaScript引擎，是默认整合在浏览器中、广泛用于客户端的脚本语言。最早是在HTML中作为给网页增加动态效果而使用。

Javascript脚本语言同其他编程语言一样，拥有自身的基本数据类型、表达式和算术运算符及程序的基本程序框架。Javascript提供了四种基本的数据类型和两种特殊数据类型用来处理数据和文字。而变量提供存放信息的地方，表达式则可以完成较复杂的信息处理。

Javascript一般用途如下：

1.嵌入动态文本于HTML页面。

2.对浏览器事件做出响应。

3.读写HTML元素。

4.在数据被提交到服务器之前验证数据。

5.检测访客的浏览器信息。

6.控制cookies，包括创建和修改等。

7.基于Node.js技术进行服务器端编程。

1

判断语句

if(判断条件){ //输入满足条件后处理的命令 }else{ //如果不满足条件，处理的命令 }

2

定义函数

function 函数名(){ //调用函数后处理的命令 } onclick="函数名()" //在按钮上触发该函数

3

新增变量

var 变量名 = '变量内容'; 例：var url = 'http://www.baidu.com';

4

输出内容

document.write('输出内容'); document.write(变量名); document.write(变量名+'输出内容'); //'+'是连接符，相当于php的'.'

5

消息弹窗

alert(变量名); alert('输出内容'); confirm(变量名);confirm('输出内容'); //confirm是带有确定和取消按钮的弹窗，点击确定返回true，点击取消返回flase prompt('弹窗标题','输入框内可修改内容'); //prompt是带有确认取消按钮以及text输入框的弹窗，点击确定返回输入值，点击取消返回NULL

6

对页面的操作

window.open('弹窗网址'); //打开设置的弹窗网址 window.close(); //关闭当前页面

7

DOM操作

DOM就是将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

document.getElementById('元素id'); //通过id获取元素，返回:null或[object HTMLParagraphElement] Object.innerHTML="自定义内容" //给元素id设置新内容，Object为var的变量名 实例-on var mychar=document.getElementById("con"); //给变量定义内容 document.write("原标题:"+mychar.innerHTML+"<br>"); //打印原内容 mychar.innerHTML = "New text"; //设置新内容 document.write("修改后的标题:"+mychar.innerHTML); //打印新内容 实例-off Object.style.property=new style; 实例-on var mychar= document.getElementById("con"); //给mychar变量获取ID mychar.style.color="red"; //给变量的内容设置style样式 实例-off Object.style.display = "none or block"; //设置本变量所获取ID元素的显隐样式丨显(block)，隐(none) 实例-on function hidetext() { var mychar = document.getElementById("con"); mychar.style.display="none"; } //设置按钮，onclick触发该方法 隐藏该ID元素 function showtext() { var mychar = document.getElementById("con"); mychar.style.display="block"; } //设置按钮，onclick触发该方法 显示该ID元素 实例-off object.className = "class名"; //获取元素的class属性 & 为某个ID元素更改该一个指定css样式 //特别注意：className中的N必须为大写，不然无效。 实例-on function modify(){ var p1 = document.getElementById("p1"); //变量p1获取ID为p1的元素 p1.className = "two"; //将p1元素的样式改为class为two的样式 } 实例-off

弹出新页面的另类写法

因为有些浏览器会自动把“windows.open”识别成恶意弹窗，所以会自动屏蔽新页面的弹出。恰巧前段时间小编再写一个网站项目，遇到了这个问题，经过N次的百度以及N次的实践，终于找到了一个最佳的功能处理方式，代码如下。

项目代码： if (substr($url,0,4)!="http") { echo "<script>location.href='http://".$url."';</script>"; } else { echo "<a id='urldown' href='".$url."' target='_blank' style='display:none;'></a><script>document.getElementById('urldown').click();</script>"; } 核心代码： <a id='urldown' href='".$url."' target='_blank' style='display:none;'></a><script>document.getElementById('urldown').click();</script> 代码分析： 因为我们要实现的是新页面打开网址，所以我们直接写一个打开方式为“_blank”的<a>标签，然后我们在写一个JS来模拟点击这个<a>标签，“document.getElementById('urldown')”这段代码就是获取到ID为“urldown”的<a>标签按钮，然后再用“.click()”来点击一下，就可以达到“windows.open”的这个效果了。 如果你有这个需求，那就赶快去试试吧，包你满意，嘿嘿。