day26 - jQuery

jQuery是js的一个库

库： 就是封装好一个js文件，里面有很多js常用的操作，封装成了一些使用起来比较简单，功能比较强大的方法

jQuery 强大之处：

1. 强大的选择器
2. 优质的隐私的迭代
3. 无所不能的链式编程

4个基本选择器：

1. id      $（“#id名”）
2. 类名     $（“.类名”）
3. 标签名   $（“标签名”）
4. 属性     $（“[属性名='属性值']”）

伪类选择器：

1. $("li:first-child")
2. $("li:last-child")
3. $("li:nth-child(数字)") // 第一个元素对应数字是1
4. $("li:empty") // 空标签

筛选器：

和伪类选择一样，筛选出需要的元素
就是从上一次选择到的元素中筛选出希望得到的元素

1.  $("li:first")//第一个
2.  $("li:last")//最后一个
3.  $("li:event")//第奇数个
4.  $("li:odd")//第偶数个
5.  $("li:eq(下标)") // 选择下标是指定数字的元素
6.  $("li:lt(下标)") // 下标小于指定数字的元素
7.  $("li:gt(下标)") // 下标大于指定数字的元素

筛选器的方法：

1. $("li").first() // 第一个元素
2. $("li").last() // 最后一个元素
3. $("div").eq(下标) // 指定下标的div元素
4. $("div").next() // div的下一个兄弟元素
5. $("div").prev() // div的上一个兄弟元素
6. $("div").nextAll() // div后面的所有兄弟元素
7. $("div").prevAll() // div前面的所有兄弟元素
8. $("div").parent() // div的父元素
9. $("div").parents() // div的所有直系祖宗元素
10. $("div").find(“选择器”) // div下的指定元素
11. $("div").siblings() // div的所有兄弟元素
12. $("div").children() // div的所有子元素

表单对象选择器：

1. $("input:enabled") // 所有可用表单元素
2. $("input:disabled") // 所有禁用表单元素
3. $("input:checked") // 所有选中的表单元素
4. $("option:selected") // 被选中的下拉框元素

事件方法：

on方法
    $(元素).on(事件类型,[委托元素],[传入的参数],处理的函数);
trigger - jquery的事件可以手动触发 
    $(元素).trigger(事件类型);
one - 只能执行一次的事件；绑定后只能触发一次：
    $(元素).one(事件类型，处理的函数);

off方法
    $(元素).off(事件类型,处理函数);
hover方法
将鼠标移入和鼠标移出的事件作为一个事件    
    $(元素).hover(事件类型，function(){
        //鼠标移入的时候触发
    },function(){
        //鼠标移出的时候触发
    });

属性操作：

attr操作的是元素自定义属性
获取属性：
    $("div").attr(属性名);
设置属性：
    $("div").attr(属性名,属性值);
删除属性：
    $("div").removeAttr(属性名); 
attr这个方法来操作属性跟原生js的setAttribute、getAttribute、removeAttribute操作一样

prop操作的是元素的自带属性
获取属性：
    $("div").prop(属性名);
设置属性：
    $("div").prop(属性名,属性值);
删除属性：
    $("div").removeProp(属性名);

样式操作：

获取样式：
    $("div").css(css属性名);
设置样式：
    // 设置一个样式
    $("div").css(css属性名,属性值);
    // 设置多个样式
    $("div").css({
           css属性名:属性值,
           css属性名:属性值
    });

类名操作：

添加类名：
    $("div").addClass(类名);
删除类名：
    $("div").removeClass(类名);
类名切换 - 在添加和删除之间切换
    $("div").toggleClass(类名);//如果存在就删除；不存在就添加
判断元素是否有这个类名 - 有是true，没有是false
    $("div").hasClass(类名);

内容操作：

获取元素文本的内容：
    $("div").text(); //相当于 div.innerText
设置元素内容：
    $("div").text("将要设置的内容"); //相当于 div.innerText = "将要设置的内容"
获取元素带标签的内容：
    $("div").html(); //相当于 div.innerHTML
获取表单元素的值：
    $("input").val(); //相当于 input.value
设置表单元素的内容：
    $("input").val("请输入用户名"); //相当于 input.value = "请输入用户名"

节点操作：

一、创建节点：
    $("完整的标签以及内容")
二、插入节点：
    ①追加到父节点的末尾：
        父节点.append(子节点)// 将子元素追加到父元素末尾
        子节点.appendTo(父节点)// 将子元素追加到父元素末尾
    ②追加到父节点的开头：
        父元素.prepend(新元素)// 将新元素添加到父元素的开头
        子元素.prependTo(父元素); // 将子元素添加到父元素的开头
    ③添加成兄弟元素：    
        新元素.insertBefore(旧元素)// 将新元素添加到旧元素前
        新元素.insertAfter(旧元素)// 将新元素添加到旧元素后
        旧元素.before(新元素)  // 将新元素添加到旧元素前
        旧元素.after(新元素)  // 将新元素添加到旧元素后
三、替换节点：
        旧元素.replaceWith(新元素) // 使用新元素替换旧元素
        新元素.replaceAll（旧元素）// 使用新元素替换旧元素
四、删除节点：
        父元素.empty()//删除父元素中的所有内容（文本、标签、子元素、后代元素）
        父元素.remove() // 删除当前标签和自己内部所有内容
五、复制节点：
        元素.clone(true，false)
// clone方法有参数，第一个参数是布尔值，true表示复制大盒子的事件
// clone方法有第二个参数，表示是否复制子节点的事件

本文地址：https://blog.csdn.net/weixin_45274291/article/details/107520736