一：Jquery基础 

1、Jquery是一种框架，对于浏览器的兼容问题，95%就不用去考虑啦!!! 



2、Jquery利用选择器(就是跟css那个id和class的选择差不多id前边加.还是#我忘了)查找要进行操作的那个节点， 

  然后再把这些节点封装成一个jquery对象，(封装的目的有两个①是为了解决不同浏览器的兼容问题，②是为了简化代码) 

  通过调用你封装的jquery对象的方法或者是属性实现对节点的操作。 



3、jquery开发的步骤： 

1.要先引入jquery框架，也就是那个js文件，俺当时用的是jquery-1.4.2.js 

<script type="text/javascript" src="../js/jquery-1.4.2.js"> 

2.使用选择器查找要进行操作的节点(该节点会被封装成一个jquery对象) 

var con = $('li:gt(2)').not('li:last').hide();(昨天你给我发的第8个页面，其中con就是被封装的jquery对象) 

3.调用jquery对象的方法或者属性进行操作 

con.slideToggle(80);(这就是调用jquery对象的方法进行操作，就是那个显示和隐藏之间进行切换) 



4、jquery对象与Dom对象转换 

1.Dom转换Jquery使用函数：$(dom对象)  

例如： 

function f() { 

var obj = document.getElementById('一个id值');//obj是一个dom对象 

var $obj = $(obj);//将dom对象封装成了jquery对象 

$obj.html("hello java"); 

} 

jQuery包含很多供改变和操作HTML的强大函数(重点)。上边用的.html是改变所匹配的 HTML 元素的内容的； 

$(selector).html(内容) 
 改变被选元素的（内部）HTML  

$(selector).append(内容) 
 向被选元素的（内部）HTML 追加内容  

$(selector).prepend(内容) 
 向被选元素的（内部）HTML “预置”（Prepend）内容  

$(selector).after(内容) 
 在被选元素之后添加 HTML  

$(selector).before(内容) 
 在被选元素之前添加 HTML  

 

2.Jquery中转换成Dom对象(这个我也不是太清楚，先记住就这样用就行啦) 

方式一：$obj.get(0); 

方式二：$obj.get()[0]; 





 二：Jquery选择器： 

选择器就是模仿css选择器的语法提供了一种用来方便查找要操作的节点的语法规范。 



选择器包括： 

基本选择器 

层次选择器 

基本过滤选择器 

内容过滤选择器 

可见性过滤选择器 

属性过滤选择器 

子元素过滤选择器 

表单对象属性过滤选择器 

表单选择器 





1、基本选择器都有哪些? 

1.id选择器#id 
  $('#id值') 

2.类选择器.class 
  $('.class值') 

3.元素选择器element $('元素名称') 如：$('button')也叫标签选择器 

4.选择器合并 
  就是对个选择器之间用逗号隔开，css也有这种，如：$('#1,.2,p')这就是说选择id为1的，class为2的还有p标签 

5.所有选择器* 
  $('*') 



当选择器查找到了多个Dom节点时，还是封装成一个jquery对象，在调用jquery独享的属性或者方法时，默认情况是 

作用于其下的所有Dom节点上 



元素选择器$("标签名字") 

$("p") 选取 <p> 元素。 

$("p.intro") 选取所有 class="intro" 的 <p> 元素。 

$("p#demo") 选取 id="demo" 的第一个 <p> 元素。 





$(document).ready(function(){ 

$("button").click(function(){ 

 

}); 

这段函数的意思是把页面中的元素加载完再执行里面的function()! 

为什么要这样呢？ 

因为html是从上到下解析的， 

如果先执行 

function() 

{$("button").click(..) 

} 

此时这个button还没被加载，就是还不存在呢，所以要把页面元素加载完再执行function() 



2.层次选择器 

<div id="d1"> 

<div id="d2">hello 1</div> 

<div id="d3" style="width:200px;height:200px;background-cplor:red;"> 

<div id="d4" style="width:200px;height:200px;background-cplor:silver;>hello 2</div> 

</div> 

<div id="d5">hello 3</div> 

</div> 

<input type="button" value="层次选择器的使用" οnclick="f1();"/> 



1.所有后代： 

$('#d1 div').css('font-size','60');//d2,d3,d4,d5都变 

2.只考虑子节点，孙子不管 

$('#d1>div').css('font-size','60');//d2,d3,d5变,d4不变 

3.下一个兄弟节点，儿子不管 

$('#d3+div').css('font-size','60');//只有d5变 

4.下面所有的兄弟，上边的不管，儿子也不敢，兄弟中的儿子也不管 

$('#d2~div').css('background-color','yellow');//d3,d5变 



3.基本过滤选择器 

1. 
 :first 
 第一行 

2. 
 :last 
 最后一行 

3. 
 :not 
 把满足要求的选择器排除在外 

4. 
 :even 
 偶数行，下标从0开始 

5. 
 :odd 
 奇数行，下标从0开始 

6. 
 :eq(index) 
 等于下标的元素，下标从0开始 

7. 
 :gt(index) 
 大于下标的元素，下标从0开始 

8. 
 :lt(index) 
 小于下标的元素，下标从0开始 

注意：过滤器前是没有空格的。是xx:first而不是xx :first。