一、认识 JQuery
1. 概述
jQuery是为了简化JavaScript的开发而诞生的一个JavaScript库。它是一个轻量级的库、拥有强大的选择器、出色的DOM操作、可靠的事件处理、完善的兼容性和链式操作等功能。
jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax的操作。
2. 配置jQuery环境
获取jQuery最新版本: http://jquery.com/
jQuery库类型说明:
jquery-1.x.js(完整无压缩版本,用于测试、学习和开发)
jquery-1.x.min.js(经过JSMin等工具压缩后的版本,体积非常小,用于产品和项目)
使用JQuery:
a.将jquery-1.x.js放入项目中
b.在页面引入jQuery:<script type="text/javascript" src="js/jquery-1.4.2.js"></script>
3. 页面加载事件(可以写多个 $(document).ready())
同JS中的window.onload,但window.onload只能有一个,window.onload必须等页面所有内容加载完毕后执行。$(document).ready()只需等DOM结构绘制完毕就执行,可能DOM关联的东西并没有加载完。
<script type="text/javascript">
$(document).ready(function(){
alert("hello world");
})
</script>
4. jQuery代码风格(链式操作风格)
JQuery 允许你在一句代码中操做任何与其相关联的元素,包括其子元素、父元素等
例:$("#myDiv").addClass("css1")
.children("a").removeClass("css2"); //选择名称为myDiv的元素,为其自身添加css1的样式,然后再选择其所有子元素a,为其移除 css2 样式。
5. jQuery对象(不能使用DOM对象的方法)
$("#myDiv").html(); //获取id为myDiv的元素内的html代码,同 document.getElementById("foo").innerHTML;
JQuery 对象 转换成 DOM 对象 :
var $obj = $("#myDiv"); // jQuery对象
var obj = $obj.get(0); // DOM对象,或者 var obj = $obj[0];
DOM对象转换成 JQuery对象:
var obj = documnet.getElementById("myDiv"); //DOM对象
var $obj = $(obj); //jQuery对象
6. 解决jQuery和其它库的冲突
jQuery库在其他库之后导入:
jQuery.noConflict(); // 释放 JQuery对 $ 符号的控制权,释放后不能使用 $ 访问jQuery。
var $j = jQuery.noConflict(); // 自定义 $j 作为jQuery的快捷方式。
如果不想转让 $ :
jQuery.noConflict();
jQuery(function($){...}); 或 (function($){...})(jQuery); //此时,可在函数内部继续使用 $ 。
jQuery库在其他库之前导入:
则可以使用jQuery关键字来使用jQuery,可以使用$来操作其它库。
7. jQuery开发工具和插件
Dreamweaver:
Dreamweaver是一个可视布局工具,代码自动提示需在 http://xtnd.us/dreamweaver/jquery 上下一个 jQuery-API.mxp插件。
Aptana:
Aptana是一个功能非常强大、开源和专注于Javascript的Ajax开发IDE。
jQueryWTP 和 Spket插件:
这两款插件都可以使Eclipse支持jQuery自动提示代码功能。分别在http://www.langtags.com/jquerywtp/ 和http://spket.com/ 上下载。
二、JQuery选择器
1. CSS选择器
CSS是一项出色的技术,它使得网页的结构和表现层样式完全分离。利用CSS选择器能轻松地对某个元素添加样式而不改动HTML结构,只需通过添加不同的CSS规则,就可以行到各种不同样式的网页。其中包括标签选择器、ID选择器、类选择器、群组选择器、后代选择器、通配选择器等。
2. jQuery选择器
写法简洁:
jQuery使用 $("#ID") 来代替 document.getElementById("ID")来通过ID获取元素。
使用$("tagName") 来代替 document.getElementsByTagName("tagName")来通过标签名获取HTML元素。
支持CSS1、CSS2的全部和CSS3的部分选择器:
完善的处理机制:
if(document.getElementById("test")){ // 判断test是否存在,
document.getElementById("test").style.color = "red"; //如果不进行判断,test不存在时页面会出现异常
}
$("#test").css("color","red"); // 这里无需判断test是否存在,不存在时也不会发生异常
if($("#test").length>0){...} //或 if($("#test")[0]) 来判断是否得到该jQuery对象
3. jQuery基本选择器
$("#myDiv") //根据给定的ID选择匹配的元素,返回单个元素
$(".myClass") //根据给定的样式名称选择匹配的元素,返回集合元素
$("p") //选取所有的<p>元素,返回集合元素
$("*") //选择页面所有元素,返回集合元素
$("div,span,p.myClass") // 选取所有<div>、<span>和拥有class为myClass的<p>元素,返回集合元素
4. jQuery层次选择器
$("div span") //选择所有<div>里的所有<span>元素,返回集合元素
$("div>span") //选择所有<div>里的<span>的子元素,返回集合元素
$(".myClass+div") //选择紧接在样式名称为 myClass 的下一个<div>,等价于 $(".myClass").next("div"),返回集合元素
$(".myClass~div") //选择样式名称为 myClass 之后的所有<div>兄弟元素,等价于 $(".myClass").nextAll(),返回集合元素
$(".myClass").siblings("div") //选择样式名称为myClass的元素的所有同辈<div>元素(无论前后),返回集合元素
4. jQuery过滤选择器
基本过滤选择器:
$("div:first") //选择所有<div>元素下的第一个<div>元素,返回单个元素
$("div:last") //选择所有<div>元素下的最后一个<div>元素,返回单个元素
$("div:not(.myClass)") //选择所有样式不包括myClass的<div>元素,返回集合元素
$("div:even") //选择所有索引是偶数的<div>元素,返回集合元素
$("div:odd") //选择所有索引是奇数的<div>元素,返回集合元素
$("div:eq(1)") //选择所有索引等于1的<div>元素,返回集合元素
$("div:gt(1)") //选择所有索引大于1的<div>元素,返回集合元素
$("div:lt(1)") //选择所有索引小于1的<div>元素,返回集合元素
$(":header") //选择所有标题元素(<h1>,<h2>,<h3>..... ),返回集合元素
$("div:animated") //选择所有正在执行动画的<div>元素,返回集合元素
内容过滤选择器:
$("div:contains('我')") //选择含有文本'我'的<div>元素,返回集合元素
$("div:empty") //选择不包含子元素(包括文本元素)的<div>元素,返回集合元素
$("div:has(p)") //选择所有含有<p>元素的<div>元素,返回集合元素
$("div:parent") //选择所有含有子元素(包括文本元素)的<div>元素,返回集合元素
可见性过滤选择器:
$(":hidden") //选择所有不可见的元素(包括<input type="hidden"/>、<div style="display:none;">、<div style="visibility:hidden;">等元素),返回集合元素
$("input:hidden") //选择所有不可见的<input>元素,返回集合元素
$(":visible") //选择所有可见的元素,返回集合元素
属性过滤选择器:
$("div[id]") //选择含有 id 属性的<div>元素,返回集合元素
$("div[class=myClass]") //选择所有 class 属性值是myClass的<div>元素,返回集合元素
$("div[class!=myClass]") //选择所有 class 属性值不是 myClass 的<div>元素,返回集合元素
$("div[alt^=test]") //选择所有 alt 属性值以 test 开始的<div>元素,返回集合元素
$("div[alt$=test]") //选择所有 alt 属性值以 test 结束的元素,返回集合元素
$("div[alt*=some]") //选择所有 alt 属性值含有 some 的<div>元素,返回集合元素
$("div[id][title=test]") //选择所有含有 id 属性的并且 title 属性值是 test 的元素,返回集合元素
子元素过滤选择器(注意:index从1开始):
$(":nth-child(index/even/odd)") //选择每个父元素下的第 index/偶数/奇数子元素,而:eq(index)只匹配一个元素,返回集合元素
$(":first-child") //选择每个父元素下的第一个子元素,:first只匹配并返回单个元素,返回集合元素
$(":last-child") //选择每个父元素下的最后一个子元素,:last只匹配并返回单个元素,返回集合元素
$("ul li:only-child") //在<ul>元素中选择只有一个<li>元素的子元素,返回集合元素
表单对象属性过滤选择器:
$("#myForm:enabled") //选择ID属性为myForm的表单的所有可用元素,返回集合元素
$("#myForm:disabled") //选择ID属性为myForm的表单的所有不可用元素,返回集合元素
$("input:checked") //选择所有被选中的<input>元素,返回集合元素
$("#myForm:selected") //选择所有被选中的选择元素,返回集合元素
5. 表单选择器
$(":input") //选择所有 <input> <select> <button> <textarea> 元素,返回集合元素
$(":text") //选择所有单行文本框元素,返回集合元素
$(":password") //选择所有密码框元素,返回集合元素
$(":radio") //选择所有单选框元素,返回集合元素
$(":checkbox") //选择所有复选框元素,返回集合元素
$(":submit") //选择所有提交按钮元素,返回集合元素
$(":image") //选择所有图片按钮元素,返回集合元素
$(":reset") //选择所有重置按钮元素,返回集合元素
$(":button") //选择所有按钮元素,返回集合元素
$(":file") //选择所有上传域元素,返回集合元素
$(":hidden") //选择所有不可见元素,返回集合元素
6. jQuery选择器中的一些注意事项
特殊符号:
选择器中含有 ".","#","(","]" 等特殊字符,应采用 "\\" 对特殊符号进行转义。
空格:
$('.test :hidden'); //选择class为"test"的元素里面的隐藏元素
$('.test:hidden'); //选择隐藏的class为"test"的元素
7. jQuery提供的选择器的扩展
MoreSelectors for jQuery插件
Basic Xpath
8. 其他使用CSS选择器的方法
document.getElementsBySelector()
cssQuery()
querySelectorAll()
三、JQuery中的DOM操作
1. 查找节点
$("#myDiv").text(); //获取节点文本内容
$("#myDiv").attr("title"); //获取节点title属性
2. 创建节点
$("#myDiv").append($("<li title='000'>111</li>")); //使用jQuery的工厂函数$()创建一个新的<li>节点,再使用jQuery的append()方法将其插入文档中
3. 插入节点
$("p").append("<b>你好</b>"); //在<p>元素内追加内容(下一级)
$("<b>你好</b>").appendTo("p"); //同上
$("p").prepend("<b>你好</b>"); //往<p>元素内最前面插入元素(下一级)
$("<b>你好</b>").prependTo("p"); //同上
$("p").after("<b>你好</b>"); // 往<p>元素后插入元素(同级)
$("<b>你好</b>").insertAfter("p"); //同上
$("p").before("<b>你好</b>"); //往<p>元素前面插入元素(同级)
$("<b>你好</b>").insertBefore("p"); //同上
4. 删除节点
var $li = $("p").remove(); //将<p>元素及它的后代元素全部移除,返回被删节点的引用
$li.appendTo("ul"); //继续使用被删的节点,将它重新添加到<ul>元素里
$("p").appendTo("ul"); //简化上面的两部操作,addendTo()方法直接来移动元素
$("p").remove("p[title != 你好]"); //选择性的删除
$("p").empty(); //清空<p>里面的内容和子节点
5. 复制节点
$("#myDiv1 span").click( function(){ //点击id为myDiv1的元素内的span元素,触发click事件
$(this).clone().appendTo("#myDiv2"); //将span元素克隆添加到id为myDiv2的元素内
$(this).clone(true).appendTo("#myDiv"); //如果clone传入true参数,表示同时复制事件
})
6. 替换节点
$("p").replaceWith("<strong>您好</strong>"); //替换所有的<p>元素
$("<strong>您好</strong>").replaceAll("p"); //同上
7. 包裹节点
$("strong").wrap("<b></b>"); //用<b>元素把所有<strong>元素单独包裹起来
$("strong").wrapAll("<b></b>"); //用<b>元素把所有<strong>元素全部包裹起来
$("strong").wrapInner("<b></b>"); //把<b>元素的子内容(包括文本节点)包裹起来
8. 属性操作
$("#myDiv").arrt("title"); //获取id为myDiv的元素的title属性
$("#myDiv").attr("title","我是标题"); //设置id为myDiv的元素的title属性的值
$("#myDiv").attr({"title":"我是标题", "alt":"我还是标题"); //一次性设置多个属性的值
$("#myDiv").removeArrt("title"); //移除id为myDiv的元素的title属性
9. 样式操作
var txt = $("#myDiv").arrt("class"); //获取id为myDiv的元素的样式
$("#myDiv").attr("class","myClass"); //设置id为myDiv的元素的样式为myClass
$("#myDiv").addClass("other"); //在id为myDiv的元素中追加other样式,有相同样式属性时后者覆盖前者
$("#myDiv").removeClass("other"); //在id为myDiv的元素中移除other样式
$("#myDiv").removeClass("myClass other"); //在id为myDiv的元素中同时移除myClass和other两个样式
$("#myDiv").removeClass(); //将id为myDiv的元素移除所有样式
$("#myDiv").toggleClass("other"); //切换样式,在有other样式和没other样式之间切换
$("#myDiv").hasClass("other"); //判断是否有other样式
10. 设置和获取HTML、文本和值
$("#myDiv").html(); //获取id为myDiv的元素的HTML代码(相当于JavaScript中的innerHTML)
$("#myDiv").html("<span>hello</span>"); //设置id为myDiv的元素的HTML代码
$("#myDiv").text(); //获取id为myDiv的元素的文本内容(相当于innerText )
$("#myDiv").text("hello"); //设置id为myDiv的元素的文本内容
$("#myInput").val(); //获取id为myDiv的元素的value值 (支持文本框、下拉框、单选框、复选框等)
$("#myInput").val("hello"); //设置id为myDiv的元素的value值(下拉框、单选框、复选框带有选中效果)
11. 遍历节点
$("#myDiv").children(); //获取id为myDiv的元素的子元素(只考虑子元素,不考虑后代元素)
$("#myDiv").next(); //获取id为myDiv的元素的下一个同辈元素
$("#myDiv").prev(); //获取id为myDiv的元素的上一个同辈元素
$("#myDiv").siblings(); //获取id为myDiv的元素的所有同辈元素
$("#myDiv").closest("span"); //从id为myDiv的元素开始,逐级向上匹配最接近的span元素,直到匹配到或返回空
12. CSS-DOM 操作
$("#myDiv").css("color"); //获取id为myDiv的元素的color样式的值
$("#myDiv").css("color", "blue"); //设置id为myDiv的元素的color样式的值
$("#myDiv").css({"color":"blue", "fontSize":"12px"}); //设置id为myDiv的元素的color和fontSize样式的值
$("#myDiv").css("opacity", "0.5"); //设置id为myDiv的元素的透明度为半透明(兼容浏览器)
$("#myDiv").css("height"); //获取id为myDiv的元素的高度(单位:px,兼容浏览器)
$("#myDiv").height(); //同上
$("#myDiv").height(100); //设置id为myDiv的元素的高度为100px
$("#myDiv").height(10em); //设置id为myDiv的元素的高度为10em
$("#myDiv").css("width"); //获取id为myDiv的元素的宽度(单位:px,兼容浏览器)
$("#myDiv").width(); //同上
var offset = $("#myDiv").offset(); //获取id为myDiv的元素在当前窗口的相对偏移量
alert(offset.top + "|" + offset.left); //分别为左偏移和右偏移
var position = $("#myDiv").position(); //获取id为myDiv的元素相对于最近一个position设置为relative或absolute的父元素的相对偏移量
alert(offset.top + "|" + offset.left); //分别为左偏移和右偏移
$("#txtArea").scrollTop(); //获取id为txtArea的元素滚动条距离顶端的距离
$("#txtArea").scrollLeft(); //获取id为txtArea的元素滚动条距离左侧的距离
$("#txtArea").scrollTop(100); //设置id为txtArea的元素垂直滚动条距离顶端的距离
$("#txtArea").scrollLeft(100); //设置id为txtArea的元素横向滚动条距离左侧的距离
四、JQuery中的事件和动画
1. 加载DOM
$(document).ready(); //页面加载完毕后添加事件,相当于JS中的window.onload方法
$(document).ready()和window.onload的区别:
window.onload 是在网页中所有元素(包括元素的所有关联文件)完全加载后才执行。$(document).ready()是在DOM完全就绪时就可以被调用,此时,并不意味着这些元素关联的文件都已经加载完毕。
window.onload注册时后面注册的要覆盖前面的,故只可以注册一次。但可以在同一个页面注册多个(document).ready()事件。
$(document).ready()可以缩写成 $(function(){ }) 或 $().ready()
2. 事件绑定
bind(type [,data], fn); //文档装载完成后,可以通过bind()方法为元素进行事件绑定,可多次绑定。
type:指事件的类型
blur(失去焦点 )
focus(获得焦点)
load(加载完成 )
unload(销毁完成)
resize(调整元素大小 )
scroll(滚动元素)
click(单击元素事件 ) //常用事件可简写为:$("p").click(function(){...});
dbclick(双击元素事件)
mousedown(按下鼠标 )
mouseup(松开鼠标)
mousemove(鼠标移过 )
mouseover(鼠标移入 )
mouseout(鼠标移出)
mouseenter(鼠标进入 )
mouseleave(鼠标离开)
change(值改变 )
select(下拉框索引改变 )
submit(提交按钮)
keydown(键盘按下 )
keyup(键盘松开 )
keypress(键盘单击)
error(异常)
data:事件传递的属性值,event.data额外传递给对象事件的值
fn:绑定的处理函数,在此函数体内, $(this) 指携带相应行为的DOM元素
$("p").bind("mouseover mouseout", function(){...}); //同时绑定多个事件
3. 合成事件
hover(enter,leave) :鼠标移入执行enter方法、移出事件执行leave方法
toggle(fn1,fn2,...fnN) :鼠标第一次点击执行fn1,第二次点击执行fn2...直到最后一个后重复
4. 事件冒泡
如果父元素和子元素都绑定了同一个事件,事件会按照DOM的层次结构,像水泡一样不断向上触发直到顶端。
$("span").bind("click", function(event){ //得到event事件对象
...
event.stopPropagation(); //停止事件冒泡
});
$("#btnSubmit").bind("click", function(event){
...
event.preventDefault(); //阻止事件默认行为,相当于return false;
});
jQuery不支持事件捕获,即事件从最顶端往下开发触发。
5. 事件对象的属性
event.type() //获取事件的类型
event.preventDefault(); //阻止事件默认行为,相当于return false;
event.stopPropagation(); //停止事件冒泡
event.target() //获取触发事件的元素
event.relatedTarget() //引发事件的元素
event.pageX()/event.pageY() //获取鼠标相对于页面的 X 和 Y 坐标
event.which() //在单击事件中获取到对应的鼠标左、中、右键,值分别是1、2、3
event.metaKey() //获取<ctrl>按键
event.originalEvent() //指向原始的事件对象
6. 移除事件
$("#myDiv").unbind(); //移除id为myDiv的元素的所有事件
$("#myDiv").unbind("click"); //移除id为myDiv的元素的所有click事件
$("#myDiv").unbind("click",fn1); //移除id为myDiv的元素的名称为fn1的click事件
$("#myDiv").one("click", [data], function(){ //使用one绑定的事件只执行一次
alert("function1");
});
7. 触发事件(模拟操作)
$("#btn").trigger("click"); //手动触发click事件,不需要用户真正的click
$("#btn").click(); //同上
8. 事件命名空间
$("#myDiv").bind("click.hello", function(){
...
});
$("#myDiv").bind("click", function(){
...
})
$("div").unbind("click"); //两个事件都被移除
$("div").unbind(".hello"); //只移除第一个,hello空间下的事件
$("div").unbind("click!"); //只移除第二个(注意感叹号,指没有名字空间的)
9. JQuery 中的动画
$("div").hide(); //隐藏所有DIV元素,相当于sytle="display:none"
$("div").show(); //显示所有DIV元素
$("div").show(slow); //slow(600毫秒),normal(400),fast(200)
$("div").hide(1000); //一秒内隐藏所有DIV元素
$("div").show(1000); //一秒内显示所有DIV元素
$("div").fadeOut(); //降低元素的不透明度,直至消失(支持速度参数,不会改变宽高)
$("div").fadeIn(); //升高元素的不透明度,直至显示
$("div").slideUp(); //由下至上收缩元素,直至消失(支持速度参数)
$("div").slideDown(); //由上至下展开元素,直至显示
10. 自定义动画 animate
$(elem).animate(params, [speed], [callback]);
params :样式属性及值的映射
speed: 速度参数
callback: 动画完成后执行函数
例:$("#myDiv").animate({left:"500px"}, 2000); //两秒内ID为myDiv的元素移至左边距500px的位置
$("#myDiv").animate({left:"+=500px"}, 2000); //在当前位置累加、累减
$("#myDiv").animate({top:"200px", left:"+=500px"}, 2000); //多重动画,同时执行。想分开执行的话就写成两条语句
11. 停止动画
$("#myDiv").stop([cleanQuene] [,gotuEnd]); //停止动画,参数都是boolean型,cleanQuene表示是否要清空未执行完的动画队列,gotuEnd表示是否直接将正在执行的动画跳转到末状态。
$("#myDiv").is(":animate") //判断元素是否在执行动画
$("#myDiv").toggle(); //显示与隐藏元素
$("#myDiv").slideToggle(); //展开与收缩元素
$("#myDiv").fadeTo(1000, 0.2); //一秒内将元素透明度调整到20%
jQuery(锋利的jQuery笔记)
最新推荐文章于 2022-05-23 13:40:21 发布