【JQuery学习笔记一】理解JQuery对象含义和JQuery选择器的使用！

一.JQuery是什么？

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。

可以简单地理解为JQuery是对js的封装扩展。

二.如何获得JQuery对象（比较JQuery对象和DOM对象）由于JQuery是一个库，所以要想使用该框架，首先得引入js包：

jquery-1.8.3.js：一般用于学习阶段。jquery-1.8.3.min.js：用于项目使用阶段。

引入js包代码：<scriptsrc="../../js/jquery-1.8.3.js">script>

1.js获取对象的方式和JQuery获取对象的方式不一样：

JS获取对象:document.getElementById();

JQ获取对象:$(“#id”);其中$相当于JQuery，实际开发中简写成$.

在实际开发中由于不同对象的使用方法不一样，而且JQuery无法操作js对象，js无法操作JQuery对象。因此可以通过js对象和JQuery对象之间的转换来解决此问题，便于开发。

2.JQuery对象与DOM对象转换。

    
       
       
       
       
    
    
       
       


       sssss
    

注意：JQ对象只能操作JQ里面的属性和方法

      JS对象只能操作JS里面的属性和方法。

3.JQuery入门之Toogle的使用。

Toogle方法，若目标对象显示，则修改为隐藏，反之则修改成显示。

二.JQuery的选择器。

JQuery选择器用来选择操作对象，对于选择器的学习和使用可以参考JQuery1.4.1中文参考文件，其中：

1.基本选择器种类分为：

  id选择器:$("#id");

元素选择器：$("元素");

类选择器：$(".类名");

通配符：*

多个选择器共用（并集）

Demo代码：

	
		
		
		
		
				
	
	
		
		
		
    
       
       

       

           

              111
           
       
       
       

           

              222
           
           

              333
           
       
       
       

           

              444
           
           

              555
           
           

              666
           
       
       
       
           
       
    

2.层级选择器：
ancestor descendant: 在给定的祖先元素下匹配所有的后代元素(儿子、孙子、重孙子)
parent > child : 在给定的父元素下匹配所有的子元素(儿子)
prev + next: 匹配所有紧接在 prev 元素后的 next 元素(紧挨着的，同桌)
prev ~ siblings: 匹配 prev 元素之后的所有 siblings 元素(兄弟)


Demo代码：

	
		
		
		
		
		
		
		
	
	
		
		
		
		
		
		

		

			

				111
			
		
		
		

			

				222
			
			

				333
			
		
		
		

			

				444
			
			

				555
			
			

				666
			
		
		
		
			
		
	

3.基本过滤选择器
$('li').first() 等价于：$(“li:first”)

Demo代码：

	
		
		
		
		
		
		
	
	
		
		
		
		
		
		

		

			

				111
			
		
		
		

			

				222
			
			

				333
			
		
		
		

			

				444
			
			

				555
			
			

				666
			
		
		
		
			
		
	

 4.属性选择器。


Demo代码：

	
		
		
		
		
		
	
	
		
		
		
		

		

			

				111
			
		
		
		

			

				222
			
			

				333
			
		
		
		

			

				444
			
			

				555
			
			

				666
			
		
		
		
			
		
	

5.表单选择器。


Demo代码：

三，使用JQuery完成表格的全选和全不选。
需要使用jquery的选择器(id选择器、类选择器)
需要使用jQuery的属性操作方法 prop()
步骤：第一步：引入jquery文件
第二步：书写页面加载函数
第三步：为上面的复选框绑定单击事件
第四步：将下面所有的复选框的选中状态设置成跟上面的一致！
代码：