前端学习笔记---jQuery框架

jQurey

jQurey内部封装了原生的js代码，能够让我们通过更简单方法来实现js操作，在前端
模块并不称为模块，而是被称为: 类库

jQuery宗旨

write less to more

jQuery使用

下载在本地
1.复制到一个js文件中
2.在html文件中导入该js文件
不在本地
直接引用jQuery提供的CDN服务，基于网络直接请求加载
CDN：内容分发网络
有免费的 bootcdn 
导入:
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
缺点: 计算机必须有网络

jQuery 基本语法

jQuery(选择器).action()
jQuery简写 $
jQuery() == $()

jQuery选择器

拿到的是jQuery对象, 转化为标签对象:$('#id')[0],标签对象转换为jQuery对象:$(标签对象)

基本选择器

1.id选择器
$('#id')
2.class选择器
$('.class')
3.标签选择器
$('div')

组合选择器/分组与嵌套

1.通用
    $('*')
2.并列
    $('#d1,.c1,p')
3.后代
    $('div p')
4.儿子
    $('div>p')
5.毗邻
    $('div+p')
6.弟弟
    $('div~p')

基本筛选器

1.拿到ul里第一个li
    $('ul li:first')
2.拿到最后一个
    $('ul li:last')
3.索引
    $('ul li:eq(2)')
4.拿到索引大于某值的
    $('ul li:gt(2)')
5.拿到索引小于某值的
    $('ul li:lt(2)')
6.排除某标签
    $('ul li:not("#id")')
7.内部含有某条件的标签
    $('ul li:has("p")')

属性选择器

$('[username]')

$('[username=''cc'']')
    
$('p[username=''cc'']')

表单筛选器

$(':text')
$(':checked')

筛选器方法

.next() 拿到标签的下一个
.nextAll() 拿到下面全部
.nextUntil('')  拿到下一个，直到括号内为止

.prev() 拿到标签上一个
.prevAll()
.prevUntil('')


.parent() 拿到父标签
.parents()  拿到全部父标签
.parentsUnitl('') 拿父标签到什么为止

.children() 后代
.siblings() 兄弟 //同级别上下所有


.find('') 在区域内筛选标签

jQuery标签操作

样式类操作

js版本:
    classList.add()
    classList.contains()
    classList.remove()
    classList.toggle()

jQuery版本:
    addClass()  # 添加类
    removeClass() # 移除类
    hasClass() # 存在某类
    toggleClass()  # 存在删除 不存在添加

jQuery 链式操作 jQuery对象返还的还是该对象
$('p').first().css('color','red').next().css('color','blue')


位置操作:
    offset()  # 拿到当前标签对窗口的位置
    position() # 当前标签对父标签的位置
    scrollTop() # 不加参数获取滚动条距离顶部的距离 加参数可以跳转
    scrollLeft()  #  

尺寸:
    height() # 文本高度
    width() # 文本宽度
    innerWidth() # 文本和padding
    outHeight() # 文本+padding+border

文本 标签操作:
    text()  不加参数是获取 加了是赋值
    html()

如何获取用户输入数据：
    .val() 不加获取 加了赋值

获取文件:
     $('')[0].files[0]  # 转为原生js对象


属性操作:
    .attr(name,value)
    .attr(name)
    removeAttr(name)
    ps:
        $XXXEle 命名变量

    选择按钮返回:
        .prop() 
    
创建标签:
    $pEle = $(’<p>‘) 创建一个p标签
添加标签:
    $('div').append($pEle) 添加到内部尾部
    $('div').prepend($pEle) 添加到内部前面
    $('div').after($pEle)  在div后面
    $('div').before($pEle)  在div前面

    .remove() 删除标签
    .empty() 清空标签内部的全部内容

jQuery事件

绑定事件:
    <button id='d1'>点我</button>
    <button id='d2'>再点我</button>

    第一种:
        $('#d1').click(
        function(){
            alert('别点啦')
        }   
        )
    
    第二种: 功能强大
        $('#d2').on('click',function(){
        alert('求你了,别点了')
        }
        )

克隆事件:
    .clone 默认只克隆html和css 
    .clone(True) 克隆事件



自定义模态框：
        本质就是移除或者添加hide类
        let $coverEle = $('.cover')
        let $modalEle = $('.modal')
        $('#d1').on('click', function () {
            $coverEle.removeClass('hide')
            $modalEle.removeClass('hide')
        })
        $('#d2').on('click',function (){
            $coverEle.addClass('hide')
            $modalEle.addClass('hide')
        })

菜单栏:
    本质也是添加移除hide类
    
返回顶部:
    $(window).scroll(function (){
        if($(window).scrollTop()>300){
            $('.back').removeClass('hide')
        }else{
            $('.back').addClass('hide')
        }
    })  //.back 得到a标签


校验(提示密码不能为空):

---

let username = $('#i1')
let password = $('#i2')
$('#d1').click(function () {
    let name = username.val()
    let pass = password.val()
    if (!name) {
        username.next().removeClass('hide')
    }
    if (!pass) {
        password.next().removeClass('hide')
    }
})
$('input').focus(function (){
    $('input').next().addClass('hide')
})

---

input框实时检验
    .input()事件
        username.on('input',function (){
            console.log(username.val())
        })
    当input框内val变化 就会触发该事件

hover事件(悬浮事件)  进入标签 移出标签 都会触发一次
    内部放入一个函数 则两个事件是一个内容
    可以放两个函数 进入和移出各触发一次

键盘按下事件:
$(window).on('keydown',function(event){
    console.log(event.keyCode)
})

---

阻止后续事件执行

    $('#d2').click(function (e) {
    $('#d1').text('点我干嘛')
    e.preventDefault()
    // return false
    // 阻止后续事件发生
    // 方式1： return false  常用
    // 方式2： 参数e    e.preventDefault()
    })

阻止事件冒泡

    嵌套标签的事件同时发生(事件冒泡)解决方法
    <div id="d1"> div
        <p id="d2"> p
            <span id="d3">
                span
            </span>
        </p>
    </div>


    $('#d1').click(function (){
        alert('div')
    })
    $('#d2').click(function (){
        alert('p')
    })
    $('#d3').click(function (e){
        alert('span')
        //方式1:
        // return false  常用
        //方式2:
        e.stopPropagation()
    })      

事件委托

    为后续动态添加标签添加初始的事件
    $('body').on('click','button',function (){
        alert(123)
    })

    将body内全部的的click事件委托给button按钮
    在指定范围内将事件委托给指定的标签

页面加载

    页面上上到下加载 所有script一般放在下面
    window.onload = function(){
        //js代码
    }

    jQuery 中等待页面加载方式   
    方式1
    $(document).ready(function(){
        //js代码
    })
    方式2
    $(function(){
        //js代码
    })
    方式3 
    写在body最下方

动画效果

    $('#id').hide(3000)  // 3s内隐藏 不是消失
    $('#id').show(3000)  // 3s内展示
    $('#id').slideUp(3000)  // 3s内向上卷起来隐藏
    $('#id').slideDown(3000)  // 3s内向下卷起来隐藏
    $('#id').fadeIn(3000) // 3s内显现
    $('#id').fadeOut(3000)  // 3s内透明
    $('#id').fadeTo(3000,0.4)  // 3s内变为0.4的 透明度

补充

each() 方法
    用法1:
    $('div').each(function (index) {
        // index拿到索引
    })
    $('div').each(function (index, object) {
        // index拿到索引
        // object拿到对象  相当于for循环得到全部对象
    })

    用法2:
        $.each([1,2,3],function(index,ob)){
        //循环赋值 0 1   1 2   2 3
        }


data() 方法
    // 可以让标签来临时存储数据 并且用户眼睛看不见  自定义属性
    
        $('div').data('info','i love you')
        给全部div 加一个 （键为: info  值:i love you） 但是在标签内看不到该键值对
        $('div').first().data('info')  取值

        删除:
            $('div').first().removeData('info')