---------------------------------------------------------------------------------------------------------------[版权申明:本文系作者原创,转载请注明出处]
文章出处: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的九类选择器
使用jquery,首先我们需要去把jquery的包导入,这个jquery的官网上面是可以下载的,地址:https://jquery.com/,目前最新版本是3.0,一般会有两种版本的,一个是完全的,一个是迷你版本的,两个版本就是大小不一样,里面的实质性东西其实是一样的,而这个迷你版的适合项目正式上线使用,因为占的体积小啊,一般学习或者练习的话就可以尝试使用完全版的。下面以几个案例来实际说明jquery的使用,完整的代码会在文末提供下载链接,欢迎下载学习。选择器的部分在下载的文件中的/JQueryWebRootselector目录下。 2.1 基本选择器
-
- alert( $("#div1ID").size());
-
-
-
- alert( $("div").length);
-
-
-
- alert($(".myClass").size());
-
-
-
- alert($("div,span,p").size());
-
-
-
- alert($("#div1ID,.myClass,p").size());
2.2 层次选择器
-
- alert($("form input").size());
-
-
- alert($(" form > input").size());
-
-
-
- alert($("form + input").val());
-
-
-
- alert($("form ~ input").size());
-
2.3 增强基本选择器
-
- alert($("ul li:first").html());
- alert($("ul li:first").text());
-
-
-
-
- alert($("ul li:last").text());
-
-
-
- alert($(":checkbox:checked").size());
- alert($(":checkbox:not(:checked)").size());
-
-
-
- alert($("table tr:odd").size());
-
-
-
- alert($("table tr:even").size());
-
-
-
- alert($("table tr:eq(1)").text());
-
-
-
-
- alert($("table tr:gt(0)").size());
-
-
-
- alert($("table tr:lt(3)").size());
-
-
-
- alert($(":header").css("background-color","red").css("color","white"));
2.4 内容选择器-
- alert($("div:contains('John')").size());
-
-
-
- alert($("p:empty").size());
-
-
-
- $("div:has(p)").addClass("myClass");
-
-
-
- alert($("p:parent").size());
2.5 可见性选择器
-
- alert($("table tr:hidden").size());
-
-
-
- alert($("table tr:not(:hidden)").size());
- alert($("table tr:visible").size());
2.6 属性选择器
-
- alert($("div[id]").size());
-
-
-
- $("input[name='newsletter']").attr("checked","checked");
-
-
- $("input[name!='newsletter']").attr("checked","true");
-
-
-
- $("input[name^='news']").attr("checked","true");
-
-
-
- $("input[name$='letter']").attr("checked","true");
-
-
-
- $("input[name*='news']").attr("checked","true");
-
-
-
- $("input[id][name$='letter']").attr("checked","true");
2.7 子元素选择器-
- $("ul li:first-child").each(function(){
- alert($(this).text());
- });
-
-
-
- $("ul li:last-child").each(function(){
- alert($(this).text());
- });
-
-
-
- $("ul li:only-child").each(function(){
- alert($(this).text());
- });
-
-
-
- $("ul li:nth-child(2)").each(function(){
- alert($(this).text());
- });
2.8 表单选择器
-
- alert($("input").size());
- alert($(":input").size());
-
-
- alert($(":text").size());
-
-
- alert($(":password").size());
-
-
- alert($(":radio").size());
-
-
- alert($(":checkbox").size());
-
-
- alert($(":submit").size());
-
-
-
- alert($(":images").size());
-
-
-
- alert($(":reset").size());
-
-
- alert($(":button").size());
-
-
- alert($(":file").size());
-
-
-
- alert($(":input:hidden").size());
2.9 表单对象属性选择器
-
- alert($("input:enabled").size());
-
-
- alert($("input:disabled").size());
-
-
- alert($(":checkbox:checked").size());
-
-
- alert($(":checkbox:not(:checked)").size());
-
-
- alert($("select option:selected").size());
- alert($("#provinceID option:not(:selected)").size());
三、JQuery的方法API的使用
jquery的方法非常多,其实都挺简单的,使用jquery大大降低了开发难度。该部分内容在下载的文件中的JQueryWebRootmethod目录中。
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、关于循环:
-
- var nameArray=[
- {id:1,name:"张三 "},
- {id:2,name:"王明" },
- {id:3,name:"李水" }
-
- ];
- var _nameArray=$(nameArray);
-
- _nameArray.each(function(){
-
- alert(this.id+":"+this.name);
-
- });
2、子元素插入到父元素内-
- $("ul").append($("div"));
-
-
-
-
- $("ul").prepend($("div"));
3、子元素插入到父元素外-
- $("ul").after($("div"));
-
-
-
-
- $("ul").before($("div"));
4、获取属性-
- alert($("form input:first").attr("type"));
-
-
- $("form input:last").attr("readonly","readonly");
-
- $(":password").attr("readonly","readonly");
-
-
- alert($(":password").val());
5、创建元素-
-
-
- var divElement=document.createElement("div");
- divElement.innerHTML="哈哈";
- divElement.setAttribute("id","2016");
-
- document.body.appendChile(divElement);
-
-
-
- var _div=$("<div id='2016'>哈哈</div>");
-
-
- $(document.body).append(_div);
6、删除元素-
- $("#secondID").remove();
-
-
- $("ul li").remove();
-
-
- $("ul").remove();
-
7、获取文本内容-
- alert($("div").text());
-
-
- var _option=$("#city option");
- var value=_option.val();
- var text=_option.text();
- alert(value+":"+text);
8、复制元素-
- var _old=$(":button");
- var _new=_old.clone();
- _new.val("新按钮");
- _old.after(_new);
-
-
- var _old=$(":button");
- _old.click(function(){
- alert("动态事件");
-
- });
-
-
- var _new=_old.clone();
- _new.val("新按钮");
- _old.after(_new);
9、替换元素-
- $("div").dblclick(function(){
- var _text=$("<input type='text' style='165px;height:23px' />");
-
- $(this).replaceWith(_text);
-
- });
10、删除属性-
- $("table").attr("border","2").attr("align","center").attr("width","40%");
-
-
-
- $("table").removeAttr("align");
11、添加样式-
- $("div:first").addClass("myClass");
-
-
- $("div:last").removeClass("myClass");
-
-
- $("div").toggleClass("myClass");
-
-
- var flag=$("div:last").hasClass("myClass");
- alert(flag?"有":"无");
12、获取坐标,坐标设置-
- var offset=$("img").offset();
- var x=offset.top;
- var y=offset.left;
- alert(x+":"+y);
-
-
-
- $("img").offset({
- top:200,
- left:200
-
- });
-
-
-
- var w=$("img").width();
- var h=$("img").height();
- alert(w+":"+h);
-
-
-
- var w=$("img").width(500);
- var h=$("img").height(500);
13、获取父元素的子元素-
- var _span=$("div").children();
- var content=_span.html();
- alert(content);
-
-
- var _p=$("div").next();
- alert(_p.text());
-
-
- var _p=$("div").prev();
- alert(_p.text());
-
-
-
- var _all=$("div").siblings();
- _all.each(function(){
- alert($(this).text());
-
- });
-
-
- var _all=$("div").siblings("p");
- _all.each(function(){
- alert($(this).text());
-
- });
14、动画渐变(显示,隐藏)-
-
-
-
- $("img").hide(5000,function(){
- alert("完成");
- });
-
-
- window.setTimeout(function(){
-
- $("img").show(5000);
-
- },3000);
-
-
-
- $("img").show(5000);
15、图片的淡入淡出-
- $("img").fadeIn(5000);
-
-
- $("img").fadeOut(5000);
16、标签的滑动-
- $(":button").click(function(){
-
- $("div").slideToggle(1000);
-
- });
四、JQuery的事件API
1、页面加载//定义a()和b()二个方法
function a(){
alert("JS方式");
}
function b(){
alert("JQUERY方式");
}
//使用JS方式加载a()和b()二个方法
window.onload=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