JQuery实战---初识JQuery+入门实例
JQuery在小编的世界中，也就是JavaScript和查询（Query），即是辅助JavaScript开发的库，百度百科对JQuery的介绍比较详细，小伙伴可以东东自己可耐的小爪子，上网进行搜索，说不定，有意外惊喜哦，今天这篇博客，小编简单的介绍一下JQuery的一些基本知识，然后小编在集合实例，讲解一下在具体的应用过程中，我们的JQuery又是如何在她的舞台熠熠生辉......
通过JQuery的学习，我们可以学到哪些知识nie，比如我们会学会JQuery的API函数的使用，以及简单的实例的实现方法还有一些html、css、js的小知识，作为明星级的框架JQuery，都有谁在使用nie，比如我们熟悉的Goole、IBM、ORACLE、DELL、土豆等等，都在使用JQuery做前端的开发，我们的JQuery是不是很火爆。
介绍完了JQuery的一些基本知识以后，接下来，小编简单来编写一个实例---用户名校验，首先，我们来分析一下这个小例子的代码思路，首先服务器端思路分析，对指定用户名返回用户名已经存在，对其他用户名，返回用户名可以使用；输入：用户名；输出：提示信息，接着我们来编写代码，编写代码之前，小编简单对这个小例子的目录进行一个简单的描述：我们需要一个html的文件，我们取名叫做UserVerify，除此之外，我们需要写css和js的文件，现在比较流行。遵循web标准来看，我们需要把css文件和js文件单独放置，便于管理，我们需要分别建立css文件和js文件，除此之外，应用当中可能要用到图片，所以我们单独建立一个images文件，接着，我们开始编写代码：
有一个页面文件，先来编辑html，保证内面内容通过html标签表示出来，代码如下：
<span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;"><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>JQuery实战1-用户名校验</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" href="css/userVerify.css" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/userVerify.js"></script> </head> <body> 请输入用户名:<input type="text" id="userName" class="userText"/> <input type="button" value="校验" id="verifyButton" /> <div id="result"></div> </body> </html> </span></span></span>
接着，在css文件目录下建立一个css文件，编写css的代码：
<span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;">.userText {
/*控制文本框的边框是红色的实线*/
border: 1px solid red;
background-image: url(../images/userVerify.gif);
background-repeat: repeat-x;
background-position: bottom;
}
</span></span></span>
相应的，在js中我们也要建立两个文件，一个jquery一个userVerify，鉴于jquery的代码较多，所以小编已经上传相关资源，有需要的小伙伴可以到该链接下载，接着，我们来编写userVerify的代码，来给整理页面添加行为能力：
<span style="font-size:18px;"><span style="font-size:18px;"><span style="font-size:18px;">/*
* 需要通过Javascript代码来做两件事情
* 1.button被按下的时候，需要将文本框中的数据获取到，然后发送给服务器端，最后接受服务器返回的数据，填充到我们预留的div中，这样用户就可以看到结果
* 2.文本框上，用户按键之后，需要判断文本框中的内容是否为空，如果不为空，红色的边框和背景图就应该取消，否则保留
* */
/*
* 需要在页面装载完成是注册上这些工作
* */
$(document).ready(function() {
//这里面的内容就是页面装载完成后需要执行的代码
var userNameNode = $("#userName");
//需要找到button按扭，注册事件
$("#verifyButton").click(function() {
//1.获取文本框的内容
var userName = userNameNode.val();
//2.将这个内容发送给服务器端
if (userName == "") {
alert("用户名不能为空");
} else {
$.get("http://127.0.0.1:8080/JQuery/UserVerify?userName=" + encodeURI(encodeURI(userName)),null,function(response){
//3.接收服务器端返回的数据，填充到div中
$("#result").html(response);
});
}
});
//需要找到文本框，注册事件
userNameNode.keyup(function(){
//获取当前文本框中的内容
var value = userNameNode.val();
if (value == "") {
//让边框变成红色，并且带背景图
userNameNode.addClass("userText");
} else {
//去掉边框和背景图
userNameNode.removeClass("userText");
}
});
});
</span></span></span>
我们来看一下运行效果：
小例子，小编就演示到这里，通过这个小例子，我们知道html负责页面内容，css负责页面样式，js负责页面行为，html中应该有doctype来告知浏览器的渲染显示方式，border属相可以控制页面元素的边框，background-***可以控制背景图，以及背景图的位置，重复显示的方式等等，这些小知识点，我们都可以在这个小例子得到充分的认识，补充一个小的知识点，发送给服务器端的数据在js中做连词encodeURL，然后再服务器端的代码中按UTF-8的方式做一次URLDecode，可以解决中文中的乱码问题。
小编寄语：这篇博客，小编主要简单的介绍了JQuery的一些基础知识，然后举了一个简单的用户名校验的例子，文章的末尾，小编简单总结一下jquery的一些特点，Write less，Do More；JQuery is designed 头change the way that you write js；支持各种主流浏览器，包括IE6以上；以强大的css选择器为基础，几乎所有的操作都先使用选择器查找DOM对象，然后对其进行各种操作；屏蔽浏览器差异，对DOM的操作提供了方便的扩展，具有强大的插件机制。BS总结，未完，待续......
JQuery实战---初识JQuery+入门实例的更多相关文章
- Jquery(一) 初识Jquery，简单使用Jquery。
距离上一篇博文好像隔了很久的时间了额.好像是堕落了一阵子,前些时间去杭州找工作,被租房的事情给搞懵逼了,然后就回来了,回来在修炼一个月在出去奋斗把!加油,这两天把jquery,easyui和boots ...
- SpringMVC 框架系列之初识与入门实例
微信公众号:compassblog 欢迎关注.转发,互相学习,共同进步! 有任何问题,请后台留言联系! 1.SpringMVC 概述 (1). MVC:Model-View-Control Contr ...
- 《OD大数据实战》HDFS入门实例
一.环境搭建 1. 下载安装配置 <OD大数据实战>Hadoop伪分布式环境搭建 2. Hadoop配置信息 1)${HADOOP_HOME}/libexec:存储hadoop的默认环境 ...
- 《OD大数据实战》Kafka入门实例
官网: 参考文档: Kafka入门经典教程 Kafka工作原理详解 一.安装zookeeper 1. 下载zookeeper-3.4.5-cdh5.3.6.tar.gz 下载地址为: http://a ...
- 《OD大数据实战》Hive入门实例
官方参考文档:https://cwiki.apache.org/confluence/display/Hive/LanguageManual 一.命令行和客户端 1. 命令窗口 1)进入命令窗口 hi ...
- 《OD大数据实战》Sqoop入门实例
官网地址: http://archive.cloudera.com/cdh5/cdh/5/sqoop-1.4.5-cdh5.3.6/SqoopUserGuide.html 一.环境搭建 1. 下载 s ...
- 《OD大数据实战》Flume入门实例
一.netcat source + memory channel + logger sink 1. 修改配置 1)修改$FLUME_HOME/conf下的flume-env.sh文件,修改内容如下 e ...
- 《OD大数据实战》Mahout入门实例
一.环境搭建 1. 下载 mahout-0.9-cdh5.3.6.tar.gz 2. 解压 3. mahout org.apache.mahout.clustering.syntheticcontro ...
- 《OD大数据实战》Spark入门实例
一.环境搭建 1. 编译spark 1.3.0 1)安装apache-maven-3.0.5 2)下载并解压 spark-1.3.0.tgz 3)修改make-distribution.sh VER ...
随机推荐
- jmeter正则表达式书写
在测试过程中,经常会有以下几种场景,如A接口的返回值,用于B接口中,而且A登陆的账户,每次登陆,这个sid值还是变化的.那么在实际工作中,如何才能A接口中提取参数到B接口中?接下来我们就可以用正则表达 ...
- java集合之ArrayList源码解读
源自:jdk1.8.0_121 ArrayList继承自AbstractList,实现了List.RandomAccess.Cloneable.Serializable. ArrayList内部是通过 ...
- urllib，request 设置代理
通常防止爬虫被反主要有以下几个策略: 1.动态设置User-Agent(随机切换User-Agent,模拟不同用户的浏览器信息) 2.使用IP地址池:VPN和代理IP,现在大部分网站都是根据IP来b ...
- 零开始：NetCore项目权限管理系统：定义基本接口和实现
上一篇讲了基础的框架搭建 地址:http://www.cnblogs.com/fuyu-blog/p/8909779.html 这篇主要讲解SqlSugar ORM的数据库连接以及建表和接口 ...
- 干货！一次kafka卡顿事故排查过程
由于一次功能上线后,导致某数据量急剧下滑,给我们紧张的呢!排查过程也是个学习过程(这其中有大部分是领导们的功劳,不过分享给大家应该也不犯法吧,ᐓ) 1. 确认问题的真实性? 被数据部门告知,某数据量下 ...
- 集群技术（二） MySQL集群简介与配置详解
when?why? 用MySQL集群? 减少数据中心结点压力和大数据量处理(读写分离),采用把MySQL分布,一个或多个application对应一个MySQL数据库.把几个MySQL数据库公用的数据 ...
- Android 动态加载（防止逆向编译） jar混淆加密
最近工作中接到了一个研究防止逆向编译的任务.研究了几天资料,最后基本实现了防破解技术,在这个工程中,也略有一些心得体会,现整理下来分享,供大家探讨参考研究.文中如有纰漏.失实之处,请大家及时给与指正. ...
- iOS 中的类属性
转自:iOS 知识小集 从Xcode 8开始,LLVM已经支持Objective-C显式声明类属性了,这是为了与Swift中的类属性互操作而引入的.在WWDC 2016 What's New in L ...
- An internal error occurred during: "Retrieving archetypes:". GC overhead limit exceeded
An internal error occurred during: "Retrieving archetypes:".GC overhead limit exceeded 异常, ...
- thinkpad彻底消除"触摸键盘"图标
输入“服务”,进入“查看本地服务”,找到“Touch Keyboard and Handwriting Panel Service”, 将其启动类型改为“禁用”,这样的话重启电脑之后也不会自动启动这触 ...