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

jQuery学习笔记

选择器允许基于元素的id、class、type、属性、属性值等选择方法来找到指定的HTML元素 jQuery事件: |Event 函数 |绑定函数至 | |$(document...|触发、或将函数绑定到指定元素的 submit 事件 | |toggle() |绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。...删除元素的class加载 empty() 删除被选元素的子元素 jQuery CSS 获取/设置 addClass() 向被选元素添加一个或多个Class类 removerClass() 从被选元素中删除指定的一个或多个...,后台加载数据并显示在页面上 AJAX菜鸟教程 jQuery ajax()方法 AJAX load() load() 从服务器加载数据,并返回数据 常常利用:调用一个重复的代码块,例如网页的导航...-- URL:加载的数据文件位置uRL data:与URL加载请求一起发送的字符串键/值对集合 callback:执行完毕后调用的函数 - responseTxt : 调用成功的结果 -

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

    jQuery 教程

    您可以使用以下方法: 从 jquery.com 下载 jQuery 库 从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery 下载 jQuery 有两个版本的 jQuery 可供下载...独立文件中使用 jQuery 函数 如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。...jQuery text() 和 html() – 设置内容并使用回调函数 使用 text() 和 html() 设置内容并使用回调函数 jQuery attr() – 设置属性值 使用 jQuery...jQuery attr() – 设置属性值并使用回调函数 设置属性值 + 并使用回调函数调用attr()....jQuery load() 异步载入文件内容中指定的元素内容并插入到 元素. jQuery load() – 使用回调函数(callback) 使用 jQuery load() 方法的回调函数

    17K20

    前端开发面试题答案(四)

    25、js延迟加载的方式有哪些? defer和async、动态创建DOM方式(用得最多)、按需异步载入js 26、Ajax 是什么? 如何创建一个Ajax?...的扩展,就是为jquery类添加成员函数 使用: jquery.extend扩展,需要通过jquery类来调用,而jquery.fn.extend扩展,所有jquery实例都可以直接调用。...setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。...闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环) 43、JQuery一个对象可以同时绑定多个事件,这是如何实现的?...* 多个事件同一个函数: $("div").on("click mouseover", function(){}); * 多个事件不同函数 $("div").on({ click

    2.2K20

    JavaScript异步编程设计快速响应的网络应用

    // 支持多个事件,共享一个处理函数 // 多个事件使用“逗号、空格、分号”间隔 var nameList = names.split(/[\,\s\;]/);...六、异步的脚本加载 在文档 上述加载js为同步阻塞加载(脚本下载完毕并运行之后,浏览器才会加载后续资源),为了避免一些不必要的问题...脚本的延迟运行 其相当于告知浏览器:“请马上开始加载这个脚本,但是,请等到文档就绪且所有此前具有defer属性的脚本都结束运行之后再运行它...” 在文档标签里放入延迟脚本,既能带来脚本置于标签时的全部好处,又能让大文档的加载速度大幅提升。...注意: (1)在同时支持这两个属性的浏览器中使用,async会覆盖掉defer。 (2)使用异步或延迟加载的脚本中,不能使用document.write,其会表现出不可预知的行为。 3.

    2.1K31

    前端面试宝典 v1

    寄生组合式继承 53、eval是做什么的? 1. 它的功能是把对应的字符串解析成JS代码并运行 2....(1)实现js文件的异步加载,避免网页失去响应; (2)管理模块之间的依赖性,便于代码的编写和维护。 65、谈一下JS中的递归函数,并且用递归简单实现阶乘?...1、尽量减少 HTTP 请求 2、使用浏览器缓存 3、使用压缩组件 4、图片、JS的预载入 5、将脚本放在底部 6、将样式文件放在页面顶部 7、使用外部的JS和CSS 8、精简代码 68、在JS中有哪些会被隐式转换为...(6) 避免使用CSS Expression(css表达式)又称Dynamicproperties(动态属性)。 (7) 图片预加载,将样式表放在顶部,将脚本放在底部 加上时间戳。...写一个php函数,要求两个日期字符串的天数差,如2012-02-05~2012-03-06的日期差数 28. 一个衣柜中放了许多杂乱的衬衫,如果让你去整理一下,使得更容易找到你想要的衣服;你会怎么做?

    2.4K41

    40道+JavaScript基础面试题(附答案)

    3、 jQuery使用建议 1) 尽量减少对dom元素的访问和操作 2) 尽量避免给dom元素绑定多个相同类型的事件处理函数,可以将多个相同类型事件 处理函数合并到一个处理函数,通过数据状态来处理分支...JS的延迟加载有助与提高页面的加载速度。 defer和async、动态创建DOM方式(用得最多)、按需异步载入JS defer:延迟脚本。...立即下载,但延迟执行(延迟到整个页面都解析完毕后再运行),按照脚本出现的先后顺序执行。 async:异步脚本。下载完立即执行,但不保证按照脚本出现的先后顺序执行。 23、 同步和异步的区别?...同源策略就是用来限制从一个源加载的文档或脚本与来自另一个源的资源进行交互。那怎样判断是否是同源呢? 如果协议,端口(如果指定了)和主机对于两个页面是相同的,则两个页面具有相同的源,也就是同源。...(或者:请求资源的时候不要带cookie怎么做) 通过使用多个非主要域名来请求静态文件,如果静态文件都放在主域名下,那静态文件请求的时候带有的cookie的数据提交给server是非常浪费的,还不如隔离开

    1.1K10

    如何编写自己的jQuery插件?

    要理解jQuery是如何工作的,你需要遵循以下步骤: · 创建一个带有所有基本标记的HTML文档,并调用jQuery.js文件。...· 开发人员预先考虑并将代码的可执行命令封装到onload()函数中,以确保在将文档加载到浏览器后立即执行命令。 · 有时,由于图像加载的延迟,文档不会完整加载。...为了确保加载后可以处理完整的文档,开发人员在其代码中提供了一个ready事件。 · ready事件的完整脚本(封装在其中的函数)放在前面创建的HTML文档中。...最后一行调用插件函数将所有带有a“标签的链接变为黄色。 保护$Alias并添加作用域 编写jQuery插件时总是假定$使用jQuery函数的别名。$在JavaScript库中非常有名。...因此,当需要多个jQuery库时,使用$可能会产生冲突。因此,为了使我们能够将jQuery与其他插件一起使用。必须将代码放在立即调用函数的表达式中。这之后是jQuery的传递,然后命名它的参数$.

    1.7K10

    jQuery (二)

    ./1.html') 当然也可以加载一部分 // 加载并显示天气报告的温度部分 $('temp').load('wheather_report.html #temperature') ps 同源 load...,或未成功,将会调用该函数 Ajax工具函数 jQuery.getScript() 将会异步的加载一段脚本 同样受到同源的限制 第一个参数为url,第二个参数为运行完成以后将要执行的回调函数 jQuery.getScript...('js/js_jquery.js', () => { $('div').js_jquery(); // 直接使用加载的类库 }) 底层是使用XMLHttmpRequest对象来获取将要执行的脚本内容...为js文件请求 json 为请求json数据的文件 jsonp 为请求jsonp的 jQuery的ajax函数 需要传入一个对象 一些选项 type 指定http的请求方法 get或者post...不能污染命名空间,请在jquery上定义一个方法即可,如果有多个方法,请直接使用前缀 如果有事件需要绑定,使用插件名作为命名空间,然后放在插件名中,即,不能使用全局的 如果插件需要使用data()方法关联数据

    9.3K30

    【春节日更】JS延迟加载的几种方式

    面试中,经常被问到: “JS延迟加载的几种方式” 今天,我们就来分享下JS延迟加载的方式 JS延迟加载,也就是等页面加载完成之后再加载 JavaScript 文件。...一般有以下几种方式: defer 属性 async 属性 动态创建DOM方式 使用jQuery的getScript方法 使用setTimeout延迟方法 让js最后加载 1. defer...HTML5规范要求脚本按照它们出现的先后顺序执行。在现实当中,延迟脚本并不一定会按照顺序执行。 defer属性只适用于外部脚本文件。支持 HTML5 的实现会忽略嵌入脚本设置的 defer属性。...使用jQuery的getScript()方法 $.getScript("outer.js",function(){ //回调函数,成功获取文件后执行的函数 console.log...使用setTimeout延迟方法 6.让JS最后加载 把js外部引入的文件放到页面底部,来让js最后引入,从而加快页面加载速度 参考: https://blog.csdn.net/meijory/article

    1.9K30

    《JavaScript 模式》读书笔记(8)— DOM和浏览器模式2

    假定网页使用了jQuery库,这是一个js文件。然后需要使用一些jQuery插件,每个插件都是一个独立的文件。这样在编写代码前,就拥有了4~5个文件。...元素的位置 脚本元素会阻止下载网页内容。浏览器可以同时下载多个组件,但一旦遇到一个外部脚本文件后,浏览器会停止进一步下载,直到这个脚本文件狭隘、解析并执行完毕。...这时,请使用按需加载模式。可以创建一个require()方法,该方法包含需要按需加载的脚本的名称和当附加脚本加载后需要执行的回调函数。   ...预加载JavaScript 在延迟加载模式和按需加载模式中,我们延迟加载当前页面需要的脚本。此外,还可以延迟加载当前页面不需要,但是在后续页面中可能需要的脚本。...以及,在加载大脚本文件时为了提高命中率,介绍了各种模式,包括延迟加载、预加载和按需加载JavaScript等。

    98930

    《JavaScript 模式》读书笔记(8)— DOM和浏览器模式2

    假定网页使用了jQuery库,这是一个js文件。然后需要使用一些jQuery插件,每个插件都是一个独立的文件。这样在编写代码前,就拥有了4~5个文件。...元素的位置 脚本元素会阻止下载网页内容。浏览器可以同时下载多个组件,但一旦遇到一个外部脚本文件后,浏览器会停止进一步下载,直到这个脚本文件狭隘、解析并执行完毕。...这时,请使用按需加载模式。可以创建一个require()方法,该方法包含需要按需加载的脚本的名称和当附加脚本加载后需要执行的回调函数。   ...预加载JavaScript 在延迟加载模式和按需加载模式中,我们延迟加载当前页面需要的脚本。此外,还可以延迟加载当前页面不需要,但是在后续页面中可能需要的脚本。...以及,在加载大脚本文件时为了提高命中率,介绍了各种模式,包括延迟加载、预加载和按需加载JavaScript等。

    1.1K20

    JS异步加载的三种方式

    可以同时使用async和defer,这样IE 4之后的所有IE都支持异步加载。 没有async属性,script将立即获取(下载)并执行,期间阻塞了浏览器的后续处理。...三:延迟加载 有些JS代码在某些情况在需要使用,并不是页面初始化的时候就要用到。延迟加载就是为了解决这个问题。...将JS切分成许多模块,页面初始化时只加载需要立即执行的JS,然后其它JS的加载延迟到第一次需要用到的时候再加载。类似图片的延迟加载。 JS的加载分为两个部分:下载和执行。...解决思路:为了解决JS延迟加载的问题,可以利用异步加载缓存起来,但不立即执行,需要的时候在执行。如何进行缓存呢?...JS延迟加载机制(LazyLoad):简单来说,就是在浏览器滚动到某个位置在触发相关的函数,实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢?

    3.3K20

    前端 实战项目·动态加载 JS 文件

    动态加载 JS 文件 对于 Vue、React 等框架开发的单页面应用,在某些页面开发特殊功能时经常需要依赖第三方 JS 文件,如果在全局引入 CDN 资源可能会加载冗余文件,此时最好使用动态加载方式...defer 与 async 元素有两个属性 defer 与 async 分别代表两种 JS 脚本的加载执行模式。...在有 async 的情况下,js 一旦下载好了就会执行,所以很有可能不是按照原本的顺序来执行的。如果多个脚本文件前后具有相互依赖性,用 async 就很有可能出错。...,也不一定会在 DOMContentLoaded 事件触发前执行,因此仅使用 defer 来控制脚本文件的执行顺序有很大的风险,但可以通过监听 onload 事件来判断文件是否加载完成,配合 Promise...等待上一个脚本文件加载完成后再加载下一个文件,从而实现按次序加载执行脚本。

    5.4K40

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

    () 函数用于将任何对象包裹成 jQuery 对象,接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入   2....如果加载图片和媒体内容花费了大量时间,用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。   ...另一方面,jQuery ready() 函数只需对 DOM 树的等待,而无需对图像或外部资源加载的等待,从而执行起来更快。...() 函数用于将任何对象包裹成 jQuery 对象,接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入   2....如果加载图片和媒体内容花费了大量时间,用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。

    13.8K30

    30分钟学会前端模块化开发

    根据CommonJS规范,一个单独的文件就是一个模块。加载模块使用require方法,该方法读取一个文件并执行,最后返回文件内部的exports对象。...官网:http://www.requirejs.cn requireJS主要解决两个问题: 1 多个js文件可能有依赖关系,被依赖的文件需要早于依赖它的文件加载到浏览器。...在页面上使用require函数加载模块; require([dependencies], function(){}); require()函数接受两个参数: ——第一个参数是一个数组,表示所依赖的模块;...shims——配置在脚本/模块外面并没有使用RequireJS的函数依赖并且初始化函数。...接收两个参数第一个是文件依赖(单个用字符串数组都可以,多个需用数组表示),第二个是回调函数。 加载单个依赖 //加载模块 main,并在加载完成时,执行指定回调 seajs.use('.

    4K50

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

    请求数量:合并样式和脚本,使用CSS图片精灵,初始首屏之外的图片资源按需加载,静态资源延迟加载。 请求带宽:压缩文件,开启GZIP 。 CSS代码:避免使用CSS表达式、高级选择器、通配选择器。...过度使用会使手机耗电量増加。 5、如何对网站的文件进行优化? 可以进行文件合并、文件压缩使文件最小化;可以使用CDN托管文件,让用户更快速地访问;可以使用多个域名来缓存静态文件。...(1)优化图片 (2)选择图像存储格式(比如,GIF提供的颜色较少,可用在一些对颜色要求不高的地方) (3)优化CSS(压缩、合并CSS) (4)在网址后加斜杠 (5)为图片标明高度和宽度(如果浏览器没有找到这两个参数...(3)合并静态资源(减少HTTP请求) (4)把多个CSS合并为一个CSS,把图片组合成雪碧图。 (5)开启服务器端的Gzip压缩(对文本资源非常有效)。 (6)使用CDN(对公开库共享缓存)。...当需要给多个元素绑定相同的回调函数时,建议使用事件委托模式。 (5)使用join( )来拼接字符串。

    1.7K20

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

    请求数量:合并样式和脚本,使用CSS图片精灵,初始首屏之外的图片资源按需加载,静态资源延迟加载。 请求带宽:压缩文件,开启GZIP 。 CSS代码:避免使用CSS表达式、高级选择器、通配选择器。...过度使用会使手机耗电量増加。 5、如何对网站的文件进行优化? 可以进行文件合并、文件压缩使文件最小化;可以使用CDN托管文件,让用户更快速地访问;可以使用多个域名来缓存静态文件。...(1)优化图片 (2)选择图像存储格式(比如,GIF提供的颜色较少,可用在一些对颜色要求不高的地方) (3)优化CSS(压缩、合并CSS) (4)在网址后加斜杠 (5)为图片标明高度和宽度(如果浏览器没有找到这两个参数...(3)合并静态资源(减少HTTP请求) (4)把多个CSS合并为一个CSS,把图片组合成雪碧图。 (5)开启服务器端的Gzip压缩(对文本资源非常有效)。 (6)使用CDN(对公开库共享缓存)。...当需要给多个元素绑定相同的回调函数时,建议使用事件委托模式。 (5)使用join( )来拼接字符串。

    1.8K20

    InstantClick,让你的网站快到起飞,PJAX技术

    技术来更改页面内容,这意味着: 你不能依赖DOMContentLoaded和jQuery.ready()这两个函数来触发相关事件(这两个事件在刷新整个页面的时候才会触发,但是你可以使用[InstantClick...’s events]()来替代) 依赖上面两个函数的第三方脚本(比如js代码)需要调整(参阅[事件和脚本的重新加载]()) 在加载页面的时候,浏览器不会在显示原本加载进度条了,instantclick...InstantClick在后台中从当前链接的位置到的位置,遍历所有的父元素,如果找到data-no-instant属性,它就会认为该链接已经被列入黑名单,并停止循环遍历父元素。...如果你想在页面显示之前改变页面内容,你可以修改这两个参数并返回一个对象(或者只修改其中的一个参数)。...当您有多个回调函数监听receive函数时,每个后续回调将获得最后更改的内容。 如果你不想修改页面内容,则不用返回任何内容或返回false。

    3.7K20
    领券