大家好，我是讯享网，很高兴认识大家。

jQuery概述

1.javaScript库：

即library 是一个封装好了的集合（方法或函数），从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如animate、hide、show等
简单理解：一个js文件 里面对我们的原生js（以前学的js）代码进行了封装 存放在里面 这样我们可以快速高效的使用这些封装好的功能
所以jQuery就是为了快速方便的操作dom 里面基本都是函数

2.jQuery的入口函数

讯享网
相当于原生js中的DOMContentLoaded
不同于原生js中的load事件是等页面文档 外部的js文件css文件图片等加载完毕后才能执行内部的代码

jQuery的顶级对象$

JQuery=$ $ 是jQuery的别称
$是jQuery的顶级对象
相当于原生js中的window
把元素利用
$ 包装成jQuery对象就可以调用该方法

jQuery对象和DOM对象

• 用原生js获取来的对象就是DOM对象
• 用jQuery方法获取来的元素就是jQuery对象
• jQuery对象的本质：利用$对DOM对象包装后产生的对象
• jQuery对象只能用jQuery方法 DOM对象只能用原生js的属性和方法
• DOM对象与jQuery对象之间是可以相互转换的：
• 1.DOM对象转换为jQuery对象：$(DOM对象)

 <video src="mov.mp4"></video> <script> //DOM对象转换为jQuery对象 //情况1 直接获取视频 得到的就是jQuery对象 $('video'); //情况2 已经使用原生js获取对象了 再加$ var myvideo = document.querySelector('video'); $(myvideo); //jQuery对象转换为DOM对象 //方法1  $('video')[0].play(); //方法2 $('video').get(0).play(); </script> 

讯享网

jQuery常用API

选择器

基础选择器

选择器直接写css的选择器即可

讯享网 $(function() { 
    console.log($(".nav")); }) 

层级选择器

jQuery设置样式

隐式迭代
就是把匹配的所有元素内部进行遍历循环 给每一个元素添加css这个方法 不需要写循环 简化了操作

$("div").css("background","pink"); 会给每一个div进行样式的设置 

筛选选择器

筛选方法

重点要记住：parent() children() find() siblings() eq()

链式编程

讯享网 当前元素变化背景颜色 $(this).css("background","pink"); //其余兄弟去掉背景颜色 $(this).siblings("button").css("background",""); 可以写为： $(this).css('background','pink').siblings("button").css('background','') 

样式操作

用css方法修改简单的样式

如果属性是复合属性 则采用驼峰命名法（backgroundColor）且属性值要加引号

设置类的方法

注意类名不加点 //1.添加类addClass（） $("div").click(function() { 
    $(this).addClass("current"); }); //2.删除类removeClass（） $("div").click(function() { 
    $(this).removeClass("current"); }); //3.切换类 toggleClass() $("div").click(function() { 
    $(this).toggleClass("current"); }) 

jQuery类操作和原生js的className的区别

• 原生js中的className会覆盖元素原先里面的类名
• jQuery类操作只是会对指定类进行操作 不影响原先的类名 相当于追加类名

效果

显示隐藏

• 参数都可以省略 无动画就直接显示
• speed：（slow、normal、fast）或者表示动画时常的毫秒数值如1000
• easing：用来指定切换的效果 默认是swing（慢-快-慢）也可以用linear（匀速）
• fn：回调函数

讯享网 <button>显示</button> <button>隐藏</button> <button>切换</button> <div></div> <script> $(function() { 
    $("button").eq(0).click(function() { 
    $("div").show(5000,function(){ 
    alert(1); }); }) $("button").eq(1).click(function() { 
    $("div").hide(5000,function(){ 
    alert(1); }); }) $("button").eq(2).click(function() { 
    $("div").toggle(5000,function(){ 
    alert(1); }); }) }) </script> 

滑动

事件切换

• over：鼠标移到元素上要触发的函数 相当于mouseenter
• out：鼠标移除的时候要触发的函数 相当于mouseleave
• 如果只写一个函数 就是说鼠标经过和离开都会触发这个函数

动画队列及停止排队方法

动画或效果一旦触发就会执行 如果多次触发 就会造成多个动画或效果排队执行
停止排队
stop（）

先停止上一个动画 在进行下面的动画 但是stop必须写在动画的前面

淡入淡出

淡入效果

淡出效果

渐进方式调整到指定的不透明度

opacity透明度必须要写 0~1之间
speed速度（slow、normal、fast）或者表示动画时常的毫秒数值（1000）必须写（去掉定义式中的方括号）

自定义动画

 $(function() { 
    $("button").click(function() { 
    $("div").animate({ 
    left:200, top:300, opacity:.4 },500) }) }) 

属性操作

固有属性值

获取属性语法

设置元素属性

自定义属性

对于自己定义的属性获取 不能用prop 应该用attr（）

讯享网 <div index="1">我是div</div> 获取 attr（“属性”）类似于原生的getAttribute（） console.log($("div").attr("index")); 设置 attr（“属性”，“属性值”）类似于原生的setAttribute（） 

数据缓存data（）

data()方法可以在指定元素上存取数据 并不会修改dom元素的结构 一旦页面刷新 之前存放的数据都将会被移除 数据存放在元素的内存里面
在DOM里面看不见

data（）方法不仅可以缓存数据 还可以获得data开头的自定义属性

内容文本值

普通元素内容html（）相当于原生的innerHTML

 <div> <span>我是内容</span> </div> <script> // 1.获取设置元素内容html（） console.log($("div").html()); </script> 最后会把标签一起显示出来 

普通元素文本内容text（）相当于原生的innerText

讯享网 console.log($("div").text()); 

获取设置表单值val（） 相当于原生的value

 <input type="text" value="请输入内容"> console.log($("input").val()); $("input").val("123") 

元素操作

遍历元素

隐式迭代：针对元素进行相同的操作
遍历元素：针对元素进行不同的操作 类似于for 但是比for强大

• 所以想要使用jQuery方法 就需要给这个dom元素转化为jQuery对象
• 回调函数的第一个参数一定是索引号 可以不用index 自己制定索引号的名称
  

讯享网 $(function() { 
    // 1.each方法遍历元素 $("div").each(function(index,domEle) { 
    console.log(index); console.log(domEle); //domEle元素没有jQuery方法 所以记得要转换为jQuery元素 $(domEle).css("color","blue"); }) }) 

创建、添加、删除元素

 1.创建元素 var li = $("<li>新创建的li</li>") 2.添加元素 （1）内部添加 $("ul").append(li); 放到原来元素的后面 相当于原生的appendChild $("ul").prepend(li); 放到原来元素的前面prepend （2）外部添加 var div = $("<div>新创建的div</div>"); $(".test").after(div); 放到原来元素的后面 $(".test").before(div); 放到原来元素的前面 3.删除元素 (1)remove() 可以删除匹配的元素——自杀 $("ul").remove(); （2）empty() 可以删除匹配的元素的子节点——孩子 （3）html("")和empty等价 

• 内部添加元素 生成之后他们是父子关系
• 外部添加元素 生成之后他们是兄弟关系

尺寸、位置操作

尺寸

• outerWidth（true）包含了所有值
• 如果参数为数字 则是修改相应值 参数可以不写单位

位置

注意只能获取 不能设置