JQuery学习笔记（一）

jQuery基本概念

学习目标：学会如何使用jQuery，掌握jQuery的常用api，能够使用jQuery实现常见的效果。

为什么要学习jQuery？

【01-让div显示与设置内容.html】

使用javascript开发过程中，有许多的缺点：

1. 查找元素的方法太少，麻烦。
2. 遍历伪数组很麻烦，通常要嵌套一大堆的for循环。
3. 有兼容性问题。
4. 想要实现简单的动画效果，也很麻烦
5. 代码冗余。

jQuery初体验

【02-让div显示与设置内容.html】

$(document).ready(function () {
    $("#btn1").click(function () {
      	//隐式迭代：偷偷的遍历，在jQuery中，不需要手动写for循环了，会自动进行遍历。
        $("div").show(200);
    });

    $("#btn2").click(function () {
        $("div").text("我是内容");
    });
});

优点总结：

1. 查找元素的方法多种多样，非常灵活
2. 拥有隐式迭代特性，因此不再需要手写for循环了。
3. 完全没有兼容性问题。
4. 实现动画非常简单，而且功能更加的强大。
5. 代码简单、粗暴。

没有对比，就没有伤害，有了对比，处处戳中要害。

什么是jQuery?

jQuery的官网 http://jquery.com/
jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。

js库：把一些常用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就可以了。（animate.js、common.js）

我们知道了，jQuery其实就是一个js文件，里面封装了一大堆的方法方便我们的开发，其实就是一个加强版的common.js，因此我们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。

jQuery的版本

官网下载地址：http://jquery.com/download/
jQuery版本有很多，分为1.x 2.x 3.x

大版本分类：

1.x版本：能够兼容IE678浏览器
2.x版本：不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。

3.x版本：不兼容IE678，更加的精简（在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678）

关于压缩版和未压缩版

jquery-1.12.4.min.js:压缩版本，适用于生产环境，因为文件比较小，去除了注释、换行、空格等东西，但是基本没有颗阅读性。
jquery-1.12.4.js:未压缩版本，适用于学习与开发环境，源码清晰，易阅读。

jQuery的入口函数

使用jQuery的三个步骤：

1. 引入jQuery文件
2. 入口函数
3. 功能实现

关于jQuery的入口函数：

//第一种写法
$(document).ready(function() {
	
});
//第二种写法
$(function() {
	
});

//常用第二种写法

jQuery入口函数与js入口函数的对比

1.	JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
2.	jQuery的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

jQuery对象与DOM对象的区别（重点）

1. DOM对象：使用JavaScript中的方法获取页面中的元素返回的对象就是dom对象。
2. jQuery对象：jquery对象就是使用jquery的方法获取页面中的元素返回的对象就是jQuery对象。
3. jQuery对象其实就是DOM对象的包装集（包装了DOM对象的集合（伪数组））
4. DOM对象与jQuery对象的方法不能混用。

DOM对象转换成jQuery对象：【联想记忆：花钱】

var $obj = $(domObj);
// $(document).ready(function(){});就是典型的DOM对象转jQuery对象

var div1 = document.getElementById("one");
var $div1 = $(div1)
console.log($div1)

jQuery对象转换成DOM对象：

var $li = $(“li”);
//第一种方法（推荐使用）
$li[0]
//第二种方法
$li.get(0)

//1.用下标来取出来
var $divs = $('div')
console.log($divs);
var div1 = $divs[0];
console.log(div1);

//2.用JQuery的方法 get();
var div2 = $divs.get(1);
console.log(div2);

【练习：隔行变色案例.html】

text样式和CSS样式

​ css（）方法设置参数为要获取值的样式名。

• 获取边框这样的样式值，一定要记得给一个准确的边框。（上下左右）

• 获取包含了多个dom元素的JQ对象的样式，只能获取到第一个dom对象的样式。

• 设置样式：css(‘样式名‘，‘样式值‘)

• 设置多样式

  $('#div').css({
      width:300,
      'height':'300px',
      'background-color':'green'
      'boder-top-width':'10px',
  });
  

​ text()

选择器

什么是jQuery选择器

jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素。注意：jQuery选择器返回的是jQuery对象。

jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器。【查看jQuery文档】

jQuery选择器虽然很多，但是选择器之间可以相互替代，就是说获取一个元素，你会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。

基本选择器

名称	用法	描述
ID选择器	$(“#id”);	获取指定ID的元素
类选择器	$(“.class”);	获取同一类class的元素
标签选择器	$(“div”);	获取同一类标签的所有元素
并集选择器	$(“div,p,li”);	使用逗号分隔，只要符合条件之一就可。
交集选择器	$(“div.redClass”);	获取class为redClass的div元素

总结：跟css的选择器用法一模一样。

层级选择器

名称	用法	描述
子代选择器	$(“ul>li”);	使用>号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器	$(“ul li”);	使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

跟CSS的选择器一模一样。

过滤选择器

这类选择器都带冒号:

名称	用法	描述
:eq（index）	$(“li:eq(2)”).css(“color”, ”red”);	获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd	$(“li:odd”).css(“color”, ”red”);	获取到的li元素中，选择索引号为奇数的元素
:even	$(“li:even”).css(“color”, ”red”);	获取到的li元素中，选择索引号为偶数的元素

【案例：隔行变色】

筛选选择器(方法)

筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。

名称	用法	描述
children(selector)	$(“ul”).children(“li”)	相当于$(“ul>li”)，子类选择器
find(selector)	$(“ul”).find(“li”);	相当于$(“ul li”),后代选择器
siblings(selector)	$(“#first”).siblings(“li”);	查找兄弟节点，不包括自己本身。
parent()	$(“#first”).parent();	查找父亲
eq(index)	$(“li”).eq(2);	相当于$(“li:eq(2)”),index从0开始
next()	$(“li”).next()	找下一个兄弟
prev()	$(“li”).prev()	找上一次兄弟

【案例：下拉菜单】this+children+mouseenter+mouseleave
【案例：突出展示】siblings+find
【案例：手风琴】next+parent
【案例：淘宝精品】index+eq

MOUSEOVER 和 MOUSESEENTER 事件触发

mouseover 事件在鼠标移动到选取的元素及其子元素上时触发

mouseenter 事件只在鼠移动到选取的元素上时触发

**以后如果有鼠标移入事件，请使用mouseenter,而不是mouseover **

鼠标离开事件请使用mouseleave,而不是mouseout

Class操作

---

​

//添加类

$(function () {
    
    $("input").eq(0).click(function () {
      
      // 添加一个类
      $("li").addClass("basic");
     
      //也可以添加多个类
      $("li").addClass("basic fontSize30 width200");  
    });

//移除类

$("input").eq(2).click(function () {
      
      //移除一个类
      $("li").removeClass("bigger");
      
      //也可以移除多个类
      $("li").removeClass("basic fontSize30 width200");  
    });

//判断类

//判断一个元素有没有某个类，如果【有】就返回ture,【无】就返回false 

$("input").eq(3).click(function () {
    
      //移除一个类
      console.log($("li").hasClass("bigger"));;
    });

 //切换类

//如果元素有这个类就移除这个类，如果没有这个类就添加这个类
    $("input").eq(4).click(function () {
    
      //判断li有没有basic类，如果有，就移除他，如果没有，添加他
      //toggle
      $("li").toggleClass("basic");
    });

【案例】Tab栏切换

---

jQuery 动画

• jQuery 提供了三组基本动画，这些动画都是标准的、有规律的效果，jQuery还提供了自定义动画的功能。

• 演示动画效果

  三组基本动画

  • 显示（show）与隐藏（hide）是一组动画；

  • 滑入（slideDown）与滑出（slideUp）与切换（slideToggle），效果与卷帘门类似

  • 淡入（fadeln）与淡出（fadeOut）与切换（fadeToggle）

    $obj.show([speed],[callback]);
    // speed(可选)：动画的执行时间
    	//1.如果不传，就没有动画效果。如果是slide和fade系列，会默认为normal
    	//2.毫秒值(比如1000)，动画在1000毫秒执行完成（推荐）
    	//3.固定字符串，slow(600)、normal(400)、fast(200)，如果传其他字符串，则默认为normal。
    //callback（可选）：执行完动画后执行的回调函数
    
    slideDown();slideUp();slideToggle();同理
    fadeIn();fadeOut();fadeToggle();同理
    
    

/*******************************显示和隐藏*****************************/

$(function(){
    
    //1.显示show();
    //没有参数就没有效果，想要动画参数就要给他参数；
    $('#show').click(function(){
        $('#div1').show(2000);
        $('#div1').show('fast'); //相当于给了他200毫秒。 如果代表时长的单词写错了，就相当于写了一个normal。
        
        //加回调函数
        $('#div1').show(2000,function(){
           alert('动画执行完毕了...'); 
        });
        
    });
    
    //2.隐藏hide()
    $('#hide').click(function(){
    	$('#div1').hide(2000);
        
    	 //加回调函数
        $('#div1').hide(2000,function(){
           alert('动画隐藏了...'); 
        });
  	});  
    
    //toggle 切换
    $('#toggle').click(function(){
    //如果元素是隐藏状态就动画显示；如果元素是显示状态就动画隐藏
        $('#div1').hide(2000);
   	});       
});

/*******************************滑入和滑出*****************************/

$(function(){
    
    //滑入
    
    $('#slideDown').click(function(){
       /*
       slideDown(参数1，参数2);
       参数1：动画执行的时长
       参数2：动画执行完毕后的回调函数
       */
        
        
        $('#div1').slideDown();//没有给参数，相当于给了normal代表的400毫秒
        $('#div1').slideDown(2000,function(){
             alert('动画执行完毕了...');
        });
        
       
        //滑出 
         $('#div1').slideUp();//没有给参数，相当于给了normal代表的400毫秒
        $('#div1').slideUp(2000,function(){
             alert('动画执行完毕了...');
        });
        
        //切换
         $('#div1').slideToggle(2000);
        
        
    });   
});

/*******************************自定义动画*****************************/

$(selector).animate({params},[speed],[easing],[callback]);
//{params}：要执行动画的CSS属性，带数字（必选）
//speed：执行动画时长（可选）
//easing：执行效果，默认为swing（缓动）   可以是linear（匀速）



$(function(){
    
    //自定义动画
    //参数1：必选的 对象 代表的是需要做动画的属性
    //参数2：可选的 代表执行动画的时长
    //参数3：可选的 easing 代表的是缓动还是匀速 linear swing
    $('#lr800').click(function(){
      //让id为div1的元素动画移动到800那个位置  
    	$('#div1').animate({
        	left:800,
            width:200;
            height:200;
            opacity:0.5
        }，2000,'linear',function (){
            alert('动画执行完毕了..');
        })；
    });
    
    
    
});

/*******************************动画队列与停止动画*****************************/
	//在同一个元素上执行多个动画，那么对于这个动画来说，后面的动画会被放到动画对列中，等前面的动画执行完成了才会执行（联想：火车进站）

	//stop方法：停止动画效果
	stop(clearQueue,jumpToEnd);
	//第一个参数：是否清楚队列
	//第二个参数：是否跳转到最终效果
	//如果stop()方法不写参数，默认就是两个false.
$('stop').click(function (){
    $('div').stop(true,false);
});

---

jQuery节点操作

---

创建节点

//$(htmlStr)
//htmlStr：html格式的字符串 
$('<span-这是一个span元素</span-');

append appendTo 在被选元素的结尾插入内容

prepend prependTo 在被元素的开头插入内容

//原生JS中创建节点：document.write();innerHTML;document.createElement();

//JQ中如何创建节点？
// 1.html()    2.$()

//1.html()
//1.1 获取内容：html()方法不给参数  --- 获取到元素的所有内容
	$('#div1').html()
//1.2设置内容：html()方法给参数 --- 会把原来的内容给覆盖
//如果设置的内容中包含了标签，是会把标签给解析出来的
	$('#div1').html('我是设置的内容');



//2.$()
//确实能创建元素，但是创建的元素只存在于内存中，如果要在页面上显示，就要追加
	var $link = $('<a> 我是新闻 </a>')  //创建元素
    $('#div1').append($link);	//追加元素

***************************添加节点的方式*************************
    
    //1.append()
    //父元素.append(子元素); --- 作为最后一个子元素添加
    //1.新创建一个li标签，添加到ul1中的去
    //2.把ul1中已经存在的li标签添加到ul1中去，剪切后作为最后一个子元素添加
    //3.把ul2中已经存在的li标签添加到ul1中去，剪切后作为最后一个子元素添加
	$('#ul1').append($liNew);

	//2.prepend（）
	//父元素.append(子元素); --- 作为第一个子元素添加
	//1.新创建一个li标签，添加到ul1中的去
	//2.把ul1中已经存在的li标签添加到ul1中去，剪切后作为第一个子元素添加
	//3.把ul2中已经存在的li标签添加到ul1中去，剪切后作为第一个子元素添加

	//3.before（） 
	//元素A.before(元素B)； --- 把元素B插入到元素A的前面，作为兄弟元素添加

	//after()
	//元素A.after(元素B)； --- 把元素B插入到元素A的后，作为兄弟元素添加

	//appendTo();
	//子元素.appendTo(父元素)； --- 把子元素作为父元素的最后一个子元素添加
	$liNew.appendTo($('#ul1'));

***************************************表格生成案例********************
    //需求：点击获取数据按钮，根据data中数组里面的数据来给tbody追加tr
    //data这个数组，有多少个元素，就生成多少个tr，每一个元素又是一个对象，所以对象有多少个键值对应就有多少个td.
    
    //给获取数据按钮设置一个点击事件。
    $('#j_btnGetData').click(function(){
    
    //1. html()方法
    //设置内容，内容中有标签会解析，会覆盖原来的内容 --- 所以一次性把所有TR全部获取到再复制
    var list = [];
    for(var i = 0 ; i < data.length ; i++ ){  //遍历数组
        
        //生成tr
        list.push("<tr>");
        //生成td
        for(var key in data[i]){
            list.push("<td>");
            list.push("data[i][key]");
            list.push("<td>");
        }
        list.push("</tr>");
        
    }
    list.join(""); //用join方法并给一个空字符串的方式，把数组里的数据连接成一个字符串
    $('#j_tbData').html();//找到需要填充的地方，然后用html方法覆盖
    
    
    // $()方式
    for(var i = 0 ; i < data.length ; i++ ){  //遍历数组
    	var $tr = $("<tr><td>"+data[i]['name']+"</td><td>"+data[i]['url']+"</td><td>"+data[i]['type']+"</td></tr>");
        //把创建出来的tr添加到tb中去
        $('#j_btnGetData').append($tr);
    
    }
});
    

*********************清空节点***********
    清空元素：empty()
	移除节点：remove（）
***************************************
	//清空ul
	//$('#ul1').html(''); --- 不推荐使用，有可能会造成内存泄漏，不安全
	
	$('#ul1').empty();//推荐使用，不仅可以清空元素，还可以清空元素上面的事件

	//移除某一个元素
	$('#li3').remove(); //自杀

	//移除ul，但只能获取li3这个标签
	$('#li3').parent().remove();

*****************克隆节点**********************
    //jQuery中克隆节点：clone（）
    //只存在于内存中，如果要在页面上显示，就应该追加到页面是
    //clone()方法参数不管是ture 还是 false，都是会克隆到后代节点的
    //区别在于：参数是ture表示会把事件一起克隆到， 如果参数是false就不会克隆事件,不给参数默认是false
    var $cloneDiv = $('#Div1').clone(); //克隆节点
	//修改克隆节点的id
	$cloneDiv.attr('id','div2');
	$('body').append($cloneDiv);  //追加节点到body中

**********************设置/获取表单元素内容**************
//原生JS是通过value属性来获取或者设置表单元素的值
//jQ中如何设置或者获取表单元素的值呢？ --- val（）；
//val（）不给参数就是获取，给参数就是设置
    $('#text').val();
    $('#text').val(1);

**********************jQ操作属性**************
    //jQ中操作属性：attr() removeAttr()
    
    $('img').attr('src','992.gif');//以前有src属性，更改这个属性
	$('img').attr('aaa','哈哈哈');//修改自定义属性
	$('img').attr('bbb','bbb');//如果元素原来没有这个属性，那就是添加属性

​	//设置多属性
$('img').attr({
​    src:'992.gif',
​    aaa:'hahha',
​    bbb:'bbb'
});

​	//获取属性
​	//自带属性可以获取；自定义的属性也可以获取；如果没有这个属性，获取到的值就是undefined；
​	//attr（）设置的属性也可以获取
​	$('img').attr('src'); --- //给一个属性名就可以返回属性值
​        
​    //移除属性
   $('img').removeAttr('src'); 
​	//移除多属性
​	$('img').removeAttr({
​    src:'992.gif',
​    aaa:'hahha',
​    bbb:'bbb'
});

**********************prop()属性**************
在jQuery1.6之后，对于checked、selected、disabled这类boolean类型的属性来说，不能用attr方法，只能用prop方法。

//设置属性
$(':checked').prop('checked',true);
//获取属性
$(':checked').prop('checked'); //返回true或者false
*********************************************
    //checked属性写在元素身上就表示选中,没有写在元素的身上就表示没有选中
    //原生JS是给他设置ture或者false,取值也是得到ture或者false
    document,getElementById("btn1").onclick = function(){
    //设置操作
    document,getElementById("ckb1").checked = false;
    //获取操作
    document,getElementById("ckb1").checked；
};
    

	$('#ckb1').prop('checked'); --- 如果多选框是选中状态返回一个true；如果多选框是取消状态那返回一个false.

jQuery尺寸和位置操作

---

width方法和height方法

• 设置或者获取高度，不包括内边距、边框和外边距

  //带参数表示设置的高度
  $('img').height(200);
  //不带参数获取高度
  $('img').width(200);
  
  

• 获取网页的可视区宽高

  //获取可视区宽度
  $(window).width();
  //获取可视区高度
  $(window).height();
  

innerWidth/innerHeight/outerWidth/outerHeight

innerWidth()/innerHeight()     		    方法返回元素的宽度/高度（包括内边距）
outerWidth（）/outerHeight（）    		 方法返回元素的宽度/高度（包括内边距和边框）
outerWidth（true）/outerHeight（true）   方法返回元素的宽度/高度（包括内边距、边框和外边距）

//1.获取id为one的div的宽高
$('#one').css('height');
$('#one').css('width');

//2.width（）  height（）
//获取或设置元素的宽高的，这个宽高不包括padding/border/margin
$('img').height(200);
$('img').width(200);

//3.innerWidth()/innerHeight() 
//方法返回元素的宽度/高度（包括内边距）
$('#one').innerWidth();
$('#one').innerHeight();

offset方法和position方法

• offset方法获取元素距离document的位置

• position方法获取的是元素距离有定位的父元素（offsetParent）的位置。

  //获取元素距离document的位置，返回值为对象：{left：100，top：100}
  $(selector).offset();
  //获取相对于其最近的有定位的父元素的位置
  $(selector).position();
  

  scrollTop 与scrollLeft

  • 设置或者获取垂直滚动条的位置

    //获取页面被卷曲的高度
    $(window).scrollTop() ;
    $('#div1').scrollTop(); 
    $('#div1').scrollTop(200);  --- 可以设置值
    //获取页面被卷曲的宽度
    $(window).scrollLeft()
    

on注册事件（重点）

• jQuery用on统一了所有事件的处理方法
• 最现代的方式，兼容zepto,强烈建议使用

on注册简单事件

//表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定
$(selector).on('click',function(){});

on注册事件委托

//表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on('click','span',function(){});

$('body').on('click','div,span',function(){    // 事件名称，要触发这个事件的子元素，事件处理程序
    console.log("单击事件。")；
});

事件委托原理

//事件委托原理
var ul = document.querySelector('#url');
ul.onclick = function(e){
    
    if(e.target.tagName.toLowerCase() === 'li'){
        console.log(e.target);
    }
}

事件解绑

• off方式（推荐）

//解绑匹配元素的所有事件
$(selector).off();
//解绑匹配元素的所有click事件
$(selector).off('click');

触发事件

$(selector).click(); //触发click事件
$(selector).trigger('click');

//事件触发 trigger
//a.代码的方式来触发事件
//b.可以使用他来触发自定义事件


***********************
    //给div注册一个自定义事件
     $('#one').on('linge',function(){
    	console.log("啦啦啦，我是林哥事件")；
});
    
    $('#one').on('click',function(){
    var res = confirm('请问林哥帅吗')；
    if(res){
        //触发自定义的linge事件。
        $('#one').trigger('linge'); 
    }
});

jQuery事件对象

• jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性

//screenX和screenY	触发事件哪一点 距离应屏幕最左上角的值
//clientX和clientY	触发事件哪一点 距离页面左上角的位置（忽视滚动条）
//pageX和pageY		触发事件哪一点 距离页面最顶部的左上角的位置（会计算滚动条的距离）


//event.stopPropagation()	阻止事件冒泡行为
//event.preventDefault()	阻止浏览器默认行为	--- 比如a标签的自动跳转
//return false：既能阻止事件冒泡，又能阻止浏览器默认行为

//event.keyCode		按下的键盘代码


1.什么是事件对象
	注册一个事件，系统就会帮我们生成一个对象记录这个事件触发时候的一些信息，比如触发事件的时候有没有按住某个键，再比如触发这个事件的时候的一些坐标信息..
   jQuery的事件对象是对原生js对象的一个封装，帮你处理好了兼容性。

    --- jQuery中用事件参数e来获取 ---
        
        $('#one').on('click',function(e){
        
    });
//阻止事件冒泡行为 --- 给父元素一个事件，再给子元素一个事件。一般来说，待触发子元素的事件执行完毕之后会接着执行父元素的触发事件。如果不想这样，则需阻止事件冒泡行为
		$('#one').on('click',function(){ 	//父元素事件
        	alert('我是父元素')；
    });
		$('#btn1').on('click',function(e){ 	//父元素事件
        	alert('我是子元素')；
            e.stopPropagation(); //阻止事件冒泡
    });

jQuery补充知识点

---

链式编程

• 通常情况下，只有设置操作才能把链式编程延续下去，因为获取操作的时候，会返回获取到的相应值，无法返回jQuery对象

end();	//筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。**************************************************************************************
1.Q：什么时候可以链式编程？
	如果给元素调用一个方法，这个方法有返回值，并且返回值是一个jQuery对象，那就可以继续再调用jQuery方法。

2.必须是jQuery对象才能调用出jQuery方法

3.有些时候我们一个方法返回的确实是一个jQuery对象，但是这个对象又不是我们想要的对象，那这个时候就不要再继续点下去了。

4.end(); --- 回到上一个状态

5.end（）方法也是jQuery方法，那他也需要一个jQuery对象才能点出来。
**************************************************************************************

each方法

• jQuery发隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值时候，就需要自己进行迭代了

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

//参数1：当前元素在所有匹配元素中的索引号
//参数2：表示当前元素（DOM对象）
$(selector).each(function(index,element){});

案例：迭代

多库共存

• jQuery使用作为标示符，但是如果与其他框架中的冲突时，jQuery可以释放$符的控制权

var c = $.noConflict();	//释放$的控制权，并且把$的能力给了c

1.如何查看jQuery的版本？

console.log(jQuery.fn.jquery) ;

console.log(jQuery.prototype.jquery) ;

console.log($.fn.jquery) ;

console.log($.prototype.jquery) ;

2.如果引入了多个jQuery文件，那$使用的是哪一个jQuery文件中的呢？

​ 哪个文件后引入，使用的$就是哪个的

3.多库共存

$.noConflict();//把$符号的控制权给释放了

var _$ = $.noConflict();

$.noConflict(); 	//3.0.0版本jQuery文件把$符号的控制权给释放了

console.log(jQuery.fn.jquery) ;	//3.0.0
console.log($.fn.jquery) ;	//1.12.4

var _$ = $.noConflict();
console.log(_$.fn.jquery) ;		//3.0.0

(function($){
    //在这个自执行函数中，就可以继续使用$了
    
}(_$));

插件

常用插件

插件：jquery不可能包含所有的功能，我们可以通过插件扩展jquery的功能。

jQuery有着丰富的插件，使用这些插件能给jQuery提供一些额外的功能。

jquery.color.js

animate不支持颜色的渐变，但是使用了jquery.color.js后，就可以支持颜色的渐变了。

使用插件的步骤

1. 引入jQuery文件
2. 引入插件（如果有用到css的话，需要引入css）
3. 使用插件

jquery.lazyload.js

懒加载插件

jquery.ui.js插件

jQueryUI专指由jQuery官方维护的UI方向的插件。

官方API：http://api.jqueryui.com/category/all/

其他教程：jQueryUI教程

基本使用:

2.	1.	引入jQueryUI的样式文件
2.	引入jQuery
3.	引入jQueryUI的js文件
4.	使用jQueryUI功能

使用jquery.ui.js实现新闻模块的案例

制作jquery插件

原理：jquery插件其实说白了就是给jquery对象增加一个新的方法，让jquery对象拥有某一个功能。

//通过给$.fn添加方法就能够扩展jquery对象
$.fn. pluginName = function() {};

制作手风琴插件