连江网站建设服务,wordpress菜单设置,小区物业管理网站开发报告,动画网站模板事件: 事件的三要素#xff1a;事件源、事件、事件驱动程序。 事件处理步骤: #xff08;1#xff09;获取事件源#xff1a;document.getElementById(“box”); // 类似于Android里面的findViewById #xff08;2#xff09;绑定事件#xff1a; 事件源box.事件onclick…事件: 事件的三要素事件源、事件、事件驱动程序。 事件处理步骤: 1获取事件源document.getElementById(“box”); // 类似于Android里面的findViewById 2绑定事件 事件源box.事件onclick function(){ 事件驱动程序 }; 3书写事件驱动程序关于DOM的操作。
body
div idbox1/div
script typetext/javascript// 1、获取事件源var div document.getElementById(box1);// 2、绑定事件div.onclick function () {// 3、书写事件驱动程序alert(我是弹出的内容);}
/script
/body获取事件源的方式;
var div1 document.getElementById(box1); //方式一通过id获取单个标签
var arr1 document.getElementsByTagName(div); //方式二通过 标签名 获得 标签数组
var arr2 document.getElementsByClassName(hehe); //方式三通过 类名 获得 标签数组绑定事件的方式 方式一直接绑定匿名函数
div idbox1 /div
script typetext/javascriptvar div1 document.getElementById(box1);//绑定事件的第一种方式div1.onclick function () {alert(我是弹出的内容);}
/script方式二先单独定义函数再绑定 div idbox1 /div
script typetext/javascriptvar div1 document.getElementById(box1);//绑定事件的第二种方式div1.onclick fn; //注意这里是fn不是fn()。fn()指的是返回值。//单独定义函数function fn() {alert(我是弹出的内容);}
/script方式三行内绑定
!--行内绑定--
div idbox1 onclickfn()/div
script typetext/javascriptfunction fn() {alert(我是弹出的内容);}
/script
js基础三要素 ECMAScriptJavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。 DOM文档对象模型Document object Model操作网页上的元素的API。比如让盒子移动、变色、轮播图等。 BOM浏览器对象模型Browser Object Model操作浏览器部分功能的API。比如让浏览器自动滚动。
节点: 构成 HTML 网页的最基本单元。网页中的每一个部分都可以称为是一个节点; 见节点分为四类
文档节点文档整个 HTML 文档。整个 HTML 文档就是一个文档节点。
元素节点标签HTML标签。
属性节点属性元素的属性。
文本节点文本HTML标签中的文本内容包括标签之间的空格、换行。节点的获取: 跟事件源
var div1 document.getElementById(box1); //方式一通过 id 获取 一个 元素节点为什么是一个呢因为 id 是唯一的
var arr1 document.getElementsByTagName(div); //方式二通过 标签名 获取 元素节点数组
var arr2 document.getElementsByClassName(hehe); //方式三通过 类名 获取 元素节点数组获取节点之后可以操作其中的节点(内容,样式等)
绑定事件的方式
onclick
body
button点我/button
scriptvar btn document.getElementsByTagName(button)[0];//这种事件绑定的方式如果绑定多个则后面的会覆盖掉前面的btn.onclick function () {console.log(事件1);}btn.onclick function () {console.log(事件2);}
/script
/bodyaddEventListener高版本浏览器
body button按钮/button scriptvar btn document.getElementsByTagName(button)[0];// addEventListener: 事件监听器。 原事件被执行的时候后面绑定的事件照样被执行// 这种写法不存在响应函数被覆盖的情况。更适合团队开发btn.addEventListener(click, fn1);btn.addEventListener(click, fn2);function fn1() {console.log(事件1);}function fn2() {console.log(事件2);}
/script /bodyattachEventIE8及以下版本浏览器
bodybutton按钮/buttonscriptvar btn document.getElementsByTagName(button)[0];btn.attachEvent(onclick, function() {console.log(事件1);});btn.attachEvent(onclick, function() {console.log(事件2);});/script/bodyDOM事件流 事件传播的三个阶段是
事件捕获阶段事件从祖先元素往子元素查找DOM树结构直到捕获到事件目标 target。在这个过程中默认情况下事件相应的监听函数是不会被触发的。
事件目标当到达目标元素之后执行目标元素该事件相应的处理函数。如果没有绑定监听函数那就不执行。
事件冒泡阶段事件从事件目标 target 开始从子元素往冒泡祖先元素冒泡直到页面的最上一级标签。事件捕获 addEventListener可以捕获事件 捕获阶段事件依次传递的顺序是window -- document -- html– body -- 父元素、子元素、目标元素。 window.addEventListener(click, function () {alert(捕获 window);}, true);document.addEventListener(click, function () {alert(捕获 document);}, true);document.documentElement.addEventListener(click, function () {alert(捕获 html);}, true);document.body.addEventListener(click, function () {alert(捕获 body);}, true);fatherBox.addEventListener(click, function () {alert(捕获 father);}, true);childBox.addEventListener(click, function () {alert(捕获 child);}, true);事件冒泡 当一个元素上的事件被触发的时候比如说鼠标点击了一个按钮同样的事件将会在那个元素的所有祖先元素中被触发。 子元素的事件被触发时父元素的同样的事件也会被触发。 冒泡顺序div - body - html - document - window 以下事件不冒泡blur、focus、load、unload、onmouseenter、onmouseleave。意思是事件不会往父元素那里传递。 冒泡也是可以被阻止的;
常见的 BOM 对象
Window代表整个浏览器的窗口同时 window 也是网页中的全局对象。
Navigator代表当前浏览器的信息通过该对象可以识别不同的浏览器。
Location代表当前浏览器的地址栏信息通过 Location 可以获取地址栏信息或者操作浏览器跳转页面。
History代表浏览器的历史记录通过该对象可以操作浏览器的历史记录。由于隐私原因该对象不能获取到具体的历史记录只能操作浏览器向前或向后翻页而且该操作只在当次访问时有效。
Screen代表用户的屏幕信息通过该对象可以获取用户的显示器的相关信息。定时器 setInterval()循环调用。将一段代码每隔一段时间执行一次。循环执行 setTimeout()延时调用。将一段代码等待一段时间之后再执行。只执行一次
setInterval使用
第一种方式let num 1;setInterval(function () {num ;console.log(num);}, 1000);第二种方式setInterval(fn,1000);function fn() {num ;console.log(num);}清理定时器: 定时器的返回值是作为这个定时器的唯一标识可以用来清除定时器。 clearInterval(唯一标识)
setTimeout() 的使用
定义和清除
const timer setTimeout(function() {console.log(1); // 3秒之后再执行这段代码。}, 3000);
clearTimeout(timer); //清除箭头函数的写法setTimeout(() {console.log(1); // 3秒之后再执行这段代码。}, 3000);
jQuery jQuery 是 js 的一个库封装了我们开发过程中常用的一些功能方便我们调用提高开发效率。
jQuery 的两大特点: 1链式编程比如.show()和.html()可以连写成.show().html();链式编程原理return this。 (2) 隐式迭代隐式 对应的是 显式。隐式迭代的意思是在方法的内部会为匹配到的所有元素进行循环遍历执行相应的方法
jQuery 的基本选择器
var jqBox1 $(“#box”); // 按ID选择 var jqBox2 $(“.box”); // 按类名选择 var jqBox3 $(“div”); // 按标签名选择 var jqBox3 $(“div,.box”); // 选择多个
基本过滤选择器
$(document).ready(function () {// :odd 奇数行选择器$(li:odd).css(background, red); // :even / 偶数行选择器$(li:even).css(background, green);// :eq(index) 匹配$(ul li:eq(3)).css(font-size, 30px); //设置第四个li的字体// :lt(index) 小于$(li:lt(6)).css(font-size, 30px);// :gt(index) 大于$(.ulList1 li:gt(7)).css(font-size, 40px);// :first 选择第一个元素$(.ulList li:first).css(font-size, 40px);// :last 选择最后一个$(li:last).css(font-size, 40px);
});
