jquery教程,jquery教程chm
jQuery选择器基础入门教程
本文实例讲述了jQuery选择器用法。分享给大家供大家参考,具体如下:
什么是jQuery选择器
使用JavaScript操作页面上得DOM元素时,首先要获取DOM元素。但是原始的javascript只元件根据ID或者TagName获取DOM对象。
在jQuery中则完全不同,jQuery提供了异常强大的选择器用以帮助我们获取页面上的对象,并且将对象以jquery对象的形式返回。
首先来看看什么是选择器。
//根据id获取jQuery对象
var
jQueryObject=$("#testDiv");
上例中使用了id选择器,选取id为testDiv的DOM对象并将它放入jQuery对象,最后返回了一个jQuery对象。
现在通过jQueryObject变量就可以操作testDiv图层了,因为jQueryObject是一个jQuery对象,所以可以使用所有的jQuery对象方法。比如修改图层中的HTML内容:
jQueryObject.html("修改后的HTML内容");
通过ID选中元素是最有效率的jQuery选择器。这是因为在原始的javascript中就提供了选中id的方法document.getElementById()。有关选择器的使用技巧将在后面提到。
jQuery选择器的强大在于提供了丰富的选择器,如果使用原始javascript则需要编写很多的代码才能实现。这极大减少了开发人员的工作量。
jQuery选择器核心函数
jQuery选择器调用的是jQuery核心函数:
jQuery(EXPRESSION,[econtext]);
这个函数接收一个包含选择器表达式的字符串,然后用这个字符串去匹配一组元素。
jQuery的核心功能都是通过这个函数实现的。jQuery中的大部分功能都基于这个函数,或者说都是在以某种方式使用这个函数。该函数最基本的用法就是向他传递一个表达式(通常由CSS选择器组成),然后根据这个表达式查找所有匹配的元素。
默认情况下,如果没有指定context参数,$()将在当前的HTML
document中查找DOM元素:如果指定了context参数,如一个dom元素集jQuery对象,则会在这个context中查找。在jQuery1.3.2以后,其返回的元素顺序等同于在context中出现的先后顺序。
参数说明如下:
~Expression:必选参数,选择器表达式。
~Context:可选参数,选择器上下文
~jQuery,选择器返回的jQuery对象,jQuery对象,jQuery对象是一个集合,可以使用链式语法调用各种jQuery函数。
Context参数能够缩小选择器的范围,加快查找速度。
更多关于jquery相关内容感兴趣的读者可查看本站专题:《jquery选择器用法总结》、《jquery常用操作技巧汇总》、《jQuery常见事件用法与技巧总结》、《jQuery操作json数据技巧汇总》、《jQuery操作xml技巧总结》及《jQuery扩展技巧总结》
希望本文所述对大家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视频教程.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以下/。
求JQuery全套免费视频教程(最好可以下载的)!!!
Jquery视频教程.zip百度网盘资源免费下载
链接:
提取码:p6qi ?
jquery 教程?
jquery 教程 满大街都是啊!
读万卷书不如行万里路,行万里路不如阅人无数,阅人无数步入高人指点。
我建议你去【 jQuery 爱好者】 下载 jquery教程。那里好有很多热心高手帮助你。
进去,很容易找的,好几个板块都有。