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

声明：笔记根据智能社（www.zhinengshe.com）视频教程整理，此 总结 初级经济法重点总结下载党员个人总结TXt高中句型全总结.doc高中句型全总结.doc理论力学知识点总结pdf 为非官方版 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 属性：确定要修改哪些属性 事件：确定用户做哪些操作（产品 设计 领导形象设计圆作业设计ao工艺污水处理厂设计附属工程施工组织设计清扫机器人结构设计 ） 编写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（） { 语句1 } else { 语句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’）； //oDiv.style.name=value // . 的方法错误 第二种操作属性的方法 第一种：.（点） //方便 第二种：[‘字符串’] //方括号里为字符串，可用变量将字符串存起来，如var a=‘value’则[变量]，还可以用参数存起来[参数] 优势在于具体属性的名字可以变 何时使用第二种方法：要修改的属性不固定 利用第二种方法将属性名作为参数传递 注：JS中但凡用 . 的地方都可以改成[‘ ’]的形式 } 字符串和变量 字面量（常量）：看到东西，自然知道是什么 12、‘abc’ 变量：具体的值不固定、 var a=2； 04.初探javascript魅力-2 style与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（i<5） //2.条件 { alert（i）; //3.语句 i=i+1; //4.自增 i++； } 更常用更方便——for循环 for（初始化；条件；自增） //条件改变——用aDiv.length解决 { 语句 } 全选，反选，不选 选择除按钮之外的input，先将复选框放在一个div中，获取div，再从div中获取input checked=true选中状态 05.初探javascript魅力-2 选项卡 运用this(当前发生事件的元素) 先让所有按钮的class消失，再给当前点击按钮加上class 先让所有div隐藏，让当前div显示（利用aBtn[i].index=i） JS简易日历 只有一个div，真正变的是div中的文字 innerHTML（可以写html代码） 字符串连接 +号 注：如果需要数字相加，则用（）括起来 数组 arr=[1，2,，3，4]