jquery 学习笔记一


Posted in Javascript onApril 07, 2010

jquery基本信息

jquery的官方网站:www.jquery.com

jquery解释: jquery是javascript的类库,提供了大量的javascript的类库和API,方便javascript开发。

jquery API中文参考手册: http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html

 

前台数据提交到后台demo:

实例图:

jquery 学习笔记一 jquery 学习笔记一

功能点:

1.使用$("#UserName")获取id为UserName的jquery对象。

2.使用jquery的get、ajax、load三个方法向后台提交数据。

3.使用jquery的removeClass和addClass方法修改样式。

4.encodeURI(username)将字符串转码,防止中文出现乱码,注意后台要用System.Web.HttpUtility.UrlDecode(str,encoding)解码

前台html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title></title> 
<script type="text/jscript" src="jquery-1.4.2.min.js"></script> 
<style type="text/css"> 
.newStyle1 
{ 
border-top-style: 1; 
border-right-style: 1; 
border-bottom-style: 1; 
border-left-style: 1; 
border-color: #FF0000; 
} 
</style> 
<script language="javascript" type="text/javascript"> 
//ready页面加载完成时候调用 
$(document).ready(function() { 
//注册Btn_ajax的onclick事件 
$("#Btn_ajax").click(function() { 
//获取文本框的值 
var username = $("#UserName").val(); 
//提交结果到服务器,可参见jquery帮助手册 
$.ajax({ 
type: "GET", 
//输入的文字可能为中文需要进行encodeURI格式转换 
url: "jquerydemo1.aspx?m=" + encodeURI(username), 
success: function(callbackmsg) { 
$("#usertext").html(callbackmsg); 
} 
}); 
}) 
//注册Btn_Get的onclick事件 
$("#Btn_Get").click(function() { 
//获取文本框的值 
var username = $("#UserName").val(); 
//提交结果到服务器,可参见jquery帮助手册 
$.get("jquerydemo1.aspx?m=" + encodeURI(username), null, function(callbackmsg) { 
$("#usertext").html(callbackmsg); 
}) 
}) 
//注册Btn_Loadhtml的onclick事件 
$("#Btn_Loadhtml").click(function() { 
//获取文本框的值 
var username = $("#UserName").val(); 
//提交结果到服务器,可参见jquery帮助手册 
$("#usertext").load("HTMLPage1.htm", null, function(callbackmsg) { 
$("#usertext").html(callbackmsg); 
}) 
}) 
//注册Btn_Loadquest的onclick事件 
$("#Btn_Loadquest").click(function() { 
//获取文本框的值 
var username = $("#UserName").val(); 
//提交结果到服务器,可参见jquery帮助手册 
$("#usertext").load("jquerydemo1.aspx?m=" + encodeURI(username), null, function(callbackmsg) { 
$("#usertext").html(callbackmsg); 
}) 
}) 
//注册UserName的keyup事件 
$("#UserName").keyup(function() { 
//如果值不为空则去掉样式 
var value = $(this).val(); 
if (value != "") { 
$(this).removeClass("newStyle1") 
} 
else { 
$(this).addClass("newStyle1") 
} 
}) 
}) 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
请输入名称:<input id="UserName" type="text" class="newStyle1" /> 
<br /> 
<input id="Btn_ajax" type="button" value="ajax校验" /><br /> 
<input id="Btn_Get" type="button" value="Get校验" /><br /> 
<input id="Btn_Loadhtml" type="button" value="Load加载html" /><br /> 
<input id="Btn_Loadquest" type="button" value="Load加载请求" /><br /> 
<div id="usertext"> 
</div> 
</div> 
</form> 
</body> 
</html>

服务器端代码:
protected void Page_Load(object sender, EventArgs e) 
{ 
if (HttpContext.Current.Request.QueryString["m"] != null) 
{ 
//将请求的数据通过GB2312解码 
string method = System.Web.HttpUtility.UrlDecode(HttpContext.Current.Request.QueryString["m"], Encoding.GetEncoding("GB2312"));// HttpContext.Current.Response.Write(method+"已经被验证!"); 
Response.End(); 
} 
}
Javascript 相关文章推荐
javascript 动态添加表格行
Jun 22 Javascript
js 获取坐标 通过JS得到当前焦点(鼠标)的坐标属性
Jan 04 Javascript
导航跟随滚动条置顶移动示例代码
Sep 11 Javascript
jQuery动画特效实例教程
Aug 29 Javascript
node.js中的fs.fsync方法使用说明
Dec 15 Javascript
JavaScript中的分号插入机制详细介绍
Feb 11 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
jquery带有索引按钮且自动轮播切换特效代码分享
Sep 15 Javascript
js实现鼠标跟随运动效果
Aug 02 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
微信小程序实现留言功能
Oct 31 Javascript
JSON生成Form表单的方法示例
Nov 21 Javascript
ext jquery 简单比较
Apr 07 #Javascript
jQuery asp.net 用json格式返回自定义对象
Apr 07 #Javascript
FileUpload 控件 禁止手动输入或粘贴的实现代码
Apr 07 #Javascript
js 小贴士一星期合集
Apr 07 #Javascript
Javascript 实用小技巧
Apr 07 #Javascript
javascript 函数使用说明
Apr 07 #Javascript
js下获取div中的数据的原理分析
Apr 07 #Javascript
You might like
星际争霸中的对战模式介绍
2020/03/04 星际争霸
PHP中的生成XML文件的4种方法分享
2012/10/06 PHP
php获取域名的google收录示例
2014/03/24 PHP
jQueryUI的Dialog的简单封装
2010/06/07 Javascript
分享8款优秀的 jQuery 加载动画和进度条插件
2012/10/24 Javascript
两种常用的javascript数组去重方法思路及代码
2013/03/26 Javascript
Jquery获得控件值的三种方法总结
2014/02/13 Javascript
基于jquery和svg实现超炫酷的动画特效
2014/12/09 Javascript
nodejs导出excel的方法
2015/06/30 NodeJs
JavaScript统计字符串中每个字符出现次数完整实例
2016/01/28 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
js学习阶段总结(必看篇)
2016/06/16 Javascript
浅谈window.onbeforeunload() 事件调用ajax
2016/06/29 Javascript
无阻塞加载js,防止因js加载不了影响页面显示的问题
2016/12/18 Javascript
angularjs实现搜索的关键字在正文中高亮出来
2017/06/13 Javascript
jQuery图片加载失败替换默认图片方法汇总
2017/11/29 jQuery
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
JavaScrip数组去重操作实例小结
2019/06/20 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
2019/10/26 jQuery
微信小程序获取当前位置和城市名
2019/11/13 Javascript
[06:16]《DAC最前线》之地区预选赛全面回顾
2015/01/19 DOTA
python实现发送和获取手机短信验证码
2016/01/15 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
使用python Telnet远程登录执行程序的方法
2019/01/26 Python
pytorch实现Tensor变量之间的转换
2020/02/17 Python
智利最大的网上商店:Linio智利
2016/11/24 全球购物
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
澳洲本土太阳镜品牌:Quay Australia
2019/07/29 全球购物
日本最大的彩色隐形眼镜销售网站:CharmColor
2020/09/09 全球购物
小学教师管理制度
2014/01/18 职场文书
小学生安全保证书
2014/02/01 职场文书
入党思想汇报怎么写
2014/04/03 职场文书
创先争优承诺书
2015/01/20 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
使用redis实现延迟通知功能(Redis过期键通知)
2021/09/04 Redis