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

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="jquery-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类添加一些属性和方法：我们用原型法Dog.prototype = {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对象，那么它就可以使用jquery里的方法：$("#test").html();比如：$("#test").html() 意思是指：获取ID为test的元素内的html代码。

其中html()是jquery里的方法；这段代码等同于用DOM实现代码：document.getElementById("id").innerHTML;虽然jquery对象时包装DOM对象后产生的，但是Jquery无法使用DOM对象的任何方法，同理DOM对象也不能使用Jquery里的方法，乱使用会报错；约定：如果获取的是jquery对象，那么要在变量前面加上￥，var $variable = 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 = $obj2[0]; //obj4就是dom对象alert("obj4 value="+obj4.value);(2),var obj5 = $obj2.get(0);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').click(function(){$('#one').css("background","#0000FF");});6，改变所有的<span>元素和id为two的元素的背景色为#3399FF $('#b5').click(function(){$('span,#two').css("background","#3399FF");//这里面可以写好多条件,例如:$('span,#two,mini,*').css("background","#3399FF");})7,经典实例：<script type="text/javascript">$('p').click(//this表示当前被点击的对象，但是这里this表示dom对象window.alert(this.innerHTML);//$(this)表示当前被点击的元素，但是此时我们当做jquery对象window.alert($(this).html());//以上两句的功能是等价的);</script>8,如果想通过DOM元素之间的层次关系来获取特定元素，例如后代元素，子元素，相邻元素，兄弟元素等，则需要使用层次选择器；用法：parent > child用法：$("form > input"):返回值：结合元素说明：在给定的父元素下匹配所有子元素，注意：要区分好后代元素和子元素；9,改变id为one的相邻的下一个<div>的背景颜色为#0000FF$('#b3').click(function(){$('#one + div').css("background","#0000FF");})10,改变id为two的元素后面的所有兄弟<div>的元素的背景色为#0000FF第三讲：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","#0000FF");})2,过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，该选择器都已":"开头;按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器；3，例如：$('#b1').click(function(){$('div:first').css("background","#0000FF");//表示先找到第一个div标签，然后选择第一个div标签});4,//改变class不为one的所有div元素的背景色为#0000FF;$('#b3').click(function(){//先选择所有div，然后再过滤$("div:not(.one)").css("background","#0000FF");//one表示一个类名;表示去除类名为one的});5, $("div:even");//表示先找出所有的div然后把偶数过滤出来，":"就表示过滤的意思；6，经典案例：<script type = "text/javascript">$("table:eq(0) tr:even").css("background","red");//表示先选中第一个表格，有一个空格然后选择tr中索引为偶数的偶数列；第0列也为偶数列；</script>7,第四讲：1，内容过滤，根据内容选择器；<script type = "text/javascript">$('#b1').click(function(){$("div:contains('di')").css("background","#0000FF")})</script>2, ......用到的时候再查3，只要是jquery操作的选择的它都默认返回的都是一个集合；4，可见度过滤选择器：可见度过滤选择器是根据元素的可见和不可见状态来选择相应的元素：1，：hidden 用法：$("tr:hidden") 返回集合元素，说明，匹配所有的不可见元素，Input元素的type属性为"hidden"的话也会被匹配到，意思是css中display:none和input type="hidden"的都会被匹配到，同样，要在脑海中彻底分清楚冒号":",点号"."和逗号","的区别；2, :visible 用法：$("tr:visible") 返回值集合元素说明：匹配所有的可见元素；5,该选择器是根据元素的可见性来选择对象，只要是通过jquery选择器选出来的对象都是jquery对象；6，//改变所有可见的div元素的背景色为#0000FF$('#b1').click(function(){$('div:visiable').css("background","#0000FF");})7, <script 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+ "" +); //name为取得对象的属性；})//jquery的方法：$.each($objs,function(i,obj){//这里i为索引变量，obj为取出的dom对象；obj = $objs[i]window.alert("jquery对象"+$(obj).val()); //就可以取出对象的值了});$.each($objs,function(){// 每循环一次，就相当于从数组中取出一个对象；必须把this要包一下；相当于 this = $objs[i];此时this就是一个dom对象，所以必须要把this要包一下;window.alert("jquery2"+$(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"); //表示把body下的第一级选中【儿子辈】，不包括孙子辈哦；prev + next 表示选择prev的下一个元素（强调：同一级后面的兄弟，只选择一个）；prev + siblings 表示选择 prev的后面的所有元素(强调：同一级后面的所有兄弟元素都会被选中);7，选中文本中不含有di的div：$("div:not(:contains('di'))")8, $(:hidden) ==>会把style[display:none]和<input type = "hidden"/>里的都选中; $(:visible)==>会选中所有可见的元素；停：2014-09-11 17:30第六讲:属性过滤选择器1,选出含有属性title的div元素：$("#b1").click(function(){$("div[title]").css("background","green");});2,属性title值等于test的div元素$("#b2").click(function(){$("div[title=\"test\"]").css("background","green");});3,找到属性title值以te开始的div元素$("#b3").click(function(){$("div[title ^='te']").css("background","red");});4,找到属性title的值，以est结束的div元素$("#b5").click(function(){$("div[title$='est']").css("background","red");});5,属性title值，含有es的div元素$("#b6").click(function(){$("div[title * = 'es']").css("background","red");});6,选取有属性id的div元素，然后再结果中选取属性title值含有"es"的div元素$("#b7").click(function(){$("div[id][title * = 'es']").css("background","red");}); //属性使用"[]"来进行过滤的7,我们的过滤方式有两种：比如选出文本中含有 abc的 div $("div:contains['abc']")凡是跟属性过滤有关的属性和属性值的过滤我们就用"[]",其他就用":";第七讲：子元素选择器表单对象属性选择器1，//每个class为one的div父元素下的第2个子元素$('#b1').click($("div .one:nth-child(2)").css("background","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(){$("div .one:only-child").css("background","red");});4,利用jquery对象的val()方法改变表单内type = text 可用<input>元素的值$('#b1').click(function(){$("input[type = 'text']:enabled").val("hello");});5,jquery对象在它使用的过程中都是当做一个集合来对待的，所以所有的jquery对象都有length属性；6，利用jquery对象的length属性获取多选框中选中的个数$("#b3").click(function(){// alert($(":checkbox:checked").length);alert($("input[type='checkbox']:checked").length);});7,总结一下过滤器使用的方式：$("div.contains('di')"); //按内容进行过滤；$("div[type]"); //按属性进行过滤；$("div .one"); //选中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 = $("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），选择什么样的选择器要根据需求来定；2），如果针对文档内容，则使用内容选择器；3），如果是选择父子（祖先，后代）元素则使用层次选择器；4），如果是根据id/class/tagname则使用基本选择器；5），如果是选择表单中的元素，则使用表单选择器，表单对象属性选择器；6），根据可见性选择元素，则使用可见性选择器；7），如果是选择某个元素中包含某个属性（属性值），则使用属性选择器；8），！！！如果考虑对选中的元素，要进行过滤，则使用过滤选选择器，（有三种方法）$("div:contains('di')"); //内容$("div[type]"); //属性$("div .one"); //选中div中含class为.one的div元素；3，jquery中的dom操作：4，DOM(Document Object Model --文档对象模型)：一种与浏览器，平台，语言无关的接口，使用该接口可以轻松地访问页面中所有的标准组件。