郑州好的网站建站,电子商务网站怎么做数据库,荣耀正品查询入口,北京招聘网站设计师这篇文章是紧接着前一篇前端学习写的#xff0c;主要要写的是js剩下的基础知识
事件的绑定 什么是事件#xff1f; HTML 事件可以是浏览器行为#xff0c;也可以是用户行为。 当这些一些行为发生时,可以自动触发对应的JS函数的运行,我们称之为事件发生.JS的事件驱动指的就是…这篇文章是紧接着前一篇前端学习写的主要要写的是js剩下的基础知识
事件的绑定 什么是事件 HTML 事件可以是浏览器行为也可以是用户行为。 当这些一些行为发生时,可以自动触发对应的JS函数的运行,我们称之为事件发生.JS的事件驱动指的就是行为触发代码运行的这种特点 常见事件
主要有鼠标事件、键盘事件、表单事件下面展示常见的几个事件
鼠标事件
属性描述onclick当用户点击某个对象时调用的事件句柄。oncontextmenu在用户点击鼠标右键打开上下文菜单时触发ondblclick当用户双击某个对象时调用的事件句柄。onmousedown鼠标按钮被按下。onmouseenter当鼠标指针移动到元素上时触发。onmouseleave当鼠标指针移出元素时触发onmousemove鼠标被移动。onmouseover鼠标移到某元素之上。onmouseout鼠标从某元素移开。onmouseup鼠标按键被松开。
键盘事件
属性描述onkeydown某个键盘按键被按下。onkeypress某个键盘按键被按下并松开。onkeyup某个键盘按键被松开。 表单事件
属性描述onblur元素失去焦点时触发onchange该事件在表单元素的内容改变时触发( input, keygen, select, 和 textarea)onfocus元素获取焦点时触发onfocusin元素即将获取焦点时触发onfocusout元素即将失去焦点时触发oninput元素获取用户输入时触发onreset表单重置时触发onsearch用户向搜索域输入文本时触发 ( inputsearch)onselect用户选取文本时触发 ( input 和 textarea)onsubmit表单提交时触发 事件的绑定
实际上说的就是一个行为调用函数
有两种方式
1. 通过属性绑定这里其实就是事件属性属性 函数() headmeta charsetUTF-8title小标题/titlescriptfunction testDown1(){console.log(down1)}function testDown2(){console.log(down2)}function testFocus(){console.log(获得焦点)}function testBlur(){console.log(失去焦点)}function testChange(input){console.log(内容改变)console.log(input.value);}function testMouseOver(){console.log(鼠标悬停)}function testMouseLeave(){console.log(鼠标离开)}function testMouseMove(){console.log(鼠标移动)}/script/headbodyinput typetext onkeydowntestDown1(),testDown2()onfocustestFocus() onblurtestBlur() onchangetestChange(this)onmouseovertestMouseOver() onmouseleavetestMouseLeave() onmousemovetestMouseMove() //body
说明
1. 一个元素可以绑定多个事件
2.一个事件可以绑定多个函数
3.通过属性绑定函数后行为发生时自动执行函数
4.方法内可以使用this关键词代表当前元素
2. 通过DOM编程绑定
事实上和属性赋值的形式差不多事件 函数定义但是这里有个不同的点在于DOM编程的思想应该在于获得页面元素然后对元素的事件属性进行赋值函数
headmeta charsetUTF-8title小标题/titlescript// 页面加载完毕事件,浏览器加载完整个文档行为window.onloadfunction(){var in1 document.getElementById(in1);// 通过DOM编程绑定事件in1.onchangetestChange}function testChange(){console.log(内容改变)console.log(event.target.value);}/script/headbodyinput idin1 typetext //body 事件的触发
主要两种触发方式
1.行为触发就是发生某些行为后触发绑定的函数
2.DOM编程触发就是通过DOM编程对页面元素的事件属性赋值函数使得该元素的事件属性具有函数的性质最后将两个事件绑定一个行为事件赋函数该函数中调用该元素的事件带上就调用了该函数。例如 headmeta charsetUTF-8title小标题/titlescript// 页面加载完毕事件,浏览器加载完整个文档行为window.onloadfunction(){var in1 document.getElementById(in1);// 通过DOM编程绑定事件in1.onchangetestChangevar btn1 document.getElementById(btn1);btn1.onclickfunction (){console.log(按钮点击了)// 调用事件方法触发事件in1.onchange()}}function testChange(){console.log(内容改变)console.log(event.target.value);}/script/headbodyinput idin1 typetext /brbutton idbtn1按钮/button/body
BOM编程 什么是BOM
BOM是Browser Object Model的简写即浏览器对象模型。简单的说就是面向浏览器对象的编程而在浏览器对象之下又把浏览器的各个组件抽象为一个个的对象通过调用他们的api对浏览器各个组件的行为进行控制。定义浏览器行为 BOM编程的对象结构如下 window 顶级对象,代表整个浏览器窗口 location对象 window对象的属性之一,代表浏览器的地址栏 history对象 window对象的属性之一,代表浏览器的访问历史 screen对象 window对象的属性之一,代表屏幕 navigator对象 window对象的属性之一,代表浏览器软件本身 document对象 window对象的属性之一,代表浏览器窗口目前解析的html文档 console对象 window对象的属性之一,代表浏览器开发者工具的控制台 localStorage对象 window对象的属性之一,代表浏览器的本地数据持久化存储 sessionStorage对象 window对象的属性之一,代表浏览器的本地数据会话级存储 window对象的常见属性、常见方法((了解) 根据w3cschool去自行了解 通过BOM编程控制浏览器行为演示 三种弹窗方式 headmeta charsetUTF-8title小标题/titlescriptfunction testAlert(){//普通信息提示框window.alert(提示信息);}function testConfirm(){//确认框var con confirm(确定要删除吗?);if(con){alert(点击了确定)}else{alert(点击了取消)}}function testPrompt(){//信息输入对话框var res prompt(请输入昵称,例如:张三);alert(您输入的是:res)}/script/head
bodyinput typebutton value提示框 onclicktestAlert()/ brinput typebutton value确认框 onclicktestConfirm()/ brinput typebutton value对话框 onclicktestPrompt()/ br/body 页面跳转 headmeta charsetUTF-8title小标题/titlescriptfunction goAtguigu(){var flag confirm(即将跳转到尚硅谷官网,本页信息即将丢失,确定吗?)if(flag){// 通过BOM编程地址栏url切换window.location.hrefhttp://www.atguigu.com}}/script/head
bodyinput typebutton value跳转到尚硅谷 onclickgoAtguigu()/ br/body
通过BOM编程实现会话级和持久级数据存储 会话级数据 : 内存型数据,是浏览器在内存上临时存储的数据,浏览器关闭后,数据失去,通过window的sessionStorge属性实现 持久级数据 : 磁盘型数据,是浏览器在磁盘上持久存储的数据,浏览器关闭后,数据仍在,通过window的localStorge实现 可以用于将来存储一些服务端响应回来的数据,比如:token令牌,或者一些其他功能数据,根据数据的业务范围我们可以选择数据存储的会话/持久 级别
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescriptfunction saveItem(){// 让浏览器存储一些会话级数据window.sessionStorage.setItem(sessionMsg,sessionValue)// 让浏览器存储一些持久级数据window.localStorage.setItem(localMsg,localValue)
console.log(haha)}
function removeItem(){// 删除数据sessionStorage.removeItem(sessionMsg)localStorage.removeItem(localMsg)}
function readItem(){console.log(read)// 读取数据console.log(session:sessionStorage.getItem(sessionMsg))console.log(local:localStorage.getItem(localMsg))}/script
/head
body
button onclicksaveItem()存储数据/buttonbutton onclickremoveItem()删除数据/buttonbutton onclickreadItem()读取数据/button
/body
/html 测试,存储数据后,再读取数据,然后关闭浏览器,获取数据,发现sessionStorge的数据没有了,localStorge的数据还在 通过removeItem可以将这些数据直接删除 在F12开发者工具的应用程序栏,可以查看数据的状态
DOM编程 什么是DOM编程
DOM(Document Object Model)编程就是通过 document 对象及其提供的 API 来操作整个 HTML 文档的元素实现动态的网页内容和样式变化。这种编程方式使得网页能够根据用户的操作或其他条件动态地更新其内容和外观。 获取页面元素的几种方式
1.document对象调用函数通过idname值标签名class值获得
2.通过dom树获得元素结点分别有父节点元素找子节点元素、结点元素找兄弟结点元素 操作元素属性值
1.元素属性操作获得、赋值
2.元素标签体的文本内容获得、赋值 增删元素
略。。。
正则表达式 正则表达式简介
基本语法
var pattnew RegExp(pattern,modifiers);
或者更简单的方式:
var patt/pattern/modifiers; RegExp对象方法 方法描述compile在 1.5 版本中已废弃。 编译正则表达式。exec检索字符串中指定的值。返回找到的值并确定其位置。test检索字符串中指定的值。返回 true 或 false。toString返回正则表达式的字符串。
举例
// 创建一个最简单的正则表达式对象
var reg /o/;
// 创建一个字符串对象作为目标字符串
var str Hello World!;
// 调用正则表达式对象的test()方法验证目标字符串是否满足我们指定的这个模式返回结果true
console.log(/o/.test(Hello World!)reg.test(str)); 修饰符 修饰符描述i执行对大小写不敏感的匹配。g执行全局匹配查找所有匹配而非在找到第一个匹配后停止。m执行多行匹配。
还有就是html特殊字符有具体的实体名称在文本中使用这些字符时避免使用字符本身应该用实体名称实体名称都是用 去修饰的
剩余部分几乎和java相同
