JQuery初学笔记(一)

首先介绍一下JQuery的基本知识(摘自百度)

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离。jQuery是一个兼容多浏览器的javascript库,核心理念是write less,do more(写得更少,做得更多)。jQuery的语法设计可以使开发者更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。

jQuery,顾名思议,也就是JavaScript和查询(Query),即是辅助JavaScript开发的库。

AJAX:即“Asynchronous Javascript And XML”(异步JavaScript和XML),可以不刷新页面完成数据库操作(包括查询并返回数据),在验证输入时有很重要的作用。

文档说明:Jquery有完整的API开发文档,比如jQuery1.11.0_20140330.chm,手册查询非常方便,即查即用

代码和html内容分离:使用Jquery不用再在html里面插入一堆js来调用命令了,只需要定义id即可,通过id选择器来选中JQuery对象,之后便可以通过对象方法来操作

总结如下:

JQUERY是一个JAVASCRIPT库(子集)、JS文件也是一个工具包;

封装了大量的有用函数,提高了开发效率;强大的DOM、CSS事件处理操作能力;使代码更加简洁;减弱了与浏览器的相关性;提高了运行效率;

下载地址:http://docs.jquery.com/Downloading_jQuery



主要的使用:jQuery的Id选择器;jQuery的事件方法;修改样式函数css();修改属性函数attr();




首先新建一个html文档

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <title>Document</title>
 </head>
 <body>
  
 </body>

</html>

!DOCTYPE是文档说明,做一个兼容性的网页一般完整的文档说明如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

  <meta charset="UTF-8">为网页提供了一种编码方式,否则页面很可能出现乱码.UTF-8 是没有国家的编码,也就是独立于任何一种语言,任何语言都可以使用

  <title>Document</title>是网页的标题名称

--------------------------

然后,要使用JavaScript脚本首先要导入js的库文件,即导入jquery-1.11.1.min.js(此处是压缩版的库文件):

<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>

"src"是js库文件的路径,"type"是代表插入脚本的类型,可以为"text/javascript"或者"text/css"等。

带有min的文件打开后是没有缩进的,不带min的那个是完整格式的,打开后是有良好格式的js代码,方便阅读和修改(一般不要改)

-------------------------

首先在html文档中写一个输入框和两个按钮:

  <form action="sub.html" οnsubmit="return doCheck();">

   <span><font color="red">账号</font></span><input type="text" id="account" /> 

   <input type="submit" value="提交" /><input type="reset" value="重置" />

</form>

以上两句写在html中的<body></body>标签中,<input>标签写在<form>标签中,

<input>标签中的type类型"submit"是提交form标签之间文本框中输入的数据;

<input>标签中的type类型"reset"是重置form标签之间文本框中输入的数据为空;

<form>中的action属性标示了按下提交按钮后的跳转,可以是一个简单的网址,也可以是一个action的名字(框架中);

<form>中的onsubmit'属性标示了跳转之前要检查onsubmit的值,false则不跳转,true?false的值来自doCheck()这个JS函数;

doCheck函数的实现作为JavaScript脚本要放在<head></head>标签中间,并用<script type="text/javascript></script>包含起来,如下所示:

    <head>
        <title>Document</title>
<script src="js/jquery-1.11.1.min.js" type="text/javascript"></script>


<script type="text/javascript">
   //public void doCheck();
//在这个方法中写入表单验证的代码。如果此方法返回true,则会执行action中的URL,否则就不执行。
   function doCheck() {
   //alert('docheck done');
var validFlag = true;
//获取用户输入的账号文本值
var account = document.getElementById('account').value;
//判断账号的长度是6-30个字符之间
//获取账号的长度
var len = account.length;
if (len < 6 || len > 30) {
                    validFlag = false;
}
                return validFlag; 
}
</script>
    </head>

从以上代码可以看出,js代码和Java代码非常相似,但:

>函数定义以function打头,可以返回true/false或者变量,或者数组等任何值(包括一个对象)

>没有数据类型的分别,定义一个变量用var关键字,var parameter = xx;

>数组的定义:var Arr = new Array('a','b','c'); //new Array('')是固定格式

--------------------------------

以上获取文本框输入值使用的是Dom对象的方法,Dom(documnet),其对象有getElementById()这个方法,可以按html标签内的id名来获取到dom对象

var account = document.getElementById('account').value;即取到id为account的控件的value值,并赋值给account,

此处的account值是一个类似Java中的String类型(注意:不要混用Java中的各种方法),Js有其自己的各种函数来操作字符串,使用之前要确定正确

比较字符串可以用if(account=="example")等方式来比较;其对象还有length属性,直接获取字符串长度;

--------------------------------

doCheck完成的是判断用户输入内容的长度,在6-30位是正确的,点击提交会跳转到sub.html页面;



over ...



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery 1.11.0 速查表 核心 jQuery 核心函数 jQuery([sel,[context]]) jQuery(html,[ownerDoc])1.8* jQuery(callback) jQuery.holdReady(hold) jQuery 对象访问 each(callback) size() length selector context get([index]) index([selector|element]) 数据缓存 data([key],[value]) removeData([name|list])1.7* $.data(ele,[key],[val])1.8- 队列控制 queue(e,[q]) dequeue([queueName]) clearQueue([queueName]) 插件机制 jQuery.fn.extend(object) jQuery.extend(object) 多库共存 jQuery.noConflict([ex]) 属性 属性 attr(name|pro|key,val|fn) removeAttr(name) prop(n|p|k,v|f) removeProp(name) CSS 类 addClass(class|fn) removeClass([class|fn]) toggleClass(class|fn[,sw]) HTML代码/文本/值 html([val|fn]) text([val|fn]) val([val|fn|arr]) CSS CSS css(name|pro|[,val|fn])1.9* jQuery.cssHooks 位置 offset([coordinates]) position() scrollTop([val]) scrollLeft([val]) 尺寸 height([val|fn]) width([val|fn]) innerHeight() innerWidth() outerHeight([soptions]) outerWidth([options]) 选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent > child prev + next prev ~ siblings 基本 :first :not(selector) :even :odd :eq(index) :gt(index) :lang1.9+ :last :lt(index) :header :animated :focus :root1.9+ :target1.9+ 内容 :contains(text) :empty :has(selector) :parent 可见性 :hidden :visible 属性 [attribute] [attribute=value] [attribute!=value] [attribute^=value] [attribute$=value] [attribute*=value] [attrSel1][attrSel2][attrSelN] 子元素 :first-child :first-of-type1.9+ :last-child :last-of-type1.9+ :nth-child :nth-last-child()1.9+ :nth-last-of-type()1.9+ :nth-of-type()1.9+ :only-child :only-of-type1.9+ 表单 :input :text :password :radio :checkbox :submit :image :reset :button :file :hidden 表单对象属性 :enabled :disabled :checked :selected 文档处理 内部插入 append(content|fn) appendTo(content) prepend(content|fn) prependTo(content) 外部插入 after(content|fn) before(content|fn) insertAfter(content) insertBefore(content) 包裹 wrap(html|ele|fn) unwrap() wrapAll(html|ele) wrapInner(html|ele|fn) 替换 replaceWith(content|fn) replaceAll(selector) 删除 empty() remove([expr]) detach([expr]) 复制 clone([Even[,deepEven]]) 筛选 过滤 eq(index|-index) first() last() hasClass(class) filter(expr|obj|ele|fn) is(expr|obj|ele|fn) map(callback) has(expr|ele) not(expr|ele|fn) slice(start,[end]) 查找 children([expr]) closest(e|o|e)1.7* find(e|o|e) next([expr]) nextall([expr]) nextUntil([e|e][,f]) offsetParent() parent([expr]) parents([expr]) parentsUntil([e|e][,f]) prev([expr]) prevall([expr]) prevUntil([e|e][,f]) siblings([expr]) 串联 add(e|e|h|o[,c])1.9* andSelf()1.8- addBack()1.9+ contents() end() 事件 页面载入 ready(fn) 事件处理 on(eve,[sel],[data],fn)1.7+ off(eve,[sel],[fn])1.7+ bind(type,[data],fn) one(type,[data],fn) trigger(type,[data]) triggerHandler(type, [data]) unbind(t,[d|f]) 事件委派 live(type,[data],fn)1.7- die(type,[fn])1.7- delegate(s,[t],[d],fn) undelegate([s,[t],fn]) 事件切换 hover([over,]out) toggle([spe],[eas],[fn])1.9* 事件 blur([[data],fn]) change([[data],fn]) click([[data],fn]) dblclick([[data],fn]) error([[data],fn]) focus([[data],fn]) focusin([data],fn) focusout([data],fn) keydown([[data],fn]) keypress([[data],fn]) keyup([[data],fn]) mousedown([[data],fn]) mouseenter([[data],fn]) mouseleave([[data],fn]) mousemove([[data],fn]) mouseout([[data],fn]) mouseover([[data],fn]) mouseup([[data],fn]) resize([[data],fn]) scroll([[data],fn]) select([[data],fn]) submit([[data],fn]) unload([[data],fn]) 效果 基本 show([s,[e],[fn]]) hide([s,[e],[fn]]) toggle([s],[e],[fn]) 滑动 slideDown([s],[e],[fn]) slideUp([s,[e],[fn]]) slideToggle([s],[e],[fn]) 淡入淡出 fadeIn([s],[e],[fn]) fadeOut([s],[e],[fn]) fadeTo([[s],o,[e],[fn]]) fadeToggle([s,[e],[fn]]) 自定义 animate(p,[s],[e],[fn])1.8* stop([c],[j])1.7* delay(d,[q]) finish([queue])1.9+ 设置 jQuery.fx.off jQuery.fx.interval ajax ajax 请求 $.ajax(url,[settings]) load(url,[data],[callback]) $.get(url,[data],[fn],[type]) $.getJSON(url,[data],[fn]) $.getScript(url,[callback]) $.post(url,[data],[fn],[type]) ajax 事件 ajaxComplete(callback) ajaxError(callback) ajaxSend(callback) ajaxStart(callback) ajaxStop(callback) ajaxSuccess(callback) 其它 $.ajaxPrefilter([type],fn) $.ajaxSetup([options]) serialize() serializearray() 工具 浏览器及特性检测 $.support $.browser1.9- $.browser.version $.boxModel 数组和对象操作 $.each(object,[callback]) $.extend([d],tgt,obj1,[objN]) $.grep(array,fn,[invert]) $.sub()1.9- $.when(deferreds) $.makeArray(obj) $.map(arr|obj,callback) $.inArray(val,arr,[from]) $.toArray() $.merge(first,second) $.unique(array) $.parseJSON(json) $.parseXML(data) 函数操作 $.noop $.proxy(function,context) 测试操作 $.contains(c,c) $.type(obj) $.isarray(obj) $.isFunction(obj) $.isEmptyObject(obj) $.isPlainObject(obj) $.isWindow(obj) $.isNumeric(value)1.7+ 字符串操作 $.trim(str) URL $.param(obj,[traditional]) 插件编写 $.error(message) $.fn.jquery 事件对象 eve.currentTarget eve.data eve.delegateTarget1.7+ eve.isDefaultPrevented() eve.isImmediatePropag...() eve.isPropagationStopped() eve.namespace eve.pageX eve.pageY eve.preventDefault() eve.relatedTarget eve.result eve.stopImmediatePro...() eve.stopPropagation() eve.target eve.timeStamp eve.type eve.which 延迟对象 def.done(d,[d]) def.fail(failCallbacks) def.isRejected()1.7- def.isResolved()1.7- def.reject(args) def.rejectWith(c,[a]) def.resolve(args) def.resolveWith(c,[a]) def.then(d[,f][,p])1.8* def.promise([ty],[ta]) def.pipe([d],[f],[p])1.8- def.always(al,[al]) def.notify(args)1.7+ def.notifyWith(c,[a])1.7+ def.progress(proCal)1.7+ def.state()1.7+ 回调函数 cal.add(callbacks)1.7+ cal.disable()1.7+ cal.empty()1.7+ cal.fire(arguments)1.7+ cal.fired()1.7+li> cal.fireWith([c] [,a])1.7+ cal.has(callback)1.7+ cal.lock()1.7+ cal.locked()1.7+ cal.remove(callbacks)1.7+ $.callbacks(flags)1.7+ 其它 正则表达式 HTML5速查表 Copyright © Shifone 2012 - 2014. All right reserved.

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值