- 浏览: 1325621 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
kay11:
...
JAVA生成简单的随机字符串(a-zA-Z0-9) -
zhangliguoaccp:
您好关于登录页面的验验证码这块怎么解决的?还有登录成功后,跳转 ...
JAVA,模拟HTTP登录 -
107x:
不错,谢谢!
<c:foreach 循环 map -
wenjin:
不知楼主是不还在想请叫一下我自己开的Tomcat下载一个文件C ...
Android 下载文件及写入SD卡 -
zyywgf:
JSTL c标签,fn标签,fmt标签
四:JavaScript处理
$.browser() 判断浏览器类型,返回boolean值
$(function(){
if($.browser.msie) {
alert("这是一个IE浏览器");}
else if($.browser.opera) {
alert("这是一个opera浏览器");}
})
当页面载入时判断浏览器类型,可判断的类型有msie、mozilla、opera、safari
$.each(obj, fn) obj为对象或数组,fn为在obj上依次执行的函数,注意区分$().each()
$.each( [0,1,2], function(i){ alert( "Item #" + i + ": " + this ); });
分别将0,1,2为参数,传入到function(i)中
$.each({ name: "John", lang: "JS" }, function(i){ alert( "Name: " + i + ", Value: " + this );
{ name: "John", lang: "JS" }为一个hash对象,依次将hash中每组对象传入到函数中
$.extend(obj, prop) 用第二个对象扩展第一个对象
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);
执行后settings对象为{ validate: true, limit: 5, name: "bar" }
可以用下面函数来测试
$(function(){
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
$.extend(settings, options);
$.each(settings, function(i){ alert( i + "=" + this ); });
})
$.grep(array,fn) 通过函数fn来过滤array,将array中的元素依次传给fn,fn必须返回一个boolen,如fn返回true,将被过滤
$(function(){
var arr= $.grep( [0,1,2,3,4], function(i){ return i > 2; });
$.each(arr, function(i){ alert(i); });
})
我们可以看待执行$.grep后数组[0,1,2,3,4]变成[0,1]
$.merge(first, second) 两个参数都是数组,排出/除第二个数组中与第一个相同的,再将两个数组合并
$(function(){
var arr = $.merge( [0,1,2], [2,3,4] )
$.each(arr, function(i){ alert(i); });
})
可以看出arr的结果为[0,1,2,3,4]
$.trim(str) 移出字符串两端的空格
$.trim(" hello, how are you? ")的结果是"hello, how are you?"
五:动态效果
在将这部分之前我们先看个例子,相信做网页的朋友都遇到n级菜单的情景,但点击某菜单按钮时,如果它的子菜单是显示的,则隐藏子菜单,如果子菜单隐藏,则显示出来,传统的javascript做法是先用getElementById取出子菜单所在容器的id,在判断该容器的style.display是否等于none,如果等于则设为block,如果不等于则设为none,如果在将效果设置复杂一点,当点击按钮时,不是忽然隐藏和显示子菜单,而是高度平滑的转变,这时就要通过setTimeout来设置子菜单的height了,再复杂一点透明度也平滑的消失和显现,这时显现下来需要编写很多代码,如果js基础不好的朋友可能只能从别人写好的代码拿过来修改了!jQuery实现上面效果只需要1句话就行,$("#a").toggle("slow"), ,学完jQuery后还需要抄袭修改别人的代码吗?下面我们逐个介绍jQuery用于效果处理的方法。
hide() 隐藏匹配对象
<p id="a">Hello Again</p><a href="#" onClick=’$ ("#a").hide()’>jQuery</a>
当点击连接时,id为a的对象的display变为none。
show() 显示匹配对象
hide(speed) 以一定的速度隐藏匹配对象,其大小(长宽)和透明度都逐渐变化到0,speed有3级("slow", "normal", "fast"),也可以是自定义的速度。
show(speed) 以一定的速度显示匹配对象,其大小(长宽)和透明度都由0逐渐变化到正常
hide(speed, callback) show(speed, callback) 当显示和隐藏变化结束后执行callback函数
toggle() toggle(speed) 如果当前匹配对象隐藏,则显示他们,如果当前是显示的,就隐藏,toggle(speed),其大小(长宽)和透明度都随之逐渐变化。
<img src="1.jpg" style="width:150px"/>
<a href="#" onClick='$("img").toggle("slow")'>jQuery</a>
fadeIn(speeds) fadeOut(speeds) 根据速度调整透明度来显示或隐藏匹配对象,注意有别于hide(speed)和show(speed),fadeIn和fadeOut都只调整透明度,不调整大小
<img src="1.jpg" style="display:none"/><a href="#" onClick='$("img ").fadeIn("slow")'> jQuery </a>
点击连接后可以看到图片逐渐显示。
fadeIn(speed, callback) fadeOut(speed, callback) callback为函数,先通过调整透明度来显示或隐藏匹配对象,当调整结束后执行callback函数
<img src="1.jpg"/>
<a href="#" onClick='$("img ").fadeIn("slow",function(){ alert("Animation Done."); })'> jQuery </a>
点击连接后可以看到图片逐渐显示,显示完全后弹出对话框
fadeTo(speed, opacity, callback) 将匹配对象以speed速度调整倒透明度opacity,然后执行函数callback。Opacity为最终显示的透明度(0-1).
<img src="1.jpg"/><br>
<a href="#" onClick='$("img ").fadeTo("slow",0.55,function(){ alert("Animation Done."); })'> jQuery </a>
大家可以看一下自己看看效果,如果不用jQuery,编写原始javascript脚本可能很多代码!
slideDown(speeds) 将匹配对象的高度由0以指定速率平滑的变化到正常!
<img src="1.jpg" style="display:none"/>
<a href="#" onClick='$("img ").slideDown("slow")'>jQuery</a>
slideDown(speeds,callback) 将匹配对象的高度由0变化到正常!变化结束后执行callback函数
slideUp(speed) slideUp(speed, callback) 匹配对象的高度由正常变化到0
slideToggle(speed) 如果匹配对象的高度正常则逐渐变化到0,若为0,则逐渐变化到正常
六:事件处理
hover(Function, Function) 当鼠标move over时触发第一个function,当鼠标move out时触发第二个function
样式:<style>.red{color:#FF0000}</style>
Html代码: <div id="a">sdf</div>
jQuery代码及效果
$(function(){
$("#a").hover(function(){$(this).addClass("red");},
function(){ $(this).removeClass("red");
});
})
最终效果是当鼠标移到id为a的层上时图层增加一个red样式,离开层时移出red样式
toggle(Function, Function) 当匹配元素第一次被点击时触发第一个函数,当第二次被点击时触发第二个函数
样式:<style>.red{color:#FF0000}</style>
Html代码: <div id="a">sdf</div>
jQuery代码及效果
$(function(){
$("#a"). toggle (function(){$(this).addClass("red");},
function(){ $(this).removeClass("red");
});
})
最终效果是当鼠标点击id为a的层上时图层增加一个red样式,离开层时移出red样式
bind(type, fn) 用户将一个事件和触发事件的方式绑定到匹配对象上。
trigger(type) 用户触发type形式的事件。$("p").trigger("click")
还有:unbind() unbind(type) unbind(type, fn)
Dynamic event(Function) 绑定和取消绑定提供函数的简捷方式
例:
$("#a").bind("click",function() {
$(this).addClass("red");
})
也可以这样写:
$("#a").click(function() {
$(this).addClass("red");
});
最终效果是当鼠标点击id为a的层上时图层增加一个red样式,
jQuery提供的函数
用于browers事件
error(fn) load(fn) unload(fn) resize(fn) scroll(fn)
用于form事件
change(fn) select(fn) submit(fn)
用于keyboard事件
keydown(fn) keypress(fn) keyup(fn)
用于mouse事件
click(fn) dblclick(fn) mousedown(fn) mousemove(fn)
mouseout(fn) mouseover(fn) mouseup(fn)
用于UI事件
blur(fn) focus(fn)
以上事件的扩展再扩展为5类
举例,click(fn) 扩展 click() unclick() oneclick(fn) unclick(fn)
click(fn):增加一个点击时触发某函数的事件
click():可以在其他事件中执行匹配对象的click事件。
unclick ():不执行匹配对象的click事件。
oneclick(fn):只增加可以执行一次的click事件。
unclick (fn):增加一个点击时不触发某函数的事件。
上面列举的用于browers、form、keyboard、mouse、UI的事件都可以按以上方法扩展。
七:Ajax支持
通用方式:
$.ajax(prop) 通过一个ajax请求,回去远程数据,prop是一个hash表,它可以传递的key/value有以下几种。
(String)type:数据传递方式(get或post)。
((String)url:数据请求页面的url
(String)data:传递数据的参数字符串,只适合post方式
(String)dataType:期待数据返回的数据格式(例如 "xml", "html", "script",或 "json")
(Boolean)ifModified: 当最后一次请求的响应有变化时才成功返回,默认值是false
(Number)timeout:设置时间延迟请求的时间。可以参考$.ajaxTimeout
(Boolean)global:是否为当前请求触发ajax全局事件,默认为true
(Function)error:当请求失败时触发的函数。
(Function)success:当请求成功时触发函数
(Function)complete:当请求完成后触发函数
jQuery代码及说明
$.ajax({url: "ajax.htm",
success:function(msg){
$(div"#a").html(msg);
}
});
将ajax.htm返回的内容作为id为a的div内容
$.ajax({ url: "ajax.aspx",
type:"get",
dataType:"html",
data: "name=John&location=Boston",
success:function(msg){
$("#a").html(msg);
}
});
用get方式向ajax.aspx页面传参数,并将返回内容负给id为a的对象。
$.ajaxTimeout(time) 设置请求结束时间
$.ajaxTimeout( 5000 )
其它简化方式:
$.get(url, params, callback) 用get方式向远程页面传递参数,请求完成后处理函数,除了url外,其它参数任意选择!
$.get( "ajax.htm" , function(data){ $("#a").html(data) })
$.get( "ajax.asp",
{ name: "young", age: "25" },
function(data){ alert("Data Loaded: " + data); }
)
$.getIfModified(url, params, callback) 用get方式向远程页面传递参数,从最后一次请求后如果数据有变化才作出响应,执行函数callback
$.getJSON(url, params, callback) 用get方式向远程json对象传递参数,请求完成后处理函数callback。
$.getScript(url, callback) 用get方式载入并运行一个远程javascript文件。请求完成后处理函数callback。
$.post(url, params, callback) 用post方式向远程页面传递参数,请求完成后处理函数callback
load(url, params, callback) 载入一个远程文件并载入页面DOM中,并执行函数callback
$("#a").load("ajax.htm", function() { alert("load is done"); } );
仰天一笑 徐羽 向ajax.htm页面发出请求,将返回结果装入id为a的内容中,然后再执行函数callback。
$.loadIfModified(url, params, callback) 用get方式向远程页面传递参数,从最后一次请求后如果数据有变化才作出响应,将返回结果载入页面DOM中,并执行函数callback
ajaxStart(callback) 当ajax请求开始时执行函数callback
ajaxComplete(callback) 当ajax请求完成时执行函数callback
ajaxError(callback) 当ajax请求发生错误时执行函数callback
ajaxStop(callback) 当ajax请求停止时执行函数callback
ajaxSuccess(callback) 当ajax请求成功时执行函数callback
八:jQuery插件
随着jQuery的广泛使用,已经出现了大量jQuery插件,如thickbox,iFX,jQuery-googleMap等,简单的引用这些源文件就可以方便的使用这些插件。这里我简单的介绍一些网址供大家参考,这些网站头提供了大量的demo,并且使用及其简单,及时E文不好,也能快速掌握!
http://jquery.com/plugins 官方推荐
http://interface.eyecon.ro/demos 效果超级棒,使用更简单,一定有你喜欢的!
http://www.dyve.net/jquery/
http://bassistance.de/jquery-plugins
还有其它很多插件,大家可以google以下,如果大家发现好的了,可以留言共享以下!
——————————————————————————————————————————————
至此jQuery已经介绍完毕,并合并整理提供给大家 下载 ,更多详细的使用请大家参考官方网站,下面我再推荐一些jQuery的学习网站方便大家更好的掌握这项工具!
http://keel.sike.googlepages.com/jQuery_getting_started.html 中文入门介绍,Keel翻译
http://jquery.com/api jquery提供全部基本方法的介绍及demo,方便大家查询!
发表评论
-
jQuery 取值、赋值的基本方法[转]
2013-01-18 15:39 894/*获得TEXT.AREATEXT的值*/ var ... -
jquery处理JSONArray
2013-01-18 15:37 1354var bcvList = eval('<c:out ... -
jQuery的Select操作集合
2013-01-14 15:42 794jQuery获取Select选择的Text和Value: 语 ... -
JS 浮点计算 精度缺失
2013-01-14 15:41 1007<!DOCTYPE HTML PUBLIC " ... -
DIV层被Flash或表单遮盖的解决方法
2013-01-05 15:21 804在网页制作中,经常会遇到DIV层被Flash、input、se ... -
zTree子节点异步加载注意
2012-12-17 17:10 1897子节点异步加载注意1.后台数据不需要传pid到页面,页面的配置 ... -
js刷新页面--2【转】
2012-10-24 16:33 1060reload 方法,该方法强迫浏览器刷新当前页面。语法:loc ... -
jQuery 的DatePicker 添加一个Clear清除按钮
2012-08-17 16:13 22484$(document).ready(function () ... -
Ext 总结
2012-05-15 11:20 875一. GridPanel var sm ... -
javascript简易验证码
2012-04-10 16:33 1442<!DOCTYPE html PUBLIC " ... -
下拉框,且可以编辑
2011-05-17 14:22 1110一个,可以选择的下拉框,并可以实现自行输入值 < ... -
省市级联菜单,静态HTML
2011-05-17 10:21 1635<html> <head> ... -
input只允许输入数字
2011-04-21 13:53 1052function onlyNum(){ if(!((even ... -
javascript判断字符长度
2011-04-21 13:29 907function getlengthB(str){ ... -
HTML 日期
2011-02-24 17:40 1964html 写道 <!DOCTYPE HTML PUBL ... -
JS中window.setInterval和window.setTimeout的区别
2010-10-19 16:37 1357setTimeout(表达式,延时时间) 在执行时,是在载入后 ... -
dwr定时获取后台数据
2010-10-19 16:35 21161.在JSP页面加入展示代码: 新消息<input ty ... -
JS 跳出iframe框架,退出
2010-05-04 09:49 4590(1)session过期后登陆页面跳出iframe页面问题 登 ... -
文件上传页面控制动态添加删除的代码
2010-03-24 16:50 1081<%@ page language="java ... -
jquery 操作手册(3)
2010-01-21 18:02 859三:CSS操作 ...
相关推荐
微信小程序Artandw_eapp-artand
本项目是一款基于Vue和JavaScript开发的心旅途个性化推荐旅游平台设计源码,整合了513个Java文件、76个PNG图片、70个XML配置文件、62个JavaScript文件、42个Vue组件文件、28个CSS样式文件、22个HTML文件、18个YAML配置文件、16个属性文件、11个Vue模板文件,总计919个文件。平台采用现代化前端技术堆栈,旨在为用户提供个性化的旅游推荐服务。
微信小程序开发地图演示、地图导航、标记标注_echat-weapp-mpdemo
Vue和Axios文件
该项目为基于Python语言开发的HTML与任务清单关系系统,包含50个文件,其中16个为HTML文件,14个为Python源代码文件,其余包括Python编译文件、Markdown文件、图片、数据库文件、配置文件、模板文件、文本文件等,旨在为用户提供简单便捷的生活时间段安排及任务规划管理工具。
全国大学生电子设计大赛项目合集全国电赛优秀作品大学生电子竞赛历届题目
该项目是一款基于Python和pygame引擎开发的植物大战僵尸游戏,包含125个文件,涵盖93个PNG图像文件、11个Python源代码文件、10个Python字节码文件、8个GIF动画文件、1个Git忽略配置文件、1个JSON数据文件以及1个Markdown说明文件。游戏设计源码为学习游戏开发提供了丰富的实践素材。
本项目是一款以Java为核心开发的Qiniu服务端设计源码整合的RunFlow桌面端效率工具,总文件数29个,包括17个Java源文件、2个属性文件、1个Git忽略文件、1个JAR包文件、1个LICENSE文件、1个Markdown文件、1个YAML文件、1个Maven配置文件和1个命令文件。该工具旨在提升工作效率,适用于各种桌面环境下的便捷使用。
那些年,与你同分同位次的同学都去了哪里?全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据,高考志愿必备参考数据
Golang支付-微信公众号、微信应用、微信小程序、微信企业支付、支付宝网络版、支付宝应用、支付宝企业支付_支付宝
医疗辅助诊断系统-开题
该项目为东东购物网的后台开发源码,采用JavaScript为主要编程语言,辅以CSS、Java、HTML等多种语言,共包含1300个文件。具体文件类型分布如下:458个PNG图片文件、215个JavaScript文件、160个JPG图片文件、159个GIF图片文件、107个CSS样式表文件、96个Java源代码文件、28个HTML文件、24个XML文件、12个JSON文件、8个Map文件。该系统旨在提供高效、便捷的购物后台管理功能。
content_1728052071778.apk
资源视频编辑软件win781064位系统
职业心理测试人格气质情绪控制测试18个文件
那些年,与你同分同位次的同学都去了哪里?全国各大学在辽宁2020-2024年各专业最低录取分数及录取位次数据,高考志愿必备参考数据
该项目为基于Python语言的微信小程序源码,全面整合了JavaScript和微信小程序开发技术。项目结构包含50个文件,涵盖了15个PNG图片、9个JSON配置、8个JavaScript脚本、7个wxss样式表、6个WXML模板和4个JPG图片。此外,还包括1个Markdown文档。该小程序的设计与实现展现了Python编程的强大能力,适用于微信生态下的各类应用场景。
全国大学生电子设计大赛项目合集全国电赛优秀作品电赛B题风力摆控制系统设计(原理图+源代码+设计报告等)
基于西门子S7-200PLC的自动灌溉系统组态王组态 带解释的梯形图程序,接线图原理图图纸,io分配,组态画面
该项目是基于GitHub平台的xClouds-device项目设计源码,包含2835个文件,包括763个头文件、630个C语言源文件、207个文本文件、144个Makefile文件、102个Python脚本、86个Markdown文件、70个二进制文件、59个实验文件、50个Shell脚本、48个项目构建脚本。该项目主要使用C语言编写,辅以Python、Shell、C++和C++等语言,适合进行设备控制和云平台交互开发。