JQuery最最最详细的第一课

一.JQuery基本介绍

   JQyery 是一种快速，简洁的Js库，提倡少写代码多做事。

1.1 JavaScript 库

     仓库： 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了。

 JavaScript库 ：是一个封装好的方法和函数。

 常见的JavaScript库

   

• Prototype:是最早成型的JS库之一，对于JS的内置对象做了大量的扩展。

• Do jo：提供了很多奇特JS库没有提供的功能。例如：离线存储的API，生成图标的组件等等。

• YUI：是由Yahoo公司开发的一套完备的，扩展性良好的富交互网页程序工作集。

• Ext JS：原本是对YUI的一个扩展，主要用于创建前端用户界面。

• Moo Tools：是一套轻量、简洁、模拟化和面向对象的JS框架。

• jQuery：同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使用它。

• 移动端的zepto

这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，我们主要学习的是 jQuery。

二. JQuery基本使用

2.1 jQuery版本

jQuery版本有很多，分别为1.x，2.x，3.x   

    

• 1.x 版本：能够兼容 IE6, 7, 8 浏览器（不再更新版本）

• 2.x 版本：不兼容 IE6, 7, 8 浏览器（不再更新版本）

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

1.x 和 2.x 版本 jquery 都不再更新版本了，现在只更新3.x版本

2.2 jQuery下载

   通过production（压缩版）和develepment（测试版）

2.3 使用 jQuery

    在页面中引入 jQuery 库

    

     在 script 标签中使用 jquery 语法即可，如：

      

Content

  2.4 jQuery 的 2 把利器

  

// jQuery核心代码
(function(window){
    var jQuery = function(){
        return new jQuery.fn.init();
    }
    window.$ = window.jQuery = jQuery
})(window)

jQuery 核心函数

简称：jQuery函数（$/jQuery），jQuery库向外直接暴露的就是$/jQuery

引入jQuery库后，直接使用即可

• 当函数用：$(xxx)

• 当对象用：$.xxx()

   

// jQuery函数：直接可用
console.log($, typeof $);  // ƒ ( selector, context ) {}    function
console.log(jQuery === $); // true

   jQuery 核心对象

得到jQuery对象：执行jQuery函数返回的就是jQuery对象

2.5 入口函数

一般代码写在页面底部，等元素加载完，才能执行 jQuery 代码，

或者可以使用下方入口函数解决

简写：

   

三、选择器

jQuery 选择器是 jQuery 为我们提供的一组方法，让我们更加方便的获取到页面中的元素

3.1 基本选择器

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

注意：jQuery选择器返回的是jQuery对象。

3.2 层级选择器

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

3.3 过滤选择器

这类选择器都带冒号:

名称	用法	描述
: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元素中，选择索引号为偶数的元素

3.4 jQuery 筛选方法

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

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

3.5 this 和 当前索引

在对象的事件中，$(this) 表示当前操作的 jQuery 对象，$(this).index() 表示当前元素的索引号

$("li").click(function () {
	console.log($(this).index());
}

排他思想 

   
   
   
   
   

    快速
    快速
    快速
    快速
    快速
    快速
    快速