jQuery简介

一个很久远的前端库，基本只有后端在用了，前端都在用react、vue。

当然，能解决问题最重要。

jQuery可以理解为一个强化的DOM库，可以简单地对DOM对象进行CRUD，不用记忆那些反人类的函数名。毕竟原生的DOM太难用了。

使用方法

<script src="js/jquery-3.4.1.min.js"></script>

只需要引入jQuery文件即可。

核心语法

<script>
    $(selector).action();
</script>

就这一个模式。非常简单。

= function()....

而jq的核心思路就是先用原生dom库获取到dom对象，再返回给你一个对对象进行操作的函数，也就是返回一组API。这里利用了闭包。

jQuery与dom对象的转化

dom转jQuery

var a = document.getElementById("name"); // a是DOM对象
var b = $(a); // b是jQuery对象

jQuery转dom

var a = $("#name"); // a是jQuery对象
var b = jqObject.get(0); // b是DOM对象

选择器

就是引号里的东西，大方向上按css语法来即可

基本选择器

层次选择器

属性选择器

过滤选择器

事件

每个事件都比dom自带的注册方法好记好用。

鼠标事件

键盘事件

表单事件

鼠标复合事件

<script>
$("img").hover(
    function(){
        $(this).css("border","5px solid red");
    },
    function(){
        $(this).css("border","5px solid white");
    }
);
</script>

简单来说就是不用你注册俩函数了

toggle

$("p").toggle(
  function(){
  $("body").css("background-color","green");},
  function(){
  $("body").css("background-color","red");},
  function(){
  $("body").css("background-color","yellow");}
);

一种语义是代表每次点击在这些函数里轮询选一个起作用。

另一种语义是轮番调用hide()和show()方法。

动态绑定

类似于dom的addEventListener

元素的展示和隐藏特效

show(speed)

hide(speed)

toggle(speed) 显示隐藏交替

slideDown(speed) 滑下

slideUp(speed) 滑上去

slideToggle(speed) 交替滑动

fadeIn( speed ) 淡入

fadeOut( speed ) 淡出

fadeToggle( speed ) 等价于fadeIn+fadeOut

fadeTo( speed , 透明度 ) 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）

Dom与CSS操作

val() ; 获得表单元素中的value值

​ val("x") 修改表单元素中的value值

html(); 获得元素中的内容（标签+文本）

​ html("x") 修改元素中的内容（标签+文本）

text(); 获得元素中的文本

​ text("x") 修改元素中的文本

可以看到，每个函数都可以接收参数，如果不给参数就是get，给参数就是set。

动态增加标签属性

$("img").attr("src","img/2.jpg");
$("img").attr( {width:"200",height:"200"} );

CSS相关

css( "属性"); 获得该属性值

css( "属性","值"); 设置属性的值

css( { json} ); 设置多个属性的值

width(); 获得元素的宽度

width( number ); 修改元素的宽度

height(); 获得元素的高度

height( number ); 修改元素的高度

addClass(); 为元素添加类样式

removeClass(); 将元素的类样式移除

toggleClass(); 样式的切换（有->无，无->有）

节点操作

插入之父子关系

插入之兄弟关系

其他节点操作

替换节点 replaceWith() replaceAll()

复制节点 clone()

删除节点

​ remove() 删除整个节点

​ empty()清空节点内容

遍历节点

向上遍历

parent() 返回被选元素的直接父元素，仅仅是上一级 （找爸爸）

parents() 返回被选元素的所有祖先元素，它一路向上直到文档的根元素，可以选择辈分

左右遍历

next() 获取紧邻匹配元素之后的元素

prev() 获取紧邻匹配元素之前的元素

siblings( [selector] ) 获取位于匹配元素前面和后面的所有同辈元素

向下遍历

children([selector])获取元素所有的直接孩子

find([selector]) 获取孙子以及更后辈的元素

元素过滤

first()：过滤第一个元素

last()：过滤最后一个元素

eq(index)：过滤到下标为index的元素

not()：除了什么之外的元素

is()：返回布尔，判断是不是这种元素