jquery学习

∙//------------------------- 第一章认识JQuery -------------------------∙∙·页面加载事件（可以写多个ready()）∙$(document).ready(function(){∙ alert("hello world");∙})∙∙·链式操作：JQuery允许你在一句代码中操做任何与其相关联的元素，包括其子元素、父元素等∙//选择名称为myDiv的元素，为其自身添加css1的样式，然后再选择其所有子元素a，为其移除css2样式∙$("#myDiv").addClass("css1").children("a").removeClass("css2");∙∙·JQuery中获得一个对象的所有子元素内容∙$("#myDiv").html()∙∙·JQuery中的变量与 DOM中的变量∙var $myVar = "";∙var myVar = "";∙∙·DOM对象转换成 JQuery对象∙var obj = documnet.getElementById("myDiv");∙var $obj = $(obj);∙∙·JQuery对象转换成 DOM对象∙var $obj = $("#myDiv");∙var obj = $obj.get(0); //或者var obj = $obj[0];∙∙·释放JQuery对$符号的控制权∙JQuery.noConflict();∙∙∙//---------------------------- 第二章 JQuery选择器 -------------------------------∙∙·JQuery完善的处理机制∙document.getElementById("test").style.color = "red"; //如果test不存在，则页面出现异常∙$("#test").css("color","red"); //哪怕页面没有名称为test的元素，也不会报错。

它是一个JQuery对象∙∙·判断页面是否选择的对象∙if( $(".class").length > 0 ){∙// todo something∙}∙∙·基本选择器∙$("#myDiv") //根据给定的ID选择匹配的元素，返回：单个元素∙$(".myClass") //根据给定的样式名称选择匹配的元素，返回：集合元素∙$("div") //根据给定的元素名称选择匹配的元素，返回：集合元素∙$("#myDiv,div.myClass,span") //根据给定的规则选择匹配的元素，返回：集合元素∙$("*") //选择页面所有元素，返回：集合元素∙∙·层次选择器∙$("div span") //选择所有DIV元素下的所有SPAN元素（所有后代元素），返回：集合元素∙$("div>span") //选择所有DIV元素下的SPAN子元素（仅子元素），返回：集合元素∙$(".myClass+div") //选择样式名称为myClass的下一个DIV元素，返回：集合元素∙$(".myClass+div") //等价于 $(".myClass").next("div");∙$(".myClass~div") //选择样式名称为myClass之后的所有DIV元素，返回：集合元素∙$(".myClass~div") //等价于 $(".myClass").nextAll();∙$(".myClass").siblings("div") //选择样式名称为myClass的元素的所有同辈DIV元素（无论前后），返回集合元素∙∙·过滤选择器（index从0开始）∙$("div:first") //选择所有DIV元素下的第一个DIV元素，返回：单个元素∙$("div:last") //选择所有DIV元素下的最后一个DIV元素，返回：单个元素∙$("div:not(.myClass)") //选择所有样式不包括myClass的DIV元素，返回：集合元素∙$("div:even") //选择所有索引是偶数的DIV元素，返回：集合元素∙$("div:odd") //选择所有索引是奇数的DIV元素，返回：集合元素∙$("div:eq(index)") //选择所有索引等于index的DIV元素，返回：集合元素∙$("div:gt(index)") //选择所有索引大于index的DIV元素，返回：集合元素∙$("div:lt(index)") //选择所有索引小于index的DIV元素，返回：集合元素∙$(":header") //选择所有标题元素（h1,h2,h3），返回：集合元素∙$("div:animated") //选择所有正在执行去画的DIV元素，返回：集合元素∙∙·子元素过滤选择器（index从1开始）∙$(":nth-child(index/even/odd)") //选择每个父元素下的第index/偶数/奇数个子元素，返回：集合元素∙$(":first-child") //选择每个父元素下的第一个子元素，返回：集合元素∙$(":last-child") //选择每个父元素下的最后一个子元素，返回：集合元素∙$("ul li:only-child") //在UL元素中选择只有一个LI元素的子元素，返回：集合元素∙∙·内容过滤选择器∙$(":contains(text)") //选择所有内容包含text的元素，返回：集合元素∙$("div:empty") //选择所有内容为空的DIV元素，返回：集合元素∙$("div:has(span)") //选择所有含有SPAN子元素的DIV元素，返回：集合元素∙$("div:parent") //选择所有含有子元素的DIV元素，返回：集合元素∙∙·可见性选择器∙$(":hidden") //选择所有不可见的元素（type="hidden" style="display:none" style="visibility:none"），返回：集合元素∙$(":visible") //选择所有可见的元素，返回：集合元素∙∙·属性过滤选择器∙$("[id]") //选择所有含有id属性的元素，返回：集合元素∙$("[class=myClass]") //选择所有class属性值是myClass的元素，返回：集合元素∙$("[class!=myClass]") //选择所有class属性值不是myClass的元素，返回：集合元素∙$("[alt^=begin]") //选择所有alt属性值以begin开始的元素，返回：集合元素∙$("[alt^=end]") //选择所有alt属性值以end结束的元素，返回：集合元素∙$("[alt*=some]") //选择所有alt属性值含有some的元素，返回：集合元素∙$("div[id][class=myClass]") //选择所有含有id属性的并且class属性值是myClass的元素，返回：集合元素∙∙·表单对象属性选择器∙$("#myForm:enabled") //选择ID属性为myForm的表单的所有可用元素，返回：集合元素∙$("#myForm:disabled") //选择ID属性为myForm的表单的所有不可用元素，返回：集合元素∙$("#myForm:checked") //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素∙$("#myForm:selected") //选择ID属性为myForm的表单的所有所有被选中的元素，返回：集合元素∙∙·表单选择器∙$(":input") //选择所有<input> <select> <button> <textarea>元素，返回：集合元素∙$(":text") //选择所有单行文本框元素，返回：集合元素∙$(":password") //选择所有密码框元素，返回：集合元素∙$(":radio") //选择所有单选框元素，返回：集合元素∙$(":checkbox") //选择所有复选框元素，返回：集合元素∙$(":submit") //选择所有提交按钮元素，返回：集合元素∙$(":image") //选择所有图片按钮元素，返回：集合元素∙$(":reset") //选择所有重置按钮元素，返回：集合元素∙$(":button") //选择所有按钮元素，返回：集合元素∙$(":file") //选择所有上传域元素，返回：集合元素∙$(":hidden") //选择所有不可见域元素，返回：集合元素∙$(":text") //选择所有单选文本框元素，返回：集合元素∙∙∙//---------------------------- 第三章 JQuery中的DOM操作 -------------------------------∙∙·查找元素节点∙var str = $("#myDiv").text(); //<div id="myDiv" title="hello">123</div>∙alert(str); //结果：123∙∙·查找属性节点∙var str = $("#myDiv").attr("title"); //<div id="myDiv" title="hello">123</div>∙alert(str); //结果：hello∙∙·创建元素节点∙var $li1 = $("<span></span>"); //传入元素标记，自动包装并创建第一个li元素对象∙var $li2 = $("<span></span>"); //第二个,创建时需要遵循XHTML规则（闭合、小写）∙$("#myDiv").append($li1); //往id为myDiv的元素中添加一个元素∙$("#myDiv").append($li2); //结果：<div id="myDiv"><span></span><span></span></div>∙∙$("#myDIv").append($li1).append($li2); //客串：传说中的链式写法，省一行代码 ^_^∙∙·创建文本节点∙var $li1 = $("<span>first</span>");∙var $li2 = $("<span>second</span>");∙$("#myDIv").append($li1).append($li2);∙//结果：<div id="myDiv"><span>first</span><span>second</span></div>∙∙·创建属性节点∙var $li1 = $("<span title="111">first</span>");∙var $li2 = $("<span title="222">second</span>");∙$("#myDIv").append($li1).append($li2);∙//结果：<div id="myDiv"><span title="111">first</span><span title="222">second</span></div>∙∙·插入节点∙$("#myDiv").append("<span></span>"); //往id为myDiv的元素插入span元素∙$("<span></span>").appendTo("#myDiv"); //倒过来，将span元素插入到id为myDiv的元素∙∙$("#myDiv").prepend("<span></span>"); //往id为myDiv的元素内最前面插入span元素∙$("<span></span>").prependTo("#myDiv"); //倒过来，将span元素插入到id为myDiv的元素内的最前面∙∙$("#myDiv").after("<span></span>"); //往id为myDiv的元素后面插入span元素（同级，不是子元素）∙$("<span></span>").insertAfter("#myDiv"); //倒过来，将span元素插入到id为myDiv的元素后面（同级，不是子元素）∙∙$("#myDiv").before("<span></span>"); //往id为myDiv的元素前面插入span元素（同级，不是子元素）∙$("<span></span>").insertBefore("#myDiv"); //倒过来，将span元素插入到id为myDiv的元素前面（同级，不是子元素）∙∙·删除节点∙$("#myDiv").remove(); //将id为myDiv的元素移除∙∙·清空节点∙$("#myDiv").remove("span"); //将id为myDiv的元素内的所有span元素移除∙∙·复制节点∙$("#myDiv span").click( function(){ //点击id为myDiv的元素内的span元素，触发click事件∙ $(this).clone().appendTo("#myDiv"); //将span元素克隆，然后再添加到id为myDiv的元素内∙ $(this).clone(true).appendTo("#myDiv"); //如果clone传入true参数，表示同时复制事件∙})∙∙·替换节点∙$("p").replaceWith("<strong>您好</strong>"); //将所有p元素替换成后者 <p>您好</p> --> <strong>您好</strong>∙$("<strong>您好</strong>").replaceAll("p"); //倒过来写，同上∙∙·包裹节点∙$("strong").wrap("<b></b>"); //用b元素把所有strong元素单独包裹起来 <b><strong>您好</strong></b><b><strong>您好</strong></b>∙$("strong").wrapAll("<b></b>"); //用b元素把所有strong元素全部包裹起来 <b><strong>您好</strong><strong>您好</strong></b>∙$("strong").wrapInner("<b></b>"); //把b元素包裹在strong元素内 <strong><b>您好</b></strong>∙∙·属性操作∙var txt = $("#myDiv").arrt("title"); //获取id为myDiv的元素的title属性∙$("#myDiv").attr("title","我是标题内容"); //设置id为myDiv的元素的title属性的值∙$("#myDiv").attr({"title":"我是标题内容", "alt":"我还是标题"); //一次性设置多个属性的值∙$("#myDiv").removeArrt("alt"); //移除id为myDiv的元素的title属性∙∙·样式操作∙var txt = $("#myDiv").arrt("class"); //获取id为myDiv的元素的样式∙$("#myDiv").attr("class","myClass"); //设置id为myDiv的元素的样式∙$("#myDiv").addClass("other"); //在id为myDiv的元素中追加样式∙$("#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样式∙∙·设置和获取HTML、文本和值∙alert( $("#myDiv").html() ); //获取id为myDiv的元素的HTML代码（相当于innerHTML）∙$("#myDiv").html("<span>hello</span>"); //设置id为myDiv的元素的HTML代码∙∙alert( $("#myDiv").text() ); //获取id为myDiv的元素的HTML代码（相当于innerText）∙$("#myDiv").text("hello"); //设置id为myDiv的元素的HTML代码∙∙alert( $("#myInput").val() ); //获取id为myDiv的元素的value值（支持文本框、下拉框、单选框、复选框等）∙$("#myInput").val("hello"); //设置id为myDiv的元素的value值（下拉框、单选框、复选框带有选中效果）∙∙·遍历节点∙var $cList = $("#myDiv").children(); //获取id为myDiv的元素的子元素（只考虑子元素，不考虑后代元素）∙var $sNext = $("#myDiv").next(); //获取id为myDiv的元素的下一个同辈元素∙var $sPrev = $("#myDiv").prev(); //获取id为myDiv的元素的上一个同辈元素∙var $sSibl = $("#myDiv").siblings(); //获取id为myDiv的元素的所有同辈元素∙var $pClos = $("#myDiv").closest("span"); //获取id为myDiv的元素本身开始，最接近的span元素（向上查找）∙∙·CSS-DOM操作∙$("#myDiv").css("color"); //获取id为myDiv的元素的color样式的值∙$("#myDiv").css("color", "blue"); //设置id为myDiv的元素的color样式的值∙$("#myDiv").css({"color":"blue", "fontSize":"12px"}); //设置id为myDiv的元素的color样式的值（多个）∙∙$("#myDiv").css("opacity", "0.5"); //设置id为myDiv的元素的透明度（兼容浏览器）∙∙$("#myDiv").css("height"); //获取id为myDiv的元素的高度（单位：px，兼容浏览器）∙$("#myDiv").height(); //同上（实际高度）∙∙$("#myDiv").css("width"); //获取id为myDiv的元素的宽度（单位：px，兼容浏览器）∙$("#myDiv").width(); //同上（实际宽度）∙∙var offset = $("#myDiv").offset(); //获取id为myDiv的元素在当前窗口的相对偏移量∙alert( offset.top + "|" + offset.left );∙∙var offset = $("#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中的事件和动画 -------------------------------∙∙·加载DOM∙$(window).load() 等价于 window.onload 事件∙∙$(document).ready() 相当于window.onload事件，但有些区别：∙ (1)执行时机：∙ window.onload 是在网页中所有元素（包括元素的所有关联文件）完全加载后才执行∙ $(document).ready() 是在DOM完全就绪时就可以被调用，此时，并不意味着这些元素关系的文件都已经下载完毕∙∙ (2)多次使用：可以在同一个页面注册多个$(document).ready()事件∙ (3)简写方式：可以缩写成 $(function(){ }) 或 $().ready()∙∙·事件绑定∙当文档装载完成后，可以通过bind()方法，为特定的元素进行事件的绑定，可重复多次使用∙ bind( type, [data, ] fn );∙ type：指事件的类型:∙ blur（失去焦点）、focus（获得焦点）∙ load（加载完成）、unload（销毁完成）∙ resize（调整元素大小）、scroll（滚动元素）∙ click（单击元素事件）、dbclick（双击元素事件）∙ mousedown（按下鼠标）、mouseup（松开鼠标）∙ mousemove（鼠标移过）、mouseover（鼠标移入）、mouseout（鼠标移出）∙ mouseenter（鼠标进入）、mouseleave（鼠标离开）∙ change（值改变）、select（下拉框索引改变）、submit（提交按钮）∙ keydown（键盘按下）、keyup（键盘松开）、keypress（键盘单击）∙ error（异常）∙ data：指事件传递的属性值，event.data 额外传递给对象事件的值∙ fn：指绑定的处理函数，在此函数体内，$(this)指携带相应行为的DOM元素∙∙·合并事件∙hover(enter,leave)：鼠标移入执行enter、移出事件执行leave∙$("#myDiv").hover( function(){∙ $(this).css("border", "1px solid black");0∙}, function(){∙ $(this).css("border", "none");∙});∙∙toggle(fn1,fn2,...fnN)：鼠标每点击一次，执行一个函数，直到最后一个后重复∙$("#myDiv").toggle( function(){∙ $(this).css("border", "1px solid black");0∙}, function(){∙ $(this).css("border", "none");∙});∙∙·事件冒泡∙下面的例子，BODY元素下有DIV元素，DIV元素下有SPAN元素，分别将三种元素都注册click事件。