一.jquery对象 与 dom对象 的相互转换: 1.将dom对象转换为jquery对象: var div = document.getElementById("div1"); var $div = $(div); 2.将jquery 对象转换为dom对象: var Jobj = $("#div1"); var div1 = Jobj[0]; //Job.get(0); alert(div1.innerHTML); 3.解释jquer对象的结构: var Jobj = $("div");//获得了所有的div,并将它们添加到jquery对象的dom数组中 alert(Jobj.get(1).innerHTML);//将jquery 对象里的第二个dom对象读取出来,因为获得dom对象,所有可以用dom的属性 总结:jquery对象就相当于一个盒子(数组)把dom对象存放进去; 二.基本选择器 : 1.$("#id") : id选择器,document.getElementById("id"); 2.$("div") :元素选择器 document.getElementByTagName("div"); 3.$(".myClass") : 类选择器,返回所有class="myClass"的元素 4.$("*") : 返回所有元素,多用于结合上下文搜索 5.$("div,span,p.myClass") : 多条件选择器,返回所有查到的元素 三.层次选择器(如后代元素,子元素,相邻元素,兄弟元素等): 1.后代选择器(ancestor descendant):在给定的祖先元素下匹配所有后代元素: var Jobj = $("#fatherDiv div"); //拿到id为fatherDiv 下的子div,(先id选择器,再元素选择器) 2.子代选择器(parent > child):在给定的父元素下匹配所有 子 元素: var Jobj = $("#fatherDiv > div"); 3.prev + next :匹配所有紧接在prev后的next元素 var Jobj = $("#fatherDiv + div");//只能匹配到fatherDiv 紧挨着的 一个div元素 var Jobj = $("#fatherDiv + *");//不限制类型,能匹配到所得id为fatherDiv 的紧挨着的元素 4.prev ~ siblins:匹配 prev之后的所有siblings元素 (匹配的是 同辈的元素): var Jobj = $("#fatherDiv ~ div") ;(注意~的全角半角问题) 四.$就是函数,它就是jQuery函数( $()就是jQuery() ): $("div")跟jQuery("div")是一个东西,$只是别名; $(function() { }); 就是 $(document).ready(function() {});的简写; ready是当dom树加载完毕执行,window.onload 是当dom树 跟外部文件都加载完 才执行; 五.事件绑定 为id为btnChangeDiv 的按钮 绑定onclick事件: $("#btnChangeDiv").click(function() { $("div").html("我们都是div"); }); click():为按钮注册点击事件; leave():鼠标离开事件; focus(): 控件获得焦点事件; blur():控件失去焦点事件; 就是把原来的事件的on去掉,我们也可以模拟来调用点击事件: $("#btnChangeDiv").click();//模拟点击了,它就会直接执行上面所绑定的方法; 六.JQuery提供的函数 1.1 $.map(array,fn):用来将一个数组,转成另一个数组。 解释:对数组array中每个元素调用fn函数逐个进行处理,fn函数将处理返回,最后得到一个新数组; map帮我们循环一个数组,并且帮我们遍历数组的每一个元素的同时还执行一个匿名方法, 将被遍历的那个元素传进来,方法将执行后的结果,再返回到一个新 的数组里面; map内部实现: function myMap(arr, fun) { var newArr = new Array(arr.length); for (var i = 0; i < arr.length; i++) { newArr[i] = fun(arr[i]); } return newArr; } var arr = [3, 5, 9]; var newArr = myMap(arr, function(item) { return item * 2 }); alert(newArr); 1.2 回调函数:用户定义,系统调用;myMap方法就相当于是系统函数,第二个参数是由方法调用者来写的;(委托) 1.3 js里方法(function)就相当于是类型的对象: var chang = function(item) { return item * 2 };//这个匿名方法相当于一个类型的对象,=右边相当是实例化一个对象,把对象赋给chang , 把chang传过去; myMap(arr,chang); 2.1 $.each(array,fn):对数组arry每个元素调用fn函数进行处理,没有返回值。 var arr = [3, 5, 9]; $.each(arr, function(item) { alert("each中:"+item) ; return item * 2 });//item 为 数组的下标; 我们猜 each 内部原理: function myEach(arr, fun) { for (var i = 0; i < arr.length; i++) { fun(i, arr[i]); } } 但是当我们使用json格式的对象时,它就会出错,而each不会,所以我们猜它应该是使用for in来实现的: function myEach(arr, fun) { for (var item in arr) { fun(item, arr[item]); } } 再后来,我们传this的时候,还是跟each不一样 function myEach(arr, fun) { for (var item in arr) { fun.call(arr[item],item, arr[item]);//call改变函数的作用域,也就是改变这个函数的this对象,改变成第一个参数 } } 2.2 call的用法:调用一个对象的一个方法,以另一个对象替换当前对象。 obj1.method1.call(obj2,argument1,argument2) 如上,call的作用就是把obj1的方法放到obj2上使用,后面的argument1..这些做为参数传入. 举一个具体的例子 : function Sub(a, b) { alert(a - b); } function Add(a, b) { alert(a + b); } Add.call(Sub, 3, 1); 这个例子中的意思就是用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4); // 注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。 第二个例子: function Class1() { this.name = "calss1"; this.showName = function() { alert(this.name); } } function Class2() { this.name = "class2"; } var c1 = new Class1(); var c2 = new Class2(); c1.showName.call(c2); //结果为 class2 //注意,call 的意思是把 c1 的方法放到c2上执行,原来c2是没有showNam() 方法, //现在是把c1 的showNam()方法放到 c2 上来执行,所以this.name 应该是 class2, //执行的结果就是 :alert("class2"); 第三个例子: //用 call 来实现继承 function Class1() { this.showTxt = function(txt) { alert(txt); } } function Class2() { Class1.call(this); } var c2 = new Class2(); c2.showTxt("cc"); //这样 Class2 就继承Class1了,Class1.call(this) 的 意思就是使用 Class1 对象代替this对象, //那么 Class2 中不就有Class1 的所有属性和方法了吗, //c2 对象就能够直接调用Class1 的方法以及属性了, //执行结果就是:alert(“cc”); 第三个例子: 实现多重继承 function Class10() { this.showSub = function(a, b) { alert(a - b); } } function Class11() { this.showAdd = function(a, b) { alert(a + b); } } function Class2() { Class10.call(this); Class11.call(this); } 很简单,使用两个 call 就实现多重继承了 当然,js的继承还有其他方法,例如使用原型链,这个不属于本文的范畴,只是在此说明call 的用法 说了call ,当然还有 apply,这两个方法基本上是一个意思 区别在于 call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组 //function匿名函数,是浏览器在堆里开辟一块空间,它相当于函数对象,是引用类型 总结:$.map适用于数组,$.each适用于对象(dic<key,value>键值对); 七.jQuery修改样式 ( $().css ): var Jdiv = $("#div1");//获得一个jquery对象 1.为css传一个值,是获得指定的 样式值 var col = Jdiv.css("color"); alert(col); //#000000,默认是黑色的 2.设置样式值 Jdiv.css("color", "blue"); 2.1 var Jdiv = $("div");// 适用元素选择器,获得多个div Jdiv.css("color", "#ff6600"); 为什么所有的div样式都会变呢? 因为 在使用 $("div")时,把 所有div对象 都存入jquery对象里, 在设置样式时,循环jquery对象数组里的每个dom对象为它们设置样式; 3.一次设置多个样式的值 var Jdiv = $("div"); 3.1 可以传入json格式的数组; Jdiv.css({ "color": "#ff6600", "fontSize": "77px" }); 3.2 也可以用链式编程的方式: Jdiv.css("color", "blue").css("fontSize", "77px"); 为什么可以呢? 答:因为css方法会返回一个jquery对象,所以可以继续. var jDiv2 = Jdiv.css("color", "blue").css("fontSize", "77px"); jDiv2.slideUp("slow");//就像这样,我们还可以给继续.下去 八设置元素的value属性值 $("#txtName").val();//获得id为txtName的文本框的值; $("#txtName").val("还可以设置值哈");//给 文本框设置值; 九 JQuery的Dom操作 innerHTML->html() innerText->text()//innerText不兼容火狐,但text()兼容; innerHTML 与 innerText :它们的区别是 一个解析html代码,一个不解析html; $("#div1").text("<div> 小丫,是男的? </div>"); //<div> 小丫,是男的? </div> $("#div1").html("<div> 小丫,是男的? </div>"); //小丫,是男的? attr : 1.1 设置属性 var Jdiv = $("div"); Jdiv.attr("xiJP", "22222222"); Jdiv.attr("title", "ddddddd");//给div设置属性 attr也可以通过json的方式设置多个属性 1.2 取属性值 Jdiv.attr("title");//拿div的属性值; 问题来了,拿div的属性值的时候,我们拿的是哪个div的属性值呢? Jdiv.eq(1).attr("title", "ddddddd"); Jdiv.eq(0).attr("title", "sssssss"); alert(Jdiv.attr("title"));//结果为sssssss 结论:通过结果我们知道,attr("")取属性值的时候,拿的是jquery对象 数组里的第一个dom对象的属性值 上面的eq是什么意思? 我们可以看出来,它的作用是通过下标来取jquery数组里的dom对象,那么返回的应该是dom对象才对啊~ 为什么还可以.attr("","")来取设置属性呢? 答:eq()相当拿索引,它拿的是dom对象,然后再包装成jquery对象,所以它返回的还是jquery对象 1.3 移除属性 Jdiv.removeAttr("name"); 十. JQuery的隐式迭代 $("#buCunZaiDeId").html("给不存在的对象设置值,就是不报错"); 给一个不存在的对象设置属性值,为什么不会报错? 答:因为 这个东东 $("#buCunZaiDeId") ,它去拿这个buCunZaiDeId的ID时还是会生成jquery对象, 只是这个jquery对象 数组里面有没有元素的问题,找到了就有元素进来,找不到就没有元素进来, 现在调用jquery对象的html方法,这个html也是去循环数组 ,当发现这个数组的长度是0的时候,就不会执行html方法了;所以不会报错; 所以一般情况我们要判断一下,应该这样写: var IsExist = $("#buCunZaiDeId"); if(IsExist.length > 0){ IsExist.html("给不存在的对象设置值,就是不报错"); } 十一.节点遍历 1.1 next():方法用于获取节点之后的挨着的第一个兄弟元素(拿一个): var Jdiv = $("#div1"); var JnextNode = Jdiv.next("div");// 必须是div1后紧挨的元素,还必须是div,如果紧挨着的没有div就返回undefined alert(JnextNode.attr("id"));//div2 1.2 nextAll():方法用于获取节点之后的所有兄弟元素 (所有的兄弟元素) var JnextNode = $("#div1").nextAll("input"); $.map(JnextNode, function(item) { alert(item.id);//拿的是div1后的 input (平级的); }) var JnextAllNode = $("#div1").nextAll(); $.map(JnextNode, function(item) { alert(item.id);//拿的是div1后的元素(平级的); }) 2.1 prev(): 兄弟中之前的一个元素 2.2 prevAll():兄弟中之前的所有元素 3 siblings():方法用于获取所有同辈元素(前后都拿到) 实例1 :选中的p标签变色: var Jclick = $("p").click(function() { //被点击调用时,this就是被点击的dom元素,通过使用$() 将其包装成一个jquery对象 $(this).css("color", "#ff6600").siblings("p").css("color", "blue"); }); 实例2 :评分控件 <head> <title>评分控件</title> <script src="JS/jquery-1.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#tbList").css({ "width": "300px", "height": "50px", "border": "1px solid #000000" }); //给table设置样式 $("#tbList td").css({ "border": "1px solid #000000" }); //给td设置样式 $.each($("#tbList td"), function(index, item) { $(item).html(index + 1); //给td标签里的添加内容(1,2,3....) }); //方法一: $("#tbList td").click(function() { $(this).css("backgroundColor", "red").prevAll("td").css("backgroundColor", "red"); //单击的td及它前面的所有样式都设置成红色 $(this).nextAll("td").css("backgroundColor", "white"); //它之后的所有td 样式都变成白色 }); //方法二: var isClick = false; //是否点击 $("#tbList td").hover( function() { $(this).css("backgroundColor", "red").prevAll("td").css("backgroundColor", "red"); //鼠标移上 的及它前面的所有样式都设置成红色 $(this).nextAll("td").css("backgroundColor", "white"); //鼠标移上 之后的所有td 样式都变成白色 }, function() { if (!isClick) { $("#tbList td").css("backgroundColor", "white"); //鼠标移走后都设为 白色 } } ); $("#tbList td").click(function() { isClick = true; }); }); </script> </head> <body> <table id ="tbList"> <tr> <td></td> <td></td> <td></td> <td></td> <td></td> </tr> </table> </body>
十二:
:gt 选择器选取 index 值高于指定数的元素。
index 值从 0 开始。
选择前 3 个之后的所有 <tr> 元素:$("tr:gt(2)")
一般去除表头的 要后面的tr :$("tr:gt(0)")
.children(selector):
找到类名为 "selected" 的所有 div 的子元素,并将其设置为蓝色:
$("div").children(".selected")
.css("color", "blue");
.find(selector): 方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。
搜索所有段落中的后代 span 元素,并将其颜色设置为红色:
$("p").find("span")
.css('color','red');
.find() 和 .children() 方法类似,不过后者只沿着 DOM 树向下遍历单一层级。