本文目录
- 如何利用jQuery局部刷新页面中的div元素
- 怎么样才能把jquery学好
- jquery 多个 上传文件教程
- jq学会了能干什么
- 现在是否还有必要学习jQuery
- 从哪里开始学习jQuery
- 如何学好Jquery基础语法
- jquery应该怎么使用
如何利用jQuery局部刷新页面中的div元素
分两步：
第一步，使用jquery的ajax技术，将数据读入。相关的函数有$.ajax(), $.get(), $.post()$.load() 等函数。使用方法请百度一下，教程非常多。
第二步，将读入的数据使用jquer的选择器比如$(“#divid“).html(“这里放入数据“)，也可以用$.text()，具体区别请参考$.html()和$.text()的使用方法。
另外，jquer还支持读取json数据和script数据，可以将读取的数据直接使用或者执行。具体根据你的需要改变。
怎么样才能把jquery学好
从零开始学习jQuery (一) 开天辟地入门篇
从零开始学习jQuery (二) 万能的选择器
从零开始学习jQuery (三) 管理jQuery包装集
从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
从零开始学习jQuery (五) 事件与事件对象
从零开始学习jQuery (六) AJAX快餐
从零开始学习jQuery (七) jQuery动画-让页面动起来!
从零开始学习jQuery (九) jQuery工具函数
从零开始学习jQuery (十) jQueryUI常用功能实战
从零开始学习jQuery (十一) 实战表单验证与自动完成提示插件
一.摘要
本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.
本篇文章是入门第一篇, 主要是简单介绍jQuery, 通过简单示例指导大家如何编写jQuery代码以及搭建开发环境. 详细讲解了如何在Visual Studio中配合使用jQuery.
转载请注明子秋出品!博客园首发!
二.前言
首先道个歉! “从零开始学习ASP.NET MVC“系列文章在即将介绍Filter时就没有更新了, 原因就是最近我一直在研究和学习jQuery.看到本系列的名称和文章标题, 看过我的MVC系列文章的人会感到很熟悉. 不久要给公司的人做培训, 所以特意制作了本教程.
在写作的同时我参考了网上jQuery的系列教程文章, 在博客园和Google上并没有找到让我满意的系列教程. 我喜欢将知识系统的,深入浅出的讲解.不喜欢写那种“学习笔记“式的文章. 同时本系列将很快全部写完(有工作压力就是有动力), 随后如果时间允许我会继续更新MVC系列文章.再一次对等待MVC文章的朋友们说声抱歉!
另外本系列文章的大部分知识点来源于图灵出版社的“jQuery实战“一书. 推荐大家购买此书, 是jQuery书籍中的经典之作.
下面让我们开始jQuery之旅.
三.什么是jQuery
jQuery是一套Javascript脚本库. 在我的博客中可以找到“Javascript轻量级脚本库“系列文章. Javascript脚本库类似于.NET的类库, 我们将一些工具方法或对象方法封装在类库中, 方便用户使用.
注意jQuery是脚本库, 而不是脚本框架. “库“不等于“框架“, 比如“System程序集“是类库,而“ASP.NET MVC“是框架. jQuery并不能帮助我们解决脚本的引用管理和功能管理,这些都是脚本框架要做的事.
脚本库能够帮助我们完成编码逻辑,实现业务功能. 使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅, 更加健壮. 同时网络上丰富的jQuery插件也让我们的工作变成了“有了jQuery,天天喝茶水“--因为我们已经站在巨人的肩膀上了.
创建一个ASP.NET MVC项目时, 会发现已经自动引入了jQuery类库. jQuery几乎是微软的御用脚本库了!完美的集成度和智能感知的支持,让.NET和jQuery天衣无缝结合在一起!所以用.NET就要选用jQuery而非Dojo,ExtJS等.
jQuery有如下特点:
1.提供了强大的功能函数
使用这些功能函数, 能够帮助我们快速完成各种功能, 而且会让我们的代码异常简洁.
2.解决浏览器兼容性问题
javascript脚本在不同浏览器的兼容性一直是Web开发人员的噩梦, 常常一个页面在IE7,Firefox下运行正常, 在IE6下就出现莫名其妙的问题. 针对不同的浏览器编写不同的脚本是一件痛苦的事情. 有了jQuery我们将从这个噩梦中醒来, 比如在jQuery中的Event事件对象已经被格式化成所有浏览器通用的, 从前要根据event获取事件触发者, 在ie下是event.srcElements 而ff等标准浏览器下下是event.target. jQuery则通过统一event对象,让我们可以在所有浏览器中使用event.target获取事件对象.
3.实现丰富的UI
jQuery可以实现比如渐变弹出, 图层移动等动画效果, 让我们获得更好的用户体验. 单以渐变效果为例, 从前我自己写了一个可以兼容ie和ff的渐变动画, 使用大量javascript代码实现, 费心费力不说, 写完后没有太多帮助过一段时间就忘记了. 再开发类似的功能还要再次费心费力. 如今使用jQuery就可以帮助我们快速完成此类应用.
4.纠正错误的脚本知识
这一条是我提出的, 原因就是大部分开发人员对于javascript存在错误的认识. 比如在页面中编写加载时即执行的操作DOM的语句, 在HTML元素或者document对象上直接添加“onclick“属性, 不知道onclick其实是一个匿名函数等等. 拥有这些错误脚本知识的技术人员也能完成所有的开发工作, 但是这样的程序是不健壮的. 比如“在页面中编写加载时即执行的操作DOM的语句“, 当页面代码很小用户加载很快时没有问题, 当页面加载稍慢时就会出现浏览器“终止操作“的错误.jQuery提供了很多简便的方法帮助我们解决这些问题, 一旦使用jQuery你就将纠正这些错误的知识--因为我们都是用标准的正确的jQuery脚本编写方法!
5.太多了! 等待我们一一去发现.
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
’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;//对客户端文件的访问
string uploadPath = HttpContext.Current.Server.MapPath(@context.Request)+“\\“;//服务器端文件保存路径
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以下/。
jq学会了能干什么
jQ学会了意味着你有了JS的部分基础以及对DOM有一定了解，这时候可以恭喜你，你成功成为一名前端入门级小小白，比小白高一个等级。但你依然做不了什么事情，你大概只能处理一些简单的数据以及让页面动起来。如果想成为前端程序员，偏数据处理的，你还需要学习vue这类框架，以及深入学习一下对面对象编程思想(js语言就行)和一些常用数据结构。只要你能把前端代码写得漂亮、有规划我就觉得你是十分优秀的前端工程师了。。。
现在是否还有必要学习jQuery
jQuery是一个轻量级的，“写更少的代码，做更多的事情”，的JavaScript库.
jQuery的目的是使它使用JavaScript在您的网站更容易.
jQuery提供很多共同的任务，需要很多行JavaScript代码来完成, 并且将他们封装成方法，你可以一行代码就能调用。
jQuery也简化了JavaScript很多复杂的东西，像Ajax调用和DOM操作等.
jQuery库包含以下功能:http://codingdict.com/article/7359
- HTML/DOM 操作
- CSS 操作
- HTML 事件方法
- 特效和动画
- AJAX
- 工具
提示：此外，jQuery插件的几乎可以完成任何任务.
为什么使用jQuery?
有很多其他JavaScript框架, 但是jQuery似乎是最流行的, 也是最具扩展性的.
许多大公司在网站上使用jQuery, 像:
- Microsoft
- IBM
- Netflix
jQuery能在所有浏览器中工作吗?
jQuery团队知道所有关于跨浏览器的问题, 他们写了这方面的jQuery库. jQuery将在所有主要浏览器有完全相同的运行效果，包括Internet Explorer 6！
从哪里开始学习jQuery
按这个顺序学习
jQuery教程http://codingdict.com/article/7359
jQuery简介
jQuery入门
jQuery语法
jQuery选择器
jQuery事件
jQuery隐藏和显示
jQuery渐入渐出
jQuery 滑动
jQuery动画
jQuery停止
jQuery 回调
jQuery方法链
jQuery dom_get
jQuery dom_set
jQuery dom_add
jQuery dom_remove
jQuery CSS类
jQuery css()方法
jQuery尺寸
jQuery 遍历
jQuery遍历父元素
jQuery遍历子元素
jQuery遍历兄弟元素
jQuery缩小遍历范围
jQuery ajax 简介
jQuery ajax_load
jQuery ajax_get_post
jQuery noConflict() 方法
如何学好Jquery基础语法
基础语法，看看网上的教程就可以了。
学习东西最快的途径是直接用他做项目，最好是有人带，遇到不懂的，不明白的就针对性的去查，去请教，做一遍就会了。
单纯的去学习语法什么的，容易忘，效果不好。
jquery应该怎么使用
第一步，下载库文件，引入到你的项目，第二步，看教程案例，推荐看菜鸟教程，比较容易理解，jq是一个js库，它重在操作dom，内置了很多的方法，他有最全的选择器，就是为了简化js的操作，相对来说，比较容易学。可以把里面的每个案例代码拷贝到你的项目，然后浏览器查看效果，改动代码，再查看效果，一般就是这样学习的。
我自己总结了一下，jq就是HTML方法，css方法，事件方法，效果方法，选择器，以及ajax请求。刚开始学的话，推荐你先看效果方法，比如元素的显示隐藏，滑动等效果，因为这个比较有意思，而且会让你觉得很有成就感，不枯燥。
最后，你可以试着做写案例来巩固。
