重新整理过一次原生的javascript:
①.JavaScript是什么?
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言。
总之JS就是一个很厉害的东西,通常用来 控制HTML页面、响应浏览器操作、验证传输数据等。
java 和 JavaScript有什么关系? 没有任何关系,顶多语法逻辑比较像;
jQuery 和 JavaScript有什么关系?为什么要学JS? jQuery是由若干JS代码组合而成的较方面的插件库;
②.JavaScript代码写在哪里:
JavaScript代码要在页面的script标签里面,或者单独js文件里面,或者标签里面(不推荐);
script标签可以放在任意位置,但是不同位置要注意加载顺序,通常放在head结束前和body结束前
script标签可加标签属性 type=‘text/javascript‘ 或 language=‘javascript‘ 或 不写;
script引入外部js文件路径用src <script src=””></script>;
③.写js代码需要注意什么?
1. 严格区分大小写;
2. 语句字符都是半角字符;
3. 每条完整语句后面要写分号;
4. 代码要缩进,缩进要对齐,可用空格 tab缩进。
说明1.当script代码放在body之前,并且里面涉及到操作标签的话,就需要加上window.onload=function(){};
④.JS如何找到对应的标签/节点/元素
1 document.getElementById(‘id名‘)通过id寻找 2 document.getElementsByClassName(‘class名‘) 寻找所有的class名 [有兼容问题] 3 document.getElementsByClassName(‘class名‘)[0]寻找第一个class名.下标是从0开始的 4 document.getElementsByTagName()通过标签寻找所有</li> <li>document.getElementsByTagName()[0]通过标签寻找第一个,下标是从0开始的
⑤.innerHTML=‘‘ 元素里面的HTML内容显示。eg:
document.getElementsByTagName(‘div‘)[0].innerHTML = ‘Hello World!‘;在页面的第一个div标签里显示内容Hello World! 其中【=】一个等号叫赋值,是把右边的内容给左边。 【""】引起来的叫字符串
6.点击事件 xxx.onclick = 事件函数。
1 document.getElementById(‘aa‘).onclick = function(){ 2 //alert( ‘Hello World!‘ ); 3 // this 就是只触发这个事件的对象,这里也就是document.getElementById(‘wrap‘) 4 this.innerHTML = ‘Hello World!‘; 5 };
7. xxx.onmouseover鼠标移入事件 和 xxx.onmouseout鼠标移出事件
1 //定义变量 2 var oDiv =document.getElementById(‘aa‘);//id=‘aa‘ 3 var oDiv1 =document.getElementsByClassName(‘box‘)[0];//class=‘box‘ 4 //设置div初始显示 5 oDiv.innerHTML = ‘你好。我是id=‘aa‘; 6 oDiv1.innerHTML = ‘你好。我是class=‘box‘; 7 8 //当鼠标移入 #aa 的时候,.box 显示 ‘鼠标当前在#aa的div上‘; 9 oDiv.onmouseover = function(){ 10 oDiv1.innerHTML = ‘鼠标在当前在#aa的div上‘; 11 }; 12 //当鼠标移出 #aa的时候,.box 清除内容; 13 oDiv.onmouseout = function(){ 14 oDiv1.innerHTML = ‘‘; 15 }; 16 };
8.注释
多行注释:/*注释*/
单行注释://注释
9.JavaScript输出:
JavaScript通常是用来控制HTML网页的,所以一般说输出就是对页面元素内容的修改;
1 innerHTML = ‘Hellow World‘; 2 document.write(‘Hellow World‘ );
10.JavaScript弹窗:
1 alert(‘Hellow World‘);//显示带有一条指定消息和一个 OK 按钮的警告框。 2 3 confirm(‘确定?‘);//显示一个带有指定消息和OK 及取消按钮的对话框。 4 5 prompt(‘请输入您的姓名‘);//显示可提示用户进行输入的对话框。