jQuery

1.介绍

• jQuery 是一个 JavaScript 库。

• 所谓的库，就是一个 JS 文件，里面封装了很多预定义的函数，比如获取元素，执行隐藏、移动等，目的就 是在使用时直接调用，不需要再重复定义，这样就可以极大地简化了 JavaScript 编程。

• jQuery 官网：https://www.jquery.com

• 一句说 ：jQuery是一个js的封装框架，对传统js操作的封装，可以用更方便的api，实现更丰富的功能

2.JQuery基本语法

2.1 js对象与jq对象相互转换

jQuery 本质上虽然也是 JS，但如果想使用 jQuery 的属性和方法那么必须保证对象是 jQuery 对象，而不是 JS 方式获得的 DOM 对象，二者的 API 方法不能混合使用，若想使用对方的 API，需要进行对象的转换

//jq对象是存储js对象的容器（可以理解为数组或者集合）
jq-->js
let js = jq[index];
let js = jq.get(index);

js-->jq
let jq = $(js);

2.2 标准事件操作

在js中是通过事件属性的方式进行事件绑定

在jq中是通过事件方法的方式进行事件绑定，jq中对所有js中的事件属性都做了封装；而且对于标准事件处理除了绑定外，还可以触发事件执行

//js操作
js.onclick = function(){

}
//jq操作
jq.click(function(){  //绑定事件，需要传入一个函数对象

});

jq.click(); //触发事件，不需要传递函数对象

2.3 时间的绑定&解绑

当事件是以字符串的形式告知时，无法通过标准的事件操作进行绑定，此时需要用到on/off/one实现

jq.on("事件名"，函数对象);  //给jq对象绑定指定名称的事件
jq.off("事件名"); //解除jq对象指定名称的事件
jq.off();  //解除jq对象上绑定的所有事件
jq.one("事件名",函数对象);  //给jq对象绑定一个一次性有效的事件

2.4 事件切换

事件的切换：需要给同一个对象绑定多个事件，而且多个事件还有先后顺序关系

//单独定义
$("#div").mouseover(function(){
    //背景色：红色
    //$("#div").css("background","red");
    $(this).css("background","red");
    });
$("#div").mouseout(function(){
    //背景色：蓝色
    //$("#div").css("background","blue");
    $(this).css("background","blue");
});
//链式定义
$("#div").mouseover(function(){
   $(this).css("background","red");
}).mouseout(function(){
   $(this).css("background","blue");
});

//其它切换
//悬浮切换
jq.hover(函数对象1，函数对象2);  //当鼠标移入jq对象时，执行函数对象1的功能，当鼠标移出时，执行函数对象2的功能
$("#tb").hover(function () {
        $("#tb")[0].innerHTML += "<tr>\n" +
            "    <td>1</td>\n" +
            "    <td>2</td>\n" +
            "    </tr>\n"
    },function () {
        $("#tb")[0].innerHTML += "<tr>\n" +
            "    <td>1</td>\n" +
            "    <td>2</td>\n" +
            "    </tr>\n"
    });

//单击切换
jq.toggle(fun1,fun2,fun3,...); //当鼠标单击jq对象时，单击一次，执行fun1，单击第二次，执行fun2，单击第三次，执行fun3，单击第四次，执行fun1，...
    imp.toggle(function () {
        alert($("div1").html())
    },function () {
        alert($("div2").html())
    });

** 注意：1.9版本后，toggle方法想要实现单击切换，必须引入迁移插件，这个迁移插件其实就行对原本jq框架中的toggle方法实现覆盖，所以需要在jq的js文件之后引入。

2.5 事件委派

//给一个父容器中的子元素绑定事件,这个子元素可以是现在存在的，也可以是未来通过js添加的

jq.delegate("子元素","事件名",fun); //给jq对象的指定子元素绑定指定名称的事件

$("#show").delegate("div","mouseover", function () {
        this.style.backgroundColor = "yellow";
});

 $("#show").delegate("div","mouseout", function () {
      this.style.backgroundColor = "white";
 });

 $("#show").delegate("div","click", function () {
     let val = this.innerHTML;
     $("#username").val(val);
     $("#show").hide();
});

2.6入口函数

//js入口函数
onload = function(){}  //变量赋值，后赋的值会把之前的覆盖掉，所以只能写一个

//jq  入口函数
$(document).ready(function(){});
$(function(){}); //对象掉方法，只要对象存在，方法可以无限调用

2.7 遍历操作

//方式一：数组的遍历方式
for(let i=0;i<jq.length;i++){
    let js = jq[i];  //获取指定索引的js对象
}

//方式二：jq对象
jq.each(function(index,ele){
    //index:当前遍历到的元素角标
    //ele:当前遍历到的那个元素的js对象形式
    //this === ele
    
});

//方式三：$工具方法 (推荐使用)
$.each(jq/js[],function(index,ele){
    //index:当前遍历到的元素角标
    //ele:当前遍历到的那个元素的js对象形式
    //this === ele
    
});

//方式四：for..of 
for(ele of jq){
   //ele：遍历到的元素js对象形式
}

3.jq选择器 - 获取元素

$("标签名")//元素选择器 
$("#id值") //id选择器
$(".class值")//类选择器 

//层级选择器
$("s1 s2")  //查询s1下的所有s2
$("s1>s2")  //查询s1下的直接子元素s2
$("s1+s2") //查询s1相邻的s2
$("s1~s2") //查询s1相邻的所有s2

//属性选择器
$("元素[属性名]")
$("[属性名=属性值]")

//过滤器选择器
$("s1:first")  //获取s1中的第一个
$("s1:last")  //获取s1中的最后一个
$("s1:even")  //获取s1中偶数个，从0开始
$("s1:odd")  //获取s1中奇数个，从0开始

$("s1:gt(index)")  //获取s1中大于指定索引的
$("s1:lt(index)")  //获取s1中小于指定索引的
$("s1:eq(index)")  //获取s1中等于指定索引的

$(":text")  //获取type类型为text的input元素
//其他类型类似

$(":checked")  //获取单选按钮/复选框被选中的
$(":selected") //获取下拉选中被选中的

4.jq的DOM操作

4.1 操作文本

//js操作
js.innerText
js.innerHTML
js.value

//jq操作
jq.text(); //获取
jq.text(""); //设置

jq.html();//获取
jq.html("");//设置
jq.append("") //追加内容

jq.val(); //获取
jq.val(""); //设置

4.2 操作对象

        1. $("元素")   创建指定元素
        2. append(element)   添加成最后一个子元素，由添加者对象调用
        3. appendTo(element) 添加成最后一个子元素，由被添加者对象调用
        4. prepend(element)  添加成第一个子元素，由添加者对象调用
        5. prependTo(element) 添加成第一个子元素，由被添加者对象调用
        6. before(element)    添加到当前元素的前面，两者之间是兄弟关系，由添加者对象调用
        7. after(element)     添加到当前元素的后面，两者之间是兄弟关系，由添加者对象调用
        8. remove()           删除指定元素(自己移除自己)
        9. empty()            清空指定元素的所有子元素

4.3 操作样式

//js方式
js.style.CSS属性名
js.className

//jq方式
jq.css("CSS属性名","CSS属性值"); // 设置CSS样式
jq.addClass("class值");//给指定的对象添加样式类名
jq.removeClass("class值");//给指定的对象删除样式类名
jq.toggleClass("class值");//如果没有样式类名，则添加。如果有，则删除

4.4 操作属性

js.属性名

//jq
jq.attr();
jq.removeAttr();
jq.prop();
jq.removeProp();

***注意：attr操作自定义属性，prop操作元素的固有属性
    优先选择使用prop/removeProp，如果不行再使用attr/removeAttr