JQuery笔记

1.JQuery的优点 { (1)尺寸小、使用简单方便（Write Less, Do More，吃得少干得多。 (2)链式编程（$(“#div1”).draggble().show().hide().fly()）、隐式迭代（自动对于多个元素进行迭代方法调用）） (3)屏蔽浏览器差异跨浏览器兼容性好（IE 6.0+, FF 2+, Safari 3.0+, Opera 9.0+, Chrome）、插件丰富、开源、免费。 } 2.界面加载 { (1)$(document).ready(function() {             alert("加载完毕！");         });//注册事件的函数，和普通的dom不一样，不需要在元素上标记on**这样的事件。 (2)当页面Dom元素加载完毕时执行代码，可以简写为：         $(function() {             alert("加载完毕！");         }); (3)和onload的区别 onload只能注册一次(window.onload=function...) ,后注册的取代先注册的，而ready则可以多次注册都会被执行。 onload是所有Dom元素创建完毕、图片、Css等都加载完毕后才被触发，而ready则是Dom元素创建完毕后就被触发，这样可以提高网页的响应速度 在jQuery中也可以用$(window).load()来实现onload那种事件调用的时机 } 3.jQuery对象（包装集）、Dom对象 { (1)DOM对象的JavaScript方法 Var obj=document.getElementById(“ID”); Var objhtml=obj.innerHTML; (2)jQuery对象是通过jQuery包装DOM对象后产生的对象 $(“#ID”).html(); (3)jQuery对象不能使用DOM对象的方法，DOM对象也不能使用jQuery对象的方法 Array是JS语言本身的对象，不是Dom对象，因此不需要转换为Jquery对象才能用 (4)例如： 在事件中的this，它是DOM对象，应用时需要转换成jQuery对象$(this) (5)dom对象转化成jQuery对象$(div).text("aaaa"); (6)jQuery对象转化成dom对象  var $div = $("#d1");  var div = $div.get(0); //$div[0];             div.innerText = "abbbbb"; }    4.JQuery静态函数 { (1)$.map(array,fn)对数组array中每个元素调用fn函数逐个进行处理，fn函数将处理返回，最后得到一个新数组。 例子，得到一个元素值是原数组值二倍的新数组 var arr = [3, 5, 9]; var arr2 = $.map(arr, function(item) { return item * 2; }); (2)$.each(array,fn)对数组arry每个元素调用fn函数进行处理，没有返回值。 var arr = { "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" }; $.each(arr, function(key, value) { alert(key+"="+value); });

//如果是普通风格的数组，则key的值是序号。 //还可以省略function的参数，这时候用this可以得到遍历的当前元素： var arr = [3, 6, 9]; $.each(arr, function() { alert(this); });//能读懂。

//$.函数名   可以视为静态函数  } 5.JQuery选择器 { JQuery选择器用于查找满足条件的元素，比如可以用$(“#控件Id”)来根据控件id获得控件的jQuery对象，相当于getElementById： (1)id 选择器   $(“#div1”).html(“<font color=red>hello</font>”)。 (2)标签选择器 $("TagName")来获取所有指定标签名的jQuery对象，相        当于getElementsByTagName：         $(function() {             $("#btnClick").click(function() {                 $("p").html("我们都是P");             });         }); (3)类选择器 $(".cls").text("");

(4)复合选择器：$("p,div,span.menuitem")，同时选择p标签、div标签和拥有menuitem样式的span标签元素（类似于CSS选择器）

(5)层次选择器： （1）$("div li")获取div下的所有li元素（后代，子、子的子……） （2）$("div > li")获取div下的直接li子元素 （3）$(".menuitem + div")获取样式名为menuitem之后的第一个div元素（不常用） （4）$(".menuitem ~ div")获取样式名为menuitem之后所有的div元素（不常用） (6)简单选择器 :first 选取第一个元素。$("div:first")选取第一个<div>$(".warn:first"); :last 选取最后一个元素。$("div:last")选取最后一个<div> :not(选择器) 选取不满足“选择器”条件的元素，$("input:not(.myClass)")选取样式名不是myClass的<input> :even、:odd，选取索引是奇数、偶数的元素：$("input:even")选取索引是奇数的<input> :eq(索引序号)、:gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素，比如$("input:lt(5)")选取索引小于5的<input> $(":header")选取所有的h1……h6元素（*） $("div:animated")选取正在执行动画的<div>元素。 （*） (7)样式选择器 attr("class")获取样式 attr("class","myclass")设置样式 addClass("myclass") 追加样式(不影响其他样式) removeClass("myclass")移除样式 toggleClass("myclass")切换样式（如果存在样式则去掉样式，如果没有样式则添加样式） hasClass("myclass")判断是否存在样式 //$(this).addClass("cls").siblings().removeClass("cls"); (8)属性过滤选择器 $("div[id]")选取有id属性的<div> $("div[title=test]")选取title属性为“test”的<div>，JQuery中没有对getElementsByName进行封装，用$("input[name=abc]") $("div[title!=test]")选取title属性不为“test”的<div> $(“div[id*=div]”)选取给定的属性是以包含某些值的元素 还可以选择开头、结束、包含等，条件还可以复合。（*） // $("div[class][class!=cls]").css("background-color", "red") (9)表单对象选择器 $("#form1:enabled")选取id为form1的表单内所有启用的元素 $("#form1:disabled")选取id为form1的表单内所有禁用的元素 $("input:checked")选取所有选中的元素（Radio、CheckBox） $("select option:selected")选取所有选中的选项元素（下拉列表） $("input[name=hobby]")选中所有name为hobby的input标签 (10)表单选择器 $(":input")选取所有<input>、<textarea>、<select>和<button>元素。和$("input")不一样， $("input")只获得<input> $(":text")选取所有单行文本框，等价于$("input[type=text]") $(":password")选取所有密码框。同理还有:radio、:checkbox、:submit、:image、:reset、:button、:file、:hidden。 } 6.JQuery的函数 { (1)jQuery修改样式：$("#div1").css("background", "red"); 获得样式$(“#div1”).css(“background”)； (2)修改value：$(“#un”).val(“abc”)， 获得value：$(“#un”).val() (3)使用html()方法读取或者设置元素的innerHTML： alert($("#btn1").html()); $("#btn1").html("hello"); (4)使用text()方法读取或者设置元素的innerText： alert($("#btn1").text()); $("#btn1").text("hello"); (5)使用attr()方法读取或者设置元素的属性，对于JQuery没有封装的属性（所有浏览器没有差异的属性）用attr进行操作。         alert($(“#btn1").attr("href"));         $("#btn1").attr("href", "http://www.rupeng.com");        (6)使用removeAttr删除属性。  $("#link").removeAttr("href"); } 7.如何判断对象是否存在 { jQuery选择器返回的是一个对象数组(数组中的每个对象还是Dom对象)，调用text()、html()、click()之类方法的时候其实是对数组中每个元素迭代调用每个方法，因此即使通过id选择的元素不存在也不会报错，如果需要判断指定的id是否存在，应该写： if ($("#btn1").length <= 0) {                 alert("id为btn1的元素不存在！");             } } 8.节点遍历 {   (1)next()方法用于获取节点之后的挨着的第一个同辈元素，$(".menuitem").next("div") (2)nextAll()方法用于获取节点之后的所有同辈元素，$(".menuitem").nextAll("div") (3)prev()方法用于获取节点之前的挨着的第一个同辈元素 (4)prevAll方法用于获取节点之前的所有同辈元素 (5)siblings()方法用于获取所有同辈元素，$(".menuitem").siblings("li") (6)end()将匹配的元素列表变为前一次的状态。 返回最近一次包装集被破坏之前的状态 $("#d3").nextAll().css("background-color", "red").end().css("background-color", "red") //这里.nextAll()破坏了包装集，然后end()进行了还原 (7)andSelf()加入先前所选的加入当前元素中 $("#d3").nextAll().andSelf().css("background-color", "red") } 9.动态创建Dom节点 { (1)使用$(html字符串)来创建Dom节点，并且返回一个jQuery对象：  //var link = $("<a href='http://www.baidu.com'>百度</a>"); (2)然后调用append等方法将新创建的节点添加到其他节点（元素）中       //$("div:first").append(link); (3)appendto:直接将这一个JQuery对象完全给添加到别的节点上 (4)prepend，在元素的开始添加元素。 prependTo。after，在元素之后添加元素（添加兄弟）。 before：在元素之前添加元素（添加兄弟） (5) remove()删除选择的节点 $(“ul li.testitem”).remove(); 删除ul下li中有testitem样式的元素。自杀。把找到的都删掉。                 var lis = $("#ulSite li").remove(); empty()是将节点清空，清除节点的innerHTML，节点还在

} 10.RadioButton操作 { (1)取得RadioButton的选中值 $("input[name=gender]:checked").val() <input id="Radio2" checked="checked" name="gender" type="radio" value="男" />男<input id="Radio1" checked="checked" name="gender" type="radio" value="女" />女<input id="Radio3" checked="checked" name="gender" type="radio" value="未知" />未知</p> (2)设置RadioButton的选中值：通过设置radio的值来选中单选或者复选框。  $("#btn1").click(function () {      $(":radio[name=sex]").val(["nan"]) })

 $("#btn2").click(function () {      $(":checkbox").val(["cf","sj"]); }) } 11.事件 { (1)JQuery中的事件绑定：$(“#btn”).bind(“click”,function(){})，每次都这么调用太麻烦，所以jQuery可以用$(“#btn”).click(function(){})来进行简化。 (2)unbind 取消事件的绑定。                 //取消mouseover事件                 $(":button[value=test]").unbind("mouseover");                 //取消所有事件                 $(":button[value=test]").unbind(); (3)一次性事件：如果绑定的事件只想执行一次随后立即unbind可以使用one()方法进行事件绑定                 $(":button[value=test]").one("click", function () {                     alert("我只执行一次哦亲");                 }); (4)合成事件hover，hover(enterfn,leavefn)当鼠标放在元素上时调用enterfn方法，当鼠标离开元素的时候调用leavefn方法。 (5)toggle() (6)事件冒泡：JQuery中也像JavaScript一样是事件冒泡 如果想获得事件相关的信息，只要给响应的匿名函数增加一个参数：e，e就是事件对象。调用事件对象的stopPropagation()方法终止冒泡。 e. stopPropagation(); $("tr").click(function(e) { alert("tr被点击"); e.stopPropagation(); });//注意函数的参数是e (7)阻止默认行为 有的元素有默认行为，比如超链接点击后会转向新链接、提交按钮默认会提交表单，如果想阻止默认行为只要调用事件对象的preventDefault()方法和Dom中的window.event.returnValue=false效果一样。  $("a").click(function(e) { alert("所有超链接暂时全部禁止点击"); e.preventDefault(); }); (8)属性：pageX、pageY、target获得触发事件的元素(冒泡的起始，和this不一样)、which如果是鼠标事件获得按键（1左键，2中键，3右键）。altKey、shiftKey、ctrlKey获得alt、shift、ctrl是否按下，为bool值。keyCode属性发生事件时键盘码(小键盘的1和主键盘的keyCode不一样) (9)鼠标 { 获得发生事件时鼠标的位置 $(document).mousemove(function(e) {             document.title = e.pageX + "," + e.pageY;         }); 在mousemove、click等事件的匿名响应函数中如果指定一个参数e，那么就可以从e读取发生事件时的一些信息，比如对mousemove等鼠标事件来说，就可以读取e.pageX、e.pageY来获得发生事件时鼠标在页面的坐标。 } (10)获取当前的索引 var index = $(this).index(); } 12.动画 { (1)show()、hide()方法会显示、隐藏元素。用toggle()方法在显示、隐藏之间切换     $(":button[value=show]").click(function() { $("div").show(); });     $(":button[value=hide]").click(function() { $("div").hide(); }); (2)如果show、hide方法不带参数则是立即显示、立即隐藏，如果指定速度参数则会用指定时间进行动态显示、隐藏，单位为毫秒，也可以使用三个内置的速度：fast（200毫秒）、normal（400毫秒）、slow（600毫秒）,也可以直接设置值show(1000) (3)slideDown、slideUp 分别是滑动出去，进来的效果 (4)fadeOut、fadeIn 分别是淡入淡出的效果 (5)animate：anmite内部设置的多个值是同步变化的，链式的animate是依次动画的。 例子：animate({ left: 0, top: 0, width: 300, height: 300 })、.animate({ opacity: 0 }).animate({ opacity: 1 })。 还可以指定增量，$(“#div1”).animate({ height: “+=100” }); //如果是+=、-=等增量形式要写成字符串，因为JavaScript不认识这种语法 //例子：     向左 向右             $("#btn1").click(function () {                 $("#d1").animate({ "left": "-=20" }, 1000)             })

            $("#btn2").click(function () {                 $("#d1").animate({ "left": "+=20" }, 1000);             })    //同时改变位置和大小             $("#d1").animate({"width":"500px","height":"200px","top":"100px","left":"200px"}, 1000);    //先改变位置 再改变大小  再改变透明度             $("#d1").animate({ "top": "100px", "left": "200px" }, 1000).animate({ "width": "500px", "height": "200px" }, 1000).animate({"opacity":0},1000);             //当动画执行完成之后要执行的代码             $("#d1").animate({ "top": "100px", "left": "200px" }, 1000).animate({ "width": "500px", "height": "200px" }, 1000, function () {                                        $(this).css("background-color", "blue");             }); } 14.cookie { (1)使用方法，Cookie保存的是键值对    添加对jquery.cookie.js    设置值，$.cookie('名字', '值')。cookie中保存的值都是文本。    读取值，var v=$.cookie('名字') alert($.cookie("用户名")); $.cookie("用户名","tom");在同域名的另外一个页面中也能读取到。 (2)设定cookie $.cookie("test", "admin", {expires:7}); (3)读取cookie alert( $.cookie("test")); }