智能社JS笔记--基础入门.doc

声明：笔记根据智能社（）视频教程整理，此总结为非官方版 01.初探javascript魅力-1 JS是什么？ HTML+CSS 静态网页 JS 交互，功能 就是修改样式 第一个JS特效：鼠标提示框 鼠标移入到input上的时候，让div1显示 mouseover 鼠标移出input的时候，让div1隐藏（display：none） mouseout 问题：兼容性问题（火狐） “document.getElementById（‘div1‘）.style.display=’block’;” get Element By Id 获取 元素 通过 ID——通过ID获取元素 事件：用户操作 onclick div1.style.display=’block’; .相当于的 div1的style的display = 赋值 属性 . 特性，特点 blue.名字 blue blue.性别 男 blue.身高 173 blue. 编写JS的流程 布局：HTML+CSS 属性：确定要修改哪些属性 事件：确定用户做哪些操作（产品设计） 编写JS：在事件中，用JS来修改页面元素样式 初识函数(一般不把JS放在行间） 格式 function toGreen（） { } 行间：mouseover=“toGreen（）” function toRed（） { } 行间：mouseout=“toRed（）” 02.初探javascript魅力-1 变量：给东西取了一个别名 Var oDiv=document.getElementById（‘div1’） 直接在事件内写代码会很乱 引入function()概念、函数的基本形式 function 函数名（） { 代码 } 函数名（）——执行 函数的定义和调用 function show（） //定义 { alert（‘abc’） } show（） //调用 只有调用没有定义会报错，二者缺一不可 网页换肤（换link里的href） 添加css样式 link id=“l1” rel=”stylesheet” type=”text/css” href=”css1.css” 任何标签都可以加ID，包括link 任何标签的任何属性都可以修改 HTML里怎么写（如value），JS里就怎么写（对应value）---注：className除外 if判断 if（） { 语句1 } else { 语句2 } 生活中的例子 if（预报有雨） { 带伞 } else { 不带伞 } google---“更多”按钮下拉菜单显示与隐藏 当用户点击时，如果div是显示的，隐藏掉；或者，显示出来 当用户点击时，如果div是显示的，oDiv.style.display=‘none’；或者，oDiv.style.display=‘block’ = 代表赋值（改变） == 判断（相当于数学中的=号） 扩展 为a链接添加JS a href=”javascript：alert（‘a’）；”链接/a 注意：一般不往a里面放代码，写成“javascript：；” className 对应HTML中的class（因为class是JS里的关键字） 03.初探javascript魅力-2 函数传参 参数就是占位符 什么时候用传参——函数里有东西定不下来的时候 function show(num) { alert(num); } show(12); //传什么就是什么，调用的时候才有具体值 function show(a，b) { alert(a+b); } show(5，12); //可传多个参 div变高变宽变绿 function setStyle（name，value） { var oDiv=document.getElementById（‘div1’）； //oD=value // . 的方法错误 第二种操作属性的方法 第一种：.（点） //方便 第二种：[‘字符串’] //方括号里为字符串，可用变量将字符串存起来，如var a=‘value’则[变量]，还可以用参数存起来[参数] 优势在于具体属性的名字可以变 何时使用第二种方法：要修改的属性不固定 利用第二种方法将属性名作为参数传递 注：JS中但凡用 . 的地方都可以改成[‘ ’]的形式 } 字符串和变量 字面量（常量）：看到东西，自然知道是什么 12、‘abc’ 变量：具体的值不固定、 var a=2； 04.初探javascript魅力-2 style与className 元素.style.属性=XXX是修改行间样式