jQuery简介
一、jQuery概述
1、jQuery是一个优秀的JavaScript框架,主要提供如下功能:
(1)访问页面框架的局部
(2)修改页面的表现
(3)更改页面的内容
(4)响应事件
(5)为页面添加动画
(6)与服务器异步交互
(7)简化常用的JavaScript操作
2、下载并使用jQuery
(1)官方网站(https://www.doczj.com/doc/541447520.html,/)
(2)不需要任何安装过程
二、jQuery选择器
选择器包括:基本选择器、子选择器、特征选择器、位置选择器1、基本选择器
$(‘a’); //这个选择器匹配所有超链接元素
$(‘#specialID’); //这个选择器匹配id为specialID的元素
$(‘.specialClass’); //这个选择器匹配拥有CSS类specialClass的元素
$(‘a#specialID.specialClass ’); //匹配id为specialID、拥有CSS类specialClass的超链接元素
$(‘p a.specialClass’); //这个选择器匹配拥有CSS类specialClass、在
元素中声明的超链接元素。
2、子选择器
有时我们只想选择某元素的子节点。
例如,现在有这样一段HTML代码:
我们想要选择
不幸的是,“link1”与“link2”超链接都会被选中,因为“link2”也是
更高级的解决办法是利用“子选择器”,父节点与直接子节以“>”符号隔开,如下所示:
$(‘ul > a’); 这个选择器只匹配
3、特征选择器
如果我们写了这么一段HTML代码:
假设我们指向绑定特殊行为到执行本网站之外的地址链接,在href属性中以“http://”开头的超链接我们便可以认为是外部链接。利用特征选择器,我们可以这么写:$('a[href^=http://]');
特征选择器还可以这么写:
$('a[href$=.com]'); //匹配所有以“.com”作为href属性结尾的超链接。$(‘a[href*=sina]’); //匹配所有href属性包含“sina”字符串的超链接$(‘form[method]’);//获取所有包含method属性的表单
$(‘input[type=text]’);//获取所有文本框
4、位置选择器
有时候必须根据元素在页面上的位置或者其他元素的关系去选择元素。也许你想要选择页面上的第一个链接、奇数或偶数的段落,或者每个列表的最后一项。jQuery支持实现这个具体选择的机制。$('a:first');
$('p:odd'); //代表选择器匹配所有序数为奇数的段落元素
$('p:even'); //代表选择器匹配所有序数为偶数的段落元素
$('li:last-child'); //选择li父节点的最后一个子元素
位置选择器语法表
三、利用元素关系获取元素集合
jQuery提供了一系列方法允许根据元素集合中某元素与其他元素的层次关系获取新的元素集合
Jquery表单验证
方法一:
function check(){
var name=$("#f1").val();
var password=$("#f2").val();
var rpassword=$("#f3").val();
var email=$("#f4").val();
if(name.length==0){
alert("用户名不能为空!!!");
return false;
}
if(password.length==0){
alert("密码不能为空!!!");
return false;
}
if(rpassword != password){
alert("密码不一致!!!");
return false;
}
if(email.length==0){
alert("邮箱不能为空!!!");
}
}
……
……
……
请输入注册信息: | |
用 户 名: | |
密 码: | |
确认密码: | |
电子邮箱: | |
方法二:
function check()
{
if($('#f1').val()==null || $('#f1').val()=="")
{
$("#f1error").html("用户名不能为空!!!");
return false;
} else{
$("#f1error").html("");
}
if($('#f2').val()==null || $('#f2').val()=="")
{
$('#f2error').html("密码不能为空!!!");
return false;
}else{
$("#f2error").html("");
}
if( $('#f3').val() != $('#f2').val())
{
$('#f3error').html("所输入的密码不一致!!!");
return false;
}else{
$("#f3").html("");
}
//正则表达式使用
var reg = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(!reg.test($('#f4').val()))
{
$('#f4error').html("email地址格式不正确!!!"); return false;
}
else {
$('#f4error').html("");
}
}
……
……
……
Ajax基础
一、Ajax简介
Ajax(Asynchronous JavaScript and XML) ———异步的JavaScript和XML。
Ajax并不是全新的技术,而是整合了几种现有的技术:JavaScript、XML与CSS。主要是JavaScript,通过JavaScript的XMLHttpRequest对象完成发送请求到服务器并返回结果的任务,然后使用JavaScript更新局部的网页。
异步指的是,JavaScript脚本发送请求后并不是一直等着服务器响应,而是发送请求后继续做别的事,请求响应和处理是异步完成的。XML一般用于请求数据和响应数据的封装,CSS用于美化页面样式。
二、XMLHttpRequest对象
XMLHttpRequest是Ajax开发的基础,它提供了客户端与服务器端进行异步通信的能力。一方面它向服务器提交一个请求,获取指定页面的内容;另一方面将指定的数据通过JavaScript提交到服务器端并对数据进行处理,结合XML与CSS,做出各种应用程序。三、构建Ajax应用
利用XMLHttpRequest(XHR)对象,每次构建Ajax应用必须遵循的步骤:创建XHR对象、创建Ajax请求、发送Ajax请求、处理服务器响应。
步骤1:创建XMLHttpRequest对象
XMLHttpRequest对象不是一个国际标准。在不同浏览器中有不同的实现。要实现能够跨越浏览器运行的Ajax应用,必须考虑所有的使用场合。使用时必须根据浏览器采用不同的语法进行创建。但对每一个都进行判断不合实际,可以利用JavaScript的异常处理机制实现跨浏览器的XMLHttpRequest对象创建脚本。
var xmlhttp;
try{
xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
try{
xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
try{
xmlhttp= new XMLHttpRequest();
}catch(e){}
}
}
步骤2:创建AJAX请求
创建完XMLHttpRequest对象后就可以开始使用它了。首先介绍open()方法,它创建一个请求,并准备向服务器发送,open方法语法如下:
Xmlhttp.open(“get”, “ajax.jsp?oper=createUser”);
创建一个请求,利用get方式发送,服务器url为
“ajax.jsp?oper=createUser”。
步骤3:发送Ajax请求
在创建一个请求以后,可以使用send()方法向服务器发送这个请求,其原型如下:
var body = “userName=qiyi&sex=male&age=25”;
Xmlhttp.send(body);
步骤4:对服务器端响应进行处理
XHR对象可以接收服务器返回的文本片段和XML文档,分别保存在responseText与responseXML属性中。
使用Jquery实现Ajax
一、$.ajax()方法
jQuery提供了$.ajax()方法,利用此方法我们可以轻松发起Ajax 请求,并且可以根据需要设置AJAX的每一个细节,语法如下:
二、options选项表
参数options可以指定很大范围的值用来调整这个方法的操作。常用选项的定义如下表所示:
三、数据格式:JSON
JSON,即JavaScript Object Notation,是一种轻量级的数据交换格式,它是基于JavaScript规范开发出来的。可以说,它是JavaScript的一个子集,其目的是形成一种便于阅读同时便于解析的数据交换语言。它实际上就是一种结构化的数据,充分利用了JavaScript语言的动态性以及对象定义的灵活性,是数据无需额外的解析便能够使用。
JSON中的每个结构单元均由花括号{}表示,每个结构中可以包含多个由逗号(,)分割的成员,而每个成员均是一个“键/值”对。
值不仅可以是普通的字符串,也可以是一个有序列表,用方括号[]标识,其中可以包含以逗号隔开的多个值。
示例:
{
“success” :”true ”,
……
data:[
{
“id”:”1”,
“author”:”someone1”,
“url”:”https://www.doczj.com/doc/541447520.html,”,
“content”:”content1”
},
{
“id”:”1”,
“author”:”someone1”,
“url”:”https://www.doczj.com/doc/541447520.html,”,
“content”:”content1”
}
]
}
Jquery特效
一、String和Stringbuffer的区别
简要的说,String 类型和StringBuffer 类型的主要性能区别其实在于String 是不可变的对象,因此在每次对String 类型进行改变的时候其实都等同于生成了一个新的String 对象,然后将指针指向新的String 对象,所以经常改变内容的字符串最好不要用String ,因为每次生成对象都会对系统性能产生影响,特别当内存中无引用对象多了以后,JVM 的GC 就会开始工作,那速度是一定会相当慢的。这里尝试举个不是很恰当的例子:
String S1 = “abc”;
For(int I = 0 ; I < 10000 ; I ++) // For模拟程序的多次调用
{
S1 + = “def”;
S1 = “abc”;
}
而如果是使用StringBuffer 类则结果就不一样了,每次结果都会对StringBuffer 对象本身进行操作,而不是生成新的对象,再改变对象引用。所以在一般情况下我们推荐使用StringBuffer ,特别是字符串对象经常改变的情况下。
二、jQuery内置动画效果:
1、显示和隐藏(show hide toggle)
2、淡入和淡出(fadeIn、fadeOut)
淡入与淡出效果不改变元素大小,只是逐渐调整元素透明度达到显示与隐藏的效果。
fadeIn(speed,callback):元素淡入
fadeOut(speed , callback):元素淡出
3、滑上和滑下(slideDown、slideUp)
滑上与滑下效果只改变元素大小,让元素显示时像拉窗帘似的从顶部滑下来或者拉上去。
slideDown(speed,callback):元素滑下
slideUp(speed , callback):元素滑上
三、jQuery UI插件
jQuery UI库是jQuery的一个子项目,它是一个真正的关于用户界面的集合。jQuery UI库的目标是创建一组良好定义的、可靠的并且可以在Web应用程序中重用的用户界面组件,以减轻用户界面开发人员的负担。
jQuery UI库可以划分为三个部分:用户交互(Interactions)、页面组件(Widgets)和页面特效(Effects)。