前端主流框架-JQuery

Javascript DOM

1 DOM模型+Document对象

1.1 DOM模型

  1. DOM【Document Object Model】 ：文档对象模型。直白的讲就是通过程序解析结构化文档（xml，html）的时候，在内存中生成的包含当前结构化文档中所有内容的一个对象模型。文档中的每一个节点都会生成一个对象，这些对象与对象之间会形成一个层级关系，像一个树形结构，所以称之为DOM树；

  2. DOM模型就是结构化文档在内存中的另外一种表现形式；

1.2 Document对象

  1. 每个载入浏览器的HTML文档都会成为一个Document对象，文档中都是节点(一切皆节点)，文档中的标签就是元素节点（Element），标签的内容就是文本节点（Text），标签的属性就是属性节点（Attribute）。Dom操作的的核心就是操作这三种节点，以及元素节点之间层次关系。我们可以使用JavaScript对HTML页面中的所有节点进行访问；

  2. 由于document对象属于window对象，所有BOM包括DOM。获取document对象直接使用window.document获取，而且window.是可以省略的；

  3. 常用方法

    getElementById

1.3 JavaScript事件

事件是可以被JavaScript侦测到的行为，例如单击某一个按钮，我们可以使用js提供的API监听到单击行为，并可以对该行为作出回应；

1.3.1 API-绑定事件的方法
onabort用户终止页面加载。
onchange	用户改变对象的值。
*onclick	用户点击对象。   
*ondblclick	用户双击对象。
*onfocus（和onblur相反）	用户获得焦点。
*onblur	用户离开对象。失去焦点
onkeydown	按下键盘。
onkeypress	按压键盘。
*onkeyup	松开键盘。
*onload	页面完成加载。注释：在 Netscape 中，当页面加载时会发生该事件。
onmousedown	用户按鼠标按钮。
onmouseover	鼠标指针移动到对象上。
onmouseout	鼠标指针移出对象。
onmouseup	用户释放鼠标按钮。
onreset	用户重置表单。
onselect	用户选取页面上的内容。
*onsubmit	用户提交表单。
onunload	用户关闭页面。
1.3.2 事件绑定

  1. JS中绑定事件通常有二种方式：

    1. 元素上直接绑定

    2. 元素.事件名称

1.3.2.1第一种方式

  1. 直接在元素上绑定对应的事件

  2. 缺点：js代码与html代码写在一起了

    function $btn1() {
    console.debug('我点了');
}
<input type="button" id="btn1" value="我点" onclick="$btn1();" />
1.3.2.2 第二种方式【推荐】

  1. 通过Dom对象.事件去绑定

    var $btn2 = document.getElementById("btn2");
$btn2.onclick = function() {
    console.debug('我又点了');
}
​
<input type="button" id="btn2" value="我点2" />

特殊事件onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>_03 js 事件处理-onload特殊事件.html</title>
    <script type="text/javascript">
        //给window绑定一个加载完毕后的事件，也就是mydiv被加载后，才执行的逻辑，就可以获取到了
        window.onload = function (){
            var myDiv = document.getElementById("myDiv"); //由于程序是从头到尾解析，到它的时候，mydiv还没有解析到，所以获取操为null
            console.log(myDiv);
          /*  解决方案2：等到html窗口被加载完毕后，在来执行我们代码，当什么时候，要做什么事情。其实就是事件机制。写如上代码实现*/
        }

    </script>
</head>
<body>
   <div id="myDiv">myDiv</div>
  <!-- <script type="text/javascript">
       var myDiv = document.getElementById("myDiv"); //由于程序是从头到尾解析，到它的时候，mydiv还没有解析到，所以获取操为null
       console.log(myDiv);
       /* 解决方案1：把代码放到标签后面，或者放到body最后面,但是不符合规范，script应该放到head中*/
   </script>-->
</body>
</html>

 

2 DOM操作

  1. 从上面的介绍得知，Dom操作的核心就是文本操作、属性样式操作、元素操作；

getElementById("id属性值") -- 常用
通过标签元素的ID获取到标签对象
getElementsByName()
通过标签元素的name属性获取到标签对象，返回的是数组
getElementsByTagName()
通过标签名称获取到标签对象，返回的是数组
parentNode：父节点，返回Node
获取指定元素的父节点
document.body：获取body节点  <body>
2 .1 文本操作

实例代码：

<div style="height: 150px;width: 150px;background-color: green" id="d1"></div>
<script type="text/javascript">
	var div = document.getElementById("d1");
	div.onmouseover = function(){
		this.innerHTML = "<span style='color:red'>有敌军潜入</span>";
	}
	div.onmouseout = function(){
		this.innerText = '';
	}
</script>
2 .2 属性和样式操作
2 .2.1 API
设置属性
setAttribute("type","button") 等价于  node.type="button"
获取属性值
getAttribute("type") 等价于 node.type
删除某属性；
removeAttribute()				
设置样式
node.style.样式 -- 单个样式设置
设置样式名
node.className -- 统一设置样式，多个样式方式，需要结合css代码

例如：o.className = "样式类名称";
.样式类名称{
}
常见样式：
node.style.color 可以设置节点的字体颜色
node.style.fontSize 可以设置节点的字体大小
node.style.backgroundColor 用于设置节点的背景颜色
node.style.width ='300px'用于设置节点的宽度
node.style.height ='200px'用于设置节点的高度
node.style.background="url('image/red.png')";
2 .2.2 案例演示

案例：鼠标移动到元素上改变背景颜色，点击改变属性和样式

<style type="text/css">
	.c1{
		text-decoration: none;
		color: black;
	}
</style>
<body>
	<a href="javascript:;">File</a>
	<a href="javascript:;">Edit</a> 
	<script type="text/javascript">
		var as = document.getElementsByTagName("a");
		for(var i = 0 ; i < as.length ; i++){
			var a = as[i];
			a.onmouseover = function(){
				this.style.backgroundColor = 'skyblue';
			}
			a.onmouseout = function(){
				this.style.backgroundColor = 'white';
			}
			a.onclick = function(){
				alert("当前元素的跳转地址为：" + this.href);
				//this.class = 'c1';//class是关键字
				this.className = "c1";
			}
		}
	</script>	
</body>
2 .3 元素操作

3 jQuery介绍

1 jQuery的认识

  1. jQuery是继prototype之后一个优秀的开源的JavaScript代码库（或JavaScript框架），它封装JavaScript常用的功能代码；

    js基础语法、函数、面向对象、dom，事件绑定

  2. 我们首先来看看jquery的核心特点：

    (1) 具有独特的链式语法，可以把多个操作写在一行代码里，更加简洁；

    (2) 拥有大量的选择器，不仅有高效灵活的css选择器，并且可对CSS选择器进行扩展；

    (3) 拥有便捷的插件扩展机制和丰富的插件（树形菜单、日期控件、图片切换插件、弹出窗口等）；

    在前些年JQuery可以说用相当厉害的，但是后来出现了很多开源插件。所以很不幸，现在他的地位不如vue。

    (4) 这个就厉害了，jQuery兼容各种主流浏览器，包括互联网十大垃圾之一IE6，IE6有各种各样的问题（IE6 浏览器常见兼容问题_ie filter 不兼容-CSDN博客），如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等，jQuery2.0及后续版本将不再支持IE6/7/8浏览器，最新版本是jQuery3.0

  3. jQuery的核心思想：（write less，do more）写得更少，做得更多；

2 和原生js比较

2.1 获取节点

例如：获取input节点：<input id="mytime" value="按钮">

  • 原生js写法：document.getElementById("mytime");

  • jquery写法：$("#mytime") -- #mytime代表id选择器

2.2 Ajax处理

原生js写法：100行

(1) 创建XMLHttpRequest对象

(2) open方法准备请求

(3) 监听属性 onreadystatechange

(4) send方法发送请求

写在最后:JQuery与Javascript,是使用较多的前端技术，包括现在主流的vue，也是基于JavaScript而开发的，笔者之前分享了很多后端框架知识，最近会主力更新前端，后端相关高阶操作文章也会发布。笔者小，中，大厂均有面试经历，坚持每日分享JAVA全栈知识，希望能够和大家共同进步。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/750855.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

openlayers 轨迹回放（历史轨迹）（postrender事件和render方法）

openlayers 轨迹回放（历史轨迹）（postrender事件和render方法）

openlayers 轨迹回放&#xff08;历史轨迹&#xff09;&#xff08;postrender事件和render方法&#xff09; 本篇介绍一下使用openlayers轨迹回放&#xff08;历史轨迹&#xff09;&#xff08;postrender事件和render方法&#xff09; 1 需求 轨迹回放&#xff08;历史轨迹…
阅读更多...
网络问题排障专题-AF网络问题排障

网络问题排障专题-AF网络问题排障

目录 一、数据交换基本原理 1、ARP协议工作原理 数据包如图&#xff1a; 2、二层交换工作原理 简述核心概念&#xff1a; 二层交换原理-VLAN标签 3、三层交换工作原理 二、AF各种部署模式数据转发流程 1、路由模式数据转发流程 三、分层/分组逐一案例讲解 1、问题现…
阅读更多...
《非暴力沟通》

《非暴力沟通》

The English name of the book: Nonviolent Communication 我对《非暴力沟通》的理解总归于一句话&#xff1a;我们所认识的世界&#xff0c;来源于我们的认知里的世界。我们总喜欢用“说教”的方式&#xff0c;评论他人的行为。这本书讲述如何摘掉偏见。 文章&#xff1a;
阅读更多...
海外仓货物何如高效入库：入库区域规划策略，附规划图

海外仓货物何如高效入库：入库区域规划策略，附规划图

作为海外仓布局的一部分&#xff0c;入库区可以说是所有业务流程的开端&#xff0c;也是最重要的区域之一。如果海外仓的入库区布局不合理&#xff0c;会直接导致后续所有的作业流程都出现拥堵、低效。 今天我们就会给大家分享海外仓入库区的规划指南&#xff0c;通过科学的规…
阅读更多...
压缩pdf文件大小的方法，如何压缩pdf格式的大小

压缩pdf文件大小的方法，如何压缩pdf格式的大小

pdf太大怎么压缩&#xff1f;当你需要通过电子邮件发送一个PDF文件&#xff0c;却发现文件太大无法成功发出时&#xff0c;这些情况下&#xff0c;我们都需要找到一种方法来压缩PDF文件&#xff0c;以便更便捷地进行分享和传输。PDF文件的大小通常与其中包含的图片、图形和文本…
阅读更多...
leetCode.91. 解码方法

leetCode.91. 解码方法

leetCode.91. 解码方法 题目思路 题解 class Solution { public:int numDecodings(string s) {int n s.size();// dp 中f[0]一般不做使用&#xff0c;只是存一个初值1&#xff0c;表示默认由一种方案s s;vector<int> f( n 1 );f[0] 1;for ( int i 1; i < n;…
阅读更多...
SRC公益上分的小技巧二

SRC公益上分的小技巧二

前言 漏洞挖掘有时候换几个思路&#xff0c;事半功倍 下面讲解一些很简单&#xff0c;但是实用的思路 案例一、若依系统配置不当 讲解了这么多系统&#xff0c;兜兜转转又回到了若依 其实最早的若依系统&#xff0c;在js中已经将账号密码自动填充&#xff0c;我们一访问就…
阅读更多...
1、加密算法-MD5随机盐

1、加密算法-MD5随机盐

一、说明 MD5消息摘要算法&#xff0c;属Hash算法一类。MD5算法对输入任意长度的消息进行运行&#xff0c;产生一个128位的消息摘要(32位的数字字母混合码)。 二、主要特点 不可逆&#xff0c;相同数据的MD5值肯定一样&#xff0c;不同数据的MD5值不一样 (一个MD5理论上的确…
阅读更多...
使用容器配置文件构建任意应用镜像_并将应用镜像推送到公共仓库共享_应用分享与启动---分布式云原生部署架构搭建012

使用容器配置文件构建任意应用镜像_并将应用镜像推送到公共仓库共享_应用分享与启动---分布式云原生部署架构搭建012

上面我们编写好了应用,并且,安装好了redis 现在我们把应用打包成镜像. 以前是这样做的,不方便,因为需要在服务器上,安装jdk什么的,现在有了 镜像就不用,给服务器安装镜像什么的了 以后所有机器都安装docker以后,就直接运行就可以了 首先看一下,安装java应用,需要 用到openjd…
阅读更多...
送物机器人电子方案定制

送物机器人电子方案定制

这是一款集娱乐、教育和互动于一身的高科技产品。 一、它的主要功能包括&#xff1a; 1. 智能对话&#xff1a;机器人可以进行简单的对话&#xff0c;回答用户的问题&#xff0c;提供有趣的互动体验。 2. 前进、后退、左转、右转、滑行&#xff1a;机器人可以通过遥控器或AP…
阅读更多...
ThreadX简介

ThreadX简介

文章目录 1. 摘要2. ThreadX的特性2.1 免费开源2.2 安全认证级别高2.3 组件完善2.4 实时性高2.5 支持多核2.6 支持应用动态加载2.7 代码符合MISAR规范2.8 文档全面，例程丰富2.9 集成方便3. 移植示例4. 产品应用示例1. 摘要 在嵌入式系统领域，实时性能、系统稳定性以及广泛的…
阅读更多...
ODYSSEE加速电机仿真优化

ODYSSEE加速电机仿真优化

由于对低碳社会的强烈需求&#xff0c;电动汽车(EV)和混合动力汽车(HEV)的数量正在迅速增长。新能源汽车的主要部件是电池、逆变器和电机。电机市场的规模也将不断扩大。为了提高EV的性能&#xff0c;对电机设计工程师的要求越来越高。 除了EV市场&#xff0c;协作机器人市场也…
阅读更多...
TextRank 算法

TextRank 算法

第1关&#xff1a;Jieba 在关键词提取中的应用 任务描述 本关任务&#xff1a;根据本关所学有关使用 Jieba 库进行关键词提取的知识&#xff0c;编写使用 Jieba 模块进行关键词提取的程序&#xff0c;并通过所有测试用例。 相关知识 为了完成本关任务&#xff0c;你需要掌握…
阅读更多...
全国公共汽车、出租车拥有情况及客运量、货运量数据

全国公共汽车、出租车拥有情况及客运量、货运量数据

基本信息. 数据名称: 全国公共汽车、出租车拥有情况及客运量、货运量数据 数据格式: Shp、Excel 数据时间: 2020-2022年 数据几何类型: 面 数据坐标系: WGS84 数据来源&#xff1a;中国城市统计年鉴 数据可视化. 2022年全年公共汽车客运总量数据示意图 2022年公路客…
阅读更多...
MGV电源维修KUKA机器人电源模块PH2003-4840

MGV电源维修KUKA机器人电源模块PH2003-4840

MGV电源维修 库卡电源模块维修 机器人电源模块维修 库卡控制器维修 KUKA电源维修 库卡机器人KUKA主机维修 KUKA驱动器模块维修 机械行业维修&#xff1a;西门子系统、法那克系统、沙迪克、FIDIA、天田、阿玛达、友嘉、大宇系统&#xff1b;数控冲床、剪板机、折弯机等品牌数控…
阅读更多...
使用插件和微调优化 GPT 模型

使用插件和微调优化 GPT 模型

文章目录 LLM 用例和示例产品警惕 AI 幻觉&#xff1a;限制与考虑使⽤插件和微调优化 GPT 模型 OpenAI 在其网站上展示了许多激励人心的客户故事&#xff0c;我们需要了解这些模型如何改变我们的社会并为商业和创造力开辟新机遇。正如你将看到的&#xff0c;许多企业已经开始使…
阅读更多...
华宽通中标长沙市政务共性能力建设项目，助力智慧政务建设新飞跃

华宽通中标长沙市政务共性能力建设项目，助力智慧政务建设新飞跃

在数字化浪潮的推动下&#xff0c;长沙市政府正积极拥抱智慧城市建设&#xff0c;以科技力量提升政务服务效能。华宽通凭借其卓越的技术实力与丰富的项目经验&#xff0c;成功中标长沙市政务共性能力建设项目&#xff0c;这无疑是对华宽通在智慧城市领域实力的高度认可。 华宽…
阅读更多...
Psychtoolbox 脑电实验范式之mp4视频绘制

Psychtoolbox 脑电实验范式之mp4视频绘制

1. 读取 首先需要使用到Screen(‘OpenMovie’)函数&#xff0c;该函数可以读取mp4、gif格式的数据&#xff0c;具体方式如下&#xff1a; clear; clc; Screen(Preference, SkipSyncTests, 1); screens Screen(Screens); screenNum max(screens); [window, screenRect] Scr…
阅读更多...
【pytorch09】数学运算

【pytorch09】数学运算

1.数学操作 add/minus/multiply/dividematmulpowsqrt/rsqrtround 2.加减乘除 加法 矩阵乘法 torch.mm 只适用于2d torch.matmul 要分清楚是矩阵元素相乘&#xff0c;还是矩阵相乘 例子 x一共有4张照片&#xff0c;每张照片打平成784的向量&#xff0c;希望降维得到[4,51…
阅读更多...
CDGA数据治理：数字化时代的基石

CDGA数据治理：数字化时代的基石

随着数字化浪潮的汹涌而来&#xff0c;数据已成为当今世界的核心驱动力。无论是企业决策、市场趋势预测&#xff0c;还是个性化用户体验&#xff0c;都离不开数据的支撑。而在这一过程中&#xff0c;数据治理的重要性日益凸显&#xff0c;成为实现数字化转型、发挥数据价值的最…
阅读更多...
最新文章

Copyright @ 2022~2023