jquery学习笔记-韩顺平

1、1,Jquery是一个javascript框架或者叫做javascript库；2，用Ajax我们可以给服务器发送一个请求，服务器可以给我回送一个请求；3，出现javascript框架的根本原因就是为了提高开发者的开发效率；4，jquery是一个轻量级的js库（压缩后只有21K），这是其他的js库所不及的，它兼容CSS3，还兼容各种浏览器；5，JQuery是一个快速的，简洁的javascript库，使用户能更方便的处理HTML document,events,实现动画效果，并且方便的为网站提供AJAX交互；6，JQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还

2、有许多成熟的插件可供选择。7，jquery能够使用户的html页保持代码和html内容的分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可；8，所谓的库就是提供一些现成的方法供你去调用；9，当前流行的javascript库有：Jquery ，MooTools，Prototype，Dojo，YUI,EXTJS,DWR主要是运行在服务器上的;10，$(document) /-这个表示一个jquery对象；11，如果使用jquery，则需要引入jquery库<script type="text/javascript" src="jque

3、ry-1.3.1.js"></script>12,jquery对象就是对dom对象的一系列包装，它包装完成后，就可以使用jquery对象提供的方法来进行操作；13，在使用jquery开发中，有两种对象，1，jquery对象，2，dom对象，如果是jquery对象则只能使用jquery库提供的方法，如果是dom对象，则只能使用js本身提供的方法；14，分析jquery库文件的运行原理：<script type="text/javascript">function Dog()/给Dog类添加一些属性和方法：我们用原型法Dtot

4、ype = ready:function()window.alert('ok');,jquery:'1.3.1' /这里jquery是Dog类的一个属性var dog1 = new Dog();dog1.ready(); /在界面上打出okwindow.alert(dog1.jquery); /在界面上打印出1.3.1</script>15,因为jquery兼容各大浏览器，所以这就是为什么它这么流行；16，jquery对象就是通过jQuery包装DOM对象后产生的对象。jquery对象时jQuery独有的，如果一个对象是jquery对象，那么它就可以

5、使用jquery里的方法：$("#test").html();比如：$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jquery里的方法；这段代码等同于用DOM实现代码：document.getElementById("id").innerHTML;虽然jquery对象时包装DOM对象后产生的，但是Jquery无法使用DOM对象的任何方法，同理DOM对象也不能使用Jquery里的方法，乱使用会报错；约定：如果获取的是jquery对象，那么要在变量前面加上￥，var $varia

6、ble = jquery对象var variable = DOM对象17,如果是jquery对象，规定一个jquery对象名是以$开头第二讲：jquery id选择器 层次选择器1，dom对象和jquery对象之间的转换：（一）dom->jqueryvar $obj3 = $(obj1);window.alert($obj3.val();（二）jquery->dom 有两种方法(1),var obj4 = $obj20; /obj4就是dom对象alert("obj4 value="+obj4.value);(2),var obj5 = $obj2.get(0)

7、;alert("obj5 val = "+obj5.value);2,jquery对象就是对dom对象进行包装，这样就可以使用jquery的方法；3，jquery对象和dom对象可以互相转换；4，事件；5，document.getElementById("one").style.background = '#0000FF' jquery的id选择器去和按钮绑定一个事件$('#b1') 表示选中b1这个控件$('#b1').click 给b1这个按钮绑定click事件，例子：$('#b1').

8、click(function()$('#one').css("background","#0000FF"););6，改变所有的<span>元素和id为two的元素的背景色为#3399FF$('#b5').click(function()$('span,#two').css("background","#3399FF");/这里面可以写好多条件,例如:$('span,#two,mini,*').css("background&quo

9、t;,"#3399FF");)7,经典实例：<script type="text/javascript">$('p').click(/this表示当前被点击的对象，但是这里this表示dom对象window.alert(this.innerHTML);/$(this)表示当前被点击的元素，但是此时我们当做jquery对象window.alert($(this).html();/以上两句的功能是等价的);</script>8,如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素，兄弟元素等

10、，则需要使用层次选择器；用法：parent > child用法：$("form > input"):返回值：结合元素说明：在给定的父元素下匹配所有子元素，注意：要区分好后代元素和子元素；9,改变id为one的相邻的下一个<div>的背景颜色为#0000FF$('#b3').click(function()$('#one + div').css("background","#0000FF");)10,改变id为two的元素后面的所有兄弟<div>的元素的背景色为#000

11、0FF第三讲：jquery过滤选择器及练习题讲解1,层次选择器：（1），prev + next 表示选择 prev 的下一个元素（强调：同一级）（2），prev siblings 表示选择Prev的后面的所有元素(强调：同一级)例子：$('#b3').click(function()$('#one * div').css("background","#0000FF");)$('#b4').click(function()$('#two div').css("background&q

12、uot;,"#0000FF");)2,过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，该选择器都已":"开头;按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器；3，例如：$('#b1').click(function()$('div:first').css("background","#0000FF");/表示先找到第一个div标签，然后选择第一个div标签);4,/改变class不为one的所有div元素

13、的背景色为#0000FF;$('#b3').click(function()/先选择所有div，然后再过滤$("div:not(.one)").css("background","#0000FF");/one表示一个类名;表示去除类名为one的);5, $("div:even");/表示先找出所有的div然后把偶数过滤出来，":"就表示过滤的意思；6，经典案例：<script type = "text/javascript">$("tab

14、le:eq(0) tr:even").css("background","red");/表示先选中第一个表格，有一个空格 然后选择tr中索引为偶数的偶数列；第0列也为偶数列；</script>7,第四讲：1，内容过滤，根据内容选择器；<script type = "text/javascript">$('#b1').click(function()$("div:contains('di')").css("background",&

15、quot;#0000FF")</script>2, .用到的时候再查3，只要是jquery操作的选择的它都默认返回的都是一个集合；4，可见度过滤选择器：可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素：1，：hidden 用法：$("tr:hidden") 返回集合元素，说明，匹配所有的不可见元素，Input元素的type属性为"hidden"的话也会被匹配到，意思是css中display:none和input type="hidden"的都会被匹配到，同样，要在脑海中彻底分清楚冒号":&q

16、uot;,点号"."和逗号","的区别；2, :visible 用法：$("tr:visible") 返回值 集合元素 说明：匹配所有的可见元素；5,该选择器是根据元素的可见性来选择对象，只要是通过jquery选择器选出来的对象都是jquery对象；6，/改变所有可见的div元素的背景色为#0000FF$('#b1').click(function()$('div:visiable').css("background","#0000FF");)7,<scri

17、pt type = "text/javascript">$.each(1,"sp",4,function(i,n)alert(i+" "+n); /其中i表示索引值，n表示当前索引对应的值)</script>8, var arr2 = "name":"小明","name":"大明","name":"老明" /arr2为对象集合$.each(arr2,function(i,n)alert(i+ &qu

18、ot;" +); /name为取得对象的属性；)/jquery的方法：$.each($objs,function(i,obj)/这里i为索引变量，obj为取出的dom对象；obj = $objsiwindow.alert("jquery对象"+$(obj).val(); /就可以取出对象的值了 );$.each($objs,function()/ 每循环一次，就相当于从数组中取出一个对象；必须把this要包一下；相当于 this = $objsi;此时this就是一个dom对象，所以必须要把this要包一下;window.alert("jqu

19、ery2"+$(this).val();window.alert("dom"+this.value); /和上一句等价)第五讲：课程回顾1，使用jquery中有两种对象；一种dom对象【传统的】，一种jquery对象；2，“T”型人才；3，在jquery开发中，我们把一个对象当做一个集合来处理的；4，jquery为什么这么流行呢 这是因为它提供了九大选择器；5，基本选择器是用的最多的，最基本的往往都是最重要的；6，$("body div"); /表示把body下的所有的div都选中； $("body > div");

20、/表示把body下的第一级选中【儿子辈】，不包括孙子辈哦； prev + next 表示选择prev的下一个元素（强调：同一级后面的兄弟，只选择一个）； prev + siblings 表示选择 prev的后面的所有元素(强调：同一级后面的所有兄弟元素都会被选中);7，选中文本中不含有di的div：$("div:not(:contains('di')")8, $(:hidden) =>会把styledisplay:none和<input type = "hidden"/>里的都选中; $(:visible)=>会选

21、中所有可见的元素；停：2014-09-11 17:30第六讲:属性过滤选择器1,选出含有属性title的div元素：$("#b1").click(function()$("divtitle").css("background","green"););2,属性title值等于test的div元素$("#b2").click(function()$("divtitle="test"").css("background","gree

22、n"););3,找到属性title值以te开始的div元素$("#b3").click(function()$("divtitle ='te'").css("background","red"););4,找到属性title的值，以est结束的div元素$("#b5").click(function()$("divtitle$='est'").css("background","red"););5

23、,属性title值，含有es的div元素$("#b6").click(function()$("divtitle * = 'es'").css("background","red"););6,选取有属性id的div元素，然后再结果中选取属性title值含有"es"的div元素$("#b7").click(function()$("dividtitle * = 'es'").css("background"

24、,"red");); /属性使用""来进行过滤的7,我们的过滤方式有两种：比如选出文本中含有 abc的 div $("div:contains'abc'")凡是跟属性过滤有关的属性和属性值的过滤我们就用"",其他就用":"第七讲：子元素选择器表单对象属性选择器1，/每个class为one的div父元素下的第2个子元素$('#b1').click($("div .one:nth-child(2)").css("background&qu

25、ot;,"red");)2,/每个class为one的div父元素下的第一个子元素$('#b2').click(function()$("div .one:first-child").css("background","red");等价于：$("div .one:nth-child(1)").css(.););3,/如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素【就相当于独生子女】$('#b4').click(function()$

26、("div .one:only-child").css("background","red"););4,利用jquery对象的val()方法改变表单内type = text 可用<input>元素的值$('#b1').click(function()$("inputtype = 'text':enabled").val("hello"););5,jquery对象在它使用的过程中都是当做一个集合来对待的，所以所有的jquery对象都有length属性；6

27、，利用jquery对象的length属性获取多选框中选中的个数$("#b3").click(function()/ alert($(":checkbox:checked").length);alert($("inputtype='checkbox':checked").length););7,总结一下过滤器使用的方式：$("div.contains('di')"); /按内容进行过滤；$("divtype"); /按属性进行过滤；$("div .one&

28、quot;); /选中div中含class为one的div元素；$("div,.one"); /选中div和class为one的div元素；8,利用jquery对象的text()方法获取下拉框选中的内容$("#b4").click(function()alert($("select option:selected").text(); /如果用.val()，则只选中一个，val（）针对一个而言；/它会把你选中的内容弹出来)第八讲：jquery对象集合遍历的四种形式及练习题讲解1，总结jquery对象集合遍历的四种形式：var $objs

29、 = $("select option:selected");$.each($objs,function()alert("$(this).val()");)$.each($objs,function(i,n)/alert(n.value) /n为dom对象alert($(n).val();)$objs.each(function()window.alert($(this).val(););$objs.each(function(i,n)window.alert("ok"+$(n).val(););2,选择器选择原则：1），选择什么样的

30、选择器要根据需求来定；2），如果针对文档内容，则使用内容选择器；3），如果是选择父子（祖先，后代）元素则使用层次选择器；4），如果是根据id/class/tagname则使用基本选择器；5），如果是选择表单中的元素，则使用表单选择器，表单对象属性选择器；6），根据可见性选择元素，则使用可见性选择器；7），如果是选择某个元素中包含某个属性（属性值），则使用属性选择器；8），！如果考虑对选中的元素，要进行过滤，则使用过滤选选择器，（有三种方法）$("div:contains('di')"); /内容$("divtype"); /属性$(&qu

31、ot;div .one"); /选中div中含class为.one的div元素；3，jquery中的dom操作：4，DOM(Document Object Model -文档对象模型)：一种与浏览器，平台，语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。DOM操作的分类：XML-DOM HTML-DOM 和CSS-DOM三种；5，/给id为first的数据添加样式类 one:$('#b1').click(function()$('#first').attr("class","one");); /追加

32、样式：addClass()#('#b2').click($('#first').addClas("one");); /移除样式：removeClass() -从匹配的元素中删除全部或指定的class$('#b3').click(function()$("#first").removeClass("one"););第九讲：1，AJAX和Jquery整合第十讲：jquery的dom操作 内部插入 外部插入1，启动weblogic的shell命令：nohup sh startWebLogic.

33、sh & 2, cd user_projects/domains/base_domain/3, ps -ef|grep weblogic4, kill - 9 19271 /weblogic的进程号码为最长的那个几行呢哦5, top -u weblogic6, 重启weblogic的话倒序执行这些shell命令；-1,例子：/添加重庆到上海下面$("#b1").click(function()/jquery方法/<li id = 'cq' name = 'chongqing'>重庆</li>/有两种方法/1,一

34、步到位$myli = $("<li id = 'cq' name = 'chongqing'>重庆</li>");/我们先使用内部插入$('#city').append($myli);表示在$('#city')对象内部添加后添加$myli；);/以上功能我们通过dom逐步实现代码如下：$myli = $("<li></li>"); /<=>$myli = $("<li/>");$myli.text(&

35、quot;重庆"); /<=><li>重庆</li>$myli.attr("id","cq"); /<=> <li id='cq'>重庆</li>$myli.attr("name","chongqing");/把$myli添加到上海$('#city').append($myli); /这种方法可以分布操作;/如果使用appendTo这应当这样使用：$myli.appendTo("#city&q

36、uot;); /表示把$myli添加到$("#city")对象的内部后面；/append和appendTo在大部分作用是一样的；2,$aaa.apend($bbb) = $bbb.apendTo($aaa);3,jquery是javascript的框架；4，外部插入节点：5，$('#b4').click(function()/使用外部插入/一步到位$("#bj").after("<li id='cd' name='chengdu'>成都</li>"););第十一讲

37、：jquery节点操作1，外部插入点：after(content):在每个匹配的元素之后插入内容before(content):在每个匹配的元素之前插入内容insertAfter(content):把所有匹配的元素插入到另一个，指定的元素集合的后面insertBefore(content):把所有匹配的元素插入到另一个，指定的元素集合的前面/以上方法不但能将新创建的DOM元素插入到文档中，也能对原有的DOM元素进行移动；2，jquery它找不到id它也不会报错，而dom方法在找不到id时就会报错；3，删除节点：1），删除所有p$("p").remove();2),把所有p清

38、空$("p").empty();3),删除上海这个li$("#b3").click(function()$("#sh").remove(););4,复制节点：1）clone():克隆匹配的DOM元素，返回值为克隆后的副本，但此时复制的新节点不具有任何行为；2）clone(true):克隆匹配的DOM元素，并复制源节点中的事件；5，替换节点：1）replaceWith()：将所有匹配的元素都替换为指定的HTML或DOM元素；2）replaceAll()：颠倒了的replaceWith（）方法，注意：若在替换之前，已经在元素上绑定了事件，

39、替换后原先绑定的事件会与原先的元素一起消失。6，节点替换示例：<script language="text/javascript">/with：用什么去替换什么/$("p").replaceWith("<input type='button' value='按钮'><br/>");/$("<a href='#'>sohu</a><br/>")</script>第十三讲：jquery属性

40、操作 获取子元素和兄弟元素的方法1，attr():对某个元素的属性进行操作；当为该方法传递一个参数时，即为某元素的获取指定属性；当为该方法传递两个参数时，即为某元素设置指定属性的值；2,jquery中有很多方法，可以获取值，同时也可以设置值，如：attr(),html(),text(),val(),height(),width(),css()等；例如：$("#div1").css("background"); /表示获取$("#div1").css("background","red"); /表

41、示设置3，removeAttr():删除指定元素的指定属性；4，<a href="" id="al">soho</a>$("#a1").removeAttr("href");/删除#a1的href属性$("#a1").attr("href","");/这是修改属性$("#a1").remove(); /表示将#a1这个元素移除；5,示例：<body><!-value就是默认值，可以通过this.

42、defaultValue来访问-><input type="text" value="用户邮箱/手机号/用户名" id="b1"/><br/><input type="password" value="" id="b2"><br/><input type="button" value = "登录" id="b3"></body><sc

43、ript language="javascript" type="text/javascript">$(document).ready(function()/当dom对象加载完毕后，给b1绑定一个focus事件$("#b1").focus(function()/获取当前值$curVal = $(this).val();if($curVal = this.defaultValue)/应当设置 ""$(this).val("");else$(this).val($curVal);/再绑定一个事

44、件blur$("#b1").blur(function()/获取当前值$curVal=$(this).val();if($curVal ="")$(this).val(this.defaultValue); /这里的defaultValue指的是dom中的value属性值；else$(this).val($curVal););</script>6,常用的遍历节点的方法：取得匹配元素的所有子元素组成的集合：children(),该方法只考虑元素而不考虑任何后代元素；取得匹配元素后面紧邻的同辈元素的集合：next（）；取得匹配元素前面紧邻的同辈元

45、素的集合：prev（）；取得匹配元素前后所有的同辈元素：siblings();<script language="javascript" type="text/javascript">/查找所有子元素$("#b2").click(function()$(".one").children().each(function(index,data) /$(".one").children 为她的子孩子；用each进行遍历alert(index+" "+$(data).te

46、xt(););/获取后面的同辈元素$("#b3").click(function()$(".one").next().each(function(index,data)alert(index+" "+$(data).text(););/获取前面的同辈元素$("#b4").click(function()$(".one").prev.each(function(index,data)alert(index+" "+$(data).text()</script>7,j

47、query加载并解析XMLJquery可以通过$.get()或$.post()方法来加载xml$(function()$.get("cities.xml",function(xml)alert(xml);)JQuery解析XML与解析DOM一样，可以使用find(),children()等函数来解析和用each()方法来进行遍历；第十五讲：jquery和ajax整合使用的方法1，在页面加载完毕后，浏览器会通过Javascript为DOM元素添加事件，在常规的Javascript代码中，通常使用window.onload方法，在Jquery中使用$(document).rea

48、dy()方法；window.onload:必须等待网页中的所有内容加载完毕后（包括图片）才能执行；不能同时编写多个；$(document).ready():网页中的所有DOM结构绘制完毕后就执行，可能DOM元素关联的东西并没有加载完；能同时编写多个；2，ajax请求它本质上也是http请求，只不过它是无刷新的；jquery主要用来处理ajax请求的返回；3，ajax请求结果返回的格式有以下三种：文本html/xml/json；4，传统的ajax步骤：1），创建xmlHttpRequest对象；2），拼接url和data；3），xmlHttpRequest.open();4) ，指定回调函数 x

49、mlHttpRequest.onreadystatechange = 函数；5），xmlHttpRequest.send();/当jquery和ajax整合之后，我们就可以用一个方法来搞定：【提供了三个方法，选择其中任何一个都可以】1），jquery对象.load();/这个方法会自动判断调用get方法，还是post方法；2) , $.get();3) , $.post();示例：$('#b1').click(function()/使用jquery提供的方法来发出ajax的请求/1,第一个参数表示把ajax请求发送给url/2，第二个参数表示是否发送数据data，如果你要发送则

50、数据的格式应当是'username','顺平',如果你不发送数据，则填入null，如果你有发送给服务器的数据，默认load方法以post方式提交，否则是以get方式提交；/3，第三个参数时回调函数；/data表示从服务器回送的数据（string）/textStatus表示状态，有四个success,error,notmodify,timeout/xmlHttpRequest表示XMLHttpRequest对象；$('#one').load("loadController.php?data"+Math.random()+&quo

51、t;&user="+$('#username').val(),null,function(data,textStatus,xmlHttpRequest)$(this).text(data); /把返回的数据放到指定的位置；)/如果有参数的话，这样做var data = "'username':'顺平','age':'30'" /json数据格式；var send_data ="username":$("#username").val(),

52、"psw":$("#psw").val(); /这个也是json数据格式；$('#one').load("loadController.php",data,function(data,textStatus,xmlHttpRequest)$(this).text(data);)5,/如果服务器端返回的数据格式是json格式，则应当怎样处理：var obj = eval("("+data+")"); /res和info为json的两个属性；window.alert(obj.res+&

53、quot; "+);6,/如果服务器返回的数据格式是xml格式的var result = xmlHttpRequest.responseXML;/取出返回的resvar res = result.getElementsByTagName('res');window.alert(res0.childNodes0.nodeValue);7,$.get()和$.post()表示全局函数； /它们返回xmlHttpRequest这个对象；8，$.get()和$.post()方法都不依赖与一个jquery对象。第一个参数表示向那个php页面发送请求。$('

54、;#b1').click(function()var send_data = "username":$("#username").val(),"psw":$("#psw").val();$.post("loadController.php",send_data,function(data,ts)/如果服务器返回的是text则，alert(data););9,普通文本，xml，json三种数据格式示例：echo "不可以用"；echo "'res':'不可以用','info':'哈哈