快速回顾jQuery的个人笔记（总结）

Posted 2020-10-04

     写在前面：学习任何一个库或者框架，不能盲目的学习，而是要首先了解这个库或者这个框架是干什么的，库和框架基于不同的目的提供给大家灵活使用，而不是以一概全，所有的项目都是用一样的东西。

　　很早就学习过一遍jQuery，但是对于我这样的小白来说，很多东西都未尽未透。而jQuery作为js最广泛流行的库，决定逞还在放暑假对jQuery进行一次复习和梳理。

 

1.jQuery的作用

　　　　　　首先对于jQuery来说，jQuery有如下的功能：

　　　　　　　　1.html元素的操作

　　　　　　　　2.CSS元素的操作

　　　　　　　　3.HTML的事件函数（譬如：对HTML元素的onclick事件）

　　　　　　　　4.Js的特效和动画

　　　　　　　　5.Ajax

　　　　　　　　6.Uitilities

2.jQuery的优势

　　　　　　知道了jQuery的使用场景，那么面对纷繁复杂的js前端库中，jQuery的优势又在哪里呢

　　　　　　1.jQuery提供了大量的扩展和插件

　　　　　　2.jQuery兼容几乎所有的浏览器

　　　　　　3.jQuery大大简化了js本身的语法，比如选取html对象的语句就缩减很短了

 

3.jQuery的基本语法

$(selector).action();

　　$:表示美元符号来定义jQuery，告诉你，从这里开始就是jQuery的语法了。

　　selector：选择器，用来选择HTML元素。这句话就是js的document.getElementById();这样的语句。

　　action：要执行的动作

 

4.文件就绪事件

$(document).ready(function(){
    //jQuery代码
});

　　形如这样的形式就是文件就绪事件。它的作用是防止文档在加载完之前，就执行jQuery的代码。比如我们在写js的时候会用到window.onload，来使整个页面加载完在执行js的代码。

$(function(){
    //jQuery代码
});

　　这是上面的简写版。

 

 

5.jQuery的选择器

　　jQuery的选择器是基于Css的选择器，也就是在selector的位置，你可以像使用CSS的选择器一样，方便的使用jQuery的选择器。

　　比如，以id作为选择：

$(‘#id‘).hide();

　　这里就是找到id为id的元素并将它隐藏（hide()）.

 

6.jQuery的事件

　　什么是事件呢，就是执行的动作，比如点击一个按钮，按下你的键盘都叫事件。

　　jQuery常见的事件：

　　

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave		blur	unload

 

　　jQuery事件的语法：

$(‘#id‘).click(function(){
  $(‘id‘).hide();
});

　　比如上面这段代码就是，当点击id为id的元素的时候，id就会隐藏。

 

7.jQuery的效果

 　　jQuery支持的常见效果有：出现，隐藏，淡入，淡出，滑动，动画等。

　　　1.出现和隐藏

　　　　基本语法：

hide(speed,callback);
show(speed,callback);

　　两个可选参数分别是速度(可以是fast，slow或者具体的毫秒),callback（表示执行完hide或者show后要执行的函数）。

　　实　　例：

$(‘p‘).click(function(){
    $(‘p‘).hide();
});

　　使用toggle()方法简化操作：有时候我们设置按钮可以来回切换两种出现和隐藏状态，那么就可以使用toggle。

$(‘p‘).click(function(){
    $(‘p‘).toggle();
});

　　2.淡入和淡出

　　淡入和淡出的基本语法形式和参数都和上面的一样，我们直接来看实例：

$(‘p‘).click(function(){
    $(‘p‘).fadeIn();     //使用slow或者fast描述的时候需要加上""
});

　　同理fadeToggle是实现fadeIn和fadeOut的两种形式的切换。

$(‘p‘).click(function(){
    $(‘p‘).fadeToggle();
});

　　此外还有一个多的fadeTo()方法，该方法的作用是将颜色变淡，如果你的元素需要设置颜色的话。

　　它的基本语法中多了一个opacity，值的范围在0-1之间，表示透明度。

$(‘p‘).click(function(){
    $(‘p‘).fadeTo("fast"0.7);
});

　　PS:在这里，speed是必选，必须要设置时长。

　　3.滑动

　　jQuery的滑动同上面的一样，因为是总结这里就不再赘述了。

　　

　　4.动画

　　首先来看动画的基本语法;

 $(selector).animate({params},speed,callback);

　　其中必选的params是提供相对于本来元素，要改变的css样式。speed和callback与之前一样是可选选项。

　　实　　例：

 $(‘div’).animate({left:‘300px‘});

　　以上代码的含义是，div标签的HTMl元素的位置相对于原来的位置，变换300px。（PS：这里需要对position进行设置）。params的部分采用的是键值对的方式书写。

　　实　　例-同一个对象同时执行多个动画（比如：同时改变宽高，透明度和位置），只需要用"，"隔开

 $("div").animate({
    left:‘250px‘,
    opacity:‘0.5‘,
    height:‘150px‘,
    width:‘150px‘
  });

　　PS：jQuery的动画几乎可以操纵css的所有属性，但是在书写的时候，必须使用骆驼标记法。比如在css中的margin-left，在jQuery中就是marginLeft。

 

　　实　　例：动画中的计算

 $("div").animate({
    left:‘250px‘,
    height:‘+=150px‘,
    width:‘+=150px‘
  });

　　

　　实　　例：使用动画的队列功能。如果想要实现动画按顺序执行，那么jQuery还提供了队列的功能。

$("button").click(function(){
  var div=$("div");
  div.animate({height:‘300px‘,opacity:‘0.4‘},"slow");
  div.animate({width:‘300px‘,opacity:‘0.8‘},"slow");
  div.animate({height:‘100px‘,opacity:‘0.4‘},"slow");
  div.animate({width:‘100px‘,opacity:‘0.8‘},"slow");
}); 

　　

　　5.动画停止

(醉了浏览器崩溃，下面的内容没保存，以后再补)