首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery学习笔记——jQuery基础

(2)jQuery书写 简写形式: $(function() { // 页面DOM加载后执行代码}); 完整形式...: $(document).ready(function() { // 页面DOM加载完成后执行代码 }); (3)jQuery加载事件 对比 window.onload $(document...).ready() 执行时机 必须等待网页中所有内容加载完成后才能执行 网页中所有DOM绘制完成后就执行,可能关联内容并未加载完成 编写个数 不能编写多个 能编写多个,依次执行 简化写法 无 $0...名称 用法 描述 id选择器 $("#id") 获取指定id元素 全选择器 $("*") 匹配所有元素,*为正则表达式 类选择器 $(".class") Index页面的结构文件获取同一类clas元素...标签选择器 $("div") 获取相同标签名所有元素 并集选择器 $("div,p,li") 选取多个元素 交集选择器 $("li .current") 交集元素 如下,控制台输入 $ ('.class

14.1K10

25个常规方法优化你jquery代码

浏览器不能同时加载JS脚本(大多数情况下),这意味着如果你同一时间加载很多脚本的话,将减缓页面加载速度。因此,如果每个页面都要加载这些脚本,你应该考虑发布之前将这些脚本整合成一个稍大JS脚本。...页面加载一瞬间你将会看到页面的闪动,但是特定情况下你有很多重复HTML内容,这时通过这个方法你可以显著减小页面代码体积,减少无关且重复标记能使你SEO从中受益。 ...使用noConflict重命名jQuery对象 大多数JavaScript框架都使用$符号作为缩写,当在同一页面使用多个JS框架时,页面很容易发生冲突。幸运是有一个简单方法。...总是使用最新版本jQuery仍在不断更新,它作者John Resig一直寻找提高jQuery性能方法。...jQuery当前版本是1.3.2,John已经宣称他正在写一个新选择器引擎Sizzle,这可能会显著提高选择器性能(Firefox中提升了4倍),因此我们应当保持最新版本。 22.

1.6K10
您找到你想要的搜索结果了吗?
是的
没有找到

Wijmo 更优美的jQuery UI部件集:发现 Wijmo

jQuery 语法 jQuery 语法设计目的是让开发人员可以轻松选择一个或者多个DOM元素,然后对选中一个或者多个元素进行操作。...例如: $(function() { //文件准备完成后做一些事情。 }); 所有位于 $(document).ready 函数内脚步将会在DOM加载加载,并且会在页面内容加载之前完成。...如果你位于印度或者中国,即使是访问同一页面,内容也会来自于最接近你所在位置服务器。当web浏览器加载内容时,它们通常会检查是否已经拥有一份该文件缓存。通过使用CDN,你可以从中受益。...如果某个用户曾经通过同一个CDN访问过一个站点,他们将在他们机器上保留一份文件缓存版本。你所访问页面加载更快,因为支持内容无需再次下载。 Wijmo 从最开始就支持了CDN。...你所要做只是为每一个工程链接到内容传送网络(CDN): 注意:: 请从CDN引用依赖最新版本自http://www.wijmo.com/downloads/cdn。 <!

2.7K90

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

() 函数用于将任何对象包裹成 jQuery 对象,接着你就被允许调用定义 jQuery 对象上多个不同方法。你甚至可以将一个选择器字符串传入   2....如果加载图片和媒体内容花费了大量时间,用户就会感受到定义 window.onload 事件上代码执行时有明显延迟。   ...好吧,除了报错节省服务器带宽以及更快下载速度这许多好处之外, 最重要是,如果浏览器已经从同一个CDN下载类相同 jQuery 版本, 那么它就不会再去下载它一次....() 函数用于将任何对象包裹成 jQuery 对象,接着你就被允许调用定义 jQuery 对象上多个不同方法。你甚至可以将一个选择器字符串传入   2....好吧,除了报错节省服务器带宽以及更快下载速度这许多好处之外, 最重要是,如果浏览器已经从同一个CDN下载类相同 jQuery 版本, 那么它就不会再去下载它一次.

13.7K30

2.基础核心学习

一,代码风格 jQuery程序中,不管是页面元素选择、内置功能函数,都是美元符号“$”来起 始。...而这个“$”就是jQuery当中最重要且独有的对象:jQuery对象=属性+方法,所以我们页面元 素选择或执行功能函数时候可以这么写:  $(function(){}); //执行一个匿名函数 $(...二,.加载模式  jQuery库文件是body元素之前加载,我们必须等待所 有的DOM元素加载后,延迟支持DOM操作,否则就无法获取到。 ...对象,可以这么处理: alert($('#box').get(0)); //ID 元素第一个原生 DOM 四,多个库之间冲突  当一个项目中引入多个第三方库时候,由于没有命名空间约束(命名空间就好比同...一个目录下文件夹一样,名字相同就会产生冲突),库与库之间发生冲突在所难免。

32820

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

5、如何对网站文件进行优化? 可以进行文件合并、文件压缩使文件最小化;可以使用CDN托管文件,让用户更快速地访问;可以使用多个域名来缓存静态文件。 6、请说出几种缩短页面加载时间方法。...为了保证数据分析同一使用场景下真实性,一定要使用真机,因为此时模拟器Mac上运行,而Mac上CPU往往比iOS设备要快。 11、针对CSS,如何优化性能? 具体优化方法如下。...20、jQuery性能优化如何做? 优化方法如下。 (1)使用最新版本 jQuery类库。...JQuery类库每一个新版本都会对上一个版本进行Bug修复和一些优化,同时也会包含一些创新,所以建议使用最新版本 jQuery类库提高性能。...当需要给多个元素绑定相同回调函数时,建议使用事件委托模式。 (5)使用join( )来拼接字符串。

1.6K20

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

5、如何对网站文件进行优化? 可以进行文件合并、文件压缩使文件最小化;可以使用CDN托管文件,让用户更快速地访问;可以使用多个域名来缓存静态文件。 6、请说出几种缩短页面加载时间方法。...为了保证数据分析同一使用场景下真实性,一定要使用真机,因为此时模拟器Mac上运行,而Mac上CPU往往比iOS设备要快。 11、针对CSS,如何优化性能? 具体优化方法如下。...20、jQuery性能优化如何做? 优化方法如下。 (1)使用最新版本 jQuery类库。...JQuery类库每一个新版本都会对上一个版本进行Bug修复和一些优化,同时也会包含一些创新,所以建议使用最新版本 jQuery类库提高性能。...当需要给多个元素绑定相同回调函数时,建议使用事件委托模式。 (5)使用join( )来拼接字符串。

1.7K20

【Hybrid开发高级系列】WebPack模块化专题

# 具体页面    │  │  └─login# 具体页面         由于每一个入口文件都相当于entry里,因此这样一地来写实在是有点繁琐,我就稍微写了点代码来拼接这entry:...2、[hash],指代本次编译一个hash版本,值得注意是,只要是同一次编译过程中生成文件,这个[hash]值就是一样缓存层面来说,相当于一次全量替换。     ...3、[chunkhash],指代是当前chunk一个hash版本,也就是说,同一次编译中,每一个chunkhash都是不一样;而在两次编译中,如果某个chunk根本没有发生变化,那么该chunk...3、各个页面中,先加载Dll文件,再加载业务代码文件。...2.12 集成低版本jQuery1.9.1         本项目中比较特殊,因为对于第三方类库统一采用了dll单独打包方式,但由于jQuery不支持CDM,所以打包采用extenal形式打包

32750

webpack 构建之 splitChunks 优化与 manifest

最近一个需求需要给页面资源增加 md5 版本号,我正好借着这个机会,把项目里 webpack 配置都重新梳理了一遍。...jquery,所以 jquery 引用次数为 2,满足 default 分包 minChunks 值,所以 jquery 被抽离出来了。...打包结果: 可以看到,虽然 entry1.js 和其动态加载 page1.js 都引入了 jquery ,但是并没有分离出 jquery chunk 包,所以 minChunks 不会将动态加载模块中引入模块算进来...4. manifest 一次需求中,由于缓存问题,新修改页面发布后,用户不清除缓存的话,无法获得新页面,所以需要给其页面资源增加 md5 版本号。...也就是说要在一个项目中,导入另一个项目带有 hash 值文件,那每次打包 hash 值都不同,我们怎么知道要请求文件 hash 值呢?

1.6K10

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

初次加载时耗时多;页面复杂度提高很多。 21、Vue 项目中为什么要在列表组件中写 key,其作用是什么?...命名空间: 默认情况下,模块内部 action、mutation、getter 是注册全局命名空间 — 这样使得多个模块能够对同一 mutation 或 action 做出响应。..., 这些数据只有同一个会话中页面才能访问并且当会话结束后数据也随之销毁。..., 但不会改变页面布局,但是不会触发该元素已经绑定事件 display=none,把元素隐藏起来,并且会改变页面布局, 可以理解成页面中把该元素删除掉一样 css 预处理器 less sass <...defer是html解析完毕才执行,如果有多个则按加载顺序执行 async是加载完毕后立即执行,如果是多个,执行顺序与加载顺序无关 4、预加载? 开发中,可能会遇到这样情况。

6.6K10

12个用得着JQuery代码片段

导航菜单背景切换效果 项目的前端页面里,相对于其它导航菜单,激活导航菜单需要设置不同背景。...('.tclass').removeClass('tclass');; }); 2.反序访问JQuery对象里元素 某些场景下,我们可能需要反序访问通过JQuery选择器获取到页面元素对象...$this.val('请搜索...') : null; }); 5.部分页面加载更新 为了提高web性能,有更新时我们通常不会加载整个页面,而只是仅仅更新部分页面内容,如图片延迟加载等。...页面部分刷新特效JQuery中也很容易实现: setInterval(function() { //每隔5秒钟刷新页面内容 //获取内容将增加到 id为content元素后...有些网站网页内容不是一次性加载完毕,而是鼠标向下滚动时动态加载,这是怎么做到呢?

1.1K50

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

一旦你适应了,你会爱上它简洁。() 函数用于将任何对象包裹成 jQuery 对象,接着你就被允许调用定义 jQuery 对象上多个不同方法。你甚至可以将一个选择器字符串传入 2....ready() 函数用于文档进入ready状态时执行代码。当DOM 完全加载(例如HTML被完全解析DOM树构建完成时),jQuery允许你执行代码。...如果加载图片和媒体内容花费了大量时间,用户就会感受到定义 window.onload 事件上代码执行时有明显延迟。...使用 jQuery $(document).ready() 另一个优势是你可以在网页里多次使用它,浏览器会按它们 HTML 页面里出现顺序执行它们,相反对于 onload 技术而言,只能在单一函数里使用...好吧,除了报错节省服务器带宽以及更快下载速度这许多好处之外, 最重要是,如果浏览器已经从同一个CDN下载类相同 jQuery 版本, 那么它就不会再去下载它一次.

9.4K10

一些好用jquery技巧

6、禁用输入字段 有时候,你可能想要禁用表格提交按钮或它某一文字输入直到用户执行了特定操作(例如,勾选“我已阅读相关条款”复选框)。...,也不想要重新加载页面——你可能希望链接做点别的事情,例如说触发一些其他脚本。...next.slideToggle('fast'); $('.content').not(next).slideUp('fast'); return false; }); 通过添加这个脚本,你真正需要做仅仅是页面上添加必要.../窗口打开外部链接 一个新浏览器tab或窗口中打开外部链接,并确保同一个来源链接能在同一个tab或者窗口中打开: $('a[href^="http"]').attr('target', '_blank...15、链式插件调用 jQuery允许“链式”插件方法调用,以减轻反复查询DOM并创建多个jQuery对象过程。

3.9K60

seajs简记

常用 API seajs.config base string    Sea.js 解析顶级标识时,会相对 base 路径来解析  seajs.use 用来页面加载模块 require...是一个方法,接受 模块标识 作为唯一参数,用来获取其他模块提供接口 require 参数值 必须 是字符串直接量 require.async require.async 方法用来模块内部异步加载模块.../b', function(b) { 5 b.doSomething(); 6 }); 7 8 // 异步加载多个模块,加载完成时,执行回调 9 require.async...顶级标识:顶级标识不以点(.)或斜线(/)开始, 会相对模块系统基础路径(即 Sea.js  base 路径)来解析 四、 使用步骤 引入sea.js文件(方法与引用jQuery相同) 配置信息 .../path/to/base/', 36 37 // 文件编码 38 charset: 'utf-8' 39 }); 配置sea.js基础路径  及加载模块 1 通过 use 方法,可以页面加载任意模块

1.4K20

jQuery中on()、bind()、live()、delegate()之间区别

及其以上版本jquery1.7版本出现之后用于替代bind(),live()绑定事件方式; event 必需;添加到元素一个或多个事件,例如 click,dblclick等; 单事件处理:例如...利用大括号灵活定义多事件,例如 $(selector).bind({event1:function, event2:function, ...}); 空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况...; 大括号替代方式:绑定较为灵活,可以给事件单独绑定函数; data 可选;需要传递参数; function 必需;当绑定事件发生时,需要执行函数;适用所有版本,但是根据官网解释,自从jquery1.7...它会绑定事件到所有的选出来元素上 它不会绑定到它执行完后动态添加那些元素上 当元素很多时,会出现效率问题 当页面加载时候,你才可以进行bind(),所以可能产生效率问题 2 .live()...而和.live()相同地方在于都是用event delegation; 优点 你可以选择把事件绑定到对应元素上 chaining被正确支持了 jQuery仍然需要迭代查找所有的selector/event

1.2K30

Webpack入门

但实际项目中,可能会有很多个第三方类库或者框架,可以将它们打包到一起。 改写list.js: var text = require("....因为list.html是一个空页面,不包含id为container元素。因此,并不会加载jquery。再次执行webpack,打开list.html会发现页面没有再插入script标签。...如果想将公共js打包到同一个js文件中,然后手动添加到页面中,则可以使用CommonsChunkPlugin插件。...当你频繁刷新页面时,会发现在脚本加载完成前,页面是默认白色,等到脚本加载完成后才变成灰色。 对一个Web组件而言,它应当包含HTML结构,CSS样式表,JS脚本控制行为,还可能包含字体和图片。...然后再次运行webpack,成功后可以看到dist/css下生成css。如此一来,就可以目中编写scss文件了。

1.7K20

前端JS-SDK那些事

js资源,加载方式使用异步加载 这里考虑到当你使用异步加载时候,将会出现,页面函数无法正常调用SDK方法情况,也就是当调用发生在脚本加载之前执行了,那如何包装让SDK正常执行?...同步模式: script标签不带defer或async属性,脚本获取与执行都是同步进行,页面会被阻塞,浏览器都会按照元素页面中出现先后顺序对他们依次进行解析加载 异步模式:<script...defer与async区别 : defer 是“渲染完再执行”,async 是“下载完就执行" async和defer不同之处是async加载完成后会自动执行脚本,defer加载完成后需要等待页面加载完成才会执行代码...通常情况下,我们会有不同方式来声明SDK版本,这取决于具体针对业务和设计。...如何打包 打包是sdk上线必不可少流程,项目用了Rollup作为工具打包,Rollup 将所有资源放在同一个地方,一次性加载,利用tree-shake特性来剔除项目中未使用代码,减少冗余,相比其他

4K10
领券