jQuery框架简单介绍

痛定思痛。 2022-05-18 01:42 304阅读 0赞

*  jQuery框架介绍
    
     *  1. jQuery框架与javaScript之间的有什么关系？
     *  2. jQuery与原生javaSript对比，有什么优点？
     *  3. jQuery与javaScript之间的区别是什么？
        
         *  3.1 为什么要使用入口函数？
     *  4. 如何引入jquery文件？
     *  5. jquery中的选择器
        
         *  5.1 基本选择器
         *  5.2 层级选择器
         *  5.3 基本过滤选择器
         *  5.4 属性选择器
         *  5.5 筛选选择器
     *  6. jQuery和DOM对象转换
        
         *  6.1 DOM对象转jQuery对象
         *  6.2 jQuery对象转换为DOM对象
     *  7. jQuery效果函数
        
         *  7.1 显示隐藏动画
            
             *  7.11 show,hide,toggle
             *  7.12 slideDown,slideUp,slideToggle
             *  7.13 fadeIn,fadeOut,fadeTo,fadeToggle
             *  7.14 这几组有什么区别呢？
             *  7.15 其他函数
         *  7.2 创建自定义动画animate函数
            
             *  animate(params,speed,callback)
             *  stop(clearQueue,gotoEnd)
             *  delay(speed)
     *  8. jQuery属性操作
        
         *  8.1 html属性操作
            
             *  attr()
             *  removeAttr()
         *  8.2 dom属性操作
            
             *  prop()
             *  removeProp
         *  8.3 类样式操作
            
             *  addClass()
             *  removeClass()
             *  toggleClass()
         *  attr()和使ddClass()加入一个类属性有什么区别?
         *  8.4 值操作
            
             *  html()
             *  text()
         *  html()和text()有什么区别？
            
             *  val()
     *  9. jQuery文档操作
        
         *  9.1 插入操作
         *  9.2 复制操作
         *  9.3 替换操作
         *  9.3删除操作
     *  10. jquery中的css
        
         *  scroll()
     *  11.jquery事件
        
         *  11.1 什么是事件流？
            
             *  DOM事件流
             *  document,document.documentElement,document.document.body关系
             *  事件流过程分析
         *  11.2 事件属性
         *  11.3 事件冒泡
            
             *  阻止冒泡stopPropagation()
             *  阻止默认事件preventDefault()
         *  11.4 jquery常用事件
            
             *  jquery事件绑定bind()
             *  绑定自定义事件
             *  事件代理on()
             *  移除事件unbind()
             *  合成事件
         *  11.5 鼠标事件
            
             *  click()和dblClick()
             *  mouseover()/mouseout()和mouseenter()/mouseleave()区别？
             *  mousemove()用途
         *  11.6 表单事件
     *  12. jquery中ajax技术(简介)
        
         *  什么是ajax？
         *  jquery的load()方法
         *  jquery的getJSON()方法
         *  jquery的$.get()方法
         *  jquery的post()方法
         *  jquery的ajax方法

# jQuery框架介绍 #

## 1. jQuery框架与javaScript之间的有什么关系？ ##

javaSript是一门编程语言，jQuery是javaSript中的一个库，jquery是JavaScript中的一个子集。通过使用jQuery框架中的一些接口，我们可以更方便的实现一些网页操作。比起直接使用原生接口，jQuery框架优点多多。

## 2. jQuery与原生javaSript对比，有什么优点？ ##

原生js代码繁琐，代码量大，实现动画复杂。

## 3. jQuery与javaScript之间的区别是什么？ ##

*  **编写个数不同**：`window.onload()`函数只能在JavaScript中使用一次，但是`$(document).ready()`可以出现多次。（这两个函数都是用来表示等页面加载完成后，使用JavaScript脚本命令）
 *  **jquery有简化写法**：`$(document).ready()`可以简化写为`$(function(){})`
 *  **执行时间不同**：window.onload()必须等到页面加载完成后才能执行，`$(document).ready()`在DOM树构建完成后就可以执行

文档加载步骤如下：  
1. 解析HTML结构  
2. 加载外部脚本和样式表文件  
3. 解析并执行脚本代码  
4. DOM树构建完成  
5. 加载图片等外部文件  
6. 页面加载完成

### 3.1 为什么要使用入口函数？ ###

使用`window.onload`或者是`$(document).ready()`可以使我们的代码放在html任意位置都会等待页面加载完成后再被调用。如果不使用该函数，代码块正好放在head标签中，那么页面还没有加载完，就会调用js脚本。

## 4. 如何引入jquery文件？ ##

我们从[jquery][]官网下载好jquery文件，然后通过外部样式引入这个库文件就可以在js脚本中使用。  
示例：`<script src="jquery-3.3.1.js"></script>`

## 5. jquery中的选择器 ##

jquery选择器的语法和css选择器语法一样

### 5.1 基本选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>示例</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>id选择器</td> 
   <td><code>$('#wrapper')</code></td> 
   <td>选择指定id的标签</td> 
  </tr> 
  <tr> 
   <td>类选择器</td> 
   <td><code>$('.box')</code></td> 
   <td>选择class的标签</td> 
  </tr> 
  <tr> 
   <td>标签选择器</td> 
   <td><code>$('ul')</code></td> 
   <td>选择指定的标签</td> 
  </tr> 
  <tr> 
   <td>通配符选择器</td> 
   <td><code>$('*')</code></td> 
   <td>选择所有标签</td> 
  </tr> 
 </tbody> 
</table>

### 5.2 层级选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>示例</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>后代选择器</td> 
   <td><code>$('div p')</code></td> 
   <td>选择<code>div</code>下所有<code>p</code></td> 
  </tr> 
  <tr> 
   <td>子代选择器</td> 
   <td><code>$('div&gt;p')</code></td> 
   <td>选择<code>div</code>的儿子中的<code>p</code></td> 
  </tr> 
  <tr> 
   <td>毗邻选择器</td> 
   <td><code>$('div+p')</code></td> 
   <td>选择<code>div</code>同级后面紧贴着的<code>p</code></td> 
  </tr> 
  <tr> 
   <td>兄弟选择器</td> 
   <td><code>$('div~p')</code></td> 
   <td>选择<code>div</code>同级后面所有的<code>p</code></td> 
  </tr> 
 </tbody> 
</table>

### 5.3 基本过滤选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>示例</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>:first</code></td> 
   <td><code>$('li:first')</code></td> 
   <td>获取第一个<code>li</code>标签</td> 
  </tr> 
  <tr> 
   <td><code>:last</code></td> 
   <td><code>$('li:last')</code></td> 
   <td>获取最后一个<code>li</code>标签</td> 
  </tr> 
  <tr> 
   <td><code>:odd</code></td> 
   <td><code>$('li:odd')</code></td> 
   <td>获取索引为奇数的<code>li</code>标签</td> 
  </tr> 
  <tr> 
   <td><code>even</code></td> 
   <td><code>$('li:even')</code></td> 
   <td>获取索引为偶数的<code>li</code>标签</td> 
  </tr> 
  <tr> 
   <td><code>eq(index)</code></td> 
   <td><code>$('li:eq(1))</code></td> 
   <td>获取索引为index的<code>li</code>标签</td> 
  </tr> 
  <tr> 
   <td><code>gt(index)</code></td> 
   <td><code>$('li:gt(1))</code></td> 
   <td>获取索引大于index的<code>li</code>标签</td> 
  </tr> 
  <tr> 
   <td><code>lt(index)</code></td> 
   <td><code>$('li:lt(1))</code></td> 
   <td>获取索引小于index的<code>li</code>标签</td> 
  </tr> 
 </tbody> 
</table>

### 5.4 属性选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>示例</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>标签[属性名]</td> 
   <td><code>$('p[class]')</code></td> 
   <td>获取所有含该属性的元素</td> 
  </tr> 
  <tr> 
   <td>标签[属性名=值]</td> 
   <td><code>$('p[class=what]')</code></td> 
   <td>获取特定属性是某个特定值的元素</td> 
  </tr> 
  <tr> 
   <td>标签[属性名^=值]</td> 
   <td><code>$('p[class^=what]')</code></td> 
   <td>获取特定属性是以某个特定值开头</td> 
  </tr> 
  <tr> 
   <td>标签[属性名!=值]</td> 
   <td><code>$('p[class!=what]')</code></td> 
   <td>获取特定属性不是某个特定值、或者不包含该属性的元素</td> 
  </tr> 
  <tr> 
   <td>标签[属性名$=值]</td> 
   <td><code>$('p[class$=name]')</code></td> 
   <td>获取特定属性以特定值结尾的元素</td> 
  </tr> 
  <tr> 
   <td>标签[属性名*=值]</td> 
   <td><code>$('p[class *='name']')</code></td> 
   <td>获取特定属性中包含特定值的元素</td> 
  </tr> 
 </tbody> 
</table>

### 5.5 筛选选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>示例</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>.eq(index)</td> 
   <td><code>$('li').eq(1)</code></td> 
   <td>获取索引为1的<code>li</code>元素</td> 
  </tr> 
  <tr> 
   <td>.first()</td> 
   <td><code>$('li').first()</code></td> 
   <td>获取第一个<code>li</code>元素</td> 
  </tr> 
  <tr> 
   <td>.last()</td> 
   <td><code>$('li').last()</code></td> 
   <td>获取最后一个<code>li</code>元素</td> 
  </tr> 
  <tr> 
   <td>.parent()</td> 
   <td><code>$('span').parent('.p1')</code></td> 
   <td>选择父亲元素</td> 
  </tr> 
  <tr> 
   <td>.siblings()</td> 
   <td><code>$('.list').sibling('li')</code></td> 
   <td>查找所有兄弟元素</td> 
  </tr> 
  <tr> 
   <td>.find()</td> 
   <td><code>$('div').find('button')</code></td> 
   <td>查找所有后代元素</td> 
  </tr> 
  <tr> 
   <td>.hasClass()</td> 
   <td><code>$('div').hasClass('button')</code></td> 
   <td>是否含有某一标签,返回布尔值(true/false)</td> 
  </tr> 
  <tr> 
   <td>.children()</td> 
   <td><code>$('div').children('button')</code></td> 
   <td>获取匹配元素的子元素集合</td> 
  </tr> 
  <tr> 
   <td>.prev()</td> 
   <td><code>$('div').prev('button')</code></td> 
   <td>获取匹配元素同级的前一个元素</td> 
  </tr> 
  <tr> 
   <td>.prevAll()</td> 
   <td><code>$('button').prevAll('div')</code></td> 
   <td>查找当前元素之前的所有同辈元素</td> 
  </tr> 
 </tbody> 
</table>

## 6. jQuery和DOM对象转换 ##

### 6.1 DOM对象转jQuery对象 ###

直接使用`$(DOM对象)`  
示例:

var oDiv = document.getElementsByTag('div');
    $(oDiv) //即转换成jQuery对象

### 6.2 jQuery对象转换为DOM对象 ###

示例:  
`$('div')[0]`或者`$('div').get(0)`即可将jquery对象转换为DOM对象

## 7. jQuery效果函数 ##

### 7.1 显示隐藏动画 ###

#### 7.11 show,hide,toggle ####

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>show(speed,callback)</td> 
   <td>显示标签(向下,向右增大)</td> 
  </tr> 
  <tr> 
   <td>hide(speed,callback)</td> 
   <td>隐藏标签(向上,向左减小)</td> 
  </tr> 
  <tr> 
   <td>toggle(speed,callback)</td> 
   <td>显示隐藏开关，如果标签可见,则隐藏标签；反之标签不可见,则显示标签</td> 
  </tr> 
 </tbody> 
</table>

注意：`speed`参数是控制标签显示/隐藏的速度，可选`slow`,`normal`,`fast`或者直接输入以毫秒为单位的数字；`callback`是回调函数，执行完动画，调用的函数。`toggle`只能控制标签的显隐,不能使用回调函数。

#### 7.12 slideDown,slideUp,slideToggle ####

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>slideDown(speed,callback)</td> 
   <td>显示标签(向下增大)</td> 
  </tr> 
  <tr> 
   <td>slideUp(speed,callback)</td> 
   <td>隐藏标签(向上减小)</td> 
  </tr> 
  <tr> 
   <td>slideToggle(speed,callback)</td> 
   <td>显示隐藏开关，如果标签可见,则隐藏标签；反之标签不可见,则显示标签</td> 
  </tr> 
 </tbody> 
</table>

#### 7.13 fadeIn,fadeOut,fadeTo,fadeToggle ####

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>fadeIn(speed,callback)</td> 
   <td>显示标签(淡入)</td> 
  </tr> 
  <tr> 
   <td>fadeOut(speed,callback)</td> 
   <td>隐藏标签(淡出)</td> 
  </tr> 
  <tr> 
   <td>fadeTo(speed,opacity,callback)</td> 
   <td>调整到指定不透明度</td> 
  </tr> 
  <tr> 
   <td>fadeToggle(speed,callback)</td> 
   <td>开关控制淡入淡出</td> 
  </tr> 
 </tbody> 
</table>

#### 7.14 这几组有什么区别呢？ ####

首先,三组都是通过控件的`display`属性来达到控制显隐的效果。show,slide,这两组都是通过控制标签的`width`和`height`来达到动画效果，fadeIn通过控制`opacity`不透明度来达到动画的效果。

#### 7.15 其他函数 ####

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>click(function)</td> 
   <td>添加标签单击事件</td> 
  </tr> 
  <tr> 
   <td>hove(function1,function2)</td> 
   <td>添加鼠标悬浮标签事件，function1代表鼠标悬浮执行时间，function2代表鼠标离开标签事件。等同于mouseenter和mouseleave合集</td> 
  </tr> 
  <tr> 
   <td>mouseover(function)</td> 
   <td>鼠标移上去时候</td> 
  </tr> 
  <tr> 
   <td>mouseout(function)</td> 
   <td>鼠标移出时</td> 
  </tr> 
  <tr> 
   <td>mouseenter(function)</td> 
   <td>鼠标移入时</td> 
  </tr> 
  <tr> 
   <td>mouseleave(function)</td> 
   <td>鼠标移除时</td> 
  </tr> 
 </tbody> 
</table>

### 7.2 创建自定义动画animate函数 ###

#### animate(params,speed,callback) ####

用于创建自定义动画函数  
示例:`$('#he').animate({left:'300px'})`  
注意：params:动画终值属性集合(用大括号括起来),speed动画速度，callback回调函数。

#### stop(clearQueue,gotoEnd) ####

停止在指定元素上正在运行的动画  
示例:`$('#he').stop();`  
注意:clearQueue为true清空队列，立即结束动画;  
gotoEnd让当前正在执行的动画立即完成，并且重设show和hide的原始样式，调用回调函数等

#### delay(speed) ####

用来做延迟操作,传入毫秒数  
示例:`$('#he').animate({left:'800px'},2000).delay(1000).animate({top:'300px'});`

**注意:这些函数都可以通过点.连接起来，按顺序调用，这种调用方式称之为链式调用**

## 8. jQuery属性操作 ##

jQuery属性操作模块分为四部分:html属性操作、DOM属性操作、类样式操作、值属性操作。

### 8.1 html属性操作 ###

#### attr() ####

可以获取或修改html标签属性

**获取值**  
传入一个需要获取的属性参数  
示例:`$('div').attr('id')`

**设置值**  
传入两个参数设置一个值，或者设置多个值将多个键值对由大括号括起来当一个参数传入  
示例一:`$('#box').attr('class','wrapper');`  
示例二：`$('#box').attr({'class':'123','name':'aaa'});`  
注意：在示例二中，大括号括起来的键值对，键可以不用引号引起来，值必须有引号引起来

#### removeAttr() ####

删除匹配元素一个指定的属性  
示例:`$('p').removeAttr('id');`

### 8.2 dom属性操作 ###

#### prop() ####

可以获取或修改DOM属性，用法等同于attr()

**获取值**  
示例:`$('p').prop('name');`

**设置值**  
示例一:`$('p').prop('name',2);`  
示例二:`$('p').prop({'name':2})`

#### removeProp ####

示例:`$('p').removeProp('name')`

### 8.3 类样式操作 ###

#### addClass() ####

为每个元素添加指定的类名,若要添加多个类名用空格隔开  
示例一:`$('#he').addClass('wrapper');`  
示例二:`$('#he').addClass('wrapper1 box2')`

#### removeClass() ####

从所匹配的元素中删除全部或指定的类  
示例一:`$('#he').removeClass('wrapper1')` 删除`wrapper1`  
示例二:`$('#he').removeClass();` 删除全部类

#### toggleClass() ####

开关,若该标签有这个类就删除，没有则添加这个类  
示例一:`$('#he').toggleClass('changeColor');`

### attr()和使ddClass()加入一个类属性有什么区别? ###

使用attr()设置类时,不能追加类属性，只会覆盖掉原来的类属性；使用addClass()会在不改变原来类的基础上添加一个类，删除类同理;

### 8.4 值操作 ###

#### html() ####

获取或设置选中标签的内容,设置值时将会被解析为HTML语言

**获取值**  
示例:`$('p').html()`

**设置值**  
示例:`$('p').html('<a href="#">what</a> fk?')`

#### text() ####

获取或设置元素中包括文本的内容，设置时仅会被解析为纯文本

**获取值**  
示例:`$('p').text()`

**设置值**  
示例:`$('p').text('what fk?')`

### html()和text()有什么区别？ ###

在获取值时,html()会将内容中标签读出来，而text()会忽视标签，读取纯文本;  
例如:`p`标签中文本为`<span>12</span>34`，html()读出来的效果是`<span>12</span>34`,而text()读出来的效果是`1234`  
在设置值时,html()会将字符串解析为html语言,然后显示出来,而text()仅仅将其解析为纯文本显示;  
例如:同样设置`'<a href="#">what</a> fk?'`这一段内容,html()显示出来的是带有超链接的what fk,而text()显示出来的是`'<a href="#">what</a> fk?'`  
也就是说:值中含有标签时，text()不会渲染出标签元素,只会将标签代码原封不动的显示出来

#### val() ####

见[关于input的value用法][input_value]

## 9. jQuery文档操作 ##

### 9.1 插入操作 ###

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>使用方法</th> 
   <th>示例</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>append()</td> 
   <td>父元素.append(子元素)</td> 
   <td><code>$('div').append('&lt;a href="#"&gt;百度&lt;/a&gt;')</code></td> 
   <td>在父元素里面<strong>追加</strong>子元素标签</td> 
  </tr> 
  <tr> 
   <td>appendTo()</td> 
   <td>子元素.appendTo(父元素)</td> 
   <td><code>$('&lt;a href="#"&gt;新浪&lt;/a&gt;').appendTo($('div'))</code></td> 
   <td>在父元素里面<strong>追加</strong>子元素标签</td> 
  </tr> 
  <tr> 
   <td>prepend()</td> 
   <td>父元素.prepend(子元素)</td> 
   <td><code>$('ul').prepend("&lt;li&gt;我是谁？&lt;/li&gt;")</code></td> 
   <td>将子元素标签追加到父元素内的<strong>第一个位置</strong></td> 
  </tr> 
  <tr> 
   <td>prependTo()</td> 
   <td>父元素.prependTo(父元素)</td> 
   <td><code>$('p').prependTo($('ul'));</code></td> 
   <td>将子元素标签追加到父元素内的<strong>第一个位置</strong></td> 
  </tr> 
  <tr> 
   <td>after()</td> 
   <td>父元素.after(子元素)</td> 
   <td><code>$('p').after($('ul'));</code></td> 
   <td>在父元素的<strong>后面</strong>插入子元素</td> 
  </tr> 
  <tr> 
   <td>insertAfter()</td> 
   <td>父元素.insertAfter(父元素)</td> 
   <td><code>$('p').insertAfter($('ul'));</code></td> 
   <td>在父元素的<strong>后面</strong>插入子元素</td> 
  </tr> 
  <tr> 
   <td>before()</td> 
   <td>父元素.before(子元素)</td> 
   <td><code>$('p').before($('ul'));</code></td> 
   <td>在父元素的<strong>前面</strong>插入子元素</td> 
  </tr> 
  <tr> 
   <td>insertBefore()</td> 
   <td>父元素.insertBefore(父元素)</td> 
   <td><code>$('p').insertBefore($('ul'));</code></td> 
   <td>在父元素的<strong>前面</strong>插入子元素</td> 
  </tr> 
 </tbody> 
</table>

**注意**:  
1. 他是jQuery方法,所有调用时务必保证转换为jquery对象$()  
2. 父元素是jquery对象，子元素可以使字符串,DOM对象,jquery元素  
3. append()和appendTo()方法就父子元素位置不同，功能相同。  
4. 如果子元素是页面上某个标签,则相当于移动操作

### 9.2 复制操作 ###

**clone()**  
克隆匹配这些DOM元素，并选中这些克隆的副本。  
可以传入一个布尔值,为true时，将该标签的事件也克隆（默认不克隆）  
示例:`$('#btn3').clone(true).insertAfter($('p'));`

### 9.3 替换操作 ###

**replaceWith()**  
选择器.repalceWith(内容)  
示例：`$('#btn').replaceWith("<a href='#'>我是替换后的标签</a>>");`  
注意:内容替换选择器，内容可以是DOM,jquery,字符串。

**replaceAll()**  
内容.replaceAll(选择器)  
示例:`$('p').replaceAll($('ul'));`

注意:这两个函数区别只是内容和选择器位置不同

### 9.3删除操作 ###

**empty()** 清空  
清空被选元素的内容  
示例：`$('ul').empty()` 会清空ul中所有内容（相当于html(”)）

**remove()** 删除  
会删除被选元素，事件也没了  
示例：`$('ul').remove()` 会删除ul标签和标签的内容

**detach()** 删除并返回  
会删除被选元素，但是会返回删除的元素，事件会保留  
示例：`var $btn = $('button').detach()` 将页面上的button全部删除，返回给变量btn

## 10. jquery中的css ##

<table> 
 <thead> 
  <tr> 
   <th>函数名</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>position()</td> 
   <td>获取匹配元素相对于父元素的偏移位置,返回一个对象,对象中有left，top两个属性</td> 
  </tr> 
  <tr> 
   <td>offset()</td> 
   <td>获取匹配元素相对于浏览器左上角偏移位置,同样有left,top两个属性</td> 
  </tr> 
  <tr> 
   <td>scrollTop()</td> 
   <td>获取元素相对于滚动条顶部的偏移像素值</td> 
  </tr> 
  <tr> 
   <td>scrollLeft()</td> 
   <td>获取元素相对于滚动条左侧的偏移像素值</td> 
  </tr> 
  <tr> 
   <td>innerHeight()</td> 
   <td>获取内部区域高度(内容高+padding)</td> 
  </tr> 
  <tr> 
   <td>innerWidth()</td> 
   <td>获取内部区域宽(内容宽+padding)</td> 
  </tr> 
  <tr> 
   <td>outHeight()</td> 
   <td>获取外部区域高(内容高+padding+border)</td> 
  </tr> 
  <tr> 
   <td>outWidth()</td> 
   <td>获取外部区域宽(内容宽+padding+border)</td> 
  </tr> 
  <tr> 
   <td>width()</td> 
   <td>获取或设置内容宽</td> 
  </tr> 
  <tr> 
   <td>height()</td> 
   <td>获取或这是内容高</td> 
  </tr> 
 </tbody> 
</table>

### scroll() ###

当元素滚动时,调用的方法  
示例:

$(function () { 
        $(document).scroll(function () { 
                console.log($(document).scrollTop());
                console.log($(document).scrollLeft());
        });

获取浏览器滚动时的top和left  
在DOM中用onScroll(),在jquery中用scroll()方法监听滚动条。

## 11.jquery事件 ##

HTML中与JavaScript交互是通过事件来交互的。

### 11.1 什么是事件流？ ###

事件流就是从页面中接受事件的顺序

#### DOM事件流 ####

DOM2级事件流包括三个阶段  
1. 事件捕获阶段  
2. 处于目标阶段  
3. 事件冒泡阶段

addEventListener()  
DOM事件监听器  
参数一事件名，参数二function，参数三bool值（捕获阶段为true,冒泡阶段为false）

#### document,document.documentElement,document.document.body关系 ####

document代表整个html  
document.documentElement代表`<html>`标签  
document.document.body代表`<body>`标签

#### 事件流过程分析 ####

例如一个id为btn的按钮设置click事件，document对象首先接受到click事件，然后按照dom树依次传到btn。而事件冒泡过程是由具体元素接受，向上传到document。

### 11.2 事件属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>e.type</td> 
   <td>获取事件的类型</td> 
  </tr> 
  <tr> 
   <td>e.target</td> 
   <td>获取事件发生的DOM对象</td> 
  </tr> 
  <tr> 
   <td>e.pageX和e.pageY</td> 
   <td>获取光标相对页面的x的坐标和y的坐标</td> 
  </tr> 
  <tr> 
   <td>e.which</td> 
   <td>获取事件的左中右键，键盘事件获取键盘按键</td> 
  </tr> 
 </tbody> 
</table>

示例:

$("#btn").click(function (e) {
        console.log("type:"+e.type);
        console.log("target:"+ e.target);
        console.log("page.x:"+ e.pageX+" page.y:"+ e.pageY);
        console.log("which:"+ e.which);
    });

显示结果：

type:click
    target:[object HTMLButtonElement]
    page.x:42  page.y:233
    which:1

### 11.3 事件冒泡 ###

jquery不支持事件捕获  
一般来说父子盒子都设置一个click事件,单击子盒子事件,则父子两个盒子事件一起触发。

#### 阻止冒泡stopPropagation() ####

原因:子盒子处于click冒泡阶段后,父盒子随之也处于click冒泡阶段,由内而外,最终传到DOM.  
解决办法:阻止事件冒泡。阻止子盒子事件冒泡，父盒子就接受不到冒泡,即只触发子盒子事件。  
示例:

$('#box #p1').click(function (e) { 
        e.stopPropagation();
        console.log('我是p标签');
    });
    $('#box').click(function () { 
        console.log('我是div标签');
    })

#### 阻止默认事件preventDefault() ####

像超链接a标签，都有默认click事件，form表单的submit有默认submit事件。  
示例:

<--标签内容-->
    <a href="https://www.baidu.com">我是一个超链接</a>   
    //jquery内容  
    $('a').click(function (e) {
        e.preventDefault();
    })

即便我们给`a`标签设置了链接，由于我们在click事件中设置了阻止默认事件，导致`a`标签不能跳转。

综上，还有另一种方法既可以阻止默认事件，也可以阻止冒泡  
示例:

$('#p1 a').click(function (e) { 
        return false;
    })

通过`return false`即可

### 11.4 jquery常用事件 ###

#### jquery事件绑定bind() ####

将元素和事件绑定时，有`bind()`,`on()`两种方法

**bind()**  
示例一:`$('#box').bind('click',function(){})`

绑定多个事件时，事件之间用空格隔开  
示例二:

$(".box").bind('click mouseleave', function () { 
        alert("已经绑定了好几个事件")
    })

绑定多个不同的事件时，可以使用键值对的方式  
示例三:

$(".box").bind({
       'click':sayhi,'mouseout':sayhello});
    function sayhi(){ 
        alert('hi');
    }
    function sayhello(){ 
        alert('hello');
    }

#### 绑定自定义事件 ####

示例:

$('.box').bind('myHover', function (e) { 
         alert('看看这就执行了');
    });
     $('.box').trigger('myHover');

注意:  
1. 自定义事件不能自动触发，只有使用`trigger()`方法时才能触发。  
2. `trigger()`方法第二个参数是一个参数数组,传入参数后,自定义事件方法就必须要用相应数目的形参来接受  
3. 绑定事件仅对该行代码前面的元素有效，后面新加入的元素不会触发该绑定事件。举一个例子，若在代码后父盒子中添加一个子盒子，父盒子事件对子盒子无效。也就是说动态生成的元素不能直接添加对象里面的时间也不能发生。

#### 事件代理on() ####

**on()**  
既然子盒子做不了，将事件交给父盒子取做。  
语法:父标签.on(“事件名”,”需要绑定的选择器”,fn回调函数);  
示例:

$('ul').on("click","li", function () { 
                console.log($(this).index());
    });
    $("ul").append("<li>我是动态创建的元素</li>")

#### 移除事件unbind() ####

unbind()传入需要移除的事件名,不传入参数时，移除所有事件  
示例:`$("#box").unbind("mouseout");`  
只能移除bind()绑定的对象

#### 合成事件 ####

例如：`hover()`事件是由`mouseenter()`和`mouseleave`事件合成的  
hover()第一个参数移入函数，第二个移出函数

### 11.5 鼠标事件 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>click()</td> 
   <td>单击事件</td> 
  </tr> 
  <tr> 
   <td>dblclick()</td> 
   <td>双击事件</td> 
  </tr> 
  <tr> 
   <td>mousedown()/up()</td> 
   <td>鼠标按下/弹起触发事件</td> 
  </tr> 
  <tr> 
   <td>mousemove()</td> 
   <td>鼠标移动事件</td> 
  </tr> 
  <tr> 
   <td>mouseover()/out()</td> 
   <td>鼠标移入/移出</td> 
  </tr> 
  <tr> 
   <td>mouseenter()/leave()</td> 
   <td>鼠标进入/离开触发事件</td> 
  </tr> 
  <tr> 
   <td>focus()/blur()</td> 
   <td>鼠标聚焦/失去焦点触发事件</td> 
  </tr> 
  <tr> 
   <td>keydown()/up</td> 
   <td>键盘按下/弹起事件</td> 
  </tr> 
 </tbody> 
</table>

#### click()和dblClick() ####

双击会触发一次双击事件和两次单击事件，所以一般不会对一个盒子既设置单击事件又设置双击事件

#### mouseover()/mouseout()和mouseenter()/mouseleave()区别？ ####

假设子盒子设置鼠标移入移出事件，mouseover()/mouseout()在父盒子子盒子之间都会触发；而mouseenter()/mouseleave()仅仅在父盒子触发。  
举一个例子：  
子盒子设置mouseover()/mouseout()，那么鼠标从父盒子移入子盒子，会触发父盒子的置mouseover()和子盒子的mouseout()。  
子盒子设置mouseenter()/mouseleave()，那么鼠标从父盒子移入子盒子，两个事件都不会触发；仅仅在鼠标移入移出父盒子会触发这两个事件。

#### mousemove()用途 ####

通常用在鼠标拖拽动作上

### 11.6 表单事件 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>功能</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>change()</td> 
   <td>表单元素发生改变时触发事件 (此事件仅限于input)</td> 
  </tr> 
  <tr> 
   <td>select()</td> 
   <td>文本元素发生改变时触发事件（仅限于input中type=text或者textarea）</td> 
  </tr> 
  <tr> 
   <td>submit()</td> 
   <td>表单元素发生改变时触发事件</td> 
  </tr> 
 </tbody> 
</table>

注意:  
1. select()方法仅对文本元素有效，对其他元素无效。在文本被选中时触发  
2. submit()事件是form表单中submit按钮的默认事件,默认提交表单。通过设置该函数，可以设置在提交前触发的事件(当然，也可以通过阻止默认提交表单事件)，该函数与服务端有很大挂钩

## 12. jquery中ajax技术(简介) ##

### 什么是ajax？ ###

AJAX = 异步的javascript和XML（Asynchronous Javascript and XML），即在不重载整个网页情况下，通过后台加载数据，将其显示在网页上。

### jquery的load()方法 ###

从服务器加载数据，并把返回的数据放入被选元素中。  
示例：`$("selector").load(url,data,callback);`  
注意：  
selector：选择器  
url：url地址  
data：键值对集合  
callback：回调函数集合  
示例:

$('#btn').click(function(){ 
        //只传一个url，表示在id为#new-projects的元素里加载index.html
        $('#new-projects').load('./index.html');
    })

### jquery的getJSON()方法 ###

异步加载json数据，并对数据进行解析，显示到页面上  
语法:`$.getJSON(url,[data],[callback])`

### jquery的$.get()方法 ###

$.get() 方法请求从服务器上请求数据  
语法:`$.get(URL,callback)`

### jquery的post()方法 ###

post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面  
语法：`$.post(URL,data,callback);`

### jquery的ajax方法 ###

`$.ajax();`  
具体参数:  
**1. url** ： 要求为String类型的参数，（默认为当前页地址）发送请求的地址。  
**2. type**:默认为get，有get和post两种方法  
3. timeout:超时时间  
4. async:默认true异步，有同步异步两种方法  
5. cache:默认true，是否从浏览器加载缓存  
**6. data**:要求为Object或String类型的参数，发送到服务器的数据。data为需要发送的值，以键值对形式。  
7. dataType:要求为string类型的参数，预期服务器返回的数据类型。作为回调函数的参数可用类型：xml，html，script，json，jsonp，text。相当于，想要什么类型数据就指定什么类型。发过来就转换成什么类型的  
8. script：返回纯文本JavaScript代码。  
9. beforeSend： 要求为Function类型的参数，发送请求前调用函数。  
**10. success**:data为成功时返回的对象，Function类型的参数。  
**11. error**:data为失败时返回的对象，Function类型的参数。

[jquery]: http://jquery.com/
[input_value]: https://blog.csdn.net/xgy123xx/article/details/81239463