门户网站建设费用科目广州城乡建设局和住建局官网

当前位置： 首页 > news >正文

门户网站建设费用科目,广州城乡建设局和住建局官网,搜索网站仿站,快速搭建网站视频今日内容 0 复习昨日 1 事件 1.1 事件介绍 1.2 事件绑定方式 1.3 不同事件的演示 2 DOM操作 2.1 概述 2.2 查找元素 2.3 元素内容的查找和设置 2.4 元素属性的查找和设置 2.5 元素CSS样式的查找和设置 2.6 创建元素 2.7 创建文本节点 2.8 追加元素 2.9 删除元素 3 案例练习 0 复…今日内容 0 复习昨日 1 事件 1.1 事件介绍 1.2 事件绑定方式 1.3 不同事件的演示 2 DOM操作 2.1 概述 2.2 查找元素 2.3 元素内容的查找和设置 2.4 元素属性的查找和设置 2.5 元素CSS样式的查找和设置 2.6 创建元素 2.7 创建文本节点 2.8 追加元素 2.9 删除元素 3 案例练习 0 复习昨日 1 js是让页面能够动态效果,是一种脚本语言,弱类型语言 js编程语言,包含 基本语法DOMBOM 2 js的引入方式 标签内script标签内新建独立的js文件,在任意位置引入 3 变量 声明时不需要写数据类型,写var值可以写不同类型 4 基本数据类型 number , string,boolean,undefined,null不同类型有不同的使用方式string操作字符串, 5 数组 长度不限制,内容不限制 6 日期 7 引用类型 var stu {name:“张三”,age:18}stu.nameJSON 8 运算符 除法不取整,有小数 判断的是值,判断是值和类型 || 与java中一样,有短路效果 9 分支,循环 10 函数 function 函数名(参数1,参数1) { } var fun function(){}11 弹窗函数 alertconfirmprompt 1 事件 1.1 事件介绍 事件: 就是发生在浏览器(页面)上一件事,键盘事件,鼠标事件,表单事件,加载事件等等 1.2 事件绑定方式 事件要想发生,就得将事件和标签先绑定 一个完整的事件有三部分 事件源(标签)什么事(事件)响应(动作效果) 事件绑定,其实就是事件和标签绑定 方式1: 事件源,事件,响应在一起方式2: 事件源,事件在一起,响应抽取函数方式3: 事件和响应全部抽取 方式1: 事件源,事件,响应在一起 body!– 事件源(标签),事件,响应(函数) –!– 方式1: 事件源,事件,响应在一起 –!– onclick是单击事件,是html属性 –!– alert() 函数就是事件的响应 –button typebutton onclickalert(听说你点我了?)按钮/button/body方式2: 事件源,事件在一起,响应抽取函数 bodyhr /!– 方式2: 事件源,事件在一起,响应抽取函数 –button typebutton onclickdian()按钮/buttonscript// 定义函数function dian() {alert(你又点我?!);}/script/body方式3【重要】: 事件和响应全部抽取 !– 方式3: 事件和响应全部抽取 –button idbtn再点一下试试/buttonscript// 1) 先获得标签对象var btn document.getElementById(btn);// 2) 给标签对象设置事件以及响应btn.onclick function () {alert(上瘾了是不是?!);};/script练习练习,div宽高各200,背景颜色red,设计点击事件,点击是出现弹框,并有输出语句 计算,点击次数 bodydividd1stylewidth: 200px; height: 200px; background-color: red/divscriptvar div document.getElementById(d1);var count 0;div.onclick function () {// alert(点击了Div);count;console.log(count);};/script/body1.3 不同事件的演示 这些事件,都是html中标签的属性,都是以onxxx开头 事件名称描述onchangeHTML 元素内容改变onblur输入框失去焦点onfocus输入框获得焦点onclick用户点击 单击HTML 元素ondblclick用户双击HTML元素onmouseover用户将鼠标移入一个HTML元素中onmousemove用户在一个HTML元素上移动鼠标onmouseout用户从一个HTML元素上移开鼠标onkeyup键盘弹起onkeydown用户按下键盘按键onkeypress按压键盘onload浏览器已完成页面的加载onsubmit表单提交 1.3.1 鼠标事件 scriptvar box document.getElementById(box);// 鼠标移动,只要鼠标动,就会触发函数box.onmousemove function () {console.log(鼠标移动);};// 鼠标移入,移入进一次,触发一次box.onmouseover function () {console.log(鼠标移入);};// 鼠标离开box.onmouseout function () {console.log(鼠标离开);};/script1.3.2 键盘事件 scriptvar i document.getElementById(i);// 事件触发后,函数有对应的事件对象// 键盘按下i.onkeydown function (event) {// console.log(键盘按下);// event是事件对象,内部包含事件的所有信息// console.log(event);// 可以获得这次键盘事件的代号,13是回车键if (event.keyCode 13) {console.log(提交表单);}};// 键盘弹起i.onkeyup function () {// console.log(键盘弹起);};// 键盘按压(与按下效果一样)i.onkeypress function () {// console.log(键盘按压);};/scriptps: 当不知道某个对象是什么的时候,就输出看效果,看内部的内容 1.3.3 表单事件【重点】 bodydiv!– 因为tijiao()函数,返回有了true/false所以οnsubmitreturn true 即提交表达οnsubmitreturn false 阻止表达提交–form accept/java2217 onsubmitreturn tijiao()用户名input idi1 typetext nameusername /br /密码input typepassword namepassword /br /籍贯select idjiguan namejigaunoption河南/optionoption河北/optionoption北京/option/selectinput typesubmit value提交 //formscriptvar i1 document.getElementById(i1);// 绑定获得焦点事件i1.onfocus function () {// 将来可以通过操作DOM,获得输入框的值,也可以改变样式console.log(输入框获得焦点);};// 绑定失去焦点i1.onblur function () {console.log(输入框失去焦点);};var jiguan document.getElementById(jiguan);// 给下拉框绑定内容改变事件jiguan.onchange function () {// 将来配合DOM操作,可以获得改变的内容,做一些其他事情// 可以用于省市二级联动console.log(内容改变);};/1) 表单事件是表单form的事件,所以这个事件要绑定在form上2) 函数要返回true/false3) onsubmit中也要写return/function tijiao() {console.log(点击提交按钮);// return 返回false,认为表达不提交// 返回true.表达就会提交// 一般用来数据校验return true;}/script/div/body1.3.4 加载事件【重点】 浏览器加载页面,是瀑布式加载,即从上之下依次加载执行. headtitle加载事件/titlescript/解决方案,等页面加载完后,再触发函数,执行绑定事件页面加载事件是窗口对象的事件该函数onload,会在页面加载后触发函数/window.onload function () {var btn document.getElementById(btn);btn.onclick function () {alert(试试就试试!);};};/script/headbodybutton idbtn点我一下试试?!/button/bodyps: js代码可以放在页面的任何地方,但是一般建议放后面,越晚加载越好! 2 DOM操作 2.1 概述 DOM,Document Object Model,文档对象模型,将HTML页面当做文档,页面内部有各种标签,标签有平级,有嵌套;标签还有属性,因此document被加载成dom树,树上每个节点就是一个标签 有了DOM树,就可以通过树来查找节点(元素),找到元素就可以对元素进行操作(修改,删除,添加),还可以操作元素的样式 2.2 查找元素 查找元素(标签)有很多方式 通过id查找元素通过标签名查找元素通过class查找元素 body!– 给标签设置id属性,id值要唯一 –button idbtn按钮/buttonulli貂蝉/lili西施/lili王昭君/lili杨玉环/lili classxd黎姿/lili classxd利智/lili classxd张曼玉/lili classxd朱茵/li/ulscript// 方式1:通过id获得标签对象(对象是唯一)var btn document.getElementById(btn);// console.log(btn);// 方式2:通过标签名来获得// 因为有同名,返回的是所有同名标签对象,放入数组中返回var liArr document.getElementsByTagName(li);// console.log(liArr);for (var i 0; i liArr.length; i) {// console.log(liArr[i]);}// 方式3: 通过类名获得标签对象var mvArr document.getElementsByClassName(xd);console.log(mvArr);/script/body2.3 元素内容的查找和设置 元素内容,是指标签开闭之间的内容. p这就是内容/p pspan这就是内容/span/p查找和设置使用的是相同的属性 innerHTML 获得或设置标签的内容innerText 获得或设置标签的内容 bodyp idp1span你好啊,JavaScript/span/pbutton idbtn1设置innerHTML/buttonbutton idbtn2设置innerText/buttonscriptvar p1 document.getElementById(p1);// 获得内容,innerHTML获得是标签和内容var innerHTML p1.innerHTML;console.log(innerHTML);// 获得内容,innerText获得的只是文本内容var innerText p1.innerText;console.log(innerText);var btn1 document.getElementById(btn1);btn1.onclick function () {// 给p标签设置内容,内容中有标签会解析成标签p1.innerHTML span你好啊,李焕英/span;};var btn2 document.getElementById(btn2);btn2.onclick function () {// 给p标签设置内容,内容全部解析为文本p1.innerText span你好啊,李焕英/span;};/script/body2.4 元素属性的查找和设置 元素属性,是指开标签内的属性,比如 idnamevalue… bodyinput idi1 classc1 typetext value默认值 /button idbtn1点击获得属性值/buttonbutton idbtn2点击设置属性值/buttonscriptvar btn1 document.getElementById(btn1);var i1 document.getElementById(i1);btn1.onclick function () {// 获得属性值console.log(i1.id); // 获得id属性值console.log(i1.class); // 没有获得class属性console.log(i1.type); // 获得type属性值console.log(i1.value); // 获得value属性值【重要】};btn2.onclick function () {// 设置属性值i1.type password;i1.value 123456; // 【重要】};/script/body2.5 元素CSS样式的查找和设置 元素css样式的查找和设置,是指标签中style的属性值的获得和设置 获得属性值 元素对象.style.属性 设置属性值 元素对象.style.属性 “” bodydividboxstylewidth: 200px; height: 200px; background-color: red/divbutton idbtn1获得css样式/buttonbutton idbtn2设置css样式/buttonscriptvar box document.getElementById(box);var btn1 document.getElementById(btn1);btn1.onclick function () {// 获得样式,主要是style的属性值var style box.style;// console.log(style);// 获得具体样式,可以再继续调用console.log(box.style.width);console.log(box.style.height);// 有连字符的,要去掉,后面首字母变大写console.log(box.style.backgroundColor);};var btn2 document.getElementById(btn2);btn2.onclick function () {// 设置box样式,尺寸越来越大// 获得原来的尺寸var width box.style.width; // 200pxvar height box.style.height;// 获得宽度,截取数值// var newWidth width.substring(0, width.length - 2);// 自带属性获得不带px的宽度var newWidth2 box.clientWidth;var newHeight box.clientHeight;// 设置尺寸box.style.width newWidth2 10 px;box.style.height newHeight 10 px;// 只能获得,不能这样设置!// box.clientWidth newWidth2 10;// box.clientHeight newHeight 10;};/script/body2.6 创建元素 通过dom对象可以创建出一个标签 document.createElement(“标签名”) 2.7 创建文本内容 创建出一个文本内容,这个内容是值开闭标签间的文本内容 document.createTextNode(“文本内容”); 2.8 追加元素 在开闭标签内,在末尾追加内容 标签对象.appendChild(元素) bodybutton idbtn点击时创建p标签,已经内容/buttondiv idbox/divscriptvar btn document.getElementById(btn);btn.onclick function () {// 创建元素pvar p document.createElement(p); // p/p// 创建文本内容var text document.createTextNode(你好啊,Java); // 你好啊,Java// 在p标签内,追加文本p.appendChild(text); // p你好啊,Java/pvar box document.getElementById(box);// 把内容追加到div中box.appendChild(p);};/script/body2.9 删除元素 删除子节点 元素对象.removeChild(子元素); bodyul idulli刘德华/lili吴彦祖/lili彭于晏/li/ulbutton idbtn点击删除子元素/buttonscriptvar btn document.getElementById(btn);btn.onclick function () {// 获得父元素var ul document.getElementById(ul);// 获得所有li元素var liArr document.getElementsByTagName(li);// 遍历for (var i 0; i liArr.length; i) {// 通过父元素,删除子元素ul.removeChild(liArr[i]);i–; //下标回退}};/script/body3 案例 查找 - document.getElementById 内容 innerHTML 属性 元素对象.属性 样式 元素对象.style.属性 练习1 输入框,点击输入框时,将输入框变高300,宽300,边框蓝色,背景红色.当离开输入框时,样式消失 事件: 获得焦点,失去焦点 要设置css样式 !– 点击输入框时,将输入框变高300,宽300,边框蓝色,背景红色.当离开输入框时,样式消失 –input idi1 /scriptvar i1 document.getElementById(i1);i1.onfocus function () {i1.style.height 300px;i1.style.width 300px;// i1.style.borderColor blue;i1.style.border 30px yellow solid;i1.style.backgroundColor red;};i1.onblur function () {i1.style.height ;i1.style.width ;i1.style.border ;i1.style.backgroundColor ;// 重置样式i1.style reset;// i1.style ;};/script/body设置div,高300宽300,鼠标进入div,div背景变红,离开div背景变绿 dividboxstylewidth: 300px; height: 300px; border: 2px red solid/divscriptvar box document.getElementById(box);// 鼠标进入div,div背景变红,离开div背景变绿box.onmouseover function () {box.style.backgroundColor red;};box.onmouseout function () {box.style.backgroundColor green;}; /script练习: 设置输入框,输入内容,点击按钮,将内容追加到div后 body请输入内容:input idi1 /button idbtn追加内容/buttondiv idbox/divscriptvar btn document.getElementById(btn);btn.onclick function () {// 获得输入框的内容var text document.getElementById(i1).value;// 创建p标签var p document.createElement(p);// 创建文本节点var textNode document.createTextNode(text);// 追加内容p.appendChild(textNode);// 给div追加内容var box document.getElementById(box);box.appendChild(p);document.getElementById(i1).value ;};/script/body作业 0 先重复2遍代码!!1当输入框获得焦点的时候提示输入的内容格式.2当输入框失去焦点的时候提示输入有误3 设计一个div,设定宽高,在设置一个按钮,点击随机切换背景颜色提示使用JS的Math对象的方法,可以查看APIvar btn document.getElementById(“btn”); btn.onclick function () { // 获得输入框的内容 var text document.getElementById(“i1”).value; // 创建p标签 var p document.createElement(“p”); // 创建文本节点 var textNode document.createTextNode(text); // 追加内容 p.appendChild(textNode); // 给div追加内容var box document.getElementById(box);box.appendChild(p);document.getElementById(i1).value ;}; /script作业 0 先重复2遍代码!!1当输入框获得焦点的时候提示输入的内容格式.2当输入框失去焦点的时候提示输入有误3 设计一个div,设定宽高,在设置一个按钮,点击随机切换背景颜色提示使用JS的Math对象的方法,可以查看API