前端类库之jQuery

jQuery简介

宗旨：Write less，do more
内部封装了js代码，使编程更加简单并且兼容所有主流浏览器
版本:1.x 2.x 3.x  # 可以使用3.x最新版
第三方类库：使用他需提前导入
 
 
jQuery下载
    压缩之后的版本将很多变量名全部使用英文字母代替了
本地导入
    缺点在于需要提前下载文件
    优点在于不会受到网络的影响
CDN导入
    # CDN:内容分发网络
    网站:bootcdn  jquery最好使用3.4.1版本
 
 
基本使用
    很多时候jQuery都是一行代码搞定所有
    """
    使用jQuery需要有关键字声明
        jQuery === $
    """

基本选择器

如何通过变量名来区分指代的是和种对象
    eg：
        如果是原始的js对象
            var pEle = ...
        如果是原始的jQuery对象
            var $pEle = ...
 
 
 
$('#d1')    # document.getElementById('d1')
$('.d1')    # document.getElementsByClassName('d1')
$('p')    # document.getElementsByTagName('p')
$('div.c1)# 查找class含有c1的div标签
$("#d1, .c1, p")  # 并列查找
$("x y")    // x的所有后代y（子子孙孙）
$("x > y")   // x的所有儿子y（儿子）
$("x + y")  // 找到所有紧挨在x后面的y
$("x ~ y")  // x之后所有的兄弟y

基本筛选器

：first   第一个
：last    最后一个
：eq（index）    索引等于index的那个元素
：even        匹配所有索引为偶数的元素，从0开始计数
：odd        匹配所有索引为奇数的元素，从0开始计数
：ge（index）    匹配所有大于给定索引值的元素
：lt（index）     匹配所有小于给定索引值的元素
：not（元素选择器）    移除所有满足not条件的标签
：has（元素选择器）    选取所有包含一个或多个标签在其内的标签（指的是从后代元素找）

属性选择器

$('[name]')
$('[name = "jason"]')
$('input[name = "jason"]')

表单选择器

1 2	`$(':text')` `# 查找属性值是text的form表单内的标签` `$(':checked')` `# 会连同option默认的selected一起找到`

筛选器方法

"""
使用原生js代码批量查找到标签之后  结果是一个数组
需要索引取值之后才可以调用标签的一些方法
 
使用jQuery代码批量查找到标签之后 结果是一个jQuery对象(像数组)
不需要索引取值 就可以直接调用封装的方法（直接 点 调用）
 
两者对象的转换
    js对象转jQuery对象
        $(js对象)
    jQuery对象转jd对象
        jQuery对象索引取值    # jQuery('p')[0]
"""
.next()
.nextAll()
.nextUntil()
.prev()
.prevAll()
.prevUntil()
.parent()
.parents()
.parentsUntil()
.children()
.siblings()
.find()

节点选择器

# 样式类操作
    addClass()  # classList.add()
    removeClass()  # classList.remove()
    hasClass()  # classList.contains()
    toggleClass()  # classList.toggle()
   
# 样式操作
    css('属性名','属性值')
     
$(window).scroll(function () {
    if ($(window).scrollTop() > 100) {
      $("#b2").removeClass("hide");
    }else {
      $("#b2").addClass("hide");
    }
  });
 
# 文本操作
    text()  # innerText
    html()  # innerHTML
    val()  # value
    jQuery对象先转js对象之后.files
    '''括号内不写参数就是获取值 写参数就是设置值'''
  
# 属性操作
    attr()  # setAttribute()
    '''适用于属性为静态的情况(不经常修改动态变化的)'''
    prop()
        $($(':checkbox')[1]).prop('checked',true)
    """适用于动态变化的情况 尤其是选择类标签"""
     
   
# 文档处理
    append()  # 内部的尾部追加元素
    prepend()  # 内部的头部追加元素
    after()  # 同级别下面添加元素
    before()  # 同级别上面添加元素
    remove()  # 移除当前元素
    empty()  # 清空当前元素内部所有的数据
    clone()  # 克隆标签 括号内可以加布尔值来明确是否克隆事件

事件

绑定事件的两种方式
    方式1
        jQuery对象.事件名(function(){})
            $('#d1').click(function(){alert(123)})
    方式2
        jQuery对象.on('事件名',function(){})
            $('#d1').on('click',function(){alert(123)})
"""
有时候绑定事件可能没有效果 这个时候可以考虑切换绑定方式
    方式1不行就方式2
    方式2不行就方式1
"""
 
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})