jQuery 该怎么用？

简介

jQuery 是一个 JavaScript 库。
jQuery 极大地简化了 JavaScript 编程。

1：选择器

jQuery大大简化了DOM获取页面某个节点或者某一类节点的固定方法。

//javascript 获取ID
document.getElementById("demo")
//jQuery 获取ID
$("#demo")

DOM文档加载步骤:
1.解析HTML结构
2.加载外部的脚本和样式文件
3.解析并执行脚本代码
4.执行$(function()})内对应代码
5.加载图片等二进制资源
6.页面加载完毕，执行window.onload

2：修改页面的外观

由于各个浏览器对CSS3标准的支持不同，是很多CSS3的样式风格没能很好的体现。jQuery的出现很好的解决了这个问题。它通过封装好的JavaScript代码，是各种浏览器能很好的使用CSS3标准。

3：更改页面内容

通过强大而方面的API，jQuery可以很方便的修改页面的内容，甚至整个页面的框架。
API手册：https://jquery.cuishifeng.cn/

4：响应事件

不需要在考虑浏览器的兼容性问题，可以更加轻松的处理事件。

//ready：在浏览器加载web页面时触发，可以写多次ready事件，不会后者覆盖前者，依次从上向下执行，我们常用$(函数)简化，ready和onload同时存在时，二者都会触发执行，ready快于onload
$(document).ready(function(){
  // 在这里写你的代码...
});
//or
$(function($) {
  // 你可以在这里继续使用$作为别名...
});

//change：当内容改变时触发
//发生变化时改变其背景颜色
$(".field").change(function(){
  $(this).css("background-color","#FFFFCC");
});

//focus：焦点获取
//当输入框获得焦点时，改变它的背景色
$("input").focus(function(){
  $("input").css("background-color","#FFFFCC");
});

//blur：焦点失去
//当输入域失去焦点 (blur) 时改变其颜色
$("input").blur(function(){
    $("input").css("background-color","#D6D6FF");
  });

//select：选中所有的文本值
//在文本域后添加文本，以显示出提示文本(Text marked!)：
$("input").select(function(){
  $("input").after(" Text marked!");
});

//keyup/keydown/keypress：演示在IE和Firefox中获取event对象的不同

//mousemove：在指定区域中不断移动触发

//mouseover：鼠标移入时触发

//mouseout：鼠标移出时触发

//submit：在提交表单时触发，true表示提交到后台，false表示不提交到后台

//click：单击触发

//dblclick：双击触发
//当双击按钮时，隐藏或显示元素
$("button").dblclick(function(){
  $("p").slideToggle();
});

5：为页面添加动画

jQuery的库提供了大量可自定义参数的动画效果。

//必需的 params 参数定义形成动画的 CSS 属性。
//可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
//可选的 callback 参数是动画完成后所执行的函数名称。
$(selector).animate({params},speed,callback);

//简单应用：它把 <div> 元素移动到左边，直到 left 属性等于 250 像素为止
$("button").click(function(){
  $("div").animate({left:'250px'});
}); 

6：与服务器异步交互

jQuery提供了一整套Ajax相关的操作，大大方便了异步交互的开发和使用。
具体使用方法：https://www.w3school.com.cn/jquery/jquery_ref_ajax.asp

7：简化常用的JavaScript操作

jQuery提供了很多附加的功能来简化常用的JavaScript操作；jquery主要简化bai的是HTML DOM的操作。

//javascript 获取ID
document.getElementById("demo")
//jQuery 获取ID
$("#demo")