jquery 学习笔记一

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：

实例图：

　　 

功能点：

　　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();
}
}

赞 (0)

相关推荐

  • jquery学习笔记二 实现可编辑的表格

    jquery学习笔记二 实现可编辑的表格

    实现可编辑的表格demo: 实例图: 代码: 复制代码 代码如下: <!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 runa

  • JavaScript 学习笔记二 字符串拼接

    var str="hello"; str+="world"; 实际上,这段代码在幕后执行的步骤如下: (1) 创建存储"hello"的字符串. (2) 创建存储"world"的字符串. (3) 创建存储连接结果的字符串. (4) 把str的当前内容复制到结果中. (5) 把"world"复制到结果中. (6) 更新str,使它指向结果. 每次完成字符串连接都会执行步骤2到6,使得这种操作非常消耗资源.如果重

  • JQuery 学习笔记01 JQuery初接触

    一.下载官方网址是http://jquery.com/官方下载地址:http://docs.jquery.com/Downloading_jQuery里边有当前版本和历史版本的下载,可以下载下来部署在自己的服务器上上面也有Google\Microsoft\jQuery的CDN(Content Delivery Network)地址,由于目前jQuery的广泛使用,选择CDN地址可以充分利用缓存和这些互联网大佬们的带宽和服务器资源.官网上下载有两种版本Compressed(Minified ver

  • JavaScript 学习笔记一些小技巧

    一.JavaScript 基础 1.try...catch 使用小写字母.大写字母会出错. 2.Throw 声明 throw 声明的作用是创建 exception(异常).你可以把这个声明与 try...catch 声明配合使用,以达到控制程序流并产生精确错误消息的目的. 语法:throw(exception)exception 可以是字符串.整数.逻辑值或者对象. 注意:使用小写字母编写 throw.使用大写字母会出错! 3.反斜杠用来在文本字符串中插入省略号.换行符.引号和其他特殊字符. 下

  • JQuery Study Notes 学习笔记(一)

    1. 使用jquery 到jquery.com下载jquery.js当前版本是1.4.2 新建一个html页面 复制代码 代码如下: <!DOCTYPE html><BR><html lang="en"><BR><head><BR>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"&

  • jQuery Study Notes学习笔记 (二)

    1. 使用class与id选择HTML元素 选择id为"myDivId"的元素.由于id是唯一的,所以总是选择到1个或0个元素 复制代码 代码如下: $('#myDivId') 选择class为"myCssClass". 可以选择任何多个class为"myCssClass"的元素. 复制代码 代码如下: $('.myCssClass') 获取或设置元素的值 复制代码 代码如下: var myValue = $('#myDivId').val();

  • jQuery学习笔记之回调函数

    1.回调函数定义 回调函数就是一个通过函数指针调用的函数.如果你把函数的指针(地址)作为参数传递给另一个函数,当这个指针被用来调用其所指向的函数时,我们就说这是回调函数.回调函数不是由该函数的实现方直接调用,而是在特定的事件或条件发生时由另外的一方调用的,才会真正的执行回调函数内部的方法. 2.代码 JS代码 (function($){ $.fn.shadow = function(opts){ //定义的默认的参数 var defaults = { copies: 5, opacity:0.1

  • jQuery学习笔记之Ajax用法实例详解

    本文实例讲述了jQuery学习笔记之Ajax用法.分享给大家供大家参考,具体如下: 一.Ajax请求 1.jQuery.ajax(options) 通过 HTTP 请求加载远程数据.jQuery 底层 AJAX 实现.简单易用的高层实现见 .get,.post 等. .ajax()返回其创建的XMLHttpRequest对象.大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求..ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息.详细参数选项见下.

  • 那些年，我还在学习jquery 学习笔记

    原来Jquery就是一个javascript写的一个库,它给我们提供了很多常用的方法,使用这些方法可以兼容多种浏览器,使用它可以达到很好的动画效果,下面就来看看那些年的学习笔记吧一.$符号 1.选择器 可以选择html标签,也可选择ID,Class等 如下: 复制代码 代码如下: <script type="text/javascript"> $( function() { $("table.datalist tr:nth-child(odd)").ad

  • jquery学习笔记 用jquery实现无刷新登录

    好了,唠嗑就到这里,现在看如何用jquery实现无刷新登录. 首先先创建html的部分 复制代码 代码如下: <table> <tr> <td> 用户名: </td> <td> <input type="text" id="username" /> </td> </tr> <tr> <td> 密码: </td> <td> &

  • jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路

    jQuery学习笔记(1)--用jQuery实现异步通信(用json传值)具体思路

    jQuery是时下比较流行的一个js库,能够用简单的代码做出理想的效果,就像官网上说的那样"write less ,do more".Jquery在一定程度上改写了以往对JavaScript的写法,本人就用jquery实现上篇中用ajax实现异步通信的效果,感受一下jquery的魅力. 首先你需要下载jquery的最新的js文件,并将其引入到文件中,你也可以在此下载:点我下载. 这次通信用的是jquery的jQuery.post(url,[data], [callback],[type

  • jQuery学习笔记之入门

    最近在学习jQuery,在网上看到有几篇关于jQuery的文章,写的不错转载过来跟大家分享一下: 一.JQuery是什么 JQuery是什么?始终是萦绕在我心中的一个问题: 借鉴网上同学们的总结,可以从以下几个方面观察. 不使用JQuery时获取DOM文本的操作如下: document.getElementById('info').value = 'Hello World!'; 使用JQuery时获取DOM文本操作如下: $('#info').val('Hello World!'); 嗯,可以看

  • jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架

    jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架

    好久以来就想实现一个模态的框框,找了很多的jquery插件,都没有碰到自己满意的,这次碰到了一个,但是由于还处于开发阶段吧,连个文档API都没有,自己摸索了好长一段时间才搞定. 先来看看代码,本人看着源代码定制了自己想要的效果: 复制代码 代码如下: <%@ page language="java"contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DO

  • JQuery 学习笔记 选择器之一

    本章主要先对Jquery的选择器进行说明下,本人也不敢说讲解,哈,因为我也是正在学习中,本系列文章所写目的只在与对自己学习过程中的心得等记录下来,一方面加强自己的印象,另一方面共享下学习的经验,呵,小弟刚开始写这种文章,希望大家多多支持^^,有哪些方法不好可以跟贴指导指导^^ 现在,让我们一起开始在JQuery的世界里飞翔吧^^ 首先,本章先来学习JQuery最基本的选择器的使用咯 先声明下,使用JQuery最基本的规则 $(document).ready(function(){ //do so

  • jQuery学习笔记[1] jQuery中的DOM操作

    DOM分为3个方面,即DOM Core,HTML-DOM,CSS-DOM. 1,DOM Core并不专属于JavaScript,任何一种支持DOM的程序设计语言都可以使用它. JavaScript中的getElementById(),getElementsByTagName()...等方法. 例如:使用DOM Core来获取表单对象的方法: document.getElementsByTagName("form"); 2,HTML-DOM. 在使用JavaScript和DOM为HTML

  • jQuery学习笔记——jqGrid的使用记录（实现分页、搜索功能）

    jqGrid 是一个用来显示网格数据的jQuery插件,通过使用jqGrid可以轻松实现前端页面与后台数据的ajax异步通信. 一.要引用的文件 要使用jqGrid,首先页面上要引入如下css与js文件. 1.css <link href="/css/ui.jqgrid.css" rel="stylesheet" type="text/css" /> 2.js <script src='/Scripts/js/jquery-2.

随机推荐