天河网站建设价格,网站模板建设,网页制作与设计考试,wordpress 站点标题一、事件 HTML事件是发生在hTML元素上的“事情”。比如#xff1a;按钮被点击、鼠标移动到元素上等… 事件绑定
方式一#xff1a;通过HTML标签中的事件属性进行绑定 input typebutton value点我 onclickon()scriptfun…一、事件 HTML事件是发生在hTML元素上的“事情”。比如按钮被点击、鼠标移动到元素上等… 事件绑定
方式一通过HTML标签中的事件属性进行绑定 input typebutton value点我 onclickon()scriptfunction on(){alert(我被点击了);}/script方式二通过DOM元素属性绑定 input typebutton value点我 idbtnscriptdocument.getElementById(btn).onclick function(){alert(我被点击了);}/script常见事件
二、BOM Browser Object Model 浏览器对象模型 window(浏览器窗口对象) 获取直接使用window,其中window.可以省略 setInterval(周期定时器)
var id window.setInterval(function,time);每隔指定时间执行某函数。time就是间隔时间单位是毫秒function就是要执行的函数。window.clearInterval(id);//清除周期定时器案例演示
!DOCTYPE html
html langen
headmeta charsetUTF-8title/title
/head
bodydiv idtime/divinput typebutton value暂停 onclickstop()input typebutton value继续 onclickstart()scriptfunction getTime(){var now new Date();var nowStr now.toLocaleString();var demo document.getElementById(time);demo.innerText nowStr;}getTime();var id window.setInterval(getTime,1000);function stop(){window.clearInterval(id);}function start(){id window.setInterval(getTime,1000);}/script
/body
/htmlsetTimeout(超时定时器)
var id window.setTimeout(function,time);指定时间后执行某函数。time就是时间单位是毫秒function就是要执行的函数。window.clearTimeout(id);//清除超时定时器案例演示
!DOCTYPE html
html langen
headmeta charsetUTF-8title/title
/head
bodyimg src width500 styledisplay: none; idxggscriptfunction showImg(){document.getElementById(xgg).style.display inline-block;}var id window.setTimeout(showImg,2000);//window.clearTimeout(id);/script
/body
/htmlalert(警告框)
!DOCTYPE html
html langen
headmeta charsetUTF-8title/title
/head
bodyscriptwindow.alert(这是个警告);/script
/body
/htmlconfirm(确认框)
!DOCTYPE html
html langen
headmeta charsetUTF-8title/title
/head
bodyscriptvar res window.confirm(您确定要删除嘛);console.log(res);/script
/body
/htmlprompt(提示框)
!DOCTYPE html
html langen
headmeta charsetUTF-8title/title
/head
bodyscriptvar res window.prompt(请输入手机号,123747235);console.log(res);/script
/body
/htmlLocation(地址栏对象)
!DOCTYPE html
html langen
headmeta charsetUTF-8title/title
/head
bodyscriptconsole.log(location.href);location.href http://www.baidu.com;/script
/body
/htmlhistory(历史记录对象)
!DOCTYPE html
html langen
headmeta charsetUTF-8title/title
/head
bodyinput typebutton value后退 onclickb()input typebutton value前进 onclickf()script//要有可前进和可后退的页面才能前进和后退function b(){history.back();}function f(){history.forward();}/script
/body
/html三、DOM Document Object Model 文档对象模型 获取页面元素 操作页面元素
1、创建dom对象
document.createElement(“标签名”);
2、添加dom对象
1A.appendChild(B) 将B添加到A内部的最后面
2A.insertBefore(B, C) 将B添加到A内部C的前面
3、删除dom对象
1A.remove() 将A删除
2A.removeChild(B) 将A内部的B删除
4、替换dom对象
A.replaceChild(B, C) 用B替换A内部的C
!DOCTYPE html
html langen
headmeta charsetUTF-8title/title
/head
bodydiv idtesth1这是div里面的标题/h1p这是div里面的第一个段落/p/divscript//创建一个能够跳转到淘宝的超链接a hrefhttp://www.taobao.com淘宝/avar newEle document.createElement(a);//给新创建的标签的href属性赋值newEle.href http://www.taobao.com;//在新建的标签中添加文本newEle.innerText 淘宝;//获取id为test的标签var demo document.getElementById(test);//将新建的标签放到id为test的标签中的最后面//demo.appendChild(newEle);//将新建的标签放到id为test的标签中的p标签的前面var p document.getElementsByTagName(p)[0];//demo.insertBefore(newEle,p);//将新建的标签放到id为test的标签中替换其中的p标签//demo.replaceChild(newEle,p);//删除id为test的标签中的p标签//demo.removeChild(p);//删除id为test的标签demo.remove();/script
/body
/html操作元素属性
1、页面元素.属性名 “值”
2、设置标签对象.setAttribute(“属性名”,“属性值”);
3、获取标签对象.getAttribute(“属性名”);
4、删除标签对象.removeAttribute(“属性名”);
!DOCTYPE html
html langen
headmeta charsetUTF-8title/title
/head
bodyinput typetext idusername nameuname maxlength6 valuechenweiscript//获取id为username的标签var demo document.getElementById(username);//获取该标签value属性的值//console.log(demo.value);//console.log(demo.getAttribute(maxlength));//设置该标签的value属性的值为mary//demo.value mary;//demo.setAttribute(value,mary);//删除该标签的value属性demo.removeAttribute(value);/script
/body
/html操作元素样式
!DOCTYPE html
html langen
headmeta charsetUTF-8title/titlestyle#test{width: 100px;height: 100px;background-color: red;}/style
/head
bodydiv idtest/divscriptvar demo document.getElementById(test);//demo.style width: 200px;height: 200px;background-color: green;;demo.style.width 200px;demo.style.height 200pxdemo.style.backgroundColor pink;demo.style.borderRadius 50%;/script
/body
/html操作元素内容
!DOCTYPE html
html langen
headmeta charsetUTF-8title/title
/head
bodydiv idtest/divscriptvar demo document.getElementById(test);//获取标签中的内容//console.log(demo.innerText); //只获取文本//console.log(demo.innerHTML); //获取所有包括标签//设置标签的内容var str h1这是div中的p标签/h1;//demo.innerText str; //会将字符串中的标签当作文本放进去demo.innerHTML str; //会将字符串中的标签当作标签放进去/script
/body
/htmlinnerText与innerHTML的区别 1获取时innerText只能获取文本内容innerHTML不仅能获取文本内容还能获取标签 2设置时innerText会将标签当成文本放进去innerHTML放进去的标签能被浏览器翻译
