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

前端学习---(4)js基础-2

news 文章来源：https://blog.csdn.net/xy3233/article/details/143187117 2024/11/25 22:36:50

事件:
事件的三要素：事件源、事件、事件驱动程序。
事件处理步骤:
（1）获取事件源：document.getElementById(“box”); // 类似于Android里面的findViewById
（2）绑定事件：事件源box.事件onclick = function(){ 事件驱动程序 };
（3）书写事件驱动程序：关于DOM的操作。

<body>
<div id="box1"></div>
<script type="text/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 id="box1" ></div>
<script type="text/javascript">var div1 = document.getElementById("box1");//绑定事件的第一种方式div1.onclick = function () {alert("我是弹出的内容");}
</script>

方式二：先单独定义函数，再绑定

 <div id="box1" ></div>
<script type="text/javascript">var div1 = document.getElementById("box1");//绑定事件的第二种方式div1.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。//单独定义函数function fn() {alert("我是弹出的内容");}
</script>

方式三：行内绑定

<!--行内绑定-->
<div id="box1" onclick="fn()"></div>
<script type="text/javascript">function fn() {alert("我是弹出的内容");}
</script>

js基础三要素
ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、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>
<script>var btn = document.getElementsByTagName("button")[0];//这种事件绑定的方式，如果绑定多个，则后面的会覆盖掉前面的btn.onclick = function () {console.log("事件1");}btn.onclick = function () {console.log("事件2");}
</script>
</body>

addEventListener（高版本浏览器）

<body> <button>按钮</button> <script>var 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> </body>

attachEvent（IE8及以下版本浏览器）

<body><button>按钮</button><script>var btn = document.getElementsByTagName('button')[0];btn.attachEvent('onclick', function() {console.log('事件1');});btn.attachEvent('onclick', function() {console.log('事件2');});</script></body>

DOM事件流
事件传播的三个阶段是：

事件捕获阶段：事件从祖先元素往子元素查找（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");
});

前端学习---(4)js基础-2

相关文章：

前端学习---(4)js基础-2

重生之“我打数据结构，真的假的？”--3.栈和队列（无习题）

《Python游戏编程入门》注-第2章2

PoissonRecon学习笔记

腾讯云DBA面试(一面)

Python：背景知识及环境安装

力扣第420周赛中等 3324. 出现在屏幕上的字符串序列

ant design vue树选择器实现部分层级禁用（指定层级或依据字段判断）

安灯系统助力汽车零部件工厂快速解决生产异常

vue父子传参的方式——Prop

Apache Commons Text 指南：比 String 更强大的文本处理工具

C++面向对象编程学习

云轴科技ZStack亮相迪拜GITEX大会，与阿里云再次携手深化海外合作

SQL Server 当前日期及其未来三天的日期

QUIC（Quick UDP Internet Connections）与 RTMP（Real Time Messaging Protocol）

双十一送你一份购物攻略，绿联NAS DXP2800评测

基于vue框架的的高校设备信息管理系统的设计与实现tx6d7（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。

springboot3.x使用@NacosValue无法获取配置信息问题解决

sql获取时间差

【深入理解Python中的闭包】如何有效使用嵌套函数和状态捕获！

npm配置阿里镜像库教程

Apache JMeter压力测试工具使用

前端零基础入门到上班:【Day4】HTML 多媒体与表单深度教程

原创作品——银行软件产品界面设计

若依RuoYi-Vue 定时任务速学

【pytest学习】pytest.main()

设计模式: Pimpl（Pointer to Implementation）

android开发中文网站 android developer

实习冲刺Day1

安全见闻（5）——开阔眼界，不做井底之蛙

小程序在建网站吗/seo网站关键词优化机构

那些网站是asp做的/网站流量数据

美女学习资料网站免费/网站提交收录入口

模板网站建设价格/网络营销的特点不包括

vr网站制作/seo快速优化报价

通州个人做网站/网站设计培训