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 相关文章推荐
让innerHTML的脚本也可以运行起来
Jul 01 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
深入分析js中的constructor和prototype
Apr 07 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
JavaScript控制网页层收起和展开效果的方法
Apr 15 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
React Native中Mobx的使用方法详解
Dec 04 Javascript
详解Vue.js中引入图片路径的几种方式
Jun 17 Javascript
微信小程序实现订单倒计时
Nov 01 Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 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
PHP去除数组中重复的元素并按键名排序函数
2008/08/18 PHP
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
非常实用的PHP常用函数汇总
2014/12/17 PHP
PHP远程调试之XDEBUG
2015/12/29 PHP
php 浮点数比较方法详解
2017/05/05 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
Jquery Ajax方法传值到action的方法
2014/05/11 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
JS+CSS3实现超炫的散列画廊特效
2016/07/16 Javascript
Angular外部使用js调用Angular控制器中的函数方法或变量用法示例
2016/08/05 Javascript
React如何利用相对于根目录进行引用组件详解
2017/10/09 Javascript
JS运动特效之完美运动框架实例分析
2018/01/24 Javascript
React Native 自定义下拉刷新上拉加载的列表的示例
2018/03/01 Javascript
js图片查看器插件用法示例
2019/06/22 Javascript
Node.js API详解之 timer模块用法实例分析
2020/05/07 Javascript
javascript实现点击产生随机图形
2021/01/25 Javascript
Python变量和数据类型详解
2017/02/15 Python
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
django 发送手机验证码的示例代码
2018/04/25 Python
python3将视频流保存为本地视频文件
2018/06/20 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
python实现几种归一化方法(Normalization Method)
2019/07/31 Python
python修改文件内容的3种方法详解
2019/11/15 Python
pytorch中的自定义反向传播,求导实例
2020/01/06 Python
pytorch之ImageFolder使用详解
2020/01/06 Python
PyCharm中如何直接使用Anaconda已安装的库
2020/05/28 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
利用CSS3的定位页面元素
2009/08/29 HTML / CSS
美国维生素、补充剂、保健食品购物网站:Vitacost
2016/08/05 全球购物
PHP数据运算类型都有哪些
2013/11/05 面试题
在C#中如何实现多态
2014/07/02 面试题
综合内勤岗位职责
2014/04/14 职场文书
运动会拉拉队口号
2014/06/09 职场文书
党委班子剖析材料
2014/08/21 职场文书
个人党性分析材料
2014/12/19 职场文书