jQuery使用（超详细）

一、jQuery介绍

1.JQuery简介

jQuery 是一个高效、精简并且功能丰富的 JavaScript 工具库。它提供的 API 易于使用且兼容众多浏览器，这让诸如 HTML 文档遍历和操作、事件处理、动画和 Ajax 操作更加简单。目前超过90%的网站都使用了jQuery库，jQuery的宗旨：用最少的代码！

2.jQuery官网

官方地址：点击打开

官方文档：点击打开

 

二、jQuery的简单使用

1.JQuery的引用

本地引入：将jQuery下载下来，然后导入项目中，使用script标签进行引用

CDN引入：使用远程CDN资源库在线引入，避免了文件下载（本教程所采用）

2.JQuery快速使用

	
		
		
		
		
	
	
		
		SayHello
	

运行结果

 $是jQuery的核心函数，能完成jquery的很多功能。$()就是调用$这个函数

三、核心函数的四个作用

             *1. 传入参数为[函数]是，在文档加载完成以后执行这个函数
             * 2.传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象
             * 3.传入参数为[选择器字符串]时，根据这个字符串查找元素节点对象
             * 4.传入参数为[DOM对象]时，将DOM对象包装为jQuery对象返回

1. 传入参数为[函数]是，在文档加载完成以后执行这个函数

表示页面加载完成之后，相当于window.οnlοad=function(){}

2.传入参数为[HTML字符串]时，根据这个字符串创建元素节点对象

会对我们创建这个html标签对象

3.传入参数为[选择器字符串]时，根据这个字符串查找元素节点对象

$("#id属性值")                id选择器，根据id查询标签对象

$("标签名")                     标签名选择器，根绝指定的标签名查询标签对象

$(".class属性值")           类型选择器，可以根据class属性查询标签对象

4、传入参数为 [DOM对象] 时，

会把这个dom对象转换成jQuery对象,即     [object HTMLSpanElement] ======>  [object Object]

实例：

结果

四、DOM对象和JQuery对象

1.DOM对象形式

 2.jQuery对象

 jQuery对象的本质

jQuery对象的本质是dom对象的数组+jQuery提供的一系列的功能函数

实例

代码

    
    
    
    
    


    very Good!!
    使用DOM
    使用Jquery对象调用JQuery方法
    使用jQuery对象调用DOM方法
    

代码运行调试,弄断点重新刷新页面进行调试

 

3.jQuery对象和DOM对象相互转换

jQuery和DOM的使用方法是不一样的，不能混淆使用

就比如说，

js当中是

 document.getElementById("testDiv").innerHTML="这个就是DOM对象的属性值innerHTML";

 JQuery当中就没有这个，写

$("#testDiv").innerHTML="这个就是DOM对象的属性值innerHTML";

 不会起效果

五、选择器

1.id选择器

 

 2.标签选择器

 

3.类选择器

 4.组合选择器

 

 5.全选选择器