jQuery学习笔记

jQuery学习笔记1一、jQuery基础1.1jQuery的特点1）jQuery是一种框架，对于浏览器的兼容问题，95％不用再去考虑了。2）jQuery利用选择器（借鉴了CSS选择器的语法）查找要操作的节点（DOM对象），然后将这些节点封装成一个jQuery对象（封装的目的有两个：①是为了兼容不同的浏览器。②也为了简化代码）。通过调用jQuery对象的方法或者属性来实现对底层的DOM对象的操作。3）jQuery特点简单概括就是：选择器+调方法。1.2jQuery编程的步骤step1：引入jQuery框架（下载），min为去掉所有格式的压缩版scriptlanguage=javascriptsrc=js/jquery-1.4.1.min.js/scriptstep2：使用选择器查找要操作的节点（该节点会被封装成一个jQuery对象，并返回）var$obj=$('#di');//ID选择器，查找的节点ID为d1step3：调用jQuery对象的方法或者属性$obj.css('font-size','60px');//调用jQuery的css()方法注意事项：jQuery是一个大的匿名函数，且内部有很多函数（类似Java中的内部类），它的大部分函数返回对象都是jQuery对象（它自己），所以可以继续“．”，例如：functionf1(){var$obj=$('#d1');//为了强调返回的是jQuery对象，命名习惯用$开头来声明变量$obj.css('font-size','60px').css('font-style','italic');}1.3jQuery对象与DOM对象如何相互转换1）dom对象如何转化为jQuery对象使用函数：$(dom对象)即可，例如：functionf2(){varobj=document.getElementById('d1');var$obj=$(obj);//将dom节点封装成jQuery对象$obj.html('hellojava');}2）jQuery对象如何转化为dom对象方式一：$obj.get(0);方式二：$obj.get()[0];functionf3(){var$obj=$('#d1');//方式一：varobj=$obj.get(0);varobj=$obj.get()[0];//方式二obj.innerHTML='helloperl';}1.4如何同时使用prototype和jQuerystep1：先导入prototype.js，再导入jQuery.jsstep2：将jQuery的$函数换一个名字：var$a=jQuery.noConflict();//注意大小写注意事项：函数名就是一个变量，指向函数对象，例如：scriptlanguage=javascriptsrc=js/prototype-1.6.0.3.js/scriptscriptlanguage=javascriptsrc=js/jquery-1.4.3.js/scriptjQuery学习笔记2functionf1(){//无效varobj=$('d1');}//无效是因为jQuery是后引入的，所以prototype被jQuery替换functionf1(){//为了避免冲突，可以将jQuery的$函数换一个名字$avar$a=jQuery.noConflict();varobj=$('d1');obj.innerHTML='helloprototype';$a('#d1').html('hellojQuery');}1.5EL表达式和jQuery函数的区别1）${}：EL表达式，在服务器端运行（JSTL标签库也在服务器端运行，EL和JSTL标签库本质是Java代码）。2）$()：jQuery函数，在浏览器中运行（JavaScript也在浏览器中运行）。jQuery学习笔记3二、选择器2.1什么是选择器jQuery模仿CSS选择器的语法提供了一种用来方便查找要操作的节点的语法规则。2.2基本选择器1）#id：ID选择器，如：$('#d1').css('color','red');//编号1变2）.class：类选择器，如：$('.s1').css('font-size','60px');//编号2和3变3）element：元素选择器，如：$('div').css('font-size','60px');//编号1和2变4）selector1,selector2...selectorn：选择器合并，如：$('#d1,p').css('font-size','60px');//编号1和3变5）*：所有选择器，如：$('*').css('font-size','60px');6）案例：divid=d1hellojquery/div!--1--divclass=s1hellojava/div!--2--pclass=s1helloperl/p!--3--inputtype=buttonvalue=基本选择器的使用onclick=f1();/注意事项：当jQuery选择器查找到了多个DOM节点，则仍然是封装成“一个”jQuery对象，在调用jQuery对象的属性或者方法时，默认情况下，会作用于底层所有的DOM节点之上。如：$('.s1').css('font-size','60px');则编号2和3都变。2.3层次选择器1）select1select2：所有后代（要符合select2的要求）。例如：$('#d1div').css('font-size','60px');//d2d3d4d5变2）select1select2：只考虑子节点（要符合select2的要求），孙子不管～例如：$('#d1div').css('font-size','60px');//d2d3d5变3）select1+select2：下一个兄弟（要符合select2的要求），儿子不管～例如：$('#d3+div').css('font-size','60px');//d5变，d2不管4）select1~select2：下面所有的兄弟（要符合select2的要求），上面的兄弟不管～兄弟中的儿子也不管～例如：$('#d2~div').css('background-color','yellow');//d3d5变5）案例：divid=d1divid=d2hello1/divdivid=d3style=width:200px;height:200px;background-color:red;divid=d4style=width:150px;height:150px;background-color:silver;hello2/div/divdivid=d5hello3/div/divinputtype=buttonvalue=层次选择器的使用onclick=f1();/jQuery学习笔记42.4基本过滤选择器1）:first：第一行。2）:last：最后一行。3）:not(selector)：把满足要求的选择器排除在外。4）:even：偶数行，下标从0开始。5）:odd：奇数行，下标从0开始。6）:eq(index)：等于下标的元素，下标从0开始。7）:gt(index)：大于下标的元素，下标从0开始。8）:lt(index)：小于下标的元素，下标从0开始。注意事项：过滤器前是没有空格的。是xx:first而不是xx:first。9）案例：step1：页面表格tableid=t1border=1width=60%cellpadding=0cellspacing=0theadtrtd姓名/tdtd年龄/td/tr/theadtbodytrtd岳飞/tdtd33/td/trtrid=tr2td赵构/tdtd32/td/trtrtd韩世忠/tdtd31/td/trtrtd梁红玉/tdtd22/td/tr/tbody/tableinputtype=buttonvalue=点这儿onclick=f1();/step2：jQuery代码scriptlanguage=javascriptsrc=../js/jquery-1.4.3.js/script!--相对路径，../表示向上跳一级--scriptlanguage=javascripttype=text/javascriptfunctionf1(){$('#t1tr:first').css('background-color','#cccccc');$('#t1tr:last').css('background-color','#cccccc');$('tbodytr:even').css('background-color','#fff8dc');$('tbodytr:odd').css('background-color','yellow');}functionf2(){$('tbodytr:eq(1)').css('font-style','italic').css('font-size','50px');}functionf3(){$('tbodytr:not(#tr2)').css('font-size','50px');}functionf4(){$('tbodytr:eq(1)td:eq(1)').css('background-color','red');//过滤器前（“：”前）是没有空格的}/script2.5内容过滤选择器1）:contains(text)：匹配包含给定文本的元素。2）:empty：匹配所有不包含子元素或者文本的空元素。3）:has(selector)：匹配含有选择器所匹配的元素的元素。4）:parent：匹配含有子元素或者文本的元素（与empty正好相反）。5）案例：step1：页面div吃饭了吗？/divdiv/divdivp一会要下课了/p/divinputtype=buttonvalue=点这儿onclick=f1();/step2：jQuery代码scriptlanguage=javascriptsrc=../js/jquery-1.4.3.js/scriptscriptlanguage=javascripttype=text/javascriptfunctionf1(){$('div:contains(吃饭)').css('font-size','50px');}jQuery学习笔记5functionf2(){//当参数比较多，采用对象的方式传递$('div:empty').css({'width':'400px','height':'80px','border':'2pxsolidred'});}functionf3(){$('div:has(p)').css('font-size','80px');}functionf4(){$('div:parent').css('border','2pxsolidblue');}/script2.6可见性过滤选择器1）:hidden匹配所有不可见元素，或者type为hidden的元素。2）:visible匹配所有的可见元素。3）案例：step1：页面divhelljQuery/divdivstyle=display:none;hellojava/divinputtype=buttonvalue=点这儿onclick=f1();/step2：jQuery代码scriptlanguage=javascriptsrc=../