jQuery能满足以下需求： 取得文档中的元素、修改页面外观、改变文档内容、响应用户的交互操作、为页面添加动态效果、不刷新加载、简化常见的JavaScript任务。 ---- jQuery版本？...}); 常用的 jQuery 事件方法 文档DOM加载完成 $(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法 章节中已经提到过。...**Chaining 允许我们在一条语句中运行多个 jQuery 方法**（在相同的元素上） ### jQuery 方法链接 有一种名为链接（chaining）的技术，允许我们在相同的元素上运行多条 jQuery...提示： 这样的话，**浏览器就不必多次查找相同的元素**。 如需链接一个动作，您只需简单地把该动作追加到之前的动作上。...derwer 标签的 href 属性 }); #jQuery 设置内容和属性 ### 设置内容 - text()、html() 以及 val() 我们将使用前一章中的三个相同的方法来设置内容：
但是，如果你想要元素在第一次点击的时候出现，然后在第二次点击的时候消失的话，那么可以试试下面的代码： // Fade $('.btn').click(function () { $('.element'...10、让两个div高度相同 有时候，你需要让两个div无论包含什么内容都拥有相同的高度： $('.div').css('min-height', $('.main-div').height()); 设置.../窗口打开外部链接 在一个新的浏览器tab或窗口中打开外部链接，并确保同一个来源的链接能在同一个tab或者窗口中打开： $('a[href^="http"]').attr('target', '_blank...修复的时候要小心这个问题。 12、通过文本查找元素 通过使用jQuery中的contains() 选择器，你可以找到元素内容的文本。...15、链式插件调用 jQuery允许“链式”插件的方法调用，以减轻反复查询DOM并创建多个jQuery对象的过程。
回到顶部按钮 预加载图片 检查图片是否加载完毕 自动修复损坏的图片 Hover 上的 Class 开关 禁用 input 字段 停止链接加载 淡入淡出/滑动开关 简单的折叠效果 将两个 Div 设为相同高度...在新窗口打开外部链接 找到文本元素 切换可视与隐藏的触发器 Ajax 调用的错误处理 链式操作 回到顶部按钮 通过使用 jQuery 中的 animate 和 scrollTop 方法...预加载图片 如果你的页面使用了大量不能初始可见的图片（例如绑定在 hover 上），预加载它们是十分有用的： $.preloadImages = function () { for...disabled 的值改为 false 时，仅需在该 input 上再运行一次 prop 方法。.../窗口打开站外链接 在一个新标签或者新窗口中打开外置链接，并确保站内链接会在相同的标签或窗口中打开： $('a[href^="http"]').attr('target', '_blank'
但是，如果你想要元素在第一次点击的时候出现，然后在第二次点击的时候消失的话，那么可以试试下面的代码： // Fade $('.btn').click(function () { $('.element...让两个 div 高度相同 有时候，你需要让两个 div 无论包含什么内容都拥有相同的高度： $('.div').css('min-height', $('.main-div').height());...在新标签页 / 窗口打开外部链接 在一个新的浏览器 tab 或窗口中打开外部链接，并确保同一个来源的链接能在同一个 tab 或者窗口中打开： $('a[href^="http"]').attr(...修复的时候要小心这个问题。 8. 通过文本查找元素 通过使用 jQuery 中的 contains() 选择器，你可以找到元素内容的文本。...预加载图像 如果你的网页要使用大量开始不可见的（例如，悬停的）图像，那么可以预加载这些图像： $.preloadImages = function () { for (var i = 0;
但是，如果你想要元素在第一次点击的时候出现，然后在第二次点击的时候消失的话，那么可以试试下面的代码： // Fade $('.btn').click(function () { $('.element...让两个 div 高度相同 有时候，你需要让两个 div 无论包含什么内容都拥有相同的高度： $('.div').css('min-height', $('.main-div').height());...在新标签页 / 窗口打开外部链接 在一个新的浏览器 tab 或窗口中打开外部链接，并确保同一个来源的链接能在同一个 tab 或者窗口中打开： $('a[href^="http"]').attr('target...修复的时候要小心这个问题。 8. 通过文本查找元素 通过使用 jQuery 中的 contains() 选择器，你可以找到元素内容的文本。...预加载图像 如果你的网页要使用大量开始不可见的（例如，悬停的）图像，那么可以预加载这些图像： $.preloadImages = function () { for (var i = 0; i <
但是，如果你想要元素在第一次点击的时候出现，然后在第二次点击的时候消失的话，那么可以试试下面的代码： // Fade $('.btn').click(function () { $('.element...让两个 div 高度相同 有时候，你需要让两个 div 无论包含什么内容都拥有相同的高度： $('.div').css('min-height', $('.main-div').height());...在新标签页 / 窗口打开外部链接 在一个新的浏览器 tab 或窗口中打开外部链接，并确保同一个来源的链接能在同一个 tab 或者窗口中打开： $('a[href^="http"]').attr('target...修复的时候要小心这个问题。 8. 通过文本查找元素 通过使用 jQuery 中的 contains() 选择器，你可以找到元素内容的文本。...预加载图像 如果你的网页要使用大量开始不可见的（例如，悬停的）图像，那么可以预加载这些图像： $.preloadImages = function () { for (var i = 0; i
1.1 jquery 选择器 还记到大明湖畔（CSS）的夏雨荷（选择器）吗？选择器可以快速定位到元素并为其应用样式效果。jquery 选择器的选择规则与 CSS 相同，只是目的是为其添加操作。...//方式2 获取元素的索引值可以使用 index() 方法 1.3 jquery 动画 通过 animate 方法可以设置元素某属性值上的动画，动画执行完后会执行一个函数。...jquery 中则是使用 html() 方法获取和设置 html 内容： // 获取内容 var $htm = $('#div1').html(); // 设置 html 内容 $('#div1')....出现零次或一次（最多出现一次） + 出现一次或多次（至少出现一次） * 出现零次或多次（任意次） {n} 出现n次 {n,m} 出现n到m次 {n,} 至少出现n次 范围：使用中括号将可选内容列出，代表内容中任意一个...，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
jquery介绍 jQuery是目前使用最广泛的javascript函数库。据统计，全世界排名前100万的网站，有46%使用jQuery，远远超过其他库。...，做得多） 1、http://jquery.com/ 官方网站 2、https://code.jquery.com/ 版本下载 jquery文档加载完再执行 将获取元素的语句写到页面头部，会因为元素还没有加载而出错...选择器 jquery用法思想一 选择某个网页元素，然后对它进行某种操作 jquery选择器 jquery选择器可以快速地选择元素，选择规则和css样式相同，使用length属性判断是否选择成功。...('fast'); //高度实际高度变换到零来隐藏ul元素 jquery属性操作 1、html() 取出或设置html内容 // 取出html内容 var $htm = $('#div1').html...，把事件加到父级上，通过判断事件来源的子集，执行相应的操作，事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入的子元素也可以拥有相同的操作。
GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符 POST：一般用于修改服务器上的资源，对所发送的信息没有限制。...提供的，只能用于加载CSS； ②页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载； ③import是CSS2.1 提出的，只在IE5以上才能被识别，而link是...适用于以下情况： ①静态图片，不随用户信息的变化而变化 ②小图片，图片容量比较小 ③加载量比较大 17、清除浮动的几种方式，各自的优缺点 （1）父级div定义height。...①它的功能是把对应的字符串解析成JS代码并运行； ②应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。...①ajax：jQuery对ajax执行的核心方法。其它ajax方法都是使用该方法实现。 ②get：专门用于发送get请求的便捷方法。 ③post：专门用于发送post请求的便捷方法。
() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 2....如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。 ...好吧，除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次....() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 2....如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。
使用github上面的一个开源项目defunkt/jquery-pjax 可以很轻松的帮助我们实现pjax。 需要具备基础的html & javascript 知识。...image.png 引入js 在header.php或者footer.php中添加下面代码 <script src="//cdn.bootcss.com/<em>jquery</em>/3.1.1/<em>jquery</em>.min.js...就是页面中只<em>刷新</em><em>的</em>这个部分。 options 官方文档提供了更多<em>的</em>选项，以便更好地自定义选项。具体查考官方文档。以下列出我<em>使用</em><em>的</em>一些选项。 container 替换<em>的</em>容器<em>的</em>css选择器。...>是typecho<em>的</em>自带函数，调用本站<em>的</em>首页地址！也就是只对本站<em>的</em>，并且没有_blank属性<em>的</em>，标签里不含no-pjax<em>的</em><em>链接</em>实行pjax！局部<em>刷新</em><em>的</em>区域是#pjax-container<em>的</em>部分！...image.png 版权属于：逍遥子大表哥 本文<em>链接</em>：https://blog.bbskali.cn/499.html 按照知识共享署名-非商业性<em>使用</em> 4.0 国际协议进行许可，转载引用文章应遵循<em>相同</em>协议
因为ul中的li是JS动态创建的，在页面加载时Docoment中并没有此元素，选择器并不能选取。...事件处理 off() 解绑事件 当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。...jQuery 多库共存 实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现...但是本页面内容刷新页面不会丢失。...每次渲染之前，先把原先里面 ol 的内容清空，然后渲染加载最新的数据。 1.7.5 案例：toDoList 删除操作 点击里面的a链接，不是删除的li，而是删除本地存储对应的数据。
jQuery的基本使用 入口函数 // $('div').hide(); // 1.等着页面DOM加载完毕再去执行js代码...//DOM加载完成的入口 }) jQuery的顶级对象：$ `是jQuery 别称，在代码中`和jQuery和等价，为了方便都是$。...//（3）fn:回调函数，在动画完成时执行的函数，每个元素执行一次。...解决方法：停止排队 //(1)stop()方法用于停止动画或效果。 //(2)注意:stop()写到动画或者效果的前面，相当于停止结束上一次的动画。只执行最新的一次。...本质上是存放在元素缓存中，一旦页面刷新，之前存放的数据都将被移除。
这一节涉及到浏览器与服务器的交互，我用到的是php，如果各位看官不会php脚本也没有关系，涉及到的php代码最多10行，重点还是在Jquery上。...甚至我们做一个网站，放上背景音乐，网站中一切链接都由ajax完成（比如点击了一片文章，ajax向服务器请求文章内容，然后用我上次说的Jquery html操作将网页中的一部分进行修改，这样文章就放入了页面而并不刷新页面...首先看看怎么获取服务器上一个txt文件：使用load()方法 (因为ajax使用同源策略，所以在哪个网站运行代码就只能请求该服务器上的内容，我请求的是w3school中的一个txt文件，大家把代码放在...并没有刷新页面，我们填写的内容依旧在表单中。这就是向服务器请求了html，返回的“用户名...已存在”就是一个html文本，最后体现在用户面前。 我们看Jquery代码。...配合上Jquery，原本就不复杂的ajax变得更加简单，而且在各个浏览器上都能很好地运行。
该处理程序只能被每个元素触发一次 $.proxy() 接受一个已有的函数，并返回一个带特定上下文的新的函数 ready() 规定当 DOM 完全加载时要执行的函数 resize() 添加/触发 resize...同胞拥有相同的父。 什么是遍历？ jQuery 遍历，意为”移动”，用于根据其相对于其他元素的关系来”查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。...在创建一个 Deferred 对象之后，您可以使用以下任何方法，直接链接到通过调用一个或多个的方法创建或保存的对象。...jQuery text() 和 html() – 设置内容并使用回调函数 使用 text() 和 html() 设置内容并使用回调函数 jQuery attr() – 设置属性值 使用 jQuery...jQuery load() 异步载入文件内容中指定的元素内容并插入到 元素. jQuery load() – 使用回调函数(callback) 使用 jQuery load() 方法的回调函数
因为UpdatePanel是一个异步的回发页面。这个页面在初次加载的时候自然随着整个页面的刷新加载而加载，因此作用于页面级别的jQuery代码可以起到作用。...但是等到点击button之后，仅仅是UpdatePanel中的内部内容刷新了，整个页面根本不刷新（换句话说，整个页面的jQuery根本没有执行）。因此没有任何作用了。 ...，必须通过getInstance方法获取单例之后使用，而Sys.Application可以直接使用。...同样地，这两个事件： 【相同点】一旦页面刷新，或者点击Submit页面导致整个页面回发，或者位于UpdatePanel中的按钮导致局部页回发，Page_Load和add_load照样执行。 ...【结论】 1、Application一般用于整个页面（凡是页面刷新或者回传，都会导致此事件发作）。Init只发生一次。load可以多次发生。
如果使用了两个CSS列，使用此种方式可以是两列的高度相同。...预加载图片 如果你的页面中使用了很多不可见的图片（如：hover 显示），你可能需要预加载它们： $.preloadImages = function () { for (var i = 0; i...并把要移除的属性作为参数传入： $('input[type="submit"]').removeAttr('disabled'); 阻止链接加载 有时你不希望链接到某个页面或者重新加载它，你可能希望它来做一些其他事情或者触发一些其他脚本...jQuery 中经常使用的动画效果，它们可以使元素显示效果更好。...高度相同 有时你需要让两个 div 高度相同，而不管它们里面的内容多少。
一旦你适应了，你会爱上它的简洁。() 函数用于将任何对象包裹成 jQuery 对象，接着你就被允许调用定义在 jQuery 对象上的多个不同方法。你甚至可以将一个选择器字符串传入 2....jQuery 代码：$(“div”)，这样会返回一个包含所有 5 个 div 标签的 jQuery 对象。更详细的解答参见上面链接的文章。...ready() 函数用于在文档进入ready状态时执行代码。当DOM 完全加载（例如HTML被完全解析DOM树构建完成时），jQuery允许你执行代码。...如果加载图片和媒体内容花费了大量时间，用户就会感受到定义在 window.onload 事件上的代码在执行时有明显的延迟。...好吧，除了报错节省服务器带宽以及更快的下载速度这许多的好处之外, 最重要的是，如果浏览器已经从同一个CDN下载类相同的 jQuery 版本, 那么它就不会再去下载它一次.
事件处理 off() 解绑事件 当某个事件上面的逻辑，在特定需求下不需要的时候，可以把该事件上的逻辑移除，这个过程我们称为事件解绑。...多库共存 实际开发中，很多项目连续开发十多年，jQuery版本不断更新，最初的 jQuery 版本无法满足需求，这时就需要保证在旧有版本正常运行的情况下，新的功能使用新的jQuery版本实现，这种情况被称为...但是本页面内容刷新页面不会丢失。 1.7.2 案例：toDoList 分析 // 1. 刷新页面不会丢失数据，因此需要用到本地存储 localStorage // 2....核心思路： 不管按下回车，还是点击复选框，都是把本地存储的数据加载到页面中，这样保证刷新关闭页面不会丢失数据 // 3....// 4.每次渲染之前，先把原先里面 ol 的内容清空，然后渲染加载最新的数据。
从Google Code加载jQueryGoogle Code上已经托管了多种JavaScript类库，从Google Code上加载jQuery比直接从你的服务器加载更有优势。...它节省了你服务器上的带宽，能够很快的从Google的内容分布网络(CDN)上加载JS类库。更重要的是，如果用户访问那些发布在Google Code上的站点后它会被缓存下来。 这样做很有意义。...如果你一次又一次的选择相同元素(例如在一个循环中)，那么你可以一次选择出它并放入内存中，同时你可以在核心内容里操作它。...为了速度和SEO方面的考虑，延迟加载内容 另外还有一个方法可以提升页面加载速度，理顺Spiders搜索的HTML内容，通过在页面加载之后使用AJAX请求晚加载其他内容，这样用户就可以马上开始浏览，让Spider...有些时候你会注意到在点击链接后锚点会跳转到页面上部。 所有你要做的就是阻止它的默认行为，或者实际上你可以把”return false;”添加到任何事件的默认行为上。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
