jquery特效

tab html <div class="tab"> <ul class="tab-title"> <li class="tab-this">item1</li> <li>item2</li> <li>item3</li> </ul> <div class="tab-content"> <div class="tab-item show">item1xxx</div> <div class="tab-item">item2xxx</div> <div class="tab-item">item3xxx</div> </div> </div> css *{ padding: 0; margin: 0; text-decoration: none; list-style: none; font-family: Consolas; } .tab{ margin: 20px; } /*tab-title*/ .tab-title { height: 40px; position: relative; left: 0; white-space: nowrap; border-bottom-width: 1px; border-bottom-style: solid; border-color: #e2e2e2; transition: all .2s; -webkit-transition:

前端之jQuery 1. jQuery简介 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ 2. jQuery优势 一款轻量级的JS框架。 jQuery核心js文件才几十kb，不会影响页面加载速度。 丰富的DOM选择器，jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。 链式表达式。 jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 事件、样式、动画支持。 jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。 jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。 jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。 jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫

目录 前端之jQuery 1. jQuery简介 2. jQuery优势 3. jQuery内容 4. jQuery版本 5. jQuery对象 5.1 定义 5.2 jQuery对象转成DOM对象 5.3 jQuery对象和DOM对象的使用 6. jQuery基础语法 6.1 语法 6.2 查找标签 6.2.1 基本选择器 6.2.2 基本筛选器 6.2.3 筛选器方法 6.3 操作标签 6.3.1 样式操作 6.3.2 位置操作 6.3.3 尺寸 6.3.4 文本操作 6.3.5 属性操作 6.3.6 文档处理 6.4 事件 6.4.1 常用事件 6.4.2 事件绑定 6.4.3 移除事件 6.4.4 阻止后续事件执行 6.4.5 阻止事件冒泡 6.4.6 页面载入 6.4.7 事件委托 6.5 动画效果 6.5.1 介绍 6.5.2 点赞特效简单示例： 6.6 拓展 6.6.1 .each 6.6.2 .data() 6.6.3 插件(了解) 前端之jQuery 1. jQuery简介 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ 2.

前端之Jquery jQuery jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do more.“ jQuery的优势 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。 Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫

花N长时间积累的Jquery插件，希望大家喜欢。大家还有什么新的插件，请留言，我们一并收录。 感谢大家的支持。 1. accordion类 基于jQuery开发，非常简单的水平方向折叠控件。 Horizontal accordion: jQuery 热点图书：www.hotbook.cn jQuery-Horizontal Accordion 具有XBOX360 blade界面风格的水平方向Accordion。 jQuery-Horizontal Accordion jQuery plugin: Accordion 用于创建 折叠菜单的jQuery插件。 jQuery plugin: Accordion 热点图书：www.hotbook.cn Accordion Menu script 基于 jQuery开发的可折叠菜单。 Accordion Menu script 热点图书：www.hotbook.cn jQuery.combobox jQuery.combobox 是一个采用jQuery开发的combobox控件，可以使用CSS控制该combobox的外观，可以设置各种不同风格的下拉动画效果。 jQuery.combobox 热点图书：www.hotbook.cn 2. AutoComplete jQuery插件易于集成到现在的表单中(Form)。 AutoComplete

jQuery jQuery 是一个 JavaScript 函数库。 jQuery 是一个轻量级的 JavaScript 库。 jQuery 库包含以下功能： 1234567 - HTML 元素选取- HTML 元素操作- CSS 操作- HTML 事件函数- JavaScript 特效和动画- HTML DOM 遍历和修改- AJAX 异步加载 jQuery介绍 jQuery 是目前使用最广泛的 javascript 函数库。据统计，全世界排名前 100 万的网站，有 46% 使用 jQuery ，远远超过其他库 微软公司甚至把 jQuery 作为他们的官方库 jQuery 的版本分为 1.x 系列和 2.x 、 3.x 系列， 1.x 系列兼容低版本的浏览器； 2.x 、 3.x 系列放弃支持低版本浏览器，目前使用最多的是 1.x 系列的 jquery 是一个函数库，一个 js 文件，页面用 script 标签引入这个 js 文件就可以使用 1 <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> 下载jQuery 官网： http://jquery.com/ 下载： https://code.jquery.com/ 基础语法 123456789101112 <script type=

引言 最近撸Vue的项目，感觉的有点心累。恰巧近日，有读者来信，就是想咨询一下 烟哥，现在还有必要学习jQuery么？ 我明白，现在MVVM框架逐渐占据了主要市场，很多老项目也逐渐的从jQuery转向了MVVM架构！ 例如，知名网站github在2018-09-06发了一篇文章叫《Removing jQuery from GitHub.com frontend》就提到了，已经改版并放弃了jQuery。 于是一些读者就有此疑问啦！ so，针对这个问题，想都不用想！ jQuery必须学！ 正文 jQuery的那些事 光阴似箭，岁月如梭...时间回到了2005年8月！ 一个帅气的小伙子John Resig(不用说了，比烟哥帅多了，这是我男神)，如下图所示 他在自己博客上发了一个文章，对Prototype的“Behavior”部分的一些语法改进意见。然后呢没过多久，他就开发出了jQuery，并迅速的风靡全球！ ps： Prototype也是一个JavaScript基础类库。 OK，好，我们先来看看jQuery当时能迅速的风靡全球的原因有哪些！ 我想了想，无外乎下面三条 (1)出色的DOM操作封装 例如原来你要修改样式，原生JavaScript是这么写的 var dom = document.getElementById('test'); dom.style.color = 'blue';

1、jQuery实现脚本与页面的分离 在HTML代码中，我们还经常看到类似这样的代码： <form id="myform" onsubmit=return validate();" > 即使validate()函数可以被放置在一个外部文件中，实际上我们依然是把页面与逻辑和事件混杂在一起。jQuery让你可以将这两部分分离。借助于jQuery，页面代码将如下所示： <form id="myform"> 接下来，一个单独的JS文件将包含以下事件提交代码： $("myform").submit(function() { ...your code here )} 这样我们可以实现灵活性非常强的清晰页面代码。jQuery让JavaScript代码从HTML页面代码中分离出来，就像数年前CSS让样式代码与页面代码分离开一样。 2、最少的代码做最多的事情 最少的代码做最多的事情，这是jQuery的口号，而且名副其实。使用它的高级selector，开发者只需编写几行代码就能实现令人惊奇的效果。开发者无需过于担忧浏览器差异，它除了还完全支持Ajax，而且拥有许多提高开发者编程效率的其它抽象概念。jQuery把JavaScript带到了一个更高的层次。以下是一个非常简单的示例： $("p.neat").addClass("ohmy").show("slow"); 通过以上简短的代码，开发者可以遍历

这里延迟加载的意思是，拖动滚动条时，在图片出现在浏览器显示区域后才加载显示。在这之前全部图片都由一张图片代替。节省流量，减轻服务器负担。 效果展示 http://hovertree.com/texiao/jqimg/7/ 请用鼠标或者键盘方向键使页面向下滚动，注意图片的变化。本特效没有使用专门的图片延迟加载插件，只需要一小段jQuery代码就实现了图片延迟加载，使用非常方便。在本文后面附有源码下载。 用到的加载中的图片： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>jQuery鼠标滚动页面图片延迟加载_何问起</title><base target="_blank" /> <meta name="description" content="何问起"> <meta name="keywords" content="何问起"> <link href="" rel="stylesheet"> <style type="text/css"> * { margin: 0; padding: 0; border: 0; } .hovertreebox { padding-top:

jQuery 是一个 JavaScript 函数库。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言！ jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 JavaScript 特效和动画 HTML DOM 遍历和修改 AJAX Utilities $(this).hide() 　　演示 jQuery hide() 函数，隐藏当前的 HTML 元素。 $("#test").hide() 　　演示 jQuery hide() 函数，隐藏 id="test" 的元素。 $("p").hide() 　　演示 jQuery hide() 函数，隐藏所有 <p> 元素。 $(".test").hide() 　　演示 jQuery hide() 函数，隐藏所有 class="test" 的元素。 基础语法是：$(selector).action() jQuery 遍历， 意为“移动”，用于根据其相对于其他元素的关系来“查找”（或选取）HTML 元素。以某项选择开始，并沿着这个选择移动，直到抵达您期望的元素为止。 AJAX = 异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。 简短地说，在不重载整个网页的情况下，AJAX 通过后台加载数据，并在网页上进行显示。