公司网站主要几方面,网页设计图片加载不出来,免费素材网址,一份完整的品牌策划方案Day48
1.流程控制语句 if else for for-in(遍历数组时#xff0c;跟Java是否一样) While do while break 语句用于跳出循环 continue 用于跳过循环中的一个迭代 2.函数
2.1 JavaScript 函数语法 函数就是包裹在花括号中的代码块#xff0c;前面使用了关键词 function funct…Day48
1.流程控制语句 if else for for-in(遍历数组时跟Java是否一样) While do while break 语句用于跳出循环 continue 用于跳过循环中的一个迭代 2.函数
2.1 JavaScript 函数语法 函数就是包裹在花括号中的代码块前面使用了关键词 function function 函数名(参数列表){ …代码块… } 分类 无参无返回值的函数 带参数的函数 带返回值的方法 注意函数就是方法 body
script typetext/javascript//无参无返回值的函数function fun01(){console.log(用良心做教育1);}fun01();//带参数的函数//注意形参不需要加类型调用方法时可以传参也可以不传参function fun02(a,b){console.log(用良心做教育2 a -- b);}fun02();fun02(10,20);fun02(xxx,yyy);fun02(abc,12345);//带返回值的方法//注意JS函数里的返回值不用像Java方法里必须指定返回值类型function fun03(){return 用良心做教育3;}var v fun03();console.log(v);
/script
/body2.1.1 函数也是数据 函数也是一种数据我们可以把函数赋值给一个变量 var add function(a,b,c){return abc;} 2.1.2 函数的重载 注意JS的函数里没有重载的概念 body
script typetext/javascriptfunction fun(a,b){alert(ab);}function fun(a,b,c){alert(abc);}//a - 10//b - 20//c - undefindfun(10,20);
/script
/body2.2.3 函数的递归 注意递归是一种思想只要是面向对象的语言都有这个思想 需求设计一个函数传入n求n的阶乘 body
script typetext/javascriptfunction fun(n){if(n ! 1){return fun(n-1)*n;}else{return 1;}}var num fun(5);alert(num);
/script
/body2.2 系统提供的预定义函数 parseInt()试图将其收到的任何输入值转换成整数类型转换失败则返回NaN parseFloat()同上类似 isNaN(xxx)判断是否为非数字 isFinite(xxxx)判断输入的是否是一个既非Infinity也非NaN的数字 eval()会将其输入的字符串当作javascript代码来执行 (重要) body
script typetext/javascriptconsole.log(判断参数是否是数字 isFinite(abc));//falseconsole.log(判断参数是否不是数字 isNaN(abc));//trueconsole.log(将字符串转换为整数 parseInt(100.123));//100console.log(将字符串转换为小数 parseFloat(100.123));//100.123var str alert(用良心做教育);;eval(str);//认为字符串为js代码去执行/script
/body3.DOM 采用DOM的方式来操作网页的元素 通过 HTML DOM可访问 JavaScript HTML 文档的所有元素。 3.1 HTML DOM 文档对象模型 当网页被加载时浏览器会创建页面的文档对象模型 HTML DOM 模型被构造为对象的树。 3.2 HTML DOM 树 通过可编程的对象模型JavaScript 获得了足够的能力来创建动态的 HTML JavaScript 能够改变页面中的所有 HTML 元素 JavaScript 能够改变页面中的所有 HTML 属性 JavaScript 能够改变页面中的所有 CSS 样式 JavaScript 能够对页面中的所有事件做出反应 3.3 查找元素 通常通过 JavaScript您需要操作 HTML 元素 为了做到这件事情您必须首先找到该元素有三种方法来做这件事 通过 id 找到 HTML 元素 通过标签名找到 HTML 元素 通过类名找到 HTML 元素 注意document表示该文档就是dom树 3.3.1 通过id查找 getElementById 在 DOM 中查找 HTML 元素的最简单的方法是通过使用元素的 id 注意getElementById获取到的是单个对象 bodyspan idspan01用良心做教育/span
br /
span做真实的自己/spanscript typetext/javascript//通过id获取元素var span01 document.getElementById(span01);//绑定单击事件span01.onclick function(){//设置内容span01.innerHTML 做真实的自己;}/script
/body3.3.2 通过标签名查找 getElementsByTagName 通过标签名查找 HTML 元素 注意getElementsByTagName获取到的是数组要用[0][1]去选择 bodyspan用良心做教育/span
br /
span做真实的自己/spanscript typetext/javascript//通过标签获取元素数组var span01 document.getElementsByTagName(span)[0];//绑定单击事件span01.onclick function(){//设置内容span01.innerHTML xxxx;}/script
/body3.3.3 通过class查找 getElementsByClassName 通过class查找 HTML 元素 注意getElementsByClassName获取到的是数组要用[0][1]去选择 bodyspan classmyclass用良心做教育/span
br /
span classmyclass做真实的自己/spanscript typetext/javascript//通过class属性获取元素数组var span01 document.getElementsByClassName(myclass)[0];//绑定单击事件span01.onclick function(){//设置内容span01.innerHTML xxxx;}/script
/body3.3.4 通过name查找 getElementsByName 注意getElementsByName获取到的是数组要用[0][1]去选择 bodyimg namexxx src../../img/小米.jpg /
img namexxx src../../img/小米.jpg /script typetext/javascript//通过name属性获取元素数组var img document.getElementsByName(xxx)[0];//绑定单击事件img.onclick function(){//设置属性img.src ../../img/华为.jpg;}/script
/body
3.4 DOM_HTML 操作元素
3.4.1 操作内容 修改 HTML 内容的最简单的方法时使用 innerHTML 属性 如需改变 HTML 元素的内容请使用这个语法 document.getElementById(id).innerHTMLnew HTML bodybutton onclickfun01()获取内容 - innerText/button
button onclickfun02()设置内容 - innerText/button
br /
span用良心做教育/span
br /button onclickfun03()获取内容 - innerHTML/button
button onclickfun04()设置内容 - innerHTML/button
br /
span用良心做教育/spanscript typetext/javascriptvar span01 document.getElementsByTagName(span)[0];var span02 document.getElementsByTagName(span)[1];function fun01(){console.log(span01.innerText);}function fun02(){span01.innerText h1做真实的自己/h1;}function fun03(){console.log(span02.innerHTML);}function fun04(){//把文本当做html标签设置span02.innerHTML h1做真实的自己/h1;}/script
/body innerHTMLinnerText的区别 innerHTML把文本当做html标签设置 innerText文本就是文本 3.4.2 操作属性 如需改变 HTML 元素的属性请使用这个语法 document.getElementById(id).attributenew value 获取属性值getAttribute 修改属性值setAttribute bodybutton onclickfun01()获取属性/button
button onclickfun02()设置属性/button
br /
img src../../img/小米.jpg width100px height100px /
br /script typetext/javascriptvar img1 document.getElementsByTagName(img)[0];var img2 document.getElementsByTagName(img)[1];function fun01(){console.log(img2.getAttribute(src));console.log(img2.getAttribute(width));console.log(img2.getAttribute(height));}function fun02(){img2.setAttribute(src,../../img/华为.jpg);img2.setAttribute(width,100%);img2.setAttribute(height,100%);}/script
/body
3.4.3 操作css样式 如需改变 HTML 元素的css样式请使用这个语法 document.getElementById(id).style.propertynew style bodybutton onclickfun01()获取样式/button
button onclickfun02()设置样式/button
br /
span用良心做教育/spanscript typetext/javascriptvar span document.getElementsByTagName(span)[0]function fun01(){console.log(span.style.color);console.log(span.style.fontSize);}function fun02(){span.style.color red;span.style.fontSize 50px;}/script
/body
3.5 事件 对事件做出反应 我们可以在事件发生时执行 JavaScript比如当用户在 HTML 元素上点击时。 如需在用户点击某个元素时执行代码请向一个 HTML 事件属性添加 JavaScript 代码 οnclickJavaScript HTML 事件的例子 l 当用户点击鼠标时 l 当网页已加载时 l 当鼠标移动到元素上时 l 当输入字段被改变时 l 当提交 HTML 表单时 3.5.1 onclick 单击事件 点击之后更改标题内容 this代表当前被点击的对象 !DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodyh1 onclickfun01()用良心做教育/h1script typetext/javascriptvar h1 document.getElementsByTagName(h1)[0];function fun01(){h1.innerText 做真实的自己;}/script/body
/html 换一种写法 this代表当前被点击的对象 obj是随便写的一个对象 bodyh1 onclickfun01(this)用良心做教育/h1script typetext/javascriptfunction fun01(obj){obj.innerText 做真实的自己;}/script
/body 换一种写法 bodyh1用良心做教育/h1script typetext/javascriptvar h1 document.getElementsByTagName(h1)[0];//绑定单击事件h1.onclick function(){this.innerText 做真实的自己;}/script
/body
3.5.2 onload 页面加载事件 onload 一般可以来做一些网页的环境准备工作 页面加载事件事件会在页面元素和图像加载完成后立即发生 注意js是一行一行去执行的 title/titlescript typetext/javascript//页面加载事件事件会在页面元素和图像加载完成后立即发生window.onload function(){var h1 document.getElementsByTagName(h1)[0];h1.onclick function(){this.innerText 做真实的自己;}}/script/head
bodyh1用良心做教育/h1 /body
3.5.3 键盘事件 监听器 onkeydown键盘按下事件 onkeypress键盘按下事件 - 功能键(上下左右、删除键…)是不会被触发的 onkeyup键盘松开事件 bodyinput typetext onkeydownmyDown()onkeypressmyPress()onkeyupmyUp()
/script typetext/javascriptfunction myDown(){//键盘按下事件console.log(down);}function myPress(){//键盘按下事件 - 功能键(上下左右、删除键...)是不会被触发的console.log(press);}function myUp(){//键盘松开事件console.log(up);}/script
/body 案例设置一个文本框每敲一个字母会触发将输入文本转换为大写的函数 bodyinput typetext onkeyupmyUp(this)
/script typetext/javascriptfunction myUp(obj){//获取value属性var v obj.value;//转大写v v.toUpperCase();//设置value属性obj.value v;} /script
/body
3.5.4 鼠标移动事件 onMouseDown 按下鼠标时触发 onMouseOver 鼠标经过时触发 onMouseUp 按下鼠标松开鼠标时触发 onMouseOut 鼠标移出时触发 onMouseMove 鼠标移动时触 bodyimg src../../img/小米.jpg width100px height100pxonmousedownmyDown()onmouseupmyUp()onmousemovemyMove()onmouseovermyOver()onmouseoutmyOut()
/script typetext/javascriptfunction myDown(){//鼠标按下事件console.log(down);}function myUp(){//鼠标松开事件console.log(up);}function myMove(){//鼠标移动事件console.log(move);}function myOver(){//鼠标移入事件console.log(over);}function myOut(){//鼠标移出事件console.log(out);}/script
/body 案例图片移入图片中就设置高亮移出就暗沉 !DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssimg{width: 100px;height: 100px;opacity: 0.3;/*设置透明度*/}/style/headbodyimg src../../img/touxiang01.jpg /img src../../img/touxiang02.jpg /img src../../img/touxiang03.jpg /img src../../img/tx1.jpg /img src../../img/tx2.jpg /img src../../img/tx3.jpg /img src../../img/波多野结衣.jpg /script typetext/javascript//动态绑定事件var imgArr document.getElementsByTagName(img);for(var i 0;iimgArr.length;i){var img imgArr[i];img.onmouseover function(){this.style.opacity 1;}img.onmouseout function(){this.style.opacity 0.3;}}/script/body
/html
运行结果 3.5.5 焦点事件 onfocus/onblur onfocus获取焦点事件 onblur失去焦点事件 bodyinput typetextonfocusmyFocus()onblurmyBlur()
/script typetext/javascriptfunction myFocus(){//获取焦点事件console.log(focus);}function myBlur(){//失去焦点事件console.log(blur);} /script
/body 案例写一个注册的文本框默认显示“请输入账号…”光标定位到之后自动将里面的信息清除掉 bodyinput typetextvalue请输入账号...//value的内容可以直接显示在文本框里面οnfοcusmyFocus(this)οnblurmyBlur(this)
/script typetext/javascriptfunction myFocus(obj){//获取焦点事件if(obj.value 请输入账号...){obj.value ;}}function myBlur(obj){//失去焦点事件//获取该函数里的代码如果当前浏览器支持该函数就返回函数里的代码字符串如果不支持就返回undefined//alert(obj.value.trim);//判断浏览器是否兼容次方法if(obj.value.trim){if(obj.value.trim() ){obj.value 请输入账号...;}}else{//注意IE老版本是不支持trim()//将字符串的首尾空格的字符替换成空字符串以达到去空格的目的if(obj.value.replace(/(^\s)|(\s$)/g,) ){obj.value 请输入账号...;}}}/script
/body
