jquery教程,jquery教程chm

http://www.itjxue.com  2023-01-21 08:22  来源:未知  点击次数: 

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教程。那里好有很多热心高手帮助你。

进去,很容易找的,好几个板块都有。

(责任编辑:IT教学网)

更多

推荐网页背景文章