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

声明：笔记根据智能社（）视频教程整理，此总结为非官方版01.初探javascript魅力-1JS是什么？HTML+CSS静态网页JS交互，功能就是修改样式第一个JS特效：鼠标提示框鼠标移入到input上的时候，让div1显示mouseover鼠标移出input的时候，让div1隐藏（display：none）mouseout问题：兼容性问题（火狐）“document.getElementById（div1）.style.display=block;”get Element By Id获取 元素 通过 ID通过ID获取元素事件：用户操作onclickdiv1.style.display=block;.相当于的div1的style的display=赋值属性.特性，特点blue.名字blueblue.性别男blue.身高173blue.编写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样式任何标签都可以加ID，包括link任何标签的任何属性都可以修改HTML里怎么写（如value），JS里就怎么写（对应value）-注：className除外if判断if（）语句1else语句2生活中的例子if（预报有雨）带伞else不带伞google-“更多”按钮下拉菜单显示与隐藏当用户点击时，如果div是显示的，隐藏掉；或者，显示出来当用户点击时，如果div是显示的，oDiv.style.display=none；或者，oDiv.style.display=block=代表赋值（改变）=判断（相当于数学中的=号）扩展为a链接添加JS链接注意：一般不往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魅力-2style与className元素.style.属性=XXX是修改行间样式style加样式/行间style取样式/行间当样式写在样式表中报错之后再修改className不会有效果（样式优先级）注：要么从头到尾只动style，要么只动class尽量不要写行间事件解决，提取事件提取事件为元素添加事件事件和其他属性一样，可以用JS添加函数形式一般形式function 名字（）代码oBtn.onclick = 函数名字（例如：abc）函数可以没有名字：匿名函数oBtn.onclick=function（）代码window.onload的意义script标签放在head中报错JS特点：读一行执行一行（在body中不报错）解决：window.onload当页面加载完成时发生window.onload=function（）代码行为、样式、结构三者分离获取一族元素getElementsByTagName数组的使用数组：类似压缩包.length属性JS中设置样式属性只能对一个元素设置使用循环解决循环while（条件）一直执行到条件不再成立语句便于理解while（饿了）吃吃饱了为止var i=0/1.初始化while（i5）/2.条件alert（i）;/3.语句i=i+1;/4.自增i+；更常用更方便for循环for（初始化；条件；自增）/条件改变用aDiv.length解决语句全选，反选，不选选择除按钮之外的input，先将复选框放在一个div中，获取div，再从div中获取inputchecked=true选中状态05.初探javascript魅力-2选项卡运用this(当前发生事件的元素)先让所有按钮的class消失，再给当前点击按钮加上cla