jQYERY】的更多相关文章

看到各大网站上都有一个轮播器的效果,自己不禁也想做一个,查了资料,看了轮播器的原理,慢慢的试着做了做,最终效果勉勉强强 原理:如图,试想一下,若是将<ul>的width属性值设置的很宽,直到可以装下你所有的图片,而每一个图片又用<li>包着并且设置了左浮动. 那么当我们向左移动ul的时候并且移动的距离为<li>的宽度,第二个<li>不就被移动到了<div>的窗口,这样一来图片不就被一张一张显示出来了吗? 接下来我们在设置<div>的属…
一:官方网站:[http://www.datatables.net/] 二:基本使用:[http://www.guoxk.com/node/jquery-datatables] 1.DataTables的默认配置 $(document).ready(function() {$('#example').dataTable();} ); 示例:http://www.guoxk.com/html/DataTables/Zero-configuration.html 2.DataTables的一些基础属…
闲来无事,做了一个模块效果 左右拖拽显示对比图,是用jq封装的 利用鼠标距离左侧(0,0)坐标的横坐标位移来控制绝对定位的left值 再配合背景图fixed属性,来制作视觉差效果 代码如下 <!doctype html> <html> <head> <meta charset="utf-8"> <title>左右推拽显示对比图</title> <style> body {overflow:hidden;…
原理是用页面的滚动高度scrollTop()来控制背景图的位置 附上源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&g…
今天做项目,其中有个功能需要两个图表的联动,用到两个按钮,这两个按钮分别控制两个图表,第一次直接在btn1的单击事件中使用了$("btn2").trigger("click"), 在按钮2中同样触发了按钮1的事件,本来觉得这样挺好的,没想到一运行,浏览器陷入瘫痪状态,我整理了下逻辑,发现这种写法会导致死循环,于是想到一个临时的解决办法: $(function(){ var value = 0; $("#btn1").click(function(…
jQuery的模块 一.jQuery一共有13个模块: 1. 核心方法 2. 回调模块(callbacks) 3. 数据缓存 4. 异步队列(Deffered) 5. 选择器操做 6. 属性操作 7. 节点遍历 8. 文档处理 9. 样式操作 11. 事件操作 12. AJAX交互 13. 动画引擎 jQuery的13个模块并不是单一的,比如jQuery动画,会依赖队列.动画.回调与数据缓存模块.jQuery抽出了所有可能复制的特性,分离出单一模块 二.五大块 jQuery按照我的理解分为五大块…
1.事件流: (1)事件捕获 (2)处于目标阶段 (3)事件冒泡 2.事件对象 对每一个事件都会回调函数,会有一个默认的事件对象,就是this event.target 触发的目标对象 event.type 事件类型 event.keyCode 键码 3.事件冒泡 event.stopPropagation() 阻止冒泡 event.preventDefault() 阻止默认事件 return false 以上两者包括 4.事件代理 自己做不了的事件,交给别人去做 原理 :运行冒泡的机制 现有的…
1.jQuery简介 jQuery是一个快速,小型且功能丰富的JavaScript库.借助易于使用的API(可在多种浏览器中使用),使HTML文档的遍历和操作,事件处理,动画和Ajax等事情变得更加简单.兼具多功能性和可扩展性,jQuery改变了数百万人编写JavaScript的方式. 兼容多浏览器的javascript函数库,把我们常用的一些功能进行了封装,方便我们来调用,提高我们的开发效率.核心理念是写得更少,做得更多(write less,do more). 1.1 发展历史 2006年约…
CSS部分: /*登录提示*/ * {margin: 0; padding: 0; } .layer { width: 350px; padding: 20px; background: #fff; border: 1px solid #bbb; border-radius: 10px; box-shadow: 0 3px 5px #bbb; /*阴影*/ position: absolute; top: 40%; left: 50%; transform: translate(-50%,-50…
刚刚学习了jqyery的一些事件和动画,下面我来总结一下: 1.基础事件 1.window事件,它的对应方法是ready(),$(document).ready()方法是事件模块中最重要的一个函数,可以极大的提高web应用程序的响应速度.(不做过多的讲解) 2.鼠标事件 鼠标事件就是用户在文档上移动或者点击时引发的操作. 1.click(); 2.mouseout(); 3.mouseout(); $(function () { $('li').on('mouseenter',function…
最常见的闭包 (Closure) 范式大家都很熟悉了: 123 (function() {// ...})(); 很简单,大家都在用.但是,我们需要了解更多.首先,闭包是一个匿名函数 (Anonymous function), 即是 (function() {}) 这部分.之所以要给 function 添加括弧是为了让它形成一个表达式 (expression), 有了表达式,并且确定它的类型是个函数 (Function 实例), 就可以直接调用它.所以,后面的一对括弧是可以工作的,它的意义是:我…
什么是dhtmlx? dhtmlx是一套网页开发 的函式库,他提供了树状元件.数据方格组件.工具列等组件供开发 人员使用. dhtmlx组件是一个JavaScript 库,提供了一套完整的Ajax驱动的UI 组件.使用 dhtmlxSuite 生成企业级 web 应用程序有干净的界面. 快速的性能和丰富的用户体验.  dhtmlx组件是由位于俄罗斯圣彼得堡的DHTMLX公司开发的,适用于B/S模式的Web应用开发.    特点:小.快.灵 小:相对于ExtJs庞大的框架级的代码量,dhtmlx现…
概述 对于web应用程序:用户浏览器发送请求.服务器接收并处理请求,然后返回结果,往往返回就是字符串(HTML),浏览器将字符串(HTML),渲染并显示浏览器上· Ajax和Form表单提交数据的的好处有以下两种:               Form表单提交数据的时候,呈现在页面上是刷新整个页面·               Ajax提交数据的时候,只把有用的数据给提交过去,其余的不变· 1:传统的web应用 一个简单操作需要重新加载全局数据 2:AJAX ajax,Asynchronous…
前面的话 一般地,有两种自适应:撑满空闲空间与收缩到内容尺寸.CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'.除此之外 ,还新增了更细粒度的'min-content'和'max-content'.这四个关键字可用于设置宽高属性.本文将详细介绍CSS3中的这四个自适应关键字 [注意]IE浏览器不支持,webkit内核浏览器需添加-webkit-前缀 fill-available width:fill-available表示撑满可用空间 举例来说,页面中一…
AJAX(Asynchronous Javascript And XML)翻译成中文就是"异步Javascript和XML".即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML). 同步交互:客户端发出一个请求后,需要等待服务器响应结束后,才能发出第二个请求: 异步交互:客户端发出一个请求后,无需等待服务器响应结束,就可以发出第二个请求. AJAX除了异步的特点外,还有一个就是:浏览器页面局部刷新:(这一特点给用户的感受是在不知不觉中完…
这是一篇浅入浅出的 Redux 实现过程的推演笔记!正常来说应该是要从源码下手开始解析,这里是逆向推演,假如有需求是要这么一个东西,那么该如何从零开始实现? 通过该笔记,更多的是希望自己能够多熟悉从无到有的开发思维,而非源码解析这种从有到有的轮子思维.   Rudex 介绍 首先确认目标,要写个什么样的东西. 官宣:A predictable state container for JavaScript apps. JavaScript 应用程序中可预测的状态容器. 通过这句话,挖掘一些关键点:…
近期已朋友问我问题,实现类似淘宝百度的下啦搜索条,看了网上好多帖子,都看起来好复杂,而且引用了好多没用的东西,而且多选选择内容多之后容易样式奔溃, 无奈之下只好自己改了, 话不多说上效果图: 模糊搜索广会自动补全所有带广的下拉选项.每个选中的可以单独删除. 大神勿喷,给需要的朋友个帮助,话不多说,上代码: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"…
Jquery入门学习 一.简介 1.Jquery是基于JavaScript的一种框架,兼容主流浏览器,提供了dom,animate(JQ+CSS),ajax; 2.Jquery2.0后版本不支持IE6/7/8浏览器 特点 --- write less, do more 二.引入对象获取 1.引入 <script src="jquery-1.11.0" type=""text/javascript> </script> 2. 对象获取 //获取…
jqyery dataTable 基本用法 一:官方网站:[http://www.datatables.net/] 二:基本使用:[http://www.guoxk.com/node/jquery-datatables] 1.DataTables的默认配置 $(document).ready(function() {$('#example').dataTable();} ); 示例:http://www.guoxk.com/html/DataTables/Zero-configuration.h…
一.概述 1.版本选择 jquery官网 jQuery的版本有很多,大家在选择版本的时候,一般原则是越新越好,但其实不然,jQuery版本是在不断进步和发展的,最新版是当时最高技术水平,也是最先进的技术理念. 目前jQuery有三个大版本: 1.x:兼容ie678,使用最为广泛的,官方只做BUG维护,功能不再新增.因此一般项目来说,使用1.x版本就可以了,最终版本:1.12.4 (2016年5月20日) 2.x:不兼容ie678,很少有人使用,官方只做BUG维护,功能不再新增.如果不考虑兼容低版…
$.fn.extend({}) $.fn.extend({ aaa:function(){ alert(1); } }); 可以通过对象调用方法 $('.aaa').aaa(); $.extend({}) $.extend({ aaa:function(){ alert(1); } }); 是通过$调用方法,把扩展的方法之加到了jQyery上 $.aaa();…