jquery教程,jquery教程入门
jquery 常用使用方法
新窗口打开链接 XHTML Strict 版本不支持 target="_blank" 属性 而使用 JQuery 能很好地解决这个问题 实现新窗口打开网页
复制代码 代码如下:
$( a[@rel$= external ] ) click(function(){ this target = "_blank"; }); /* Usage: a href=" target=_blank css教程("padding" " em em" ); //B Target anything above IE if ($ browser msie $ browser version ) $("#menu li a") css("padding" " em em" ); //C Target IE and below if ($ browser msie $ browser version = ) $("#menu li a") css("padding" " em em" ); //D Target Firefox and above if ($ browser mozilla $ browser version = " " ) $("#menu li a") css("padding" " em em" );
字符串替换 用 JQuery 能对文本内容中的特定字符串进行替换操作
复制代码 代码如下:
var el = $( #id ); el (el () replace(/word/ig ""));
列高度相等 用 CSS 实现两列高度相等并不容易 JQuery 能帮你解决
复制代码 代码如下:
function equalHeight(group) { tallest = ; group each(function() { thisHeight = $(this) height(); if(thisHeight tallest) { tallest = thisHeight; } }); group height(tallest); } /* Usage: $(document) ready(function() { equalHeight($(" recent article")); equalHeight($(" footer col")); }); */
字体大小重设 字体大小重设是一个非常常用的功能
$(" resetFont") click(function(){ $( ) css( font size originalFontSize); }); // Increase Font Size $(" increaseFont") click(function(){ var currentFontSize = $( ) css( font size ); var currentFontSizeNum = parseFloat(currentFontSize ); var newFontSize = currentFontSizeNum* ; $( ) css( font size newFontSize); return false; }); // Decrease Font Size $(" decreaseFont") click(function(){ var currentFontSize = $( ) css( font size ); var currentFontSizeNum = parseFloat(currentFontSize ); var newFontSize = currentFontSizeNum* ; $( ) css( font size newFontSize); return false; }); });
禁用右键菜单 有许多 JavaScript 代码段可禁用右键菜单 但 JQuery 使操作变得更容易
复制代码 代码如下:
如何在 Wordpress 中使用 jQuery
如何在 WordPress 中使用 jQuery？
1.首先要加载 jQuery 库
这步很简单，你只需要在你使用的 WordPress 主题的 header.php 文件的 head 标签中加入如下代码即可：
script?type="text/javascript"?src=""/script
你也可以把 google 上的 jQuery 库下载到本地再加载，不过并不推荐你这么做，用 google 的就可以的。
2.在主题中调用 .js 文件
新建立一个 .js 文件，在文件中加入如下代码：
?jQuery(document).ready(function($){
//?这里就是你需要添加的教程中提到的一些?jQuery?代码
});
例如返回顶部标签里面的JS文件是这样写的：
????jQuery(document).ready(function($){
??$('#shang').click(function(){$('html,body').animate({scrollTop:?'0px'},?800);});
??$('#xia').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top},?800);});?
});
最后在主题中调用这个 .js 文件，假设你建立的文件名为 all.js，那么直接在主题文件 header.php 中的 head 区域添加如下样式代码即可：
??script?type="text/javascript"?src=""/script
?3.你在期待第三步吗？没了哈，通过两步操作已经完成了，哈哈。
通过以上的操作你已经可以在 WordPress 中使用 jQuery 了，以后再看到类似的教程，都按这个操作来就行了，通过自己的操作你就会发现，原来，传说中的改代码也不是那么的难。
jQuery动画特效实例教程
本文以实例形式详细讲述了jQuery动画特效的实现方法。分享给大家供大家参考之用。具体方法如下：
1.自制折叠内容块
内容块如下：
div
class="module"
div
class="caption"
span标题/span
img
src="rollup.gif"
alt="rollup"
title="rolls
up
this
module"/
/div
div
class="body"
近日，《体坛周报》记者马德兴在接受天津体育频道《体坛新视野》节目采访时表示自己对恒大[微博]的情况比较担忧，恒大统治力比上赛季下降了很多，恒大外援存在位置重叠的问题，客场不输给西悉尼流浪者就是一个可以接受的结果。该节目称恒大联赛3连胜胜之不武，恒大的惹不起不过尔尔，恒大失去了对其它球队压倒性的优势，能力下降是恒大霸主地位有所动摇的根源所在。
/div
/div
给img元素绑定点击事件。
$(function()
{
$('div.caption
img').click(function
()
{
//先找到img的父级元素，再找该父级元素的子元素
var
$body
=
$(this).closest('div.module').find('div.body');
if
($body.is(':hidden'))
{
$body.show();
}
else
{
$body.hide();
}
});
});
运行效果如下图所示：
切换元素的显示状态，还可以用toggle方法。
$(function()
{
$('div.caption
img').click(function
()
{
$(this).closest('div.module').find('div.body').toggle();
});
});
以上是没有动画效果的，有时候感觉会很唐突。实际上，show,hide,toggle方法都可以有动画效果。比如：
$(function()
{
$('div.caption
img').click(function
()
{
$(this).closest('div.module').find('div.body').toggle('slow');
});
});
又比如：
$(function()
{
$('div.caption
img').click(function
()
{
$(this).closest('div.module').find('div.body').toggle('slow',
function()
{
$(this).closest('div.module').toggleClass('rolledup',
$(this).is(':hidden'))
});
});
});
2.使元素淡入淡出
fadeIn(speed,
callback)
fadeOut(speed,
callback)
fadeTo(speed,
opacity,
callback)
3.上下滑动元素
slideDown(speed,
callback)
slideUp(speed,
callback)
slideToggle(speed,
callback)
4.停止动画
stop(clearQueue,
gotoEnd)
5.创建自定义动画
animate(properties,
duration,
easing,
callback)
$('.classname').animate({opacity:'toggle'},'slow')
如果写一个扩展函数。
$.fn.fadeToggle
=
function(speed){
return
this.animate({opacity:'toggle'},'slow');
}
6.自定义缩放动画
$('.classname').each(function(){
$(this).animate({
width:
$(this).width()
*
2,
height:
$(this).height()
*
2
});
});
7.自定义掉落动画
$('.classname').each(function(){
$(this)
.css("position","relative")
.animate({
opacity:
0,
top:
$(window).height()
-
$(this).height()
-
$(this).position().top
},'slow',function(){
$(this).hide();
})
});
8.自定义消散动画
$('.classname').each(function(){
var
position
=
$(this).position();
$(this)
.css({
position:
'absolute',
top:
position.top,
left:position.left
})
.animate({
opacity:
'hide',
width:
$(this).width()*5,
height:
$(this).height()*5
top:
position.top
-
($(this).height()
*
5
/
2),
left:
position.left
-
($(this).width()
*
5
/2)
},'normal');
});
9.队列中的动画
//动画插入队列
$('img').queue('chain',
function(){});
$('img').queue('chain',
function(){});
$('img').queue('chain',
function(){});
$('img').queue('chain',
function(){});
$('button').click(function(){
$('img').dequeue('chain');
//删除队列中的动画
})
cleaeQueue(name)//删除所有未执行的队列中的动画
delay(duration,
name)//为队列中所有未执行的动画添加延迟
相信本文所述对大家的jQuery程序设计有一定的借鉴价值。
求JQuery全套免费视频教程（最好可以下载的）！！！
Jquery视频教程.zip百度网盘资源免费下载
链接:
提取码:p6qi ?
jquery 多个 上传文件教程
jquery 实现多个上传文件教程：
首先创建解决方案,添加jquery的js和一些资源文件(如图片和进度条显示等):
?jquery-1.3.2.min.js
?jquery.uploadify.v2.1.0.js
??jquery.uploadify.v2.1.0.min.js
??swfobject.js
?uploadify.css
1、页面的基本代码如下
这里用的是aspx页面(html也是也可的)
页面中引入的js和js函数如下：
script?src="js/jquery-1.3.2.min.js"?type="text/javascript"/script??
script?src="js/jquery.uploadify.v2.1.0.js"?type="text/javascript"/script??
script?src="js/jquery.uploadify.v2.1.0.min.js"?type="text/javascript"/script??
script?src="js/swfobject.js"?type="text/javascript"/script??
link?href="css/uploadify.css"?rel="stylesheet"?type="text/css"?/??
??
/script
js函数：
script?type="text/javascript"??
????????$(document).ready(function?()?{??
???
????????????$("#uploadify").uploadify({??
????????????????'uploader':?'image/uploadify.swf',??//uploadify.swf文件的相对路径，该swf文件是一个带有文字BROWSE的按钮，点击后淡出打开文件对话框????????????????
?????????????'script':?'Handler1.ashx',//????script?：??后台处理程序的相对路径??
????????????????'cancelImg':?'image/cancel.png',??
????????????????'buttenText':?'请选择文件',//浏览按钮的文本，默认值：BROWSE。??
????????????????'sizeLimit':999999999,//文件大小显示??
????????????????'floder':?'Uploader',//上传文件存放的目录??
??????????????'queueID':?'fileQueue',//文件队列的ID，该ID与存放文件队列的div的ID一致??
????????????????'queueSizeLimit':?120,//上传文件个数限制??
????????????????'progressData':?'speed',//上传速度显示??
????????????????'auto':?false,//是否自动上传??
????????????????'multi':?true,//是否多文件上传??
????????????????//'onSelect':?function?(e,?queueId,?fileObj)?{??
????????????????//????alert("唯一标识:"?+?queueId?+?"\r\n"?+??
????????????????//??"文件名："?+?fileObj.name?+?"\r\n"?+??
????????????????//??"文件大小："?+?fileObj.size?+?"\r\n"?+??
????????????????//??"创建时间："?+?fileObj.creationDate?+?"\r\n"?+??
????????????????//??"最后修改时间："?+?fileObj.modificationDate?+?"\r\n"?+??
????????????????//??"文件类型："?+?fileObj.type);??
???
????????????????//????}??
????????????????'onQueueComplete':?function?(queueData)?{??
????????????????????alert("文件上传成功！");????????????????????
????????????????????return;??
????????????????}??
???
????????????});??
????????});
页面中的控件代码：
body??
????form?id="form1"?runat="server"??
????div?id="fileQueue"?????????
????/div??
????????div??
????????????p??
????????????????input?type="file"?name="uploadify"?id="uploadify"/??
????????????????input?id="Button1"?type="button"?value="上传"?onclick="javascript:?$('#uploadify').uploadifyUpload()"?/??
????????????????input?id="Button2"?type="button"?value="取消"?onclick="javascript:$('#uploadify').uploadifyClearQueue()"?/??
????????????/p??
????????/div??
????/form??
/body
函数主要参数：
$(document).ready(function()?{??
????????$('#fileInput1').fileUpload({??
????????????????'uploader':?'uploader.swf',//不多讲了??
????????????????'script':?'/AjaxByJQuery/file.do',//处理Action??
????????????????'cancelImg':?'cancel.png',??????????
????????????????'folder':?'',//服务端默认保存路径??
????????????????'scriptData':{'methed':'uploadFile','arg1','value1'},??
????????????????//向后台传递参数,methed,arg1为参数名,uploadFile,value1为对应的参数值,服务端通过request["arg1"]??
????????????????'buttonText':'UpLoadFile',//按钮显示文字,不支持中文,解决方案见下??
????????????????//'buttonImg':'图片路径',//通过设置背景图片解决中文问题,就是把背景图做成按钮的样子??
????????????????'multi':'true',//多文件上传开关??
?????????????????'fileExt':'*.xls;*.csv',//文件过滤器??
????????????????'fileDesc':'.xls',//文件过滤器?详解见文档??
???????????'onComplete'?:?function(event,queueID,file,serverData,data){???
????????????????????????//serverData为服务器端返回的字符串值??
????????????????????????alert(serverData);??
?????????????????}??
????????});??
});
后台一般处理文件：
using?System;??
using?System.Collections.Generic;??
using?System.Linq;??
using?System.IO;??
using?System.Net;??
using?System.Web;??
using?System.Web.Services;??
namespace?fupload??
{??
????///?summary??
????///?Handler1?的摘要说明??
????///?/summary??
????public?class?Handler1?:?IHttpHandler??
????{??
???
????????public?void?ProcessRequest(HttpContext?context)??
????????{??
????????????context.Response.ContentType?=?"text/plain";??
???
????????????HttpPostedFile?file?=?context.Request.Files["Filedata"];//对客户端文件的访问??
???
????????????string?uploadPath?=?HttpContext.Current.Server.MapPath(@context.Request["folder"])+"\\";//服务器端文件保存路径??
???
????????????if?(file?!=?null)??
????????????{??
????????????????if?(!Directory.Exists(uploadPath))??
????????????????{??
????????????????????Directory.CreateDirectory(uploadPath);//创建服务端文件夹??
????????????????}??
???
????????????????file.SaveAs(uploadPath?+?file.FileName);//保存文件??
????????????????context.Response.Write("上传成功");??
????????????}??
???
????????????else??
????????????{??
????????????????context.Response.Write("0");??
????????????}??
???
????????}??
???
????????public?bool?IsReusable??
????????{??
????????????get??
????????????{??
????????????????return?false;??
????????????}??
????????}??
????}??
}
以上方式基本可以实现多文件的上传，大文件大小是在控制在10M以下/。
java中如何使用jquery
java使用jquery？
一个java是服务器端技术。
jquery是客户端技术。
一般使用的话，就是jsp页面中，使用html和JavaScript。然后在浏览器解析。直接把jquery当做JavaScript使用就行。