首页
学习
活动
专区
圈层
工具
发布

【JQuery】基础从零入门操作,简单详细

使⽤JQuery可以轻松地选择和操作HTML元素 从 ⽽减少了开发⼈员编写的代码量,提⾼了开发效率,它提供的 API 易于使⽤且兼容众多浏览器, JQuery对于事件的处理也进⾏了简化, 提供了⼀个简单的...: slim 的压缩版 二:JQuery使用 三:JQuery语法 JQuery 的代码通常都写在 document ready 函数中 这是为了防⽌⽂档在完全加载(就绪)之前运⾏ jQuery...③ 事件处理程序: 进⼀步如何处理. 往往是⼀个回调函数 JS 要构建动态⻚⾯, 就需要感知到⽤⼾的⾏为....赋值 七:获取、设置元素属性 JQuery attr() ⽅法⽤于获取属性值 如果attr中只有key就是取值;有key,有value就是赋值 注:attr(attribute) 1...:取值 2:赋值 举例①更改链接 举例②更改图片尺寸 举例③点击 按钮尺寸变大 六:获取返回CSS值/属性 css() ⽅法设置或返回被选元素的⼀个或多个样式属性 1:返回属性 (1)

45710

资源文件的动态加载

Data URL 和 DHTML,通过Base64编码将二进制文件(比如图片)捆绑到HTML/CSS中。优点是制作简便,也能减少连接数。...缺点是BASE64在一定程度上会增大文件大小(即使用了GZip压缩);浏览器也要重新解码显示,会带来一定的性能问题;最重要的是,无法被缓存,每次请求HTML/CSS都会加载一遍。...不管是CSS Sprites还是Data URL都是针对网站本身的样式来说,不适合把内容中的图片(比如新闻中的图片)捆绑进HTML/CSS/图片中。...CSS 文件 dynamicLoading.css("test.css"); //动态加载 JS 文件 dynamicLoading.js("test.js"); 动态加载外部脚本的方法,但很多动态加载外部脚本的方法里都会用到 sctipt 的 defer 或 async 属性,所以也把它单独列在这儿。

2.7K90
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    【前端基础篇】JavaScript之jQuery介绍

    前言 在阅读过程中可以把代码片复制到vscode上去浏览器看实际效果,更易理解喔 JQuery基本介绍和使用方法 W3C 标准给我们提供了⼀系列的函数, 让我们可以操作: ⽹⻚内容 ⽹⻚结构 ⽹⻚样式...引⼊外部地址, 会有外部地址不能访问的⻛险. 下载⽅式: 通过浏览器访问上述连接 右键 -> 另存为… 保存到本地, 放在项⽬中即可....(): 获取或设置CSS属性,能够动态地改变元素的样式,是实现动态交互效果的重要工具。...,通常与addClass()配合使用,用于动态样式切换。...方法从指定URL加载数据,并在成功时将其显示在 #elementId 元素中 fadeIn() / fadeOut(): 处理淡入淡出效果,常用于显示或隐藏内容。

    1.4K10

    看不完的那种!前端170面试题+答案学习整理(良心制作)

    ,如没有,查看网络中的资源,并确认与地图相关的图片资源有无加载,若加载了,将地图调用的代码从项目中独立出来,看能否正常显示,若能显示,在项目中,使用二分法一半一半地删除引用的JavaScript,css...33.jquery中的事件冒泡,怎么执行,如何停止冒泡事件 事件冒泡从里面往外面开始传递。...类 用addClass()和removeClass()方法动态地改变元素的class 58.使用cdn加载jquery库的主要优势是什么 可以节省服务器带宽 可以更快地下载jquery文件 如果浏览器已经从同一个...image 当script标签放在head中,并且这个script标签只有scr属性引入外部js文件的情况下,HTML文件开始渲染,直到命中script标签,此时解析将停止,并发现一个请求获取该文件并执行...使用async会在HTML解析期间下载文件,并在下载完成后暂停HTML的解析,执行下载的外部js文件,执行后继续解析HTML。 ?

    12.3K50

    前端面试题

    (加载时间指感知的时间或者实际加载时间) · 1.优化图片 · 2.图像格式的选择(GIF:提供的颜色较少,可用在一些对颜色要求不高的地方) · 3.优化CSS(压缩合并css,如margin-top,...当浏览器知道了高度和宽度参数后,即使图片暂时无法显示,页面上也会腾出图片的空位,然后继续加载后面的内容。从而加载时间快了,浏览体验也更好了。) · 6.减少http请求(合并文件,合并图片)。 2....,空亦是可以的。 4.浮动外部元素 此三种方法各有利弊,使用时应择优选择,比较之下第二种方法更为可取。 2.2. 如何优化网页的打印样式?...解释一下你对盒模型的理解,以及如何在CSS中告诉浏览器使用不同的盒模型来渲染你的布局。 关于盒模型请看文章CSS之布局与定位。...实例已完成以下的配置:用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

    2K10

    JS的面试题(一)

    new生成的实例 4.如何检测一个属性是否为对象的自身属性 对象.hasOwnProperty(“属性”) 5.构造函数和原型和实例的关系 new构造函数生成实例 实例的__proto__指向构造函数的原型...call第二个参数之后传序列,立即执行 apple第二个参数是数组,立即执行 bind第二个参数之后是传序列,不立即执行 27 jQuery中,dom加载完之后执行,如何实现?...45、列举jquery的ajax请求,并说明作用 (“div”).load() 加载文档 .get() 获取数据 .post()传递数据 .getScript() 加载js文件 .getJSON()...、如何解决项目中已经存在的js类库中 与jQuery中 的冲突?...jQuery.noConflict() jQuery 使用 noConflict 方法来放弃 调用时的命名,之后由 jQuery 代替 进行编写 54、如何用jQuery获取元素在文档中的位置?

    58710

    求职 | 史上最全的web前端面试题汇总及答案

    介绍一下 CSS就是层叠式样式表(Cascading Style Sheets)的简称,CSS中层叠的意思就是在HTML文档树结构中的子标记能够继承所有父标记定义的样式,还可以多次定义自己的样式,全部样式按照从外到内...如何显示/隐藏一个DOM元素 更改元素的css style,设为display: none。此外还可以将visibility设为hidden,透明度设为0,或长、宽设为0。...根据W3C的标准,HTML中文档的所有内容都是节点 ,整个文档是一个文档节点 ,每个html元素都是元素节点, Html元素中的文本是文本节点 ,每个html属性都是属性节点 ,注释是注释节点。...文档树,css文件,js文件,图片资源等),执行的一个函数 问题:如果图片资源较多,加载时间较长,onload后等待执行的函数需要等待较长时间,所以一些效果可能受到影响 ②$(document).ready...此外保持好的编码习惯,避免重复和css、JavaScript代码,多余的HTML标签和属性。 Flash、Ajax各自的优缺点,在使用中如何取舍?

    1.7K10

    浏览器渲染页面与DOM相关常见的面试题以及问题

    浏览器从服务端拿到html文件后,首先开始解析html文件,构建DOM tree,并且同时构建Render Tree; 遇到js文件的话,阻塞DOM tree的构建;因为js可能会改变dom和css,因此浏览器会先解析...但与此同时,如果还有外部文件,则是同时加载(不阻塞后续外部文件link、script加载)。但是外部文件内的代码不会执行,只会在代码解析到它的时候执行。...对于动态创建的link标签不会阻塞其后动态创建的script的加载与执行,不管script标签是否具有async属性。 js添加async属性之后,script加载的外部文件成为了异步加载,这时相当于它于原本的html解析过程同步进行。...DOM的作用 DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。 它允许运行在浏览器中的代码访问文件中的节点并与之交互。节点可以被创建,移动或修改。

    1.4K30

    2020最新前端面试题_2020年前端面试题

    Vue.delete 直接删除了数组 改变了数组的键值。 27、SPA首屏加载慢如何解决 安装动态懒加载所需插件;使用CDN资源。...如何在vue中安装和使用? sass是一种CSS预编译语言安装和使用步骤如下。 用npm安装加载程序( sass-loader、 css-loader等加载程序)。...,让处于bfc内部与外部的元素相互隔离,使内外的元素的定位不会相互影响 6、请说出至少三种减少页面加载时间的方法 尽量减少页面中重复的http请求 css样式放置在文件头部、js脚本放置在文件末尾...> 不使用 @import Javascript 方面 将脚本放到页面底部 将 javascript 和 css 从外部引入 压缩 javascript 和 css 删除不需要的脚本 减少...创建Ajax无刷新网页 提供对JavaScript语言的增强 增强的事件处理 更改网页内容 JQuery可以修改网页中的内容,比如更改网页的文本、 插入或转网页图像, jQuery简化了原本使用JavaScript

    7.4K10

    献给前端求职路上的你们(下)

    (6) 避免使用CSS Expression(css表达式)又称Dynamic properties(动态属性)。 (7) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。...文档开始下载 文档树建立,根据标记请求所需指定MIME类型的文件 文件显示 {浏览器这边做的工作大致分为以下几步: 加载:根据请求的URL进行域名解析,向服务器发起请求,接收文件(HTML、JS、CSS...解析:对加载到的资源(HTML、JS、CSS等)进行语法解析,建议相应的内部数据结构(比如HTML的DOM树,JS的(对象)属性表,CSS的样式规则等等)} 你常用的开发工具是什么,为什么?...可以从你接触前端到逐步深入学习使用的过程中,你用过什么编辑器以及转化的过程和原因方面回答 对前端界面工程师这个职位是怎么样理解的?它的前景会怎么样?...); 页面进行标注(例如 页面 模块 开始和结束); CSS跟HTML 分文件夹并行存放,命名都得统一(例如style.css); JS 分文件夹存放 命名以该JS功能为准的英文翻译。

    1.2K60

    最常见的 20 个 jQuery 面试问题及答案

    你如何使用jQuery来提取一个HTML 标记的属性 例如. 链接的href? (答案)   attr() 方法被用来提取任意一个HTML元素的一个属性的值....你如何使用jQuery设置一个属性值? (答案)   前面这个问题之后额外的一个后续问题是,attr()方法和jQuery中的其它方法一样,能力不止一样....你也还可以看看 用来向DOM中添加元素的 appendTo() 方法.   15. 你如何利用jQuery来向一个元素中添加和移除CSS类?...你如何使用jQuery来提取一个HTML 标记的属性 例如. 链接的href? (答案)   attr() 方法被用来提取任意一个HTML元素的一个属性的值....你如何使用jQuery设置一个属性值? (答案)   前面这个问题之后额外的一个后续问题是,attr()方法和jQuery中的其它方法一样,能力不止一样.

    14.7K30

    我的前端学习历程

    IIS中内建了静态压缩和动态压缩模块,如何配制可以参考Enable HTTP Compression of Static Content (IIS 7)和Enable HTTP Compression...值得注意的是pdf文件可以从需要被压缩的类型中剔除,因为pdf文件本身已经压缩,gzip对其效果不大,而且会浪费CPU。...避免CSS表达式   CSS表达式可以动态的设置CSS属性,在IE5-IE8中支持,其他浏览器中表达式会被忽略。例如下面表达式在不同时间设置不同的背景颜色。...使用外部Javascirpt和CSS文件   使用外部Javascript和CSS文件可以使这些文件被浏览器缓存,从而在不同的请求内容之间重用。...使用外部Javascript和CSS文件的决定因素在于这些外部文件的重用率,如果用户在浏览我们的页面时会访问多次相同页面或者可以重用脚本的不同页面,那么外部文件形式可以为你带来很大的好处。

    1.5K60

    【面试】1093- 21 道关于性能优化的面试题(附答案)

    HTML代码:避免图片和 iFrame等src属性为空。src属性为空,会重新加载当前页面,影响速度和效率,尽量避免在HTML标签中写 Style属性 4、移动端性能如何优化? 优化方式如下。...(5)少用全局变量,缓存DOM节点查找的结果,减少I/O读取操作 (6)避免使用CSS表达式,它又称动态属性, (7)预加载图片,将样式表放在顶部,将脚本放在底部,加上时间戳。...(1)对于资源加载,按需加载和异步加载 (2)首次加载的资源不超过1024KB,即越小越好。 (3)压缩HTML、CSS、 JavaScript文件。 (4)减少DOM节点。...使用 join( )拼接长字符串,而不要使用“+”拼接字符串,这有助于性能优化,特别是处理长字符串的时候。 (6)合理利用HTML5中的data属性。...HTML5中的data属性有助于插入数据,特别是前、后端的数据交换;jQuery的 data( )方法能够有效地利用HTML5的属性来自动获取数据。 21、哪些方法能提升移动端CSS3动画体验?

    2K20

    21道关于性能优化的面试题(附答案)

    HTML代码:避免图片和 iFrame等src属性为空。src属性为空,会重新加载当前页面,影响速度和效率,尽量避免在HTML标签中写 Style属性 4、移动端性能如何优化? 优化方式如下。...(5)少用全局变量,缓存DOM节点查找的结果,减少I/O读取操作 (6)避免使用CSS表达式,它又称动态属性, (7)预加载图片,将样式表放在顶部,将脚本放在底部,加上时间戳。...(7)尽量使用id、 class选择器设置样式(避免使用 style属性设置行内样式) (8)尽量使用CSS3动画。 (9)减少重绘和回流。 12、针对HTML,如何优化性能? 具体方法如下。...(1)对于资源加载,按需加载和异步加载 (2)首次加载的资源不超过1024KB,即越小越好。 (3)压缩HTML、CSS、 JavaScript文件。 (4)减少DOM节点。...HTML5中的data属性有助于插入数据,特别是前、后端的数据交换;jQuery的 data( )方法能够有效地利用HTML5的属性来自动获取数据。 21、哪些方法能提升移动端CSS3动画体验?

    2.1K20

    CSS引入方式

    内联样式比外部样式具有更高的优先级,可以覆盖外部样式。 可以在不更改直接主CSS样式表的情况下更改样式,直接将规则添加到元素。...> 特点 CSS与HTML一起作为一个文件,不需要额外的HTTP请求 适合于动态样式,对于不同的用户从数据库加载不同样式嵌入到页面 不足 嵌入样式不能被浏览器缓存并重新用于其他页面 链接方式 HTML文件被加载时,引用的文件会同时被加载,而@import引用的文件则会等页面全部下载完毕再被加载,所以有时候浏览@import加载CSS的页面时会没有样式,也就是闪烁现象,网速慢的时候就比较明显...与@import混用可能会对网页性能有负面影响,在一些低版本IE中与@import混用会导致样式表文件逐个加载,破坏并行下载的方式导致页面加载变慢。...此外无论是哪种浏览器,若在中引入的CSS中继续使用@import加载外部CSS,同样会导致顺序加载而不是并行加载,因为浏览器需要先解析引入的CSS发现@import外部CSS后再次引入外部

    2K30

    jquery面试题目_高并发面试题

    另一方面,jQuery ready() 函数只需对 DOM 树的等待,而无需对图像或外部资源加载的等待,从而执行起来更快。...你是如何将一个 HTML 元素添加到 DOM 树中的?(答案如下) 你可以用 jQuery 方法 appendTo() 将一个 HTML 元素添加到 DOM 树中。...你如何使用jQuery来提取一个HTML 标记的属性 例如. 链接的href? (答案) attr() 方法被用来提取任意一个HTML元素的一个属性的值....你如何使用jQuery设置一个属性值? (答案) 前面这个问题之后额外的一个后续问题是,attr()方法和jQuery中的其它方法一样,能力不止一样....你也还可以看看 用来向DOM中添加元素的 appendTo() 方法. 15. 你如何利用jQuery来向一个元素中添加和移除CSS类?

    10K10
    领券