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

jQuery介绍与常见选择器的使用

jQuery简介 jQuery是继Prototype之后又一个优秀的JavaScript库,是一个由John Resig创建与2006年1月的开源项目。...相对于其他库来说jQuery非常轻巧,采用UglifyJS压缩后,目前最新版压缩后大小在85KB左右(随着版本的不同这个数字可能不一样)。...jQuery将所有的AJAX操作封装到一个函数$.ajax()里,使得开发者处理AJAX的时候能够专心处理业务逻辑而无需关心复杂的浏览器兼容性和XMLHttpRequest对象的创建和使用的问题。...注意:虽然有压缩和未压缩的两种版本,但是两个版本除了在代码压缩之外并没有任何区别,压缩版并没有删减jQuery的功能,未压缩版也没有增加什么功能。...选择一个版本的jQuery,导入工程中,我选择的是min版: ? 然后在HTML文件中引入jQuery: <!

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

    Ajax上传图片以及上传之前先预览

    在文件上传的时候用到了Ajax上传文件,以及图片在上传之前的预览效果,解决了这两个小问题,和小伙伴们分享下。 ---- 上传之前的预览 方式一 先来说说图片上传之前的预览问题。...不过由于原文年代久远,里边使用的$.browser.msie从jQuery1.9就被移除掉了,所以如果我们想使用这个得做一点额外的处理,我修改后的uploadPreview.js文件内容如下: jQuery.browser...Ajax上传图片文件 Ajax上传图片文件就简单了,没有那么多方案,核心代码如下: var formData = new FormData(); formData.append...然后在ajax上传数据的时候设置data属性就为formdata,processData属性设置为false,表示jQuery不要去处理发送的数据,然后设置contentType属性的值为false,表示不要设置请求头的...OK,主要就是设置这三个,设置成功之后,其他的处理就和常规的ajax用法一致了。 后台的处理代码大家可以在文末的案例中下载,这里我就不展示不出来了。

    1.8K80

    让Typecho无限滚动加载的方法

    据统计,据媒体报道,据各种经验之谈:用户不喜欢点击,更爱滚动!所以,之前挺流行的文章分页没有了,沿用了几百年的“下一页”也被无限load取代。瀑布流和Twitter更是推动了无限load的普及。...这里介绍一个jQuery插件:Infinite AJAX Scroll,通过这个插件能快速实现无限滚动翻页。因为是jQuery所以到处都能用,这里我们以Typecho作为例子。...第一步接入Infinite AJAX Scroll 下载Infinite AJAX Scroll,放到对应主题的js文件夹中。因为是jQuery插件,我们还要先连上jQuery。...打开header.php页面,插入如下代码: jquery/3.2.1/jquery.min.js"> 更方便理解,我偷了个图,基本就是这样的 3460088466.jpg 步骤四重载函数 因为文章可能含有缩略图,而缩略图可能会用到惰性加载的js,所以ajax加载文章后,缩略图可能加载异常,这时我们需要在步骤三的代码最后加上一条

    2.1K20

    jQuery用于请求服务器的函数

    虽然以上实验已经可以成功的请求服务器并且载入了服务器返回的数据,但是将表单信息转换成json格式的那一段代码还是复杂了一些,每个表单组件的数据都得单独的去获得,如果表单中有十来个组件的话,岂不得写十来句代码去逐个获得...所以这时候就得用到一个可以将表单数据序列化成json格式的神器:jquery.serializeJSON,这是一个基于jQuery的开源插件,以下是该插件的下载地址: http://www.bootcdn.cn...get方法 get和post在使用上基本上是一样的,这是一个简单的 GET 请求功能以取代复杂 \.ajax 。请求成功时可调用回调函数。如果想要在出错时执行函数,则需要使用 .ajax。...AJAX方法 ajax方法是 jQuery 底层的 AJAX 实现,而以上介绍的get和post方法则是ajax方法的简写,ajax方法会返回其创建的 XMLHttpRequest 对象。...语法: jQuery.ajax({settings...}) ? 下面的表格中列出了可能的键/值: ? 示例,服务端代码不变: html代码: <!

    4.7K10

    Windows系统安全事件日志取证工具:LogonTracer

    ,这2个网址由于一些原因在国内无法正常访问,所以,在通过浏览器访问首页后,点击“Upload Event Log”按钮是无反应的,那就无法上传日志文件,这就是需要解决的坑。...第二处JS: https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js 解决方法:进入Docker镜像编辑index.html模板文件.../src/LogonTracer/templates/index.html 找到 https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js...将该网址的改为 https://ajax.loli.net/ajax/libs/jquery/3.2.1/jquery.min.js 保存文件。 ?...五、结语 以上就是我在使用docker搭建LogonTracer时所记录下来的笔记,在遇到问题2时一直以为是搭的环境的问题,折腾后才发现是上传的日志文件问题,导致一直无法进行加载分析,网上也没有找到相关的问题解决文章

    3.6K20

    原 荐 自己写代码对比工具

    作者:汪娇娇 时间:2018年1月19日 上一篇:自己写JSON编辑器 基于上一次做的JSON编辑器,继而衍生出这一次的代码对比工具,本来打算写在一块的,想想懒得在写好的一堆东西里倒持,就单独起一个博客吧...如果要引入自己的项目,比如说我上一篇写的JSON编辑器,编辑完JSON后,人工校验和原有数据的差别,仅凭肉眼看肯定活活累死,而且还不保证准确性。在自动化这么发达的时代,也不允许人工来操作吧,哈哈哈。...mergely有文档,照着文档接入也很方便,提供的API也比较全,完全能hold得住平时的工作。 好了,话不多说,下面就是mergely 代码对比的一张截图。 ? 接着,就来说怎么接入。...2、直接引入cdn ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> //mergely.js和mergely.css官网是没有直接提供的,我也是直接扒官网首页的代码的,哈哈哈 <script src="lib/mergely/lib/mergely.js

    2.1K90

    Java EE 阶段小项目(小型商城商品展示 + 购物车 + 下单 + 付款)

    驱动 5.1.44 版本以上 Tomcat 的所有 lib 包支持 jstl 1.2 标签库支持 支付宝 SDK 提供的 jar 包 其他: BootStrap 库支持 Jquery 库支持 (...ajax 校验 没有编写注册功能,因为我比较懒 hhhh 2.2 商城主页 用户登录成功就会进入该界面,用户登录信息经过 session 域进行保存 商品界面采用了 分页处理 用户可以选择将商品添加至购物车...后端逻辑难点分析 3.2.1 验证码实现 使用 java 的 2d 绘图工具,绘制一张 png,我的代码对验证码的绘制做了比较好的封装,所以看起来比较舒服 import javax.imageio.ImageIO...SDK,我们是 Java 开发者,当然要下载 java 的 SDK:手机网站支付 SDK 然后可以大致预览一下支付宝接入流程:接入流程 然后登陆支付宝开放平台,填写配置,不然后续就无法进行接入的相关工作...然后是 java 代码配置 将下载好的 sdk导入我们的项目 这里替换上面两个对应密钥 到这里就基本配置完成了,然后根据你的项目逻辑进行修改即可 差点忘记了,我们还需要将 SDK 提供的 jar

    1.5K20

    都9102年了,还需要用到 jQuery 吗?

    在本文中,我将介绍 jQuery 的历史、优点、缺点以及为什么你仍要用它。 什么是jQuery?...“Write less, do more“ - 正如其标语中所述,使用 jQuery,你可以用更少的代码行完成更多工作。各种复杂的操作都很容易完成,它鼓励编写模块化代码。...相对易用性 - jQuery 的一个缺点是很容易写出面条代码。由于对 jQuery 的选择链使用不当,使用非描述性变量名并尝试编写复杂函数时,jQuery 可能会导致写出最终无法维护的代码。...,以及在旧版浏览器上工作,可以使用转换工具,例如Babel 将 ES6 代码转换为与浏览器兼容的代码,可以在 polyfills 的帮助下通过浏览器了解特定功能以及其他工具,如 Autoprefixer...如何在2019年使用jQuery 要在项目中使用jQuery,有几种方法可以入门。 在撰写本文时的最新版本是 3.4.1 压缩的生产版本或未压缩的开发版本。

    2.6K40

    从GitHub.com放弃使用jQuery说起

    jQuery 我们最近完成了一项里程碑式的工作,去除了GitHub.com 网站前端代码对 jQuery 的依赖。...为什么 jQuery 在早期有意义 GitHub.com 网站在 2007 年底将 jQuery 1.2.1 作为依赖引入。回顾当时的时间节点,谷歌在一年后才发布了其 Chrome 浏览器第一个版本。...jQuery 使操作 DOM、实现动画效果和发起“AJAX”请求变得简单。它使 Web 开发人员能够创建更现代、更动态的网站页面,所以脱颖而出。...为了方便自动化管理,我们创建了 eslint-plugin-jquery,如果有人尝试使用 jQuery 功能(例如 $.ajax),它将无法通过 CI 检查。...例如,在我们删除了 jQuery 的 CSS 伪选择器(如 :visible或 :checkbox)之后,我们就能够删除 Sizzle 模块;当最后一个 $.ajax调用被 fetch() 替换时,我们能够删除

    1.1K20

    jQuery的deferred对象详解

    jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本。 每个版本都会引入一些新功能。...今天我想介绍的,就是从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。 这个功能很重要,未来将成为jQuery的核心方法,它彻底改变了如何在jQuery中使用ajax。...为了实现它,jQuery的全部ajax代码都被改写了。但是,它比较抽象,初学者很难掌握,网上的教程也不多。所以,我把自己的学习笔记整理出来了,希望对大家有用。...$.ajax()操作完成后,如果使用的是低于1.5.0版本的jQuery,返回的是XHR对象,你没法进行链式操作;如果高于1.5.0版本,返回的是deferred对象,可以进行链式操作。...deferred对象,该对象的运行状态无法被改变;接受参数时,作用为在参数对象上部署deferred接口。

    1.5K60

    jQuery

    jQuery jQuery介绍 jQuery 是一个轻量级的、兼容多浏览器的JavaScript 库; jQuery 使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行...丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定...jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。 Ajax操作支持。...jQuery内容 选择器 筛选器 样式操作 文本操作 属性操作 文档处理 事件 动画效果 插件 each、data、Ajax 下载链接:jQuery官网 jQuery版本 1.x:兼容IE678,使用最为广泛的...bug,在3.x 版本的 jQuery 中则没有这个问题。

    5K50

    Web前端学习笔记之jQuery基础

    jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。...丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定...jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。 Ajax操作支持。...用于checkbox和radio prop() // 获取属性 removeProp() // 移除属性 注意: 在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug...,在3.x版本的jQuery中则没有这个问题。

    3.8K20

    vue-d2admin-axios异步请求登录,先对比一下Jquery ajax, Axios, Fetch区别

    先说一下对比吧 Jquery ajax, Axios, Fetch区别之我见 引言 前端技术真是一个发展飞快的领域,我三年前入职的时候只有原生XHR和Jquery ajax,我们还曾被JQuery 1.9...版本版本以下不支持大文件请求这个问题卡了半天(最后自己写了原生的XHR请求)。...开发,XHR本身的架构不清晰,已经有了fetch的替代方案 JQuery整个项目太大,单纯使用ajax却要引入整个JQuery非常的不合理(采取个性化打包的方案又不能享受CDN服务) 尽管JQuery对我们前端的开发工作曾有着...3 Fetch fetch号称是AJAX的替代品,它的好处在《传统 Ajax 已死,Fetch 永生》中提到有以下几点: 符合关注分离,没有将输入、输出和用事件来跟踪的状态混杂在一个对象里 更好更方便的写法...XHR的时候,尽管偶尔觉得写的丑陋,但是在使用了JQuery和axios之后,已经对这一块完全无所谓了。

    2.8K20

    jquery

    jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互,能够极大地简化JavaScript编程。...丰富的DOM选择器,jQuery的选择器用起来很方便,比如要找到某个DOM对象的相邻元素,JS可能要写好几行代码,而jQuery一行代码就搞定了,再比如要将一个表格的隔行变色,jQuery也是一行代码搞定...jQuery的链式操作可以把多个操作写在一行代码里,更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码,并且代码的可读性也比js要强。 Ajax操作支持。...用于checkbox和radio prop() // 获取属性 removeProp() // 移除属性 注意: 在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug...,在3.x版本的jQuery中则没有这个问题。

    6.1K30

    Ajax技术详解(上)

    背景知识介绍 01 - 背景知识引入 我们知道,在没有ajax技术之前,客户端若要与服务端进行数据交互,它的大概流程是:客户端发起一个http请求(也可能是其他的请求)然后处于等待状态,等到服务端将数据发送给客户端...02 - 到供应商购买(腾讯云或阿里云等云服务提供商) 大家到阿里云或者腾讯云买一下就行,推荐买阿里云,虽然我用的是腾讯云部署完之后,通过ping-ip的方法检测通没通,这里给大家看下我的服务器: ?...在原生ajax代码中,第一个if判断的条件为什么要写成window.XMLHttpRequest而不是直接写成XMLHttpRequest呢?...优点:不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制;兼容性更好,在更古老的浏览器中都可以运行。...,将返回一段Javascript,在这段Javascript代码中调用约定好的回调函数,并且将数据作为参数进行传递。

    2.2K20

    JavaScript 学习-35.jQuery 基础语法与事件

    AJAX Utilities 环境准备 在网页中使用 jQuery 可以使用以下方法: 从 jquery.com 下载 jQuery 库 从 CDN 中载入 jQuery, 如从 Google 中加载...> 入口函数 为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。...可以将 jQuery 代码位于一个 $(document).ready() 函数中 $(document).ready(function(){ // 执行代码 alert...} jQuery 入口函数与 JavaScript 入口函数的区别: jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。...隐藏和显示 jQuery 提供了隐藏和显示元素的基本方法 hide() 隐藏元素 show() 显示元素 toggle() 切换显示和隐藏 示例 如果你点击“隐藏” 按钮,我将会消失

    2.3K10
    领券