jQuery寒假学习

jQuery基础

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。

基础语法是：$(selector).action()

$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素

jQuery的优势
1,简化了js的写法，用$替代了document.getXxx()

2,可以像CSS选择器一样非常方便的获取元素

3,可以通过修改css样式控制页面的效果

jQuery其实就是一个JS文件,如需使用 jQuery,需要下载，然后使用 HTML 的script标签引用它,应该位于页面的head 部分。

<!-- 引入jQuery的函数库文件 -->
<script src="jquery.min.js"></script>
或者：
<script src="jquery.js"></script>

jQuery选择器

基础选择器：

• ID选择器：$('#id')
• 类选择器：$('class')
• 标签选择器：$('div')
• 并集选择器：$('div,p,li')
• 交集选择器：$('div.redClass')

层级选择器：1.子代选择器：$('ul>li') 2.后代选择器：$('ul li')

过滤选择器(这类选择器都带有冒号)：
$(li:eq(2)')获取到的li元素中，选择索引号为2的元素，索引号index从0开始。 $('li:odd')获取到的li元素中，选择索引号为奇数的元素
$('li:even')获取到的li元素中，选择索引号为偶数的元素

四、筛选选择器：

选择器	属性
children()	不加参数是获取所有的子元素，加了参数是获取指定子元素
find()	必须加参数，获取指定的后代元素
siblings()	查找兄弟节点，不包括自身
parent()	父元素节点/parents()：祖先元素所有元素节点
eq(index)	同层级选择器的eq
next()	查找下一个兄弟
prev()	查找上一个兄弟
index()	返回指定元素相对于其他统计元素的index(索引)位置
not()	返回指定元素之外的元素。

筛选器

• + 用在jQuery选择的元素集合的后面
• + 都是方法,为了对已经选择出来的元素进行二次筛选

名称	属性
first()	筛选集合里面的第一个元素
last()	筛选集合里面的最后一个元素
eq(n)	筛选集合里面的索引是n的那一个
next()	筛选出元素的下一个兄弟元素
nextAll()	nextAll(),如果()里面什么都不写,表示筛选出元素的后面的所有兄弟
nextAll(‘选择器’)	如果()里面写选择器,表示筛选出元素的后面的所有符合选择器兄弟
nextUntil(‘选择器’)	筛选出元素后面所有的兄弟元素直到选择器元素位置
prev()	筛选出元素的上一个兄弟元素
prevAll()	prevAll(),如果()里面什么都不写,表示筛选出元素的前面的所有兄弟
prevAll(‘选择器’)	如果()里面写选择器,表示筛选出元素的前面的所有符合选择器兄弟
prevUntil(‘选择器’)	筛选出元素前面所有的兄弟元素直到选择器元素位置
parent()	筛选出元素的父元素
parents()	parents(),如果()里面什么都不写,表示筛选出所有祖先元素
parents(‘选择器’)	,如果()里面有选择器,表示筛选出所有符合选择器的祖先元素
parentsUntil(‘选择器’)	筛选出元素的所有祖先元素,直到选择器为止
children()	children(),如果()里面什么都不写,筛选出元素所有的子级元素
children(‘选择器’)	,如果()里面有选择器,筛选出元素所有的符合选择器的子级元素
find(‘选择器’)	所有后代元素里面查找符合选择器的元素
siblings()	筛选出所有的兄弟元素
siblings(‘选择器’)	筛选出所有的符合选择器兄弟元素
index()	获取元素的索引位置

操作文本内容

• html()
  等价于我们原生 JS 中的 innerHTML
  html() 获取
  console.log($(‘div’).html())
  html() 设置
  语法: 元素集合.html(你要设置的内容)
  注意: 可以识别并解析 html 结构字符串

$('div').html('<h2>我是后来设置的内容</h2>')

• text()
  等价于我们原生 JS 中的 innerText
  text() 获取
  console.log($(‘div’).text())
  text() 设置
  语法: 元素集合.text(你要设置的内容)
  注意: 不可以识别并解析 html 结构字符串

$('div').text('<h2>我是后来设置的内容</h2>')

• val()
  等价于我们原生 JS 中 value
  val()`获取
  console.log($(‘input’).val())
  val() 设置
  语法: 元素集合.val(你要设置的内容)
  作用: 用来设置该表单元素的 value 值

   $('input').val('我是后来设置的内容')

操作类名

名称	属性
addClass( )	为集合中的每个元素添加类名
removeClass( )	删除集合中元素的类名
hasClass( )	判断集合中的元素是包含指定的类名
toggleClass( )	切换集合中元素的类名

操作元素样式

名称	属性
height()	获取jQuery集合中第一个元素的宽度，或者设置jQuery集合中所有元素的宽度。
width()	获取jQuery集合中第一个元素的高度，或者设置jQuery集合中所有元素的高度。
innerHeight()	获取jQuery集合中第一个元素的内部高度，包括padding，但是不包括border，或者设置jQuery集合中所有元素的内部高度。
innerWidth()	获取jQuery集合中第一个元素的内部宽度，包括padding，但是不包括border，或者设置jQuery集合中所有元素的内部宽度。
outerHeight()	获取元素的外部高度，包括padding和border，但是margin是可选的，默认不包括margin
outerWidth()	获取元素的外部宽度，包括padding和border，但是margin是可选的，默认不包括margin
offset()	offset()：获取集合中第一个元素相对于文档的当前坐标

基础绑定事件

通过.bind()方法来为元素绑定这些事件

• 使用点击事件

$('input').bind('click', function () {                  
   //点击按钮后执行匿名函数
alert('点击！');
});

• 普通处理函数

$('input').bind('click', fn);                                
  //执行普通函数式无须圆括号
function fn() {
alert('点击！');
}

• 同时绑定多个事件

$('input').bind('mouseout mouseover', function () {   
  //移入和移出分别执行一次
$('div').html(function (index, value) {
return value + '1';
});
});

• 通过对象键值对绑定多个参数

$('input').bind({                                                    
  //传递一个对象
'mouseout' : function () {                                 
 //事件名的引号可以省略
alert('移出');
},
'mouseover' : function () {
alert('移入');
}
});

• 使用 unbind 删除绑定的事件

$('input').unbind();                                                 
 //删除所有当前元素的事件

• 使用 unbind 参数删除指定类型事件

$('input').unbind('click');                                          
//删除当前元素的 click 事件

• 使用 unbind 参数删除指定处理函数的事件

function fn1() {
alert('点击 1');
}
function fn2() {
alert('点击 2');
}
$('input').bind('click', fn1);
$('input').bind('click', fn2);
$('input').unbind('click', fn1);                                   
//只删除 fn1 处理函数的事件 

事件函数

事件函数	事件描述
click()	鼠标单击左键事件
dblclick()	鼠标双击左键事件
mousedown()	鼠标按下事件
mouseenter()	鼠标指针穿过（进入）指定元素时触发事件
mouseleave()	鼠标指针离开指定元素时触发事件
mousemove()	鼠标指针在被选元素内移动时触发事件
mouseout()	鼠标指针离开被选元素时触发事件
mouseover()	鼠标指针位于元素上方时触发事件
mouseup()	鼠标指针移到元素上方并松开鼠标左键时触发事件
hover()	鼠标指针悬停在被选元素上时触发事件

节点操作

获取节点

first()	获取集合中的第一个节点
last()	获取集合中的最后一个节点
prev()	获取前一个节点
next()	获取后一个节点
nextAll()	获取下面的所有兄弟节点
siblings()	获取所有兄弟节点，不包括本身
children()	获取直接子元素 只选择一层
find()	获取后代子元素 参数是必须的，如要选择所有可以用*选择器
parent()	获取父节点
parents()	获取祖先节点
closest()	获取当前最近的祖先元素，唯一最近的元素 参数是必须的

** 添加节点**

方法	作用
append()	将节点添加到指定节点的里面的最后面
appendTo()	将节点添加到指定节点的里面的最后面
prepend()	将节点添加到指定节点的里面的最前面
prependTo()	将节点添加到指定节点的里面的最前面
before()	将节点添加到指定节点的上面，形成上一个兄弟元素
insertBefore()	将节点添加到指定节点的上面，形成上一个兄弟元素
after()	将节点添加到指定节点的下面，形成下一个兄弟节点
insertAfter()	将节点添加到指定节点的下面，形成下一个兄弟节点
clone()	克隆节点，clone的参数是布尔值 false 默认 true 会克隆操作的行为
remove()	删除节点，不会保存操作的行为
detach()	detach() 对于删除的节点会保存操作的行为

操作元素属性

元素属性的分类：

• 固有属性：元素本身就有的属性（id,name,class,style）
• 返回值是boolean的属性：checked,selected,disabled
• 自定义属性

获取属性

• attr(“属性名”)；
• prop(“属性名”);

获取元素的属性	$('.btn').attr('property') property可以使元素的样式属性，如style或value等
设置元素的属性	$('.btn').attr('属性名称',''属性值); $('.btn').attr('type','text')
设置元素的多个属性	$('.btn').attr('属性名称',''属性值); $(‘.btn’).attr({‘type’:‘text’,‘value’:‘我是输入框’});``
获取表单元素的值	$('input').val('value');

获取元素尺寸

• .width()
  为匹配的元素集合中获取第一个元素的当前计算宽度值。给每个匹配的元素设置CSS宽度。
  内容宽度

• .height()
  获取匹配元素集合中的第一个元素的当前计算高度值。设置每一个匹配元素的高度值。
  内容高度

• .innerWidth()
  为匹配的元素集合中获取第一个元素的当前计算宽度值,包括padding，但是不包括border。
  内容宽度 + 左右padding

• .innerHeight()
  为匹配的元素集合中获取第一个元素的当前计算高度值,包括padding，但是不包括border。
  内容高度 + 上下padding

• .outerWidth()
  获取元素集合中第一个元素的当前计算宽度值,包括padding，border和选择性的margin。（注：返回一个整数（不包含“px”）表示的值，或如果在一个空集合上调用该方法，则会返回 null。）
  内容宽度 + 左右padding + 左右border

• .outerHeight()
  获取元素集合中第一个元素的当前计算高度值,包括padding，border和选择性的margin。返回一个整数（不包含“px”）表示的值 ，或如果在一个空集合上调用该方法，则会返回 null。
  内容高度 + 上下padding + 上下border

操作位置关系

jQuery的位置操作主要有三个：· offset()、position()、scrollTop()/scrollLeft() , 具体介绍如下:

offset() 设置或获取元素偏移

• offset() 方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
• 该方法有2个属性left、top 。offset().top用于获取距离文档顶部的距离，offset().left用于获取距离文档左侧的距离。
• 可以设置元素的偏移：offset({ top: 10, left: 30 });

position() 获取元素偏移

• position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
• 该方法有2个属性left、top。position().top用于获取距离定位父级顶部的距离，position().left用于获取距离定位父级左侧的距离。
  该方法只能获取。
• 注意: 这个方法的特点与offsetLeft和offsetTop一致

scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
scrollTop()方法设置或返回被选元素被卷去的头部。
不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部。

基本动画

JQuery中有三种基础的动画，分别是：

• 显示（show)

  • 第一个参数：代表执行动画的时长（毫秒数）也可以是代表时长的字符串（fast、normal和slow）[fast代表的200毫秒，normal代表的事400毫秒，slow代表的事600毫秒]。
  • 第二个参数：代表动画执行完毕后的回调函数。也就是在动画执行结束之后想要执行的样式等操作。

• 隐藏（hide）

• 切换（toggle）

• 滑入（ slideDown）

  • 动态效果从下至上。竖向动作，slideToggle 通过高度变化来切换所有匹配元素的可见性
  • .slideDown()，下拉动画，初始状态应为display:none
  • .slideUp( ) 上卷动画，参数解释在文章开头
  • .slideToggle( ) 下拉上卷的切换动画

• 滑出（ slidell）

• 切换（ slide Toggle）

• 谈入 faden）

  • 隐藏的元素，display:none，不会在影响页面的布局
  • .fadeOut( ) 淡出动画 opacity=>1-0
  • .fadeIn( ) 淡入动画 opacity=>0-1
  • .fadeToggle( ) 淡入淡出动画切换
  • .fadeTo（）opactiy => start-endOpacity

• 淡出 （fadeOut）

• 切换（fade Toggle）

折叠动画

1. slideDown() + 下拉显示

2. slideUp() + 上拉隐藏

3. slideToggle() + 切换显示和隐藏

渐隐渐显动画

1. faseIn()　　//显示到指定透明度 + opacity 0 ~ 1
2. fadeOut()　　//隐藏到指定透明度 + opacity 1 ~ 0
3. fadeToggle()　　//切换 + 切换

上面的语法都如下：

方法.(时间, 运动曲线, 回调函数)

4. fadeTo()

• 运动到指定透明度
• 语法: fadeTo(时间, 指定透明度, 运动曲线, 回调函数)

jQuery 的综合动画

• 可以按照你的设定去进行运动

1. animate()
   => 语法: animate({}, 时间, 运动曲线, 回调函数)
   => {}: 书写你要运动的属性 (普通Css属性)
   => 注意:-> 颜色相关的属性, 运动不了 -> CSS3 的 2d 和 3d 动画效果运动不了

jQuery 的停止动画

• 因为当你给一个元素设置动画以后
• 如果快速触发, 会停不下来, 直到你所有的触发都执行完毕为止
• jquery 给我们提供两个临时停下动画的方法

1. stop()

• 语法: 元素集合.stop()

• 当代码执行到这句的时候, 不管运动到什么程度, 立刻停下来 即立即停止那种：

• 运动到什么位置就停止在什么位置

2. finish()+ 语法: 元素集合.finish()

• 当代码执行到这句的时候, 不管运动到什么程度, 直接去到运动结束位置

• 直接完成本次动画

animatecss动画插件

//引入animate.css文件
<link rel="stylesheet" href="css/animate.min.css">
//第二步. 给指定的元素加上指定的动画样式名
//animation__name定义动画的效果名称
//animation__duration定义动画持续的时间
//animation__delay 定义动画延迟的时间
//animation-iteration-count: 定义动画重复的次数
//animation__faster  定义动画的速度
animation:动画效果 执行时间 延迟时间 执行次数 速度曲线；
animation: bounce 1s 2s infinite linear;

加统一的类名animated，然后选择自己想要的动画效果，然后复制粘贴

//1.直接加自己选择的类名
​
    <h3 class="animated tada">tada</h3>
    <p class="animated rubberBand">rubberBand</p>
   <div class="animated shake">shake</div>
​
改变其原有属性（覆盖）
    .shake {
            animation-delay: .5s;
            animation-iteration-count: infinite;
            animation-timing-function: linear;
        }

​
用animation

  #box1 {
  animation:动画效果 执行时间 延迟时间 执行次数；
            animation: flipInY 2s 2s 3 linear;
        }  
​
 <p id="box1">内容内容1</p>

发送ajax请求

<script>
		function sumbit() {
 
			$.ajax({
				type: 'get', /*  请求方式  GET  、 POST 、 PUT 等.. */
				url: 'findApi', /*  后台的接口(findApi)  使用相对路径即可 */
				dateType: 'json', /*  期望服务器返回的数据类型格式 */
				success: function(result) { // 请求后台 应答成功返回来的数据 
					console.log(result);
				},
				error: function(xhr, status, error) { // 请求失败运行的函数
					console.log(error);
				}
			})
		}
</script>

$.ajax()

参数	描述
url	链接地址，字符串表示
data	需发送到服务器的数据，GET与POST都可以，格式为{A: ‘…’, B: ‘…’}
type	“POST” 或 “GET”，请求类型
timeout	请求超时时间，单位为毫秒，数值表示
cache	是否缓存请求结果，bool表示
contentType	内容类型，默认为"application/x-www-form-urlencoded"
dataType	服务器响应的数据类型，字符串表示；当填写为json时，回调函数中无需再对数据反序列化为json
success	请求成功后，服务器回调的函数
error	请求失败后，服务器回调的函数
complete	请求完成后调用的函数，无论请求是成功还是失败，都会调用该函数；如果设置了success与error函数，则该函数在它们之后被调用
async	是否异步处理，bool表示，默认为true；设置该值为false后，JS不会向下执行，而是原地等待服务器返回数据，并完成相应的回调函数后，再向下执行
username	访问认证请求中携带的用户名，字符串表示
password	返回认证请求中携带的密码，字符串表示

eg：

$.ajax({
    url: "/greet",
    data: {name: 'jenny'},
    type: "POST",
    dataType: "json",
    success: function(data) {
        // data = jQuery.parseJSON(data);  //dataType指明了返回数据为json类型，故不需要再反序列化
        ...
    }
});

$.post()

参数	描述
url	链接地址
data	需要发送到服务器的数据
function	请求成功后，服务器回调的函数
dataType	服务器返回数据的格式
eg：

$.post(
    "/greet",
    {name: 'Brad'},
    function(data) {
        ...
    },
    "json"
);

$.get()

参数所示意义与$.post()一致

$.get(
    "/greet",
    {name: 'Brad'},
    function(data) {
        ...
    },
    "json"
);

$.getJSON()
该方法使用GET方式执行Ajax请求，从服务器加载JSON格式数据。

$.getJSON(
    "/greet",
    {name: 'jenny'},
    function(data) {
        ...
    }
);

$.load()
该方法将服务器加载的数据直接插入到指定DOM中。

<div id="box"></div>
$('#box').load(
    "/greet",
    {name: 'Brad'}
);

$.getScript()
该方法使用GET方式执行Ajax请求，从服务器加载并执行回传的JavaScript。

$.load(url, func);

ajax发送跨域请求

调用Jquery的$.getJSON方法

$.getJSON("./data/table.json",function(data){
            console.log(data);

        });

ajax全局钩子函数

jQuery的 ajax 全局钩子函数
所谓的钩子函数 , 是和 某个程序绑定的函数
当这个程序执行到不同阶段,不同步骤时,执行不同的函数程序

$(window).ajaxStart()	在 ajax 开始之前 触发只触发一次
$(window).ajaxSend()	在 ajax 发送之前,会触发有几次send,就会触发几次
$(window).ajaxSuccess()	在 ajax 请求成功时会触发有几次请求成功,就触发几次
$(window).ajaxError()	在 ajax 请求失败时会触发有几次请求失败,就触发几次
$(window).ajaxComplete()	在 ajax 请求完成时会触发有几次请求完成,就触发几次
$(window).ajaxStop()	在 ajax 所有的请求完成时会触发多次请求结束,只有最后一次会触发

jq多库并存

jQuery本质上就是一个外部js文件

• 通过定义的 $ 和 jQuery 来调用其中定义好的方法

• 那么,其他 外部js文件 也可以设定 通过 $ 和 jQuery 来调用程序

• 此时,外部js文件的 $ 和 jQuery 与 JQ 文件的 $ 和 jQuery 就冲突了
  此时就需要有程序,交出控制权

   jQuery本身有3种方式交出控制权
   $.noConflict()  或者  jQuery.noConflict()
       交出 $的控制权
       没办法通过 $来调用 JQ 的方法
       只交出一个控制权
       jQuery的控制权仍然保留
   $.noConflict(true) 或者 jQuery.noConflict(true)
       交出所有的控制权
       只要执行一个,两个控制权都没有了
   let aa = $.noConflict(true)
       改变控制权,就可以通过 aa 来调用 JQ中的方法
         let aa = $.noConflict(true);
         console.log(aa('div'));
  

深浅拷贝

拷贝对象
把某一个对象拷贝给另外一个对象使用，此时可以使用$.extend()方法

$.extend([deep,]target,object1[,objectN])
 
//deep：如果deep值为true，那么定义为深拷贝；为false相反（默认false）
//target:要拷贝的目标对象
//object1：待拷贝到第一个对象的对象

如果要拷贝的目标对象为空，那么可以直接将数据拷贝到当前这个要拷贝的目标对象

如果要拷贝的目标对象不为空，但是数据名与object有冲突，那么会数据覆盖

其实我们也可以看作是一个数据的合并吧，将后面的obj对象数据全部拷贝给target目标对象

浅拷贝
=> 创建一个和原先数据结构一模一样的数据结构

假如原先是个数组数据类型, 那么就新创建一个数组

假如原先是个对象数据类型, 那么就新创建一个对象

=> 通过 for in 循环去遍历原先数据结构

把里面的每一个数据分别在新的数据结构中复制一份

对于一维数据结构有效

如果是多维数据结构,没有意义 , 那么从第二维度开始, 依旧是操作同一个存储空间

// 2. 浅拷贝
const o1 = { name: 'Jack', age: 18, info: { height: 180 } }
 
// 2-1. 创建一个和原先数据结构一模一样的结构
const o2 = {}
 
// 2-2. 循环遍历原始数据结构
for (const key in o1) {
  // 2-3. 分别在新的数据结构中进行赋值
  // 在进行 for in 遍历的时候
  // 在这里, 当 key === info 的时候
  // o1[key] 存储的也是一个地址
  // o2[key] 就是把 o1[key] 存储的地址复制了一份过去
  // 从此以后, o1 和 o2 虽然是两个数据空间
  // 但是 o1.info 和 o2.info 操作的是一个数据空间
  // o2.info = o1.info
  // 因为 info 内存储的是一个 地址
  // 赋值以后, o2.info 和 o1.info 存储的是同一个地址
  o2[key] = o1[key]
}
 
// 此时 o1 和 o2 不是一个对象存储空间
// 只是长得一模一样的两个对象存储空间
// 用任意一个区操作的时候, 另外一个不会改变
console.log(o1, o2)

深拷贝
=> 不停地重复浅拷贝的工作

=> 复制出一份完全一模一样的数据结构

=> 不管多少维度的数据结构, 都能完整独立的复制过来

=> 实现方式:

使用 递归 的方式进行逐层数据结构的 遍历数据并赋值

当我循环遍历的时候, 如果碰到的还是复杂数据类型

那么就递归进行遍历

// 3. 深拷贝
const o1 = {
  name: 'Jack',
  age: 18,
  info: {
    weight: 180,
    height: 180,
    desc: {
      msg: '这个人很懒, 什么都没有留下!'
    }
  },
  hobby: ['吃饭', '睡觉', ['篮球', '足球']]
}
const o2 = {}
// 3-1. 书写函数来完成(递归函数)
// 使用递归的方式进行深拷贝
function deepCopy(o2, o1) {
  // 做: 把 o1 内的所有数据全部拷贝到 o2 内部
  // console.log(o1, o2)
  //3-2. 直接循环遍历 o1 数据
  for (let key in o1) {
    // console.log(key);
    // 判断, 如果是 对象数据类型 或者 数组数据类型, 不进行赋值
    // 否则, 才进行赋值
    // 如果 o1[key] 是一个对象数据类型
    // o2[key] 也要创建为一个对象数据类型
    // 如果 o1[key] 是一个数组数据类型
    // o2[key] 也要创建为一个数组数据类型
    // 如果 o1[key] 是一个基本数据类型
    // o2[key] 直接赋值
    if (Object.prototype.toString.call(o1[key]) === '[object Object]') {
      // 是对象
      // console.log('o1[key] 是一个对象数据类型 : ', key)
      o2[key] = {}
      // 在这个位置, o1[key] 是一个对象数据类型
      // o2[key] 也是一个数据类型
      // o1[key] 里面的每一个数据复制一份到 o2[key]
      deepCopy(o2[key], o1[key])
    } else if (o1[key].constructor === Array) {
      // 是数组
      // console.log('o1[key] 是一个数组数据类型 : ', key)
      o2[key] = []
      // 把 o1[key] 内部的所有数据放在 o2[key] 内
      deepCopy(o2[key], o1[key])
    } else {
      // console.log('o1[key] 是一个基本数据类型 : ', key)
      // 直接复制
      o2[key] = o1[key]
    }
  }
}
// 将来使用的时候
deepCopy(o2, o1)
console.log(o1, o2)
// 修改数据
o2.info.desc.msg = 'hello world'