jquery实战第一讲---概述及其入门实例
就在5月28号周四下午五点的时候,接到xxx姐姐的电话,您是xxx吗?准备一下,周五上午八点半去远洋面试,一路风尘仆仆,颠颠簸簸,由于小编晕车,带着晕晕乎乎的脑子,小编就稀里糊涂的去面试了,温馨提醒,晕车的小伙伴家中常备晕车药,关于远洋面试的一些总结,小编会后续在博客中贴出,希望对有需要的小伙伴一些帮助,通过面试发现面试官大量的提问jquery的相关知识,那时年少,学习jquery的时候,想起来就是一把辛酸泪,于是,小编励志再把JQuery的相关知识复习一遍,把相关的知识点总结到博客中,欢迎不同意见的小伙伴一起讨论交流。今天小编主要跟大家分享一下jquery的一些概述,环境以及一个简单的入门实例。
有的小伙伴可能会问,我是否适合学习jquery这门课程呢?小编告诉你,肯定适合,就像谈恋爱一样,开始的开始,你并不能很好的判断对方究竟是不是你共度一生的那个人,从相识相守相知相惜,需要一个过程,对于准备做ajax前台开发的,熟悉js,了解ajax,想提高自己技术的小伙伴,想熟练掌握jquery使用方式的小伙伴都适合学习这门课程,通过jquery的学习,我们会学习到jquery的API的使用,一些小实例的实现方法,一些html、css、js的小知识。好了,接下来小编就简单介绍一下第一个jquery的实例,用户名校验,我们来简单分析一下这个小例子,首先我们来看服务器端思路分析,对指定用户名比如dingguohua返回用户名已经存在,对其他用户名,返回用户名可以使用,首先我们俩可能整个例子的路径结构如下所示:
首先,我们需要一个html文件,小编把她取名为UserVerify,除此之外我们需要编写css和js的文件,从遵循web标准的方式来看,我们要把css和js文件分别放置,为了便于管理,我们分别建立css和js的文件目录,放置这两种类型的文件,除此之外,我们可能会用到图片,我们需要单独来建立一个images的文件目录,放置一些图片信息,完成这个小例子的第一步就是来编写我们的html文件,要保证先把页面当中需要的一些内容信息通过html的一些标签把她表示出来,我们来看如何编写我们的html文件的代码:
<!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/userUerify.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>
我们来分析一下上面的代码,Doctype信息,可以告诉浏览器如何去渲染我们的页面,如何去识别展现页面上的信息,首先我们添加页面的title,然后,为了避免中文乱码问题,我们采取了UTF-8的形式,在上面的代码中,我们指定了页面所使用的css文件,把css的文件放在css文件下面,对应的在文件目录下面建立,除此之外,需要引入这个页面所使用的js的文件,这里需要两个js文件一个是jquery,另一个是我们自己编写的js文件,同样的在js目录里面加上这两个文件。接着我们来看body,body里面的内容是真正展现给用户的内容。当html的代码写完之后,我们发现和最终的页面相比,该有的页面都有了,但是样式不一样,这个时候需要通过css解决这个问题,html负责页面当中的内容,样式通过css来解决,接着,我们来编写css的代码,如下所示:
.userText{ /*控制文本框的边框是红色的实线*/ border: 1px solid red; background-image:url(../images/userVerify.gif); background-repeat:repeat-x; background-position:bottom; }
相应的,在js中我们也要建立两个文件,一个jquery一个userVerify,鉴于jquery的代码较多,所以小编已经上传相关资源,有需要的小伙伴可以到该链接下载,接着,我们来编写userVerify的代码,来给整理页面添加行为能力,代码如下所示:
/* *需要通过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="+encodeURL(encodeURL)(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"); } }) })
我们来看一下运行效果,如下图所示:
小例子,小编就演示到这里,通过这个小例子,我们知道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的操作提供了方便的扩展,具有强大的插件机制。jquery学习,未完待续~~~~~~
jquery实战第一讲---概述及其入门实例的更多相关文章
- Lucene第一讲——概述与入门
一.概述 1.什么是Lucene? Lucene是apache下的一个开源的全文检索引擎工具包. 它为软件开发人员提供一个简单易用的工具包(类库),以方便的在目标系统中实现全文检索的功能. 2.能干什 ...
- Solr第一讲——概述与入门
一.solr介绍 1.什么是solr Solr 是Apache下的一个顶级开源项目,采用Java开发,它是基于Lucene的全文搜索服务器.Solr可以独立运行在Jetty.Tomcat等这些Serv ...
- 逆向实战第一讲,寻找OllyDbg调试工具的Bug并修复
逆向实战第一讲,寻找OllyDbg调试工具的Bug并修复 首先我们要知道这个OD的Bug是什么. 我们调试一个UNICODE的窗口,看下其窗口过程. 一丶查看OllyDbg 的Bug 1.1spy++ ...
- jquery前端第一讲
1.bootstrap里面的文件是什么意思: bootstrap.cssbootstrap.min.cssbootstrap-responsive.cssbootstrap-responsive.mi ...
- WebService第一天——概述与入门操作
一.概述 1.是什么 Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现.协调和配置这些 ...
- C语言_第一讲_C语言入门
一.C语言的简介 1.C语言是一个标准,而执行标准的时候产生的自动化程序则是编译器2.了解:1983年美国国家标准化歇会(ANSI)制定了C语言标准.C语言的特点:3.代码的可移植性(理想状态是代码可 ...
- c#委托事件入门--第一讲:委托入门
说起委托,有些刚刚入门c#的人感觉很高大上,没有接触过,但是其实很多人都用过Lambda表达式,实际上Lambda表达式就是一个委托. 关于委托入门有个大神写的很详细:张子阳的博客 C#中的委托和事 ...
- c#委托事件入门--第二讲:事件入门
上文 c#委托事件入门--第一讲:委托入门 中和大家介绍了委托,学习委托必不可少的就要说下事件.以下思明仍然从事件是什么.为什么用事件.怎么实现事件和总结介绍一下事件 1.事件是什么:. 1.1 NE ...
- JQuery实战---初识JQuery+入门实例
JQuery在小编的世界中,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库,百度百科对JQuery的介绍比较详细,小伙伴可以东东自己可耐的小爪子,上网进行搜索,说 ...
随机推荐
- 勤拂拭软件系列教程 之 Android开发之旅
勤拂拭软件工作室持续推出Android开发系列教程与案例,供广大朋友分享交流技术经验,帮助喜欢Android的朋友们学习进步: 1. 勤拂拭软件Android开发之旅(1) 之 Android 开发环 ...
- 基于SSE4和多核编程的电子相册的实现
基于SSE4和多核编程的电子相册的实现 摘要:电子相册中前后两张图片的切换会产生淡入淡出效果,而且切换过程中需要大量的中间计算过程,而SSE4和多核编程技术能够有效加快中间的计算过程,有效减少图片 ...
- 如何在Linux上编译c++文件
1. 打开Linux客户端,新建一个c++文件 2. 写如下代码,退出保存 3.对.cpp文件进行编译并输出结果.
- 微信小程序 发现之旅(一)—— 项目搭建与页面跳转
开发微信小程序需要注册一个小程序账号,具体流程可以参照官方教程: https://mp.weixin.qq.com/debug/wxadoc/dev/index.html 开通账户之后,在 “开发设置 ...
- 关于ubuntu14.04LTS 64位 播放优酷视频
起因:chrome无法播放优酷视频,然后换firefox发现居然没有装flash 插件. 解释:关于chrome在网上看到了不少说法,说chrome新版本的不支持adobe flash之类的,但是这些 ...
- 剑指架构师系列-MySQL常用SQL语句
(1)分清HAVING与WHERE的区别: HAVING 子句使你能够指定过滤条件,从而控制查询结果中哪些组可以出现在最终结果里面.WHERE 子句对被选择的列施加条件,而 HAVING 子句则对 G ...
- Docker常见仓库Ubuntu
Ubuntu 基本信息 Ubuntu 是流行的 Linux 发行版,其自带软件版本往往较新一些. 该仓库提供了 Ubuntu从12.04 ~ 14.10 各个版本的镜像. 使用方法 默认会启动一个最小 ...
- Dynamics CRM2016 WebApi查询之alternate key
本篇继续来分享web api查询中的一条,利用alternate key进行查询. alternate key是个什么东西这里就不解释了如果有不知道的可以去看sdk.这里以房号信息实体为例,新建一个键 ...
- ViewPager滑动后,可移动的Imageview会回到初始化的位置
知乎看到的原文http://www.zhihu.com/question/37398770?sort=created ViewPager滑动后,可移动的Imageview会回到初始化的位置? < ...
- Android简易实战教程--第三十六话《电话录音》
今天完成一个简单的电话录音功能,即接通电话后,立即录下自己打电话的声音.实现起来比较简单:一个服务,一个TelephonyManager.一个MediaRecorder就够了. 1.布局提供一个开启录 ...