学习时间：2017.3.31-2017.4.8

一、样式

1.环境搭建

进入官方网站获取，注意不同版本对浏览器的兼容性不同。在< head >标签内通过script标签引入jQuery库即可。

例如：

1	<script src="https://code.jquery.com/jquery-1.9.1.js"></script>

2.使用jQuery在页面中显示文本

$(document).ready 的作用是等页面的文档（document）中的节点都加载完毕后，再执行后续的代码，因为我们在执行代码的时候，可能会依赖页面的某一个元素，我们要确保这个元素真正的的被加载完毕后才能正确的使用。

1
2
3

$(document).ready(function() {
                  $("div").html("输入你想显示的文本。");
          });

3.jQuery对象

首先明确一点，jquery对象和DOM对象是不一样的。

通过jQuery方法包装后的对象，是一个类数组对象，它与DOM对象唯一的共同点是都能操作DOM。

通过jQuery处理DOM的操作，可以不考虑哪个DOM节点有哪些方法，也可以不关心不同浏览器的兼容性问题。使得代码更加精短。

下面是分别用jQuery和DOM方法使p元素的内容和颜色更改的方法：

<!-- 使用javascrip语法 -->
window.onload = function(){
			var p = document.getElementById('pra');
			p.innerHTML = '你想显示的文字';
			p.style.color = 'red';	
    
    <!-- 使用jQuery语法 -->
    <script type="text/javascript">
        $(document).ready(function() {
            var $p = $('#pra');
            $p.html('你想显示的文字').css('color','red');
        });

jQuery对象可以传化成DOM对象。

jQuery是一个类数组对象，而DOM对象就是一个单独的DOM元素。

知道了这一点，就可以利用数组下标的方式读取到jQuery中的DOM对象。

1
2
3

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

方法一：

1
2
3

var $div = $('div') //jQuery对象
var div = $div[0] //转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

方法二：

//jQuery对象自身提供一个.get()方法允许我们直接访问jQuery对象中相关的DOM节点，get方法中提供一个元素的索引：
var $div = $('div') //jQuery对象
var div = $div.get(0) //通过get方法，转化成DOM对象
div.style.color = 'red' //操作dom对象的属性

事实上，get方法的源码就是利用第一种方法。包装成一个get让开发者更直接方便的使用。

DOM对象转化成jQuery对象

$(参数)是一个多功能的方法，通过传递不同的参数而产生不同的作用。

如果传递给$(参数)函数的参数是一个DOM对象，jQuery方法会把这个DOM对象给包装成一个新的jQuery对象。

1
2
3

<div>元素一</div>
<div>元素二</div>
<div>元素三</div>

//通过getElementsByTagName获取到所有div节点的元素，结果是一个dom合集对象，不过这个对象是一个数组合集(3个div元素)。通过$(div)方法转化成jQuery对象，通过调用jQuery对象中的first与css方法查找第一个元素并且改变其颜色。
var div = document.getElementsByTagName('div'); //dom对象
var $div = $(div); //jQuery对象
var $first = $div.first(); //找到第一个div元素
$first.css('color', 'red'); //给第一个元素设置颜色

4.jQuery选择器

1）id选择器：用来查找ID，即元素的id属性。

1	$( "#id" )

2）类选择器：通过class样式类名来获取节点。

1	$( ".class" )

id选择器与类选择器的差别是，id选择器最快，最高效，缺点是无法重复。

3）元素选择器：根据给定标记名称选择所有元素。

1	$( "element" )

这里注意的是，标签可以是多个的，所以也可以同样得到一个集合。

4）全选择器（*选择器）

$( "*" )

如果通过原生的方法获取到对应的节点，但兼容性的问题让我们头疼。使用jQuery，让我们省了很多功夫。

5）层级选择器

对比层级选择器的区别

层级选择器之间有很多相似与不同点：

层级选择器都有一个参考节点
后代选择器包含子选择器的选择的内容
一般兄弟选择器包含相邻兄弟选择的内容
相邻兄弟选择器和一般兄弟选择器所选择到的元素，必须在同一个父元素下

让我们用一个例子来说明这些关系：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>子选择器与后代选择器</h2>
    <div class="left">
        <div class="aaron">
            <p>div下的第一个p元素</p>
        </div>
        <div class="aaron">
            <p>div下的第一个p元素</p>
        </div>
    </div>
    <div class="right">
        <div class="imooc">
            <article>
                <p>div下的article下的p元素</p>
            </article>
        </div>
        <div class="imooc">
            <article>
                <p>div下的article下的p元素</p>
            </article>
        </div>
    </div>
    <script type="text/javascript">
        //子选择器
        //$('div > p') 选择所有div元素里面的子元素P
        $('div > p').css("border", "1px groove red");
    </script>
    <script type="text/javascript">
        //后代选择器
        //$('div  p') 选择所有div元素里面的p元素
        $('div p').css("border", "1px groove blue");
    </script>
    <h2>相邻兄弟选择器与一般兄弟选择器</h2>
    <div class="bottom">
        <div>兄弟节点div, +~选择器不能向前选择</div>
        <span class="prev">选择器span元素</span>
        <div>span后第一个兄弟节点div</div>
        <div>兄弟节点div
            <div class="small">子元素div</div>
        </div>
        <span>兄弟节点span,不可选</span>
        <div>兄弟节点div</div>
    </div>
    <script type="text/javascript">
        //相邻兄弟选择器
        //选取prev后面的第一个的div兄弟节点
        $('.prev + div').css("border", "3px groove blue");
    </script>
    <script type="text/javascript">
        //一般相邻选择器
        //选取prev后面的所有的div兄弟节点
        $('.prev ~ div').css("border", "3px groove blue");
    </script>

6）基本筛选选择器：用来更快捷的找到所需的DOM元素。

基本筛选选择器

①:eq(), :lt(), :gt(), :even, :odd 用来筛选他们前面的匹配表达式的集合元素，根据之前匹配的元素在进一步筛选，注意jQuery合集都是从0开始索引
②gt是一个段落筛选，从指定索引的下一个开始，gt(1) 实际从2开始

同样让我们用一个例子来表达这些基本筛选器：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>基本筛选器</h2>
    <h3>:first/:last/:even/:odd</h3>
    <div class="left">
        <div class="div">
            <p>div:first</p>
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>:odd</p>
        </div>
        <div class="div">
            <p>:even</p>
        </div>
        <div class="div">
            <p>div:last</p>
            <p>:odd</p>
        </div>
    </div>
    <script type="text/javascript">
    //找到第一个div
    $(".div:first").css("color", "#CD00CD");
    </script>
    
    <script type="text/javascript">
    //找到最后一个div
    $(".div:last").css("color", "#CD00CD");
    </script>
    
    <script type="text/javascript">
    //:even 选择所引值为偶数的元素，从 0 开始计数
    $(".div:even").css("border", "3px groove red");
    </script>
    
    <script type="text/javascript">
    //:odd 选择所引值为奇数的元素，从 0 开始计数
    $(".div:odd").css("border", "3px groove blue");
    </script>
    
    
    <h3>:eq/:gt/:lt</h3>
    <div class="left">
        <div class="aaron">
            <p>:lt(3)</p>
        </div>
        <div class="aaron">
            <p>:lt(3)</p>
        </div>
        <div class="aaron">
            <p>:eq(2)</p>
        </div>
        <div class="aaron">
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
        <div class="aaron">
            <p>:gt(3)</p>
        </div>
    </div>
    <script type="text/javascript">
    //:eq
    //选择单个
    $(".aaron:eq(2)").css("border", "3px groove red");
    </script>
    
    <script type="text/javascript">
    //:gt 选择匹配集合中所有索引值大于给定index参数的元素
    $(".aaron:gt(3)").css("border", "3px groove blue");
    </script>
    
     <script type="text/javascript">
    //:lt 选择匹配集合中所有索引值小于给定index参数的元素
    //与:gt相反
    $(".aaron:lt(2)").css("border", "3px groove pink");
    </script>
    
    <h3>:not</h3>
    <div class="left">
        <div>
            <input type="checkbox" name="a" />
            <p>Aaron</p>
        </div>
        <div>
            <input type="checkbox" name="b" />
            <p>慕课</p>
        </div>
        <div>
            <input type="checkbox" name="c" checked="checked" />
            <p>其他</p>
        </div>
    </div>
    <script type="text/javascript">
        //:not 选择所有元素去除不匹配给定的选择器的元素
        //选中所有紧接着没有checked属性的input元素后的p元素，赋予颜色
        $("input:not(:checked) + p").css("background-color", "#CD00CD");
    </script>

7）内容筛选选择器

内容筛选选择器

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <link rel="stylesheet" href="imooc.css" type="text/css">
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <h2>内容筛选器</h2>
    <h3>:contains/:has</h3>
    <div class="left">
        <div class="div">
            <p>:contains</p>
        </div>
        <div class="div">
            <p>:contains</p>
        </div>
        <div class="div">
            <p>
                <span>:has</span>
            </p>
        </div>
        <div class="div">
            <p>:contains</p>
        </div>
    </div>
    <script type="text/javascript">
        //查找所有class='div'中DOM元素中包含"contains"的元素节点
        //并且设置颜色
        $(".div:contains(':contains')").css("color", "#CD00CD");
    </script>
    <script type="text/javascript">
        //查找所有class='div'中DOM元素中包含"span"的元素节点
        //并且设置颜色
        $(".div:has(span)").css("color", "blue");
    </script>
    <h3>:parent/:empty</h3>
    <div class="left">
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a>:parent</a>
        </div>
        <div class="aaron">
            <a></a>
        </div>
    </div>
    <script type="text/javascript">
       //选择所有包含子元素或者文本的a元素
       //增加一个蓝色的边框
       $("a:parent").css("border", "3px groove blue");
    </script>
    <script type="text/javascript">
       //找到a元素下面的所有空节点(没有子元素)
       //增加一段文本与边框
       $("a:empty").text(":empty").css("border", "3px groove red"); 
    </script>

:contains与:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素
如果:contains匹配的文本包含在元素的子元素中，同样认为是符合条件的。
:parent与:empty是相反的，两者所涉及的子元素，包括文本节点

8）可见性筛选选择器

可见性筛选选择器

要想合理使用这个选择器，首先我们要明白:hidden选择器的适用范围。

1.样式为display=none；

2.隐藏表单

3.visibility

等等。

我们有几种方式可以隐藏一个元素：

1.display的值是none；

2.type-“hidden”的表单元素；

3.宽高都显示设置为0；

4.一个祖先元素是隐藏的，该元素是不会在页面上显示；

5.visibility的值是hidden；

6.opacity的值是0。

如果元素中占据文档中一定的空间，元素就被认为是可见的。只要可见元素的宽或高大于零，就占据一定空间。例如visibility：hidden或opacity：0被认为是可见的，因为他们占用空间，只是可见性被隐藏了。另外，不在文档中的元素被认为是不可见的。

9）属性筛选选择器：基于属性来定位一个元素

属性筛选选择器在这么多属性选择器中[attr=”value”]和[attr*=”value”]是最实用的。

10）子元素筛选选择器

子元素筛选选择器不常使用。

子元素筛选选择器

:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
:last 只匹配一个单独的元素， :last-child 选择器可以匹配多个元素：即，为每个父级元素匹配最后一个子元素
如果子元素只有一个的话，:first-child与:last-child是同一个
:only-child匹配某个元素是父元素中唯一的子元素，就是说当前子元素是父元素中唯一的元素，则匹配
jQuery实现:nth-child(n)是严格来自CSS规范，所以n值是“索引”，也就是说，从1开始计数，:nth-child(index)从1开始的，而eq(index)是从0开始的
nth-child(n) 与 :nth-last-child(n) 的区别前者是从前往后计算，后者从后往前计算

11）表单元素选择器

表单元素选择器

除了input筛选选择器，几乎每个表单类别筛选器都对应一个input元素的type值。大部分表单类别筛选器可以使用属性筛选器替换。比如 $(‘:password’) == $(‘[type=password]’)

12）表单对象属性筛选选择器：对所选择的的表单元素进行筛选

表单对象属性筛选选择器

选择器适用于复选框和单选框，对于下拉框元素, 使用 :selected 选择器
在某些浏览器中，选择器:checked可能会错误选取到< option >元素，所以保险起见换用选择器input:checked，确保只会选取< input >元素

13）特殊选择器this

通过$()方法传入this，把这个this加工成jQuery对象，

1
2

this，表示当前的上下文对象是一个html对象，可以调用html对象所拥有的属性和方法。
$(this),代表的上下文对象是一个jquery的上下文对象，可以调用jQuery的方法和属性值。

5.属性与样式

1).attr()与.removeAttr()

每个元素都有一个或者多个特性，我们把这种特性称为属性，操作属性的DOM方法主要有三个:1)getAttribute方法得到元素的属性值。2）setAttribute方法建立属性值。3）removeAttribute方法删除属性值。我们在jquery里面使用两个方法来搞定这些内容以及其中蕴含的一些问题。

先让我们来介绍.attr()方法**。这个方法用于获取和设置元素属性。

获取属性的值：attr(属性名)
设置属性的值：attr(属性名，属性值)
属性的函数值：attr(属性名，函数值)
给指定元素设置多个属性值：attr(attributes)

再来介绍.removeAttr()删除方法，把需要删除的属性名作为参数填入即可。

2）.html()及.text()

这两个方法用于读取修改元素的html结构或者元素的文本内容。

.html()方法：

.html()不传入值，就是获取元素中第一个匹配元素的HTML内容。
.html(字符串) 设置每一个匹配元素的html内容。
.html(function(index,oldhtml))用来返回设置HTML内容的一个函数。

.html()方法针对的是整个HTML内容，不仅仅是文本内容。

.text()方法：

.text()得到匹配元素集合中每个元素的合并文本，包括他们的后代。
.text(字符串)用于设置匹配元素内容的文本
.text(function(index,text))用于返回设置文本内容的一个函数。

.text()结果返回一个字符串，包含所有匹配元素的合并文本。

3）.val()

这个方法主要用于处理表单元素的值，比如input，select和textarea。

.val()方法：

.val() 无参数，获取匹配的元素集合中第一个元素的当前值。
.val(value) 设置匹配的元素集合中每个元素的值。
.val(function) 一个用来返回设置值的函数。

如果通过这个方法处理select元素，当没有选项被选中时返回null。

这个方法多用来设置表单字段的值。

4）.addClass()和.removeClass()

.addClass()方法：

.addClass(className):为每个匹配元素所要增加的一个或多个样式名。
.addClass( function(index, currentClass) ) 这个函数返回一个或更多用空格隔开的要增加的样式名

这个方法不会替换一个样式类名，只能增加。

.removeClass()方法：

.removeClass( [className ] )：每个匹配元素移除的一个或多个用空格隔开的样式名
.removeClass( function(index, class) ) ：一个函数，返回一个或多个将要被移除的样式名

如果一个样式类名作为一个参数,只有这样式类会被从匹配的元素集合中删除。如果没有样式名作为参数，那么所有的样式类将被移除。

5）.toggleClass()

这个方法可以在addClass与removeClass的互斥切换。

.toggleClass( )方法：在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即：如果存在（不存在）就删除（添加）一个类

.toggleClass( className )：在匹配的元素集合中的每个元素上用来切换的一个或多个（用空格隔开）样式类名
.toggleClass( className, switch )：一个布尔值，用于判断样式是否应该被添加或移除
.toggleClass( [switch ] )：一个用来判断样式类添加还是移除的布尔值
.toggleClass( function(index, class, switch) [, switch ] )：用来返回在匹配的元素集合中的每个元素上用来切换的样式类名的一个函数。接收元素的索引位置和元素旧的样式类作为参数

注意事项：

toggleClass是一个互斥的逻辑，也就是通过判断对应的元素上是否存在指定的Class名，如果有就删除，如果没有就增加
toggleClass会保留原有的Class名后新增，通过空格隔开

6） .css()

.css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性

获取：

.css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值
.css( propertyNames )：传递一组数组，返回一个对象结果

设置：

.css(propertyName, value )：设置CSS
.css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理
.css( properties )：可以传一个对象，同时设置多个样式

注意事项：

浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px
.css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理
当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如 .css(“width”,50}) 与 .css(“width”,”50px”})一样

5.jQuery DOM

这一部分分为五个小部分。分别是DOM节点的创建，DOM节点的插入，DOM节点的删除，DOM节点的复制与替换，jQuery遍历。

1）DOM创建节点

我们创建一个节点元素时，同时包括创建该节点元素的属性和样式。

如果使用原生方法创建的话，我们需要：

创建元素：document.createElement
设置属性：setAttribute
添加文本：innerHTML
加入文档：appendChild

而使用jQuery方法只需要一条语句就够了：

1	$("<div class='right'><div class='aaron'>动态创建DIV元素节点</div></div>")

这样的优点是：

每一个元素节点不用单独创建

节点是属性不需要单独设置，而且设置的接口比较很统一

添加到指定的元素位置比较灵活

最后还有一个最重要的：浏览器兼容问题得到解决

2）DOM节点插入

1.内部插入append()与appendTo()

简单来说，为了实现把A追加到B之后，append()前面是B，后面是A。appendTo()前面是A，后面是B。

2.内部插入prepend()与prependTo()

简单来说，为了实现把A追加到B之前，prepend()前面是B，后面是A。prependTo()前面是A，后面是B。

3.DOM外部插入after()与before()

这两种方法都是用来对相对选中元素外部增加相邻兄弟节点。

4.DOM外部插入insertAfter()和insertBefor()

.before()和.insertBefore()实现同样的功能。

主要的区别是语法——内容和目标的位置。对于before()选择表达式在函数前面，内容作为参数，而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面。

.after()和.insertAfter() 实现同样的功能。

主要的不同是语法——特别是（插入）内容和目标的位置。对于after()选择表达式在函数的前面，参数是将要插入的内容。对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面。

before、after与insertBefore。insertAfter的除了目标与位置的不同外，后面的不支持多参数处理。

3）DOM节点删除

1.empty()：清空方法

这种方法和删除不太一样，因为他只能移除指定元素中的所有子节点，而这个节点本身没有被删除。

2.remove()

这种方法不仅可以移除指定元素中的所有子节点，也可以移除元素自身。并且会自动操作事件销毁方法。

除此以外，remove可以传递一个选择器表达式用来过滤将被移除的匹配元素集合，可以选择性的删除指定的节点。

3.detach()：保留数据的删除操作

这种方法不会把匹配的元素从jQuery对象中删除，仅是移除对象，所以未来可以使用这些匹配的元素。并且绑定的事件，附加的数据等都会保留下来。当append之后，又重新显示出来。

并且detach只能处理通过jQuery的方法绑定的事件或数据。

可以类比成剪切。

4）DOM节点复制与替换

1.拷贝clone()

这个方法复制所有匹配的元素集合。如果节点有事件或者数据之类的其他处理，我们需要通过clone(true)传递一个布尔值true。

类比的话，clone就是模仿了个结构，细节缺失。而clone(true)就相当于一个分身。

2.replaceWith()和replaceAll()

.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合

.replaceAll( target ) ：用集合的匹配元素替换每个目标元素

.replaceAll()和.replaceWith()功能类似，主要是目标和源的位置区别
.replaceWith()与.replaceAll() 方法会删除与节点相关联的所有数据和事件处理程序
.replaceWith()方法，和大部分其他jQuery方法一样，返回jQuery对象，所以可以和其他方法链接使用
.replaceWith()方法返回的jQuery对象引用的是替换前的节点，而不是通过replaceWith/replaceAll方法替换后的节点

3.wrap()：包裹方法

将一个元素用其他元素包裹起来，也就是给它增加一个父元素。

括号中的是用来包裹其他元素的元素，前面的是被包裹元素。

4.unwrap()：删除包裹方法

这个方法的作用与wrap方法相反。删除指定元素的父级元素。

前面是指定元素，括号内不需要参数。

5.wrapAll()：集中将元素包裹

.wrapAll( wrappingElement )：给集合中匹配的元素增加一个外面包裹HTML结构。

前面是指定的某些元素，将它们一起成为wrappingElement的子元素。

6.wraplnner()

.wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构

可以简单的理解成wrap()是穿外套，wrapInner()是穿内衣。

5）jQuery遍历

1.children()

找到它的第一级子元素。

2.find()

找到它后代中指定的元素。

3.parent()

找到它上一级的父元素。

4.parents()

找到它的祖先元素。

5.closest()

找到它本身和它的祖先元素。

它和parents的区别是：

起始位置不同：.closest开始于当前元素 .parents开始于父元素
遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象

6.next()

查找指定元素集合中每个元素紧邻的后面同辈元素的元素集合。

7.prev()

快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合。

8.add()

用来创建一个新的jQuery对象，元素添加到匹配的元素集合中。

9.each()

.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。每次回调函数执行时，会传递当前循环次数作为参数(从0开始计数).

6.jQuery事件

这部分分为鼠标事件、表单事件、键盘事件、事件的绑定和解绑、事件对象的使用和自定义事件几个部分。

1）鼠标事件

1.click和dbclick事件

点击和双击

2.mousedown和mouseup事件

鼠标按下和鼠标弹起

3.mousemove事件

鼠标移动

4.mouseover和mouseout事件

鼠标移入和鼠标移出

5.mouseenter和mouseleave事件

鼠标移到元素内部和元素外部

6.hover事件

鼠标进入元素时触发离开时执行另一个

7.focusin事件

点击聚焦

支持冒泡处理

8.focusout事件

失去聚焦

2）表单事件

1.blur和focus事件

处理焦点，不支持冒泡

2.change事件

input元素，textarea和select元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作。

3.select事件

当 textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

4.submit事件

提交表单

3）键盘事件

1.keydown()和keyup()事件

当在一个元素第一次按下键盘上字母键和松开时就会触发

2.keypress()事件

用来接收字母数字等ANSI字符。

4）事件的绑定和解绑

1.on()的多事件绑定

2.on()的高级用法

3.off()卸载事件

5）事件对象的使用

1.事件对象的作用

2.事件对象的属性和方法

6）自定义事件

1.trigger事件

根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为

2.triggerHandler事件

triggerHandler与trigger的用法是一样的，重点看不同之处：

triggerHandler不会触发浏览器的默认行为，.triggerHandler( “submit” )将不会调用表单上的.submit()
.trigger() 会影响所有与 jQuery 对象相匹配的元素，而 .triggerHandler() 仅影响第一个匹配到的元素
使用 .triggerHandler() 触发的事件，并不会在 DOM 树中向上冒泡。如果它们不是由目标元素直接触发的，那么它就不会进行任何处理
与普通的方法返回 jQuery 对象(这样就能够使用链式用法)相反，.triggerHandler() 返回最后一个处理的事件的返回值。如果没有触发任何事件，会返回 undefined

7.jQuery动画

1）隐藏和显示

1.隐藏$elem.hide()

.hide( options )

当提供hide方法一个参数时，.hide()就会成为一个动画方法。.hide()方法将会匹配元素的宽度，高度，以及不透明度，同时进行动画操作

.hide(“fast / slow”)

这是一个动画设置的快捷方式，’fast’ 和 ‘slow’ 分别代表200和600毫秒的延时，就是元素会执行200/600毫秒的动画后再隐藏

2.显示$elem.show()

使用上和hide一致，作用相反。

3.显示和隐藏切换toggle方法

如果元素是最初显示，它会被隐藏
如果隐藏的，它会显示出来

2）上卷下拉效果

1.下拉动画slideDown

对于隐藏的元素，在将其显示出来的过程中，可以对其进行一些变化的动画效果。

2.上卷动画slideUp

对于显示的元素，在将其隐藏的过程中，可以对其进行一些变化的动画效果。

3.上卷下拉切换slideToggle

3）淡入淡出效果

1.淡出动画fadeOut

设置透明度逐渐为0.

2.淡入动画fadeIn

透明度逐渐从0到1.

3.淡入淡出切换fadeToggle

4.淡入效果fadeTo

设置透明度为指定，比如0.5

4）jquery核心

1.each方法的应用

2.查找数组中的索引inArray

3.去空格神器trim方法

4.DOM元素的获取get方法

5.DOM元素的获取index方法

【jQuery】jQuery基础学习