网站建设中单页代码,网站建设的流程该怎么确定,如何搜索网页关键词,微网站与微信的关系今日内容 上课同步视频:CuteN饕餮的个人空间_哔哩哔哩_bilibili 同步笔记沐沐霸的博客_CSDN博客-Java2301 零、 复习昨日 一、作业 二、BOM 三、定时器 四、正则表达式 零、 复习昨日 事件 事件绑定方式鼠标事件 onmouseoveronmouseoutonmousemove 键盘事件 onkeydownonkeyupon…今日内容 上课同步视频:CuteN饕餮的个人空间_哔哩哔哩_bilibili 同步笔记沐沐霸的博客_CSDN博客-Java2301 零、 复习昨日 一、作业 二、BOM 三、定时器 四、正则表达式 零、 复习昨日 事件 事件绑定方式鼠标事件 onmouseoveronmouseoutonmousemove 键盘事件 onkeydownonkeyuponkeypress 表单事件 onfocusonbluronchangeonsubmit 页面加载事件 onload dom dom树查找dom document.getElementById(“id”)document.getElementsByTagName(“p”)document.getElementsByClassName(“c1”) 查找设置标签内容 innerTextinnerHTML 查找设置标签的属性 var a dom.属性;dom.属性 “” 查找设置标签的样式 var a dom.style.css属性dom.style.css属性 “” 元素操作 创建元素 document.createElement(“li”)创建文本 document.createTextNode(“文本”)元素内部追加内容 document.appendChild()元素内部删除子元素 document.removeChild() Jquery是js框架,把js的操作封装 $(“#id”).val() 一、作业
见代码二、BOM 浏览器对象模型 (BOM-Browser Object Model) 使 JavaScript 有能力与浏览器对话。 由于现代浏览器已经几乎实现了 JavaScript 交互性方面的相同方法和属性因此常被认为是 BOM 的方法和属性。 2.1 window 所有浏览器都支持 window 对象。它表示浏览器窗口。 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。 全局变量是 window 对象的属性。 全局函数是 window 对象的方法。 甚至 HTML DOM 的 document 也是 window 对象的属性之一 Window Location window.location 对象用于获得当前页面的地址 (URL)并把浏览器重定向到新的页面。window.location 对象在编写时可不使用 window 这个前缀。 一些例子 location.hostname 返回 web 主机的域名location.pathname 返回当前页面的路径和文件名location.port 返回 web 主机的端口 80 或 443location.protocol 返回所使用的 web 协议http:// 或 https://location.href 属性返回当前页面的 URLlocation.assign() 方法加载新的文档 html
head
script
function newDoc(){window.location.assign(http://www.baidu.com/)}
/script
/head
body
input typebutton valueLoad new document onclicknewDoc()
/body
/htmlWindow History window.history 对象包含浏览器的历史。window.history 对象在编写时可不使用 window 这个前缀。 history.back() 与在浏览器点击后退按钮相同history.forward() 与在浏览器中点击按钮向前相同 一些方法示例如下 2.1.1 location
表示当前浏览器的链接地址可以读取地址可以修改地址
!DOCTYPE html
htmlheadmeta charsetutf-8titlelocation/title/headbodyinput typetext nameurl idurl placeholder请输入链接地址.../button typebutton onclickshowUrl()打印当前链接/buttonbutton typebutton onclicktoUrl()跳转/buttonbutton typebutton onclickassignUrl()替换url/button/bodyscript typetext/javascript/* 打印当前链接*/function showUrl(){console.log(window.location.href);}/*** 跳转* 1、获取输入框中的链接* 2、修改location的href属性*/function toUrl(){// 获取输入的内容var newUrl document.getElementById(url).value;// 修改href属性location.href newUrl;}/script
/html2.1.2 history
浏览器历史能控制浏览器页面的前进和后退的跳转
!DOCTYPE html
htmlheadmeta charsetutf-8titlea/title/headbody stylebackground-color: antiquewhite;a hrefa.htmla页面/aa hrefb.htmlb页面/ahr button typebutton onclickbackPage()上一页/buttonbutton typebutton onclickforwardPage()下一页/button/bodyscript typetext/javascript// 后退一页function backPage(){window.history.back();}// 前进一页function forwardPage(){window.history.forward();}/script/html三、定时器 设置定时器 setInterval(调用函数,毫秒时间)每间隔固定毫秒值就执行一次函数setTimeout(调用函数,毫秒时间)在固定时间之后执行一次调用函数 关闭定时器 clearInterval(定时器名称)clearTimeout(定时器名称) bodybutton typebutton onclickshowTimeOut()倒计时/buttonbutton typebutton onclickshowInterval()定时执行/buttonbutton typebutton onclickshowName()随机显示名字/buttondiv idbox10/div!-- 展示名字 --div idname-box姓名/div/bodyscript typetext/javascript/*** 定时执行* 每间隔指定的时间执行一次* * 倒计时执行* 给定义一个时间时间到了执行一次*/function showTimeOut(){// 设置倒计时,3000毫秒之后执行setTimeout(function() {alert(时间到);}, 3000);}// 每一秒输出一个随机数字setInterval(function(){console.log(Math.random());},1000);var num 10;// 定时器var timer;function showInterval(){// 开启定时器,间隔一秒执行一次timer setInterval(function(){document.getElementById(box).innerText --num;if (num 0) {// 清除定时器alert(发射);clearInterval(timer);}},1000);}var nameList [杜学帅,崔芙蓉,梅永芳,孙浩翔,宋宁波,李鑫,夏文博,郭森,苏红伟,豆艳磊,张志炜,李潇龙,马鹏飞,崔峻豪,陈鑫淼,姚俊杰,石玉剑,夏先飞,丁康,杨迎港,刘政锴,宋一帆,郝正鑫,张子龙,刘文强,赵凯鑫,黄晨,张德鹏,张勇皓,董子豪,吴浩源,全永岐,冯迪,王翌豪,王本业,蔡明星,王柯然,王烁,肖先丽,熊枫,张恒,戚兴康,申庆峰,关丽娟];/*** 定时切换姓名*/function showName(){setInterval(function(){// 每一秒生成一个名字的随机索引var nameIndex parseInt(Math.random()*nameList.length);// 每一秒修改一次显示的名字document.getElementById(name-box).innerText nameList[nameIndex];},100);}/script四、正则表达式 Regular expression RegExp 4.1 正则表达式 正则表达式是描述字符模式的对象。正则表达式用于对字符串模式匹配及检索替换是对字符串执行模式匹配的强大工具。语法 var pattnew RegExp(pattern,modifiers);var patt/pattern/modifiers; 4.2 基本知识
var reg new RegExp(模板);
var reg /模板/;方括号用于查找某个范围内的字符 表达式描述[abc]查找方括号之间的任何字符。[^abc]查找任何不在方括号之间的字符。[0-9]查找任何从 0 至 9 的数字。[a-z]查找任何从小写 a 到小写 z 的字符。[A-Z]查找任何从大写 A 到大写 Z 的字符。[A-z]查找任何从大写 A 到小写 z 的字符。(red|blue|green)查找任何指定的选项。元字符Metacharacter是拥有特殊含义的字符 元字符描述.查找单个字符除了换行和行结束符。\w查找单词字符。\W查找非单词字符。\d查找数字。\D查找非数字字符。\s查找空白字符。\S查找非空白字符。\b匹配单词边界。\B匹配非单词边界。\0查找 NULL 字符。\n查找换行符。\f查找换页符。\r查找回车符。\t查找制表符。\v查找垂直制表符。\xxx查找以八进制数 xxx 规定的字符。\xdd查找以十六进制数 dd 规定的字符。\uxxxx查找以十六进制数 xxxx 规定的 Unicode 字符。量词用于表示重复次数的含义 量词描述n匹配任何包含至少一个 n 的字符串。例如/a/ 匹配 “candy” 中的 “a”“caaaaaaandy” 中所有的 “a”。n*匹配任何包含零个或多个 n 的字符串。例如/bo*/ 匹配 “A ghost booooed” 中的 “boooo”“A bird warbled” 中的 “b”但是不匹配 “A goat grunted”。n?匹配任何包含零个或一个 n 的字符串。例如/e?le?/ 匹配 “angel” 中的 “el”“angle” 中的 “le”。n{X}匹配包含 X 个 n 的序列的字符串。例如/a{2}/ 不匹配 “candy,” 中的 “a”但是匹配 “caandy,” 中的两个 “a”且匹配 “caaandy.” 中的前两个 “a”。n{X,}X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如/a{2,}/ 不匹配 “candy” 中的 “a”但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。n{X,Y}X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次至多 Y 次时匹配。例如/a{1,3}/ 不匹配 “cndy”匹配 “candy,” 中的 “a”“caandy,” 中的两个 “a”匹配 “caaaaaaandy” 中的前面三个 “a”。注意当匹配 “caaaaaaandy” 时即使原始字符串拥有更多的 “a”匹配项也是 “aaa”。n{X}前面的模式 n 连续出现X 次时匹配n$匹配任何结尾为 n 的字符串。^n匹配任何开头为 n 的字符串。?n匹配任何其后紧接指定字符串 n 的字符串。?!n匹配任何其后没有紧接指定字符串 n 的字符串。RegExp 对象方法 方法描述compile编译正则表达式。exec检索字符串中指定的值。返回找到的值并确定其位置。test检索字符串中指定的值。返回 true 或 false。正则表达式的使用 test方法搜索字符串指定的值根据结果并返回真或假exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配则返回 null。 var patt1new RegExp(e);
document.write(patt1.test(The best things in life are free));var patt1new RegExp(e);
document.write(patt1.exec(The best things in life are free));4.3 演示
body数据input idi1 onblurcheckData() /scriptvar i1 document.getElementById(i1);function checkData() {var val i1.value;// 创建正则表达式1// var reg new RegExp([0-9]);// 创建正则表达式2var reg /[0-9]/; // 模板1: 判断内容是否包含0-9之间任何一个数字var reg2 /[a]/; // 模板2: 是否包含avar reg3 /[abc]/; // 模板3: 是否包含abc中任何一个var reg4 /[a-z]/; // 模板4: 是否包含a-z中任何一个var reg5 /[A-Z]/; // 模板5: 是否包含A-Z中任何一个var reg6 /[a-zA-Z]/; // 模板6: 是否包含大小写中任何一个var reg7 /[A-z]/; // 模板7: 是否包含大小写中任何一个(因为ascll码值)var reg8 /[0-9A-Za-z]/; // 模板8: 是否包含数字或者字母var reg9 /[\dA-Za-z]/; // 模板9: 是否包含数字或者字母var reg10 /\d/; // 匹配至少一个数字var reg11 /\d*/; // 匹配0或者多个数字var reg12 /\d?/; // 匹配0或者1个,只要字符串内有1个或0个就对var reg13 /^\d?$/; // 匹配整个内容中只能有0或者1个数字var reg14 /^\d{4}$/; // 整个内容中只能有数字,且数字个数是4位var reg15 /^\d{4,6}$/; // 整个内容中只能有数字,且数字个数是4-6位var reg16 /^\d{4,}$/; // 整个内容中只能有数字,且数字个数是至少4位// 匹配手机号// 手机号开头必须是1,第二位可以是3,5,6,8,9,后续数字任意,总长得11位var reg17 /^1[35689]\d{9}$/;// 匹配邮箱 237876779qq.com// 开头是数字或者字母,其中必须包含符号,后可以是数字和字母,必须有.符号,后面必须是字母// .是正则表达式的特殊符号,需要转移var reg18 /^[\dA-Za-z][\da-z]\.[a-z]$/;console.log(reg18.test(val));// 置空// i1.value ;// 重点是能看懂就行,会写简单模板}/script/body4.4 练习
