jquery

Posted 2020-11-12 wangjianhua1

一. 简介

1. 什么是jQuery

1. jQuery是一个开源的、优秀的javascript函数库(js框架)，它体积小，简化了很多对html、CSS、DOM、事件、动画的处理。是对Js的封装。

2. jquery宗旨：写的更少，做的更多，吃的少，干得多。

2. jQuery优势

1. 市场占有率高，工作中用到的可能性大。

2. jquery相比其他的js库，有其鲜明的特点，方便对页面元素节点对象进行查找

3. 插件支持：时间选取器、表单验证等。

4. 完善的ajax支持

5. 高低版本兼容性好

3. jQuery下载与部署

1. 源代码下载地址：http://jquery.com/

2. 下载软件压缩包

   jQuery有两个版本，两者功能没有区别，大小的区别在于min是压缩后的代码，即把空行，空白等压缩掉，把变量名字变短。而文件比较大的没有压缩的源文件。所以在学习时，使用没有压缩的源文件，但是上线后，在线网站使用压缩版，提供下载速度。

   • jquery-1.8.3.js ：未经过压缩后的版本，具有可读性（内部有许多注释，空格，回车）

   • jquery-1.8.3.min.js ：经过压缩后的版本，代表更精简（没有空格和回车）

3. 使用jQuery

   1. 复制jquery-1.8.3.js到项目js目录中并改名为jquery.js

   2. 通过script代码中的src属性载入jquery源代码到当前页面即可

    

二. jQuery对象与DOM对象

1. jquery对象

   使用$符号选择的元素就是jquery对象。

2. dom对象

   使用document.getElementById或document.getElementsByTagName获取的对象就是dom对象

3. query对象与dom对象的关系

   jquery对象是对dom对象的重新封装，他们之间是可以相互转换的

4. jQuery对象与DOM对象相互转换

   1. jQuery转dom

      语法：
      DOM对象 = jQuery对象[下标]; 
      DOM对象 =jQuery对象.get(下标); 

   2. dom转jquery

      语法：jQuery对象 = $(DOM对象); 

 

三. 选择器

1.基本选择器

1. id ：根据元素的id属性获取指定的元素

2. element：根据元素的名称获取指定的元素

3. selector1,selector2：匹配所有满足条件的元素

4. .class：根据元素的class属性获取指定的元素

2.层级选择器

1. ancestor (空格) descendant ：选取祖先元素下的所有后代元素(祖先与后代)

2. parent > child：选择父元素下的所有子元素（父子关系）

3. prev + next：选取同级元素紧邻的下一个元素

4. prev~siblings：选取同级元素所有的同级兄弟元素

3.简单选择器

1. :first ：匹配第一个元素

2. :last ：匹配最后一个元素

3. :even：匹配所有偶数

4. :odd ：匹配所有奇数

5. :eq(index) ：匹配索引为index的元素（默认索引从0开始）

6. :gt(index)：匹配索引大于index的元素

7. :lt(index) ：匹配索引小于index的元素

8. :not(selector)：匹配除指定选择器以外的其他元素

4.内容选择器

1. :contains(text)：匹配内容包含指定文本的元素

2. :empty：匹配内容为空的元素

3. :has(selector) ：匹配具有指定选择器的元素

4. :parent：匹配具有子元素的元素（内容不为空的元素）

5.可见性选择器

1. :hidden：匹配所有隐藏元素(display:none，input type=’hidden’)

2. :visible：匹配所有可见元素(display:block)

6.属性选择器

1. [attribute] ：匹配具有指定属性的元素

2. [attribute=value]：匹配属性值等于value的元素

3. [attribute!=value] ：匹配属性值不等于value*的元素

4. [attribute^=value] ：匹配属性值以value开始的元素

5. [attribute$=value] ：匹配属性值以value结尾的元素

6. [attribute*=value] ：匹配属性值包含value的元素

7. [selectorN]：匹配包含多个属性的元素

7.子元素选择器

1. :nth-child(index/even/odd) 从1算起：匹配索引为index的指定元素

2. :first-child ：匹配第一个子元素

3. :last-child ：匹配最后一个子元素

4. :only-child：如果当前元素只有唯一子元素，则匹配

8.表单选择器

1. :input ：匹配所有表单元素

2. :text ：匹配所有文本框

3. :password：匹配所有密码框

4. :radio ：匹配所有单选按钮

5. :checkbox：匹配所有复选框

6. :submit ：匹配提交按钮

7. :reset：匹配重置按钮

8. :image：匹配图像域

9. :button：匹配按钮

10. :file：匹配文件域

11. :hidden：匹配隐藏表

9.表单属性选择器

1. :enabled ：匹配所有可用元素

2. :disabled ：匹配所有不可用元素

3. :checked ：匹配复选框单选框所有选中元素(问题多)

4. :selected ：匹配下拉选框所有选中元素

 

四. 方法

1. attr属性

1. attr(name)：获取指定元素的属性

2. attr(key,value)：设置元素的属性

3. attr(properties)：为元素同时设置多个属性，要求参数是一个json数据

4. attr(key,fn)：通过函数的返回值设置元素属性

5. removeAttr(name)：移除元素属性

2. class属性

1. addClass(class)：为元素添加class属性

2. removeClass(class)：移除元素的class属性

3. toggleClass(class)：切换样式，如果元素不存在该属性则添加，否则移除

4. hasClass(class)：判断元素是否具有某个css样 //它返回的是一个布尔

3. css方法

1. css(name)：获取元素样式属性

2. css(name,value)：设置元素样式属性

3. css(properties)：同时为元素设置多个样式属性，要求参数是一个json数据

4. offset位置

1. offset() ：获取元素的位置，返回json格式数据，带有left与top属性

2. offset(coordinates)：设置元素的位置，要求参数是一个json数据且必须要拥有left与top属性。

5. 元素尺寸

1. width()：获取元素的宽度

2. width(value)：设置元素的宽度

3. height()：获取元素的高度

4. height(value)：设置元素的高度

6. 文本域值

1. html

   1. html()：获取元素的值
   2. html(val)：设置元素的值
   ?
   相当于以前的innerHTML属性

2. text

   1. val()：获取表单元素的值
   2. val(val)：设置表单元素的值
   ?
   相当于以前的innerText属性

3. val

   1. text()：获取元素的值
   2. text(val)：设置元素的值
   ?
   相当于以前的value属性

 

五. 动画

1. 基本动画

1. show()：显示

   show(speed,[callback]) ：以动画效果显示
   ?
   参数说明：
   speed：速度（动画的持续时间）
   [callback]：可选参数，事件完成时所触发的回调函数

2. hide()：隐藏

    hide(speed,[callback]) ：以动画效果隐藏
   ?
   参数说明：
   speed：速度（动画的持续时间）
   [callback]：可选参数，事件完成时所触发的回调函数

3. toggle() ：切换显示或隐藏

    toggle(switch) ：显示或隐藏true：显示false：隐藏
   ?

toggle(speed,[callback])：以动画效果切换显示或隐藏 speed:"slow", "normal", "fast"：slow：慢normal：正常fast：快速

2. 滑动

1. slideDown(speed,[callback]) ：以动画效果向下滑动显示

2. slideUp(speed,[callback]) ：以动画效果向上滑动隐藏

3. slideToggle(speed,[callback]) ：以动画效果滑动显示或隐藏

• 参数说明：
  speed ：动画的持续时间
  [callback]：动画完成时所触发的回调函数

3. 淡入淡出

1. fadeIn(speed,[callback]) ：以动画形式淡入（显示）

2. fadeOut(speed,[callback]) ：以动画形式淡出（隐藏）

3. fadeToggle()：切换淡入淡出

4. fadeTo(speed,opacity,[callback]) ：设置元素的透明度

   参数说明；
   speed：动画的持续时间
   opacity ：透明度（0-1） 0 全透明  1不透明
   [callback]：动画完成时所触发的回调函数

4. 自定义动画

1. animate(params,[speed])：自定义动画效果

   animate(params,[speed])：自定义动画效果
   params ****：自定义动画，要求参数是一个json格式的数据
   [speed]：动画的持续时间 

 

六. 增删改查

1. 增

(1). 往元素内部插

1. 在元素内部后面插入

   A.append(B) ：将B插入到A的内部的后面
   ?
   B.appendTo(A) ：将B插入到A的内部的后面 

2. 在元素内部前面插入

   A.prepend(B) ：将B插入到A的内部的前面
   ?
   B.prependTo(A) ：将B插入到A的内部的前面

(2). 往元素外部插

1. 在元素外部的后面

   A.after(B)：将B插入到A的外面的后面
   
   B.insertAfter(A)：将B插入到A的外面的后面
   

2. 在元素外部的前面

   A.before(B)：将B插入到A的外面的前面
   
   B.insertBefore(A)：将B插入到A的外面的前面
   

2. 删

1. empty()：清空元素内容

2. remove()：删除元素节点及内容

3. 改

(1). 复制

1. clone() ：克隆（复制）元素

2. clone(true)：克隆（复制）元素同时复制元素的事件

(2). 替换

1. 值替换：html()

2. 替换节点(标签)：replaceWith()

(3). 包裹

1. wrap()：对每个元素进行单独包裹

2. wrapAll()：将所选元素作为一个整体包裹起来

3. wrapInner()：对所选元素的所有子元素包裹

4. 查

1. eq(index)：通过元素的索引查找元素，index默认从0开始

2. filter(expr)：查找与给定元素匹配的元素，expr匹配条件

3. not(expr)：查找与给定元素不匹配的元素

4. children([expr])：查找所有子元素

5. find(expr)：查找所有后代元素

6. next([expr])：查找紧邻的下一个元素

7. nextAll();查找紧邻的后面的所有元素

8. prev([expr])：查找紧邻的上一个元素

9. prevAll();查找紧邻的前面的所有元素

10. parent([expr])：查找当前元素的父元素

11. siblings([expr])：查找所有同级兄弟节点（无论上下）

12. each(callback)：主要功能是遍历jQuery对象

    基本语法：
    jQuery对象.each(callback);
    callback是一个函数 
    function callback(i,item){ 
    	//Javascript代码
      
      }
      
      i：每次遍历时，系统会自动将循环下标放入变量i中
      item ：每次遍历时，系统会自动将遍历得到的值（dom对象）放入item选项中，
      
      jQuery对象本质是一个DOM对象集合的数据，所以遍历时每个遍历对象都是一个DOM对象，所以item也是一个DOM对象，如果想使用jQuery中属性或方法，需要通过$符号进行封装。
    

 

七. 事件

1. 页面载入事件

1. 语法1：

    $(document).ready(function(){ 
   //事件的处理程序
   }); 
   

2. 语法2：

   $().ready(function(){ 
   	//事件的处理程序
   }); 
   

3. 语法3：

   $(function(){
   	//事件的处理程序
   });
   

2. window.onload与ready区别

ready方法执行流程如下：载入HTML代码到内存-->形成DOM树结构-->执行jQuery脚本-->载入全部资源（文本、图片、样式）

在原生Javascript代码中，我们通过window.onload实现页面的载入功能，其主要执行流程如下：载入HTML代码到内存-->形成DOM树-->载入全部资源（文本、图片、样式）-->执行Javascript脚本。

通过比较，所以ready方法的执行速度要快于window.onload方法，原因就是两者的执行顺序不同!

快在哪里?
资源的载入是非常大的,需要消耗大量的时间,jquery先执行完脚本以后在载入资源,这是优化的过程.

3. 常用事件

jQuery中的所有事件都封装成了方法，所以在编写时语法如下

语法：jQuery对象.事件(事件的程序); 

1. blur(fn)：失去焦点时触发

2. change(fn)：状态改变时触发

3. click(fn)：点击时触发

4. dblclick(fn)：双击时触发

5. focus(fn)：获得焦点时触发

6. keydown(fn)：键盘按下时触发

7. keyup(fn)：键盘弹起时触发

8. keypress(fn)：键盘按下时触发

9. load(fn)：页面载入时触发，功能与ready类似

10. unload(fn)：页面关闭时触发

11. mousedown(fn)：鼠标按下时触发

12. mouseup(fn)：鼠标弹起时触发

13. mousemove(fn)：鼠标移动时触发

14. mouseover(fn)：鼠标悬浮时触发

15. mouseout(fn)：鼠标离开时触发

16. resize(fn)：调整大小时触发

17. scroll(fn)：滚动时触发

18. select(fn)：文本选中时触发

19. submit(fn)：表单提交时触发

4. 事件切换

hover(over,out)：鼠标悬浮与鼠标离开事件

参数说明：
over：鼠标悬浮事件
out：鼠标离开事件 

5. 事件编程

1. bind(type,[data],fn) 绑定事件

   参数说明：
   type ：事件类型，不带‘on’前缀
   [data]：可选参数，事件发生时所传递的数据（了解）
   fn ：事件的处理程序
   

2. bind({type:fn,type:fn})为元素绑定多个事件，要求参数是一个json对象

   参数说明：
   type ：事件类型，不带’on’前缀
   fn：事件的处理程序 
   

3. one(type,[data],fn) ：为元素绑定事件，但事件只触发一次

   参数说明：
   type：事件类型
   [data]：事件发生时所传递的数据
    fn ：事件的处理程序 
   

4. unbind([type])：移除事件

   参数说明：
   type ：要移除的事件类型
   在原生Javascript代码中，如果想进行事件移除，那么必须有一个前提：在事件绑定时，必须为事件的处理程序命名，
   

6. this对象

• 在Javascript代码中，事件监听中的this指向：

  IE5|6 ：指向Window对象

  W3C ：指向当前要操作的DOM对象

 

八. ajax

1. 简介

1. 什么是ajax

    a:Asynchronous
   j:JavaScript
    a:And
   x:XML
   
   是一种在页面没有刷新的情况下，通过客户端（浏览器）与服务器交互的一种技术。
   ajax语言的载体是javascript,最大特点,页面不刷新完成请求。
   

2. ajax的起源