JQuery入门基础小实例(1)

2024-04-26 15:52:06

先展示一下这个例子实现的效果：

页面刚刚加载的时候，显示如图所示：

当在文本框中输入数据后，文本框的红色标识消失，如图所示：

点击确定按钮后，会通过后台来向页面输出数据，如图所示：

前台的代码如下（asp.net）：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/UserVerify.js"></script>
 <link href="css/StyleSheet.css" rel="stylesheet" />
</head>
<body>
 <form id="form1" runat="server">
  请输入用户名：<input type="text" class="userName" id="userName" /><input type="button" id="verifyButton" value="确定" />
  <div id="returnVal"></div>
 </form>
</body>
</html>

CSS()

.userName {
 border:1px solid red;
 background-image:url("../images/userVerify.gif");
 background-position:bottom;
 background-repeat:repeat-x;
}

页面的后台代码如下：

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls; 

public partial class _Default : System.Web.UI.Page
{
 protected void Page_Load(object sender, EventArgs e)
 {
  string userName =HttpUtility.UrlDecode(Request.QueryString["userName"]); 

  //HttpContext.Current.Response.Write(userName); 

  if (userName != null)
  {
   Response.Write("您输入的是："+userName);
   Response.End();
  } 

 }
}

添加的UserVerify.js文件如下：

/// <reference path="jquery-1.9.1.min.js" />
//上面这句话，可以在我们当前的JS里显示智能提示。
$("document").ready(function () {
 var userName = $("#userName"); 

 $("#verifyButton").click(function () {
  var value = userName.val();
  if (value=="") {
   alert("请输入用户名！");
  }
  else {
   //两次encodeURI解决中文乱码问题
   $.get("Default.aspx?userName="+ encodeURI(encodeURI(value)), function (response) {
    $("#returnVal").html(response);
   });
  }
 }); 

 userName.keyup(function () {
  var value = userName.val;
  if (value != "") {
   userName.removeClass();
  }
  else {
   userName.addClass();
  }
 });
});

特别适合初学者学习的一个Jquery入门小实例，希望大家喜欢，今天开始就陆续为大家整理有关jquery的知识点，也希望大家继续关注。

jQuery入门介绍之基础知识

JavaScript 库作用及对比为了简化JavaScript 的开发, 一些 JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的Web2.0 特性的富客户端页面, 并且兼容各大浏览器当前流行的JavaScript 库有: jQuery 简介 jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库 jQuery 理念: 写得少, 做得多. 优势如下: 轻量级强大的选择器出色的 DOM 操作
jquery 常用操作整理基础入门篇

jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team,包括来自德国的Jörn Zaefferer,罗马尼亚的Stefan Petre等等. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其宗旨是--WRITE LESS,DO MORE,写更少的代码,做更多的事情. 它是轻量级的js库(压缩后只有21k) ,这是其它的js库所不及的,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, S
jQuery基础语法实例入门

本文实例讲述了jQuery基础语法.分享给大家供大家参考.具体分析如下: 此语法规则有两个部分组成:获取jQuery对象和对jQuery对象执行的操作. 复制代码代码如下: $(selector).action() 下面就对以上语法规则进行详细的阐述: 1.$定义jQuery,将被选的DOM对象转换成jQuery对象. 2.selector是选择器,类似于CSS选择器. 3.action()是要对jQuery对象行的操作. 注: $是jQuery的简写.例如: 复制代码代码如下: $("di
jquery 指南/入门基础

指南/基础这是一个基础指南,旨在帮助你开始使用jquery.jquery给予你常见问题的解决方法.如果你尚未建立你的测试页面,我建议你创建一个含有下列内容的HTML页: 程序代码复制代码代码如下: <html> <head> <script type="text/javascript" src="link/to/jquery.js"></script> <script type="t
jQuery入门基础知识学习指南

打开一个网页,如果 HTML 没有完全加载完毕,就去操作页面中元素是不安全的,但是监测 HTML 是否加载完毕呢?jQuery 提供了一个 $(document).ready() 方法,任何 ready 中的代码在 HTML 完全加载完成后才会被执行. $(document).ready(function() { console.log('ready!'); }); 此外,它还有一个简写方式 $(function() { console.log('ready!'); }); $(document
jQuery选择器基础入门教程

本文实例讲述了jQuery选择器用法.分享给大家供大家参考,具体如下: 什么是jQuery选择器使用JavaScript操作页面上得DOM元素时,首先要获取DOM元素.但是原始的javascript只元件根据ID或者TagName获取DOM对象. 在jQuery中则完全不同,jQuery提供了异常强大的选择器用以帮助我们获取页面上的对象,并且将对象以jquery对象的形式返回. 首先来看看什么是选择器. //根据id获取jQuery对象 var jQueryObject=$("#testDiv
jQuery基础_入门必看知识点

jQuery事件的因果关系是怎么样的一个格式: $("button").click(function(){ }) [正式接触jQuery] (1)jQuery的书写步骤: 1.引入jQuery文件: 2.新建一对script标签来书写jQuery: 3.用jQuery的方式进行代码分离: 4.按照jQuery用谁就选谁的原则去书写代码: [jQuery的css修改] alert()弹出一个警示框:弹出的信息可以写在小括号里面作为参数: css() 1.单属性获取,格式css("
JQuery入门基础小实例(1)

先展示一下这个例子实现的效果: 页面刚刚加载的时候,显示如图所示: 当在文本框中输入数据后,文本框的红色标识消失,如图所示: 点击确定按钮后,会通过后台来向页面输出数据,如图所示: 前台的代码如下(asp.net): <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <
10个python爬虫入门基础代码实例 + 1个简单的python爬虫完整实例

本文主要涉及python爬虫知识点: web是如何交互的 requests库的get.post函数的应用 response对象的相关函数,属性 python文件的打开,保存代码中给出了注释,并且可以直接运行哦如何安装requests库(安装好python的朋友可以直接参考,没有的,建议先装一哈python环境) windows用户,Linux用户几乎一样: 打开cmd输入以下命令即可,如果python的环境在C盘的目录,会提示权限不够,只需以管理员方式运行cmd窗口 pip install
Python3 字典dictionary入门基础附实例

Python字典是另一种可变容器模型,且可存储任意类型对象,如字符串.数字.元组等其他容器模型.字典由键和对应值成对组成.字典也被称作关联数组或哈希表. 注意: 1.每个键与值用冒号隔开(:),每对用逗号,每对用逗号分割,整体放在花括号中({}). 2.键必须独一无二,但值则不必. 3.值可以取任何数据类型,但必须是不可变的,如字符串,数或元组. 字典是另一种可变容器模型,且可存储任意类型对象. 字典的每个键值(key=>value)对用冒号(:)分割,每个对之间用逗号(,)分割,整个字典包括在
微信小程序开发入门基础教程

微信小程序开发入门基础教程本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果. 开发准备工作获取微信小程序的 AppID 登录 https://mp.weixin.qq.com ,就可以在网站的"设置"-"开发者设置"中,查看到微信小程序的 AppID 了,注意不可直接使用服务号或订阅号的 AppID . 下载开发工具下载地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/dow
JQuery中基础过滤选择器用法实例分析

本文实例讲述了JQuery中基础过滤选择器用法.分享给大家供大家参考.具体如下: <!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"> <he
jQuery入门之层次选择器实例简析

本文实例分析了jQuery入门之层次选择器的使用方法.分享给大家供大家参考,具体如下: 这里简单介绍一下jQuery层次选择器中ancestor descendant与parent>child的区别. parent>child:根据父元素匹配所有的子元素,层次关系是父子关系. ancestor descendant:根据祖先元素匹配所有的后代元素,层次关系是祖先和后代. 编写代码,进行测试,以更加清楚的区分两者的区别: <div id="first">1 <
jQuery实现拼图小游戏(实例讲解)

小熊维尼拼图 jQuery代码实现拼图小游戏,鼠标选中拼块,用上下左右键移动拼块. html代码 <div id="box-div">  <div id="tips"> <p>\(╯-╰)/ 哎呦,走不通啦!</p> </div> <div id="container"> <div class="row"&g
Python简单基础小程序的实例代码

1 九九乘法表 for i in range(9):#从0循环到8 i += 1#等价于 i = i+1 for j in range(i):#从0循环到i j += 1 print(j,'*',i,'=',i*j,end = ' ',sep='') # end默认在结尾输出换行,将它改成空格 sep 默认 j,'*',i,'=',i*j 各元素输出中间会有空格 print()#这里作用是输出换行符 i = 1 while i <= 9: j = 1 while j <= i: print(&
jquery ajax 请求小技巧实例分析

本文实例讲述了jquery ajax 请求小技巧.分享给大家供大家参考,具体如下: jquery 是一个非常好用的js框架,它为我们提供了很多工具.启动异步请求就是很好用的一个工具官方推荐的ajax 请求格式 $.ajax({ url:"http://xxxxxxxxxxxxxxxxx/",//你的域名 dataType:"json", //对服务器返回的结果进行该数据格式处理我这里写了json 也可以红xml.text.html 等格式 type:&quo

JQuery入门基础小实例(1)

相关推荐

随机推荐