-
JQuery拖拽并改变元素的尺寸
"元素拖拽改变大小"其实和"元素拖拽"一个原理,只是所动态改变的对象不同而已,主要在于 top、left、width、height 的运用,相对实现起来也非常容易。以下附出源码原型,弄明白了原理再扩展其他实际应用,思路就变得简单、清晰得多了。先来看看效果: 效果演
-
JQuery实现自动补全的插件
自动补全是一个非常人性化的设计,可以为用户节省很多输入时间。自动补全是如何实现的呢?下面的程序可供参考。 感觉这个东西很常用,很多其它js框架里有,但是太大了,用不了太多,自己写了个。 下面是html测试代码: 01 !DOCTYPE html PUBLIC "-//W3C//DTD
-
JQuery 学习:鼠标移动变色效果
在某些场合,响应鼠标移动变色可以带来很好的用户体验。比如在表格或者列表中,鼠标移过的时候背景变成淡淡的蓝色,可以帮助用户知道他所在的那一行。用户体验都是从小的细节慢慢积累开来的。 这个效果主要是hover()的使用。 效果演示 欢迎访问简明现代魔法
-
JQuery JSON的简单使用
有些页面我们不能直接写PHP代码,这时候需要用Ajax来将前端的数据返回到服务器去处理。下面是一个简单的例子,关于使用JQuery、Ajax还有JSON这些基础知识。虽然简单,但是用途还是很广的。 前端页面代码: 01 script language=javascript src= "jquery.js" /
-
JQuery 学习:改变HTML元素的内容
show() 和 html() 的使用: 1 $( "span" ).addClass( "css_style" ).show().html( "foo" ); 首先增加样式,然后用 show() 显示隐藏的匹配元素,html("foo") 设置每一个匹配元素的 html 内容。 效果演示: 简明现代魔法 Code 01 style 02 .nowamagic 03 { 04
-
JQuery 学习:展开与收起HTML元素内容
程序演示如下: 单击这里测试(一个收缩展开功能) 点一下我就会收起了。 code $(document).ready(function(){$(".title").click(function(){$(".nowamagic").slideToggle("slow",function(){ });});}); 如何实现? 首先把JQuery导入。 然后开始写函数了。$(do
-
JQuery 学习:选取临近节点
Welcome! 欢迎来到简明现代魔法! 点下我看看会发生什么 next() 函数取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素。可以用一个可选的表达式进行筛
-
JQuery分屏指示器图片轮换效果
在Web App大行其道的今天,分屏指示器用得非常广泛,从Android、到腾讯的Web OS等等。分屏指示器给人很好的用户体验,下面就实现一个分屏指示器,用于实现图片的简单轮换效果,仅抛砖引玉~ 效果演示 1 2 3 4 JQuery Code script type="text/javascript"> va
-
JQuery的选择符介绍
JQuery强大的选择符可以让我们获得页面中任何元素进行操作,并且使用简单方便,可读性强。本章内容根据本人在开发中常用到的选择符作为例子来进行讲解,如有更多常用的简单的例子可回复提供,参与讨论,一起学习研究,首先我们从常用的CSS选择符开始。 CSS选
-
JQuery选择器是如何工作的
每次申明一个jQuery对象的时候,返回的是jQuery.prototype.init对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可以实现继承,加上js的对象只是引用不会是拷贝,new jQuery,new jQuer
-
JQuery 学习:给标签追加 CSS
今天我们要做的事情是,增加或移除元素的css class,例如: 1 $( "a" ).addClass( "test" ); 2 $( "a" ).removeClass( "test" ); a 是 selector,test 则是 CSS 样式。 比如以下代码,可以将 id 为 nowamagic 的 HTML 元素加上名为 addCss 的样式。 1 $(docu
-
JQuery Ajax 全解析
jQuery确实是一个挺好的轻量级的JS框架,能帮助我们快速的开发JS应用,并在一定程度上改变了我们写JavaScript代码的习惯。 我们先来看一些简单的方法,这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法,当然,如果要处理复杂的逻辑,还是需要用到j
-
JQuery选择器$()的工作原理浅析
每次申明一个jQuery对象的时候,返回的是jQuery.prototype.init对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可以实现继承,加上js的对象只是引用不会是拷贝,new jQuery,new jQuer
-
JQuery 学习:简单的手风琴效果
JQuery强大的链式操作,一行代码就可以完成类似手风琴效果的导航栏制作。 效果演示 第1章-认识jQuery 1.1-JavaScript和JavaScript库 1.2-加入jQuery 1.3-编写简单jQuery代码 1.4-jQuery对象和DOM对象 1.5-解决jQuery和其它库的冲突 1.6-jQuery开发工具和插件
-
JQuery右下角弹窗的效果实现
有时在页面加载的时候,需要在页面的右下角弹出一个小的提示框,显示一些提示信息给用户,通过使用jQuery的message插件,可以很方便的实现这个效果,在使用之前先介绍一下message插件中的方法的使用。 先看下效果演示: 效果演示 JQUEYR PLUGIN - Messager 1
-
JQuery简单的网页换肤
用jQuery做网页换肤确实是很一个很巧妙,很好的选择,这是本人在学习jQuery中学的知识,感觉很有用,写了下来,希望大家有更好的方法或者代码不足的地方请谅解,本人也是初学者啊,希望大家互相勉励互相学习。闲话少说,归入正题。 效果演示 简明现代魔法 蓝
-
用JQuery解析获取JSON数据
JSON 是一种比较方便的数据形式,下面使用$.getJSON方法,实现获得JSON数据和解析,都挺方便简单的。从http://api.flickr.com/services/feeds/photos_public.gne?tags=cattagmode=anyformat=jsonjsoncallback=? 这个地址得到JSON数据 并且分析里面的结构,生
-
JQuery 学习:选取父节点
效果演示 你鼠标移到链接处,这里不会受影响。 This is probably the most common mishap. The remedy is simple--yank! It's most easily donewith two people. One to restrain the bird and the This is a link. Hover me toThis is a link. Hover me toT
-
JQuery对数组的一些操作总结
JQuery对数组的处理非常便捷并且功能强大齐全,一步到位的封装了很多原生js数组不能企及的功能。下面来看看JQuery数组的强大之处在哪。 $.each(array, [callback]) 遍历 不同于例遍 jQuery 对象的 $.each() 方法,此方法可用于例遍任何对象(不仅仅是数组哦~)
-
将鼠标选中的文字发送到新浪微博
最近注意到新浪博客有个小功能,就是当鼠标选中一段文字时会浮现一个小图片,点击这个图片可以把选中内容发送到新浪微博,一时兴起昨晚就写了一个Demo玩了一下,代码超简单,没优化,有兴趣的朋友可以自己改进。 原理很简单,先获得鼠标选中文字,然后调用新