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

jQuery 教程

您是否很疑惑为什么我们没有在 标签中使用 type=”text/javascript” ? 在 HTML5 中,不必那样做了。...该事件方法在 jQuery 语法 章节中已经提到过。 click() click() 方法是当按钮点击事件被触发时会调用一个函数。 该函数在用户点击 HTML 元素时执行。...当鼠标移动到元素上时,会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时,会触发指定的第二个函数(mouseleave)。...inArray() 在数组中查找指定值并返回它的索引值(如果没有找到,则返回-1) $.isArray() 判断指定参数是否是一个数组 $.isEmptyObject() 检查对象是否为空(不包含任何属性...在创建一个 Deferred 对象之后,您可以使用以下任何方法,直接链接到通过调用一个或多个的方法创建或保存的对象。

21K20

onload 和 domready

事件就会迟迟无法触发 所以出现了 DOM Ready 事件 熟悉 jQuery的人,都知道 DomReady 事件 $(document).ready(function(){ alert("jQuery...文档准备好以后触发,包含在 HTML5 标准中 对于支持此事件的浏览器,直接使用 DOMContentLoaded 事件是最简单最好的选择 IE6,7,8 都不支持 DOMContentLoaded...){ alert("图片 id 为 imgID 加载完毕"); } Dom Ready 和 Dom Load 两者的区别 1、Dom Ready 是在 dom 加载完成后就可以直接对 dom 进行操作...,比如一张图片只要 img 标签完成,不用等这个图片加载完成,就可以设置图片的宽高的属性或样式等; 2、Dom Load 是在整个 document 文档(包括了加载图片等其他信息)加载完成后就可以直接对...dom 进行操作,比如加载一张图片,要等这个图标加载完成之后才能设置图片的宽高的属性或样式等; onreadystatechange 事件 onreadystatechange 事件与 onload

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

    window的onload事件和domcontentloaded执行顺序

    , layer, window 对于这些标签比如iframe 、img 、script标签,image对象等等,我们用的很多,都是在相应的元素加载完成之后执行的事件。...当window.onload事件触发时,页面上所有的DOM,样式表,脚本,图片,flash都已经加载完成了。...window.onload和body中onload 我们在写代码的过程中经常也会在body标签上添加onload,那么documentloded,window.onload和body中onload哪一个会先执行哪一个会后执行呢...相反,DOMContentLoaded事件触发后添加的事件侦听器永远不会执行。 浏览器还在对象load上提供事件window。当此事件触发时,表示页面上的所有资源都已加载,包括图像。...可以在jQuery中使用查看此事件$( window ).on( "load", handler )。如果代码依赖于加载的资源(例如,如果需要图像的尺寸),则应将代码放在load事件的处理程序中。

    4.4K10

    前端知识普及之页面加载

    从微观上分的话,页面加载有两部分 一个是以DOMContentLoaded触发为标志的DOM树的渲染完成 一个是以辅助资源img,font加载完成为触发标志的onload事件 他们两个的具体区别就是"资源的加载...里面需要进行一点解释 即DOMContentLoaded事件 是在domContentLoaded那段触发的。...//计算load触发时间 var loadTime = t.domComplete - t.domLoading; 更直观的,我们可以在Chrome的developer工具的network选项里面得到我们想要的答案...另外为complete时, 这时候图片等相关资源已经加载完成。 这个时候模拟触发DOMContentLoaded事件,其实和onload事件触发时间并没有太久的时间距离。...--jQuery.readyWait : jQuery.isReady) { //判断页面是否已完成加载并且是否已经执行ready方法 //通过isReady状态进行判断

    2K90

    jQuery (二)

    function () { $(this).css('background-color', 'gray'); }); 效果 [20180821_175532.gif] 或者使用第二个参数,添加相关的属性,完成事件的相关触发...实时事件 实时事件为,如果先前将所有a元素绑定了一个事件,接着在创建一个新的a的节点,如果此时触发事件,则新创建的a元素不会被触发事件,因为绑定的不是实时的事件。...> { $('span').fadeIn(100); }); return false; }) 当发生click事件的时候,会先回调click内的事件,发生动画,在等待3000秒的时候,继续回调下一个函数...钩子 async 指定同步 dataFileter 过滤或者预处理服务器返回的数据 ajax事件 ajax还会在请求的时候,触发相应的事件 这个用于在请求某些图片的时候,在图片仍旧继续下载的时候,使用相应的时间...文件命名需要使用jquery.plugin.js jQuery的UI库 https://jqueryui.com/ ps 该库已经两年未更新了,不过lssues 依旧在回复中,对于库的检查 https:

    10.8K30

    jQuery学习笔记

    document ready函数中,我们需要在js中加载该函数文档 // jQuery入口函数 $(document).ready(function(){ //jQuery代码 }); /**...|live() |为当前或未来的匹配元素添加一个或多个事件处理器 | |load() |触发、或将函数绑定到指定元素的 load 事件 | |mousedown...-- stopAll:是否清除动画队列 默认false goToEnd:是否立即停止动画 默认false 默认情况下,stop()会清除被选中的元素的当前动画 --> Callback() 当前动画...100% 完成之后执行 jQuery DOM 获取/设置内容 text() 设置/返回所选元素的文本内容[原型:innerhtml] html() 设置/返回所选元素的内容(含HTML标签) val(...,后台加载数据并显示在页面上 AJAX菜鸟教程 jQuery ajax()方法 AJAX load() load() 从服务器加载数据,并返回数据 常常利用:调用一个重复的代码块,例如网页的导航

    8.8K30

    jQuery 事件

    常见 DOM 事件: 鼠标事件 键盘事件 表单事件 文档/窗口事件 click keypress submit load dblclick keydown change resize mouseenter...keyup focus scroll mouseleave blur unload 事件绑定 文档装载完成后,如果打算为元素绑定事件来完成某些操作,则可以使用on()方法来对被选元素及子元素上添加一个或多个事件处理程序...              jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006...$(selector).off(event,selector,function(eventObj),map) 事件对象的属性和方法 方法 描述 event.currentTarget 在事件冒泡阶段内的当前...() 阻止其他事件处理程序被调用 event.stopPropagation() 阻止事件向上冒泡到 DOM 树,阻止任何父处理程序被事件通知 event.target 返回哪个 DOM 元素触发事件

    3.9K70

    jQuery 重点解析 write less,but do more

    error() 触发、或将函数绑定到指定元素的 error 事件 event.isDefaultPrevented() 返回 event 对象上是否调用了 event.preventDefault...load 事件 load() 触发、或将函数绑定到指定元素的 load 事件 mousedown() 触发、或将函数绑定到指定元素的 mouse down 事件...after() 在匹配的元素之后插入内容。 append() 向匹配的元素内部追加内容。 appendTo() 向匹配的元素内部追加内容。...hasClass() 检查匹配的元素是否拥有指定的类。 html() 设置或返回匹配的元素集合中的 HTML 内容。....next() 获得匹配元素集合中每个元素紧邻的同辈元素。 .nextAll() 获得匹配元素集合中每个元素之后的所有同辈元素,由选择器进行筛选(可选)。

    2K20

    jQuery:详解jQuery中的事件(一)

    当文档或者它的某些元素发生某些变化或操作时,浏览器就会自动生成一个事件。当然使用传统的JavaScript也能完成这些交互,但是jQuery增加兵扩展了基本的事件处理机制。...一、jQuery中的事件   1、加载DOM:   执行时机:在常规的JavaScript中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法...要解决这个问题,可以使用jQuery中的另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数。...:文档装载完成了,接着就是为元素绑定事件来完成某些操作了,所使用的是bind()方法。...明天继续完成jQuery事件的下半部分,包括的内容有合成事件、事件冒泡、移除事件等内容。

    2.8K20

    什么是jQuery?

    对象 在Jquery中对象都是当成是数组的。...Jquery也对JavaScript事件进行了封装,我们看一下以下的API: window.onload:在浏览器加载web页面时触发,可以写多次onload事件,但后者覆盖前者 ready:在浏览器加载...focus:焦点获取 select:选中所有的文本值 keyup/keydown/keypress:演示在IE和Firefox中获取event对象的不同 mousemove:在指定区域中不断移动触发...blur:焦点失去 值得注意的是:当用户执行动作的时候,浏览器会自动创建事件对象,传递进去给响应事件的方法【类似与监听器的原理】,那么我们在响应方法上就可以获取一些属性: ?...最后一个是对表单的数据进行封装,将表单的数据封装成JSON格式 `load()` 首先,我们来使用一下load()这个方法吧。在文档中对它的解释是这样子的。 ?

    4K70

    「jQuery」基础 - 03

    元素.事件() // $("div").click();会触发元素的默认行为 // 2....jQuery 多库共存 实际开发中,很多项目连续开发十多年,jQuery版本不断更新,最初的 jQuery 版本无法满足需求,这时就需要保证在旧有版本正常运行的情况下,新的功能使用新的jQuery版本实现...凡是在软件开发中用到了软件的复用,被复用的部分都可以称为组件,凡是在应用程序中已经预留接口的组件就是插件。...之后保存数据到本地存储 重新渲染加载数据列表 load 加载函数里面,新增一个条件,如果当前数据的done为true 就是已经完成的,就把列表渲染加载到 ul 里面 如果当前数据的done 为false..., 则是待办事项,就把列表渲染加载到 ol 里面 1.7.7 案例:toDoList 统计正在进行个数和已经完成个数 在我们load 函数里面操作 声明2个变量 :todoCount 待办个数 doneCount

    4.1K30

    JQuery基础

    : $(document).ready(function(){ //开始书写jQuery代码 });  这是为了防止文档在加载完成前执行jQuery代码,即在DOM加载完成后才可以对DOM进行操作...(提交表单时),change(元素值(适用于表单字段)发生改变时),focus(元素获得焦点),blur(元素失去焦点)事件; 文档/窗口事件:load(元素已加载触发,在jQuery1.8中废除。...ajax中也有load()方法),resize(调整浏览器窗口大小时触发),scroll(滚动指定的元素),unload(jQuery1.8中废弃)事件。 另: hover():模拟光标悬停事件。...当鼠标指针移动到元素上时,会触发第一个函数(mouseenter);当鼠标指针移出这个元素时,会触发第二个函数(mouseleave)。...默认false:仅停止当前活动动画,允许插入的动画向后执行;   可选的goToEnd:是否立即完成当前动画。默认false。   因而,默认的stop()会清除当前元素上的动画。

    6.8K51

    JS异步加载的三种方式

    onload事件的触发,而现在很多页面的代码都在onload时还执行额外的渲染工作,所以还是会阻塞部分页面的初始化处理。...前者是在document已经解析完成,页面中的dom元素可用,但是页面中的图片,视频,音频等资源未加载完,作用同jQuery中的ready事件;后者的区别在于页面所有资源全部加载完毕。...他们将在onload事件之前完成。...异步加载只是解决了下载的问题,但是代码在下载完成后就会立即执行,在执行过程中浏览器处于阻塞状态,响应不了任何需求。...JS延迟加载机制(LazyLoad):简单来说,就是在浏览器滚动到某个位置在触发相关的函数,实现页面元素的加载或者某些动作的执行。如何实现浏览器滚动位置的检测呢?

    4.3K20

    Python全栈之jQuery笔记

    的入口函数要比JS的入口函数先执行; 2.jQuery的入口函数会等待页面加载完成才执行,但不会等待图片的加载; 3.JS的入口函数会等待页面和图片都加载完成才执行....树中沿着同胞之前元素遍历,而不是之后元素遍历). 4.jQuery遍历-过滤 缩小搜索元素的范围: 三个最基本的过滤方法是:first(),last()和eq().它们允许您基于其在一组元素中的位置来选择一个特定的元素...3.3动画队列与停止动画: 在同一个元素上执行多个动画,那么对于这个动画来说,后面的动画会被放到动画队列中,等前面的动画 执行完成才会执行. stop(clearQueue, jumpToEnd...; }); 触发hello事件 element.trigger("hello"); 事件冒泡: 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序...1.jQuery load()方法: load() 方法从服务器加载数据,并把返回的数据放入被选元素中.

    6.7K40

    杨老师课堂之Jquery的筛选,事件,效果,Ajax,javascript跨域)

    blur和 focusout 失去焦点[同理] mouseover和 mouseenter 移进 mouseover, 如果鼠标指针穿过任何子元素,同样会触发 mouseover 事件 mouseout...事件对象: 由于IE-DOM和标准DOM实现事件对象的方法各不相同,导致在不同 浏览器中获取事件对象变得比较困难.针对这个问题,jquery进行了必要的扩 展和封装,从而使得在任何浏览器中能很好的轻松的访问获取事件对象以及事...可以用同样的方法解决 元素上的问题 阻止默认行为 网页中的元素都有自己默认的行为,例如:单击超链接后悔跳转,单击”提交”按钮会表单会提交,有时需要阻止元素的默认行为 在jquery中,提供了preventDefault...当鼠标移出这个元素时,会触发指定的第二个函数 toggle(fn,fn2,[fn3,fn4,…])用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件 hover 在mouseover...函数 必须在jQuery对象上触发函数,发送ajax请求 load(url, [data], [callback])载入远程 HTML 文件代码并插入至 DOM 中 •url:待装入 HTML

    10.2K20

    第78天:jQuery事件总结(一)

    当然使用传统的JavaScript也能完成这些交互,但是jQuery增加并扩展了基本的事件处理机制。jQuery不仅提供了更加优雅的事件处理语法,而且极大的增强了事件处理能力。   ...一、jQuery中的事件 1、加载DOM:   执行时机:在常规的JavaScript中,通常使用window.onload方法,而在jQuery中,使用的是$(document).ready()方法,...注意以上两种方法的区别: window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行,也即在此时JavaScript才可以访问网页中的任何元素; $(document...).ready()方法注册的事件处理程序,在DOM完全就绪时就可以被调用,也即此时网页的所有元素对jQuery都是可以访问的,但是并不是这些元素关联的文件都已经下载完毕。   ...要解决这个问题,可以使用jQuery中的另一个关于页面加载的方法——load()方法。load()方法会在元素的onload事件中绑定一个处理函数。

    1.3K20

    Juqery就是这么简单

    对象 在Jquery中对象都是当成是数组的。...Jquery也对JavaScript事件进行了封装,我们看一下以下的API: window.onload:在浏览器加载web页面时触发,可以写多次onload事件,但后者覆盖前者 ready:在浏览器加载...focus:焦点获取 select:选中所有的文本值 keyup/keydown/keypress:演示在IE和Firefox中获取event对象的不同 mousemove:在指定区域中不断移动触发...blur:焦点失去 值得注意的是:当用户执行动作的时候,浏览器会自动创建事件对象,传递进去给响应事件的方法【类似与监听器的原理】,那么我们在响应方法上就可以获取一些属性: ?...最后一个是对表单的数据进行封装,将表单的数据封装成JSON格式 load() 首先,我们来使用一下load()这个方法吧。在文档中对它的解释是这样子的。 ?

    2.9K50
    领券