打开 Chrome 调试工具 打开 Chrome 浏览器,我们可以通过多种方式打开调试工具,最常见的两种方法是: 按下 F12 键:这是快捷方式,适用于大多数 Windows 和 Linux 系统。...强制刷新:按下 Ctrl + F5,强制刷新会忽略缓存,重新加载所有资源,适用于样式和脚本更新后没有即时生效的情况。 3....过滤资源类型:可以通过上方的过滤按钮,只查看特定类型的资源,例如仅查看图片、脚本或文档。 7....设置断点:可以点击代码行号设置断点,页面运行到这里时会自动暂停,方便我们逐行调试代码。 逐行调试:在暂停的位置,可以使用顶部的调试控制按钮逐行执行代码、跳过函数调用等。 8....8.3 黑箱脚本 在调试 JavaScript 代码时,如果某些第三方库(如 jQuery、React)并不需要调试,我们可以将它们标记为 “黑箱脚本”(Blackboxing),这样在调试时,调试器会自动跳过这些脚本
browser=None, # 使用原始的无头模式(适用于 Chromium 和 Firefox)。...disable_ws=None, # 在网站上启用 Chrome 同步。 enable_sync=None, # 使用 Chrome 的自动化扩展。...user_data_dir=None, # 加载 Chrome 扩展 .zip 或 .crx 文件,用逗号分隔。...extension_zip=None, # 加载 Chrome 扩展目录,用逗号分隔。...driver_version=None, # 设置 Chrome 页面加载策略,选项为 "normal"、"eager" 或 "none"。
不同主题 有不同的页面主题风格:Base,bootstrap 3,jquery UI, Foundation, Semantic UI....| row borders | stripe Bootstrap 中对表格的样式设置有: table-border :cell 边框 table-striped:奇偶row显示不同颜色 table-hover...: 鼠标移入row,本行有hover效果 table-condensed:去掉row的padding table-responsive 参数的具体含义参考: http://getbootstrap.com.../css/#tables 效果: 二、外部资源 2.1 js: jquery -- http://cdn.bootcss.com/jquery/3.2.1/jquery.js jquery.dataTables...info : false,//是否显示页数信息 searching : false,//是否显示搜索框 sort : false,//是否允许排序 stateSave : false,//页面重载后保持当前页
focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况 change([[data],fn]) $('p').change(); 当元素的值发生改变时,会发生 change 事件该事件仅适用于文本域...load([[data],fn]) $(window).load(fn); 当页面加载完成 unload([[data],fn]) $(window).unload(fn); 当页面卸载完成后,离开页面时...第二,只触发jQuery对象集合中第一个元素的事件处理函数。 第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。...使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)在选择元素上绑定一个或多个事件的事件处理函数。...合成事件 6.1 合成鼠标进入和离开的hover方法 jQuery为鼠标进入和离开提供了一个简便的绑定事件的方法hover(enter, leave)。
,jQuery的页面加载成功事件可以出现多次!...jq元素对象.hover(function(){// 第一个函数相当于 mouseover }, function(){ // 第二个函数相当于mouseout }); 三、jQuery的选择器 基本选择器...六:jQuery插件 1.jQuery插件机制概述 jQuery插件的机制很简单,就是利用jQuery提供的jQuery.fn.extend()和jQuery.extend()方法,扩展jQuery的功能.... 2.jQuery插件机制语法 jQuery.fn.extend(object) 对jQuery对象进行方法扩展: jQuery.fn.extend({ "check":function...(object) 对jQuery全局进行方法扩展 jQuery.extend({ "min":function (i,j) { return i>j?
){ // do something } // Target Safari if( $.browser.safari ){ // do something } // Target Chrome...if( $.browser.chrome){ // do something } // Target Camino if( $.browser.camino){ // do something...预加载图片 如果你的页面中使用了很多不可见的图片(如:hover 显示),你可能需要预加载它们: $.preloadImages = function () { for (var i = 0; i...('hover'); }); 你只需要添加必要的CSS代码即可。...如果你想要更简洁的代码,可以使用 toggleClass 方法: $('.btn').hover(function () { $(this).toggleClass('hover'); });
chrome18开始必须为2。 browser_action:设置扩展程序的图标。 permissions:需要申请的权限,这里使用tab即可。...content_scripts:指定在页面中运行的js和css及插入时机。 chrome_url_overrides:新标签页打开的html文件。 offline_enabled:脱机运行。...在页面最后引用了一个js文件,主要是等待页面渲染完成之后调用js去计算日期的逻辑。...使用chrome浏览器打开:chrome://extensions/ 即可跳转到添加扩展程序页面。...在给对象安装插件的时候,发现了一个小问题,可能是chrome版本原因,导致jquery的cdn无法直接引用,所以可能需要手动把jquery保存到项目文件中,然后在manifest.json配置js的地方把
" ){ // do something } // Target Safari if( $.browser.safari ){ // do something } // Target Chrome...if( $.browser.chrome){ // do something } // Target Camino if( $.browser.camino){ // do something...-- Create an anchor tag -->Back to top 12.预加载图片 如果你的页面中使用了很多不可见的图片(如:hover...(function () { $(this).addClass('hover'); }, function () { $(this).removeClass('hover'); })...如果你想要更简洁的代码,可以使用 toggleClass 方法: $('.btn').hover(function () { $(this).toggleClass('hover'); });
Tampermonkey 是一款免费的浏览器扩展和最为流行的用户脚本管理器,它适用于 Chrome、Microsoft Edge、Safari、Opera Next 和 Firefox。...Chrome 同步:您正在使用多个 Chrome 浏览器,一个家用,一个工作用?您希望您可以同步自己的脚本?那么,您仅需设置 Tampermonkey 的同步功能。...// @require https://code.jquery.com/jquery-2.1.4.min.js // @require https://code.jquery.com/jquery-2.1.3...unsafeWindow unsafeWindow 对象提供权限访问页面的 js 函数和变量 如下图,直接使用原页面的变量操作,此对象不用使用 @grant 获取权限。...details 的属性: url:资源的 url name:文件名,出于安全原因,文件的扩展名必须在 TM 参数页面的的白名单里 headers:如 GM_xmlhttpRequest 一样设置请求头部
为例,在扩展程序列表chrome://extensions/进入插件的详细信息,开启“允许访问文件网址”即可,接着就可以// @require file://的文件网址方式引用本地脚本了...来得到 .item 最简单的解决方案是在事件发生时获取鼠标所在的 .item,例如使用 jQuery:$('.item:hover') 2.... 大致就是,当你点击 .item-a 的时候,.item-a 会被移除,并在一个异步函数doSth()完成后显示 .item-b 你当前的目标是要在 .item-b 出现的时候修改其内容 不好的思路...itemB }); 补充 推荐的一些可能会常用的模块 Github BootCDN 用途 jquery-pjax Link 为页面添加 pjax 支持 jquery-mousewheel Link 为...方式 clipboard.js Link 虽然油猴提供剪贴板 API,但该模块可以提供一些扩展功能,例如 tooltips 反馈等 dragula Link 提供页面元素的拖拽调序功能 toastr Link
" ){ // do something } // Target Safari if( $.browser.safari ){ // do something } // Target Chrome...if( $.browser.chrome){ // do something } // Target Camino if( $.browser.camino){ // do something...动态控制页面字体大小 用户可以改变页面字体大小 $(document).ready(function() { // Reset the font size(back to default) ...12.预加载图片 如果你的页面中使用了很多不可见的图片(如:hover 显示),你可能需要预加载它们: $.preloadImages = function () { for (var i = ...class 属性: $('.btn').hover(function () { $(this).addClass('hover'); }, function () { $(this)
在深入讨论PJAX之前,有必要先了解什么是AJAX及其扩展技术PJAX。AJAX(Asynchronous JavaScript and XML)是一种异步技术,旨在实现跨页操作而不需页面刷新。...通过 Chrome 浏览器的开发工具,就可以更直观的看到它。 我们手动判断 DOM 结构,合理的编写 PJAX 替换页面内容所需要的选择器,就可以把在网页刷新过程中发生变化的那一部分给 “刷新”。...重载函数 如果你的页面内容需要配合 JS 实现一些特效(例:图片灯箱),你可能会发现刚打开页面时所执行的 JS 效果失效了。...ks.image(":not[no-image] img"); // 重载 Kico Style 的图片灯箱});如果你的代码在函数体外部声明获取了一次元素(只在某些特定页面中出现的),为了保证这些元素在...最好事先封装好一个类或是函数,这样就保证了代码的复用性。在 pjax:complete 事件函数中就可以直接调取它,快速实现 JS 的重载。
focusout事件跟blur事件区别在于,他可以在父元素上检测子元素失去焦点的情况 change([[data],fn]) $('p').change(); 当元素的值发生改变时,会发生 change 事件该事件仅适用于文本域...第二,只触发jQuery对象集合中第一个元素的事件处理函数。 第三,这个方法的返回的是事件处理函数的返回值,而不是据有可链性的jQuery对象。...使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)在选择元素上绑定一个或多个事件的事件处理函数。...事件 // 2、可以接受一个字符串作为 选择器进行选择页面中元素,返回jQuery包装对象。...合成事件 6.1 合成鼠标进入和离开的hover方法 jQuery为鼠标进入和离开提供了一个简便的绑定事件的方法hover(enter, leave)。
--告诉IE使用最新的引擎渲染网页,chrome=1则可以激活Chrome Frame--> chrome...--适用于移动设备,禁止页面缩放--> jquery-3.3.1.min.js'> hover.../abc/js/jquery-3.3.1.min.js'> <link href="..
它是一个 Node.js 库,通过 DevTools 协议提供了一个高级的 API 来控制 headless Chrome。它还可以配置为使用完整的(非 headless)Chrome。...● 不受限制:自定义的回调可以让你输出到任何 API 上 ● Power anything:使用 jQuery, Canvas, Three.js, WebSockets 等. ● 无缝交互:输入、动画及物理之间快速的切换...库hyperapp https://github.com/hyperapp/hyperapp Star 10585 HyperApp 是一个用于构建前端应用的 JavaScript 库,体积十分轻量,仅...使用函数式范例创建可扩展的基于浏览器的应用程序。你不必学习一种新的语言。 ● 自定义标签:使用自定义标签构建复杂的用户界面。自定义标签是无状态的,易于调试。...目标如下: ● 无需重载页面转换 ● 热重载编辑 ● 为构建静态网站创建 React.js 组件模型和生态系统 ● 直观的基于目录的 URLs ● 支持 "Starters"
第一个payload适用于简单的javascript变量,第二个payload适用于非嵌套的javascript对象。...URL必须采用以下方式:在PHP扩展后的URL路径中或URL的片段中。加号 (+)必须用URL进行编码。...client=chrome%26jsonp=alert(1)> 仅适用于 Firefox <animate attributeName=href to...最后一个选项仅适用于payload的 DOM操作(例如在基于位置的payload或基于 DOM的XSS中)。
> 忽略Android平台中对邮箱地址的识别 当网站添加到主屏幕快速启动方式,可隐藏地址栏,仅针对...造成的后果用户纯粹单击页面,页面需要过一段时间才响应,给用户慢体验感觉,对于web开发者来说 是,页面js捕获click事件的回调函数处理,需要300ms后才生效,也就间接导致影响其他业务逻辑的处理。...效果 移动端触摸按钮的效果,可明示用户有些事情正要发生,是一个比较好体验,但是移动设备中并没有鼠标指针,使用css的hover并不能满足我们的需求,还好国外有个激活css的active效果,代码如下,...silk && os.android && ua.match(/Kindle Fire/)) browser.silk = true if (chrome) browser.chrome = true...,但是没有扩展任何JavaScript内置对象。
核心文件才几十kb,不会影响页面加载速度。 跨浏览器兼容,基本兼容了现在主流的浏览器。 链式编程、隐式迭代。 对事件、样式、动画支持,大大简化了DOM操作。 支持插件扩展开发。...1.2.3. jQuery的入口函数 jQuery中常见的两种入口函数: // 第一种: 简单易用。...事件切换 jQuery中为我们添加了一个新事件hover(),功能类似 css 中的伪类:hover,介绍如下: 语法 hover([over,]out) // 其中over和out为两个函数...over:鼠标移到元素上要触发的函数(相当于mouseenter) out:鼠标移出元素要触发的函数(相当于mouseleave) 如果只写一个函数,则鼠标经过和离开都会触发它 hover事件和停止动画排列案例...事件切换 hover 如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数 $(".nav>li").hover(function() { // stop 方法必须写到动画的前面
Chrome扩展程序介绍 首先,想明确的一点是,编写一个chrome扩展扩展程序并不难,入手也十分容易,大家不用觉得门槛特别高。...从更高的层次来看,我们将使用它来向 Chrome 浏览器声明扩展程序将会做什么,以及为了完成这些任务所需要的权限: { "name": "清除页面广告", "version": "2.0...jquery-1.10.1.min.js", "js/my-del-ad-script.js"两个文件,其中my-del-ad-script.js就是我们要清除页面广告的代码所在。...如何安装 Chrome 扩展 在您的浏览器中访问 chrome://extensions(或者单击多功能框最右边的按钮:打开 Chrome 浏览器菜单,并选择更多工具(L)菜单下的扩展程序(E),进入相同的页面...本文只是非常简单的介绍了chrome扩展,只是chrome扩展的冰山一角,使用chrome扩展可以实现更多你想象不到的功能,更多详情或者完整的API,请点击这里。
支持插件扩展开发。有着丰富的第三方的插件,例如:树形菜单、日期控件、轮播图等。 免费、开源。...1.2.3. jQuery的入口函数 jQuery中常见的两种入口函数: // 第一种: 简单易用。...事件切换 jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。...介绍如下 语法 hover([over,]out) // 其中over和out为两个函数 over:鼠标移到元素上要触发的函数(相当于mouseenter) out:鼠标移出元素要触发的函数(相当于...事件切换 hover 如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数 $(".nav>li").hover(function() {