[版权申明:本文系作者原创,转载请注明出处]
文章出处:http://blog.csdn.net/sdksdk0/article/details/51756085
作者:朱培 ID:sdksdk0---------------------------------------------------------------------------------------------------------------
一、JQuery简介
1.1简介
jQuery是继prototype之后又一个优秀的JavaScript库。它是轻量级的js库 ,它兼容CSS3,还兼容各种浏览器(IE 6.0+, FF1.5+, Safari 2.0+, Opera 9.0+),jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页面保持代码和html内容分离,也就是说,不用再在html里面插入一堆js来调用命令了,只需要定义id即可。
jQuery是免费、开源的,使用MIT许可协议。jQuery的语法设计可以使开发更加便捷,例如操作文档对象、选择DOM元素、制作动画效果、事件处理、使用Ajax以及其他功能。除此以外,jQuery提供API让开发者编写插件。其模块化的使用方式使开发者可以很轻松的开发出功能强大的静态或动态网页。
1.2优点
- (1)写少代码,做多事情【write less do more】
- (2)免费,开源且轻量级的js库,容量很小
- 注意:项目中,提倡引用min版的js库
- (3)兼容市面上主流浏览器,例如 IE,Firefox,Chrome
- 注意:jQuery不是将所有JS全部封装,只是有选择的封装
- (4)能够处理HTML/JSP/XML、CSS、DOM、事件、实现动画效果,也能提供异步AJAX功能
- (5)文档手册很全,很详细
- (6)成熟的插件可供选择
- (7)提倡对主要的html标签提供一个id属性,但不是必须的
- (8)出错后,有一定的提示信息
- (9)不用再在html里面通过<script>标签插入一大堆js来调用命令了
二、JQuery的九类选择器
2.1 基本选择器
2.2 层次选择器
2.3 增强基本选择器
2.5 可见性选择器
2.6 属性选择器
2.8 表单选择器
2.9 表单对象属性选择器
三、JQuery的方法API的使用
each():是jQuery中专用于迭代数组的方法,参数为一个处理函数,this表示当前需要迭代的js对象
append():追加到父元素之后
prepend():追加到父元素之前
after():追加到兄弟元素之后
before():追加到兄弟元素之前
attr(name):获取属性值
attr(name,value):给符合条件的标签添加key-value属性对
$("<div id='xxID'>HTML代码</div>"):创建元素,属性,文本
remove():删除自已及其后代节点
val():获取value属性的值
val(""):设置value属性值为""空串,相当于清空
text():获取HTML或XML标签之间的值
text(""):设置HTML或XML标签之间的值为""空串
clone():只复制样式,不复制行为
clone(true):既复制样式,又复制行为
replaceWith():替代原来的节点
removeAttr():删除已存在的属性
addClass():增加已存在的样式
removeClass():删除已存在的样式
hasClass():判断标签是否有指定的样式,true表示有样式,false表示无样式
toggleClass():如果标签有样式就删除,否则增加样式
offset():获取对象的left和top坐标
offset({top:100,left:200}):将对象直接定位到指定的left和top坐标
width():获取对象的宽
width(300):设置对象的宽
height():获取对象的高
height(500):设置对象的高
children():只查询子节点,不含后代节点
next():下一下兄弟节点
prev():上一下兄弟节点
siblings():上下兄弟节点
show():显示对象
hide():隐藏对象
fadeIn():淡入显示对象
fadeOut():淡出隐藏对象
slideUp():向上滑动
slideDown():向下滑动
slideToggle():上下切换滑动,速度快点
下面来看一些实例:
1、关于循环:
2、子元素插入到父元素内
3、子元素插入到父元素外
4、获取属性
5、创建元素
6、删除元素
7、获取文本内容
8、复制元素
9、替换元素
10、删除属性
11、添加样式 12、获取坐标,坐标设置
13、获取父元素的子元素
14、动画渐变(显示,隐藏)
15、图片的淡入淡出
16、标签的滑动
四、JQuery的事件API
1、页面加载//定义a()和b()二个方法
function a(){
alert("JS方式");
}
function b(){
alert("JQUERY方式");
}
//使用JS方式加载a()和b()二个方法
window.οnlοad=function(){
a();
b();
};
//使用jQuery方式加载a()和b()二个方法
$(document).ready(function(){
a();
b();
});
//使用jQuery最简方式加载a()和b()二个方法
$(function(){
a();
b();
});
//js方式的onload与jquery方式的ready对比,ready更快。
2、触发改变事件
//当<select>标签触发onchange事件,显示选中<option>的value和innerHTML属性的值
$("#city").change(function(){
var $option=$("#city option:selected");
var value=$option.val();
var text=$option.text();
alert(value+":"+text);
});
3、获得焦点
//加载页面时获取光标并选中所有文字
$(function(){
//光标定位文本框
$(":text").focus();
//选中文本框所有文本
$(":text").select();
});
4、按键事件
//当按键弹起时,显示所按键的code码
$(function(){
$(document).keyup(function(){
//获取按键的unicode编码
var code=event.keyCode;
alert(code);
});
});
5、获得鼠标的移动事件
//显示鼠标移动时的X和Y座标
$(function(){
$(document).mousemove(function(){
var x=event.clientX;
var y=event.clientY;
$("#xID").val(x);
$("#yID").val(y);
});
});
6、mouseover和mouseout事件
//鼠标移到某行上,某行背景变色
$("table tr").mouseover(function(){
$(this).css("background-color","pink");
});
//鼠标移出某行,某行还原
$("table tr").mouseout(function(){
$(this).css("background-color","white");
});
//鼠标移到某图片上,为图片加边框
$("img").mouseover(function(){
$(this).css("border-color","red");
});
//鼠标移出图片,图片还原
$("img").mouseout(function(){
$(this).css("border-color","white");
});
7、submit事件
<form action="06_mouseover_mouseout.html" method="post">
用户名:<input type="text"/>
<input type="submit" value="表单提交"/>
</form>
<script type="text/javascript">
//当表单提交前检测
$(function(){
//将光标定位于文本框中
$(":text").focus();
});
$("form").submit(function(){
var flag=false;
//获取文本框中的内容
var name=$(":text").val();
//去掉两边空格
name=$.trim(name);
if(name.length==0){
alert("用户名不能为空");
$(":text").focus();
$(":text").val("");
}else{
flag=isChinese(name);
//不是中文
if(!flag){
alert("用户名必须是中文");
}else{
}
}
return flag;
});
//检查是否为中文
function isChinese(str){
if(/^[\u4e00-\u9fa5]+$/.test(str)){
return true;
}else{
return false;
}
}
</script>
源码下载地址:https://github.com/sdksdk0/JQuery-Demo