JavaScript中的JQuery

最新推荐文章于 2024-05-07 11:07:47 发布

贰贰200321

最新推荐文章于 2024-05-07 11:07:47 发布

阅读量3.3k

点赞数

文章标签： javascript 前端 jquery vscode

本文链接：https://blog.csdn.net/qq_44997166/article/details/124312390

版权

概述

jquery是一个前端的js库，他封装了一些原生的操作的方法以及解决一些原生的兼容。同时也是一个轻量级的js库，具备强大的方法封装（dom操作动画以及链式调用等等的优势）

Jquery库入门

jQuery API 中文文档 | jQuery 中文网 jQuery API 中文文档 | jQuery 中文网 jQuery API 中文文档 | jQuery 中文网中文API

jQuery jQuery jQuery 官网

1.导入

<!-- jquery导入 -->
    <script src="./js/jquery.min.js"></script>

2.使用

jQuery;//核心变量 里面的方法都是通过他来调用
console.log(jQuery('body')); //通过JQuery对象来调用获取方法
console.log($('body')); // 使用$来替代jQuery

DOM操作

jquery有丰富的选择器以及相关的筛选器（便利了dom操作）

选择器

// 使用选择器获取对应的内容 使用$(选择器);
console.log($('#box')); //id为box的元素
console.log($('.inner')); //class为inner的元素
console.log($('li')); //获取标签为li
console.log($('ul>li')); //使用后代选择器
console.log($('li[name=LQJ]')); //使用属性名＋选择器名获取元素 获取name为LQJ的li元素
// 按照使用的方式来区别用法
console.log($('li').length);
console.log($('li').css('background', 'red'));
// 特殊选择器
console.log($('li:first')); //获取第一个li
console.log($('li:last')); //获取第一个li
console.log($('li:eq(2)')); //获取下标为二的li元素 获取第三个
console.log($('li:odd')); //获取下标奇数位
console.log($('li:even')); //获取下标偶数位

筛选器(对于已经选择的元素进行筛选)

// 筛选器
// 获取第一个内容
console.log($('li').first());
// 获取最后一个内容
console.log($('li').last());
// 获取上一个内容   里面参数可传入选择器名称
console.log($('li:eq(2)').prev());
console.log($('li:eq(2)').prev(".active")); //如果上一个不能被这个选取器选择 返回内容为空
// 获取下一个内容   里面参数可传入选择器名称
console.log($('li:eq(2)').next());
console.log($('li:eq(2)').next('.selected')); //如果下一个不能被这个选取器选择 返回内容为空
// 获取上面所有内容
console.log($('li:eq(2)').prevAll()); //获取1 2
console.log($('li:eq(2)').prevAll('.active')); //获取1
// 获取下面所有内容
console.log($('li:eq(2)').nextAll()); //获取4 5
console.log($('li:eq(2)').nextAll('.selected')); //获取5
 // 获取父元素
console.log($('li').parent()); //ul
console.log($('li').parent('ul')); //ul
// 获取所有的父元素
console.log($('li').parents()); //ul body html
console.log($('li').parents('ul'));
// 获取所有子元素   第一级的子元素
console.log($('ul').children());
console.log($('ul').children('.active'));
// 获取所有兄弟元素     里面参数可传入选择器名称
console.log($('li:eq(2)').siblings());
console.log($('li:eq(2)').siblings('active'));
// 查找元素
console.log($('ul').find('li')); //在ul里面查找li
console.log($('ul').find('a')); //在ul里面查找a
// 通过索引筛选
console.log($('li').eq(1)); //获取索引为1的li

属性操作

// prop传一个参数为获取 两个参数为设置
console.log($('#box').prop('id')); //box
// 给box设置一个class属性 值为inner
console.log($('#box').prop('class', 'inner'));
// 对于本身没有的属性 不会显式添加 但是可以使用
$('#box').prop('name', 'jack')
console.log($('#box').prop('name'));

// attr 读取显式添加的内容
console.log($('div').attr('name')); //undefined
console.log($('div').attr('class')); //inner
// 设置的时候也会显示添加
$('div').attr('age', 18);
// 关于prop attr的删除
$('div').removeAttr('class'); //显示删除
$('div').removeProp('name'); //隐式删除 删除prop自己添加的 以及自带的
$('div').removeProp('age'); //删不了
console.log($('div').removeProp('name'));
// class属性的其他操作方法
$('div').addClass('tom'); //添加class属性值
$('div').removeClass('inner') //删除class属性
console.log($('div').hasClass('inner')); //判断存在于的class名字
$('div').toggleClass(); //切换class 对于已经有class的删除 没有的添加

样式操作

//text() html() val()三者都是不传参获取 传参设置
// text() 
console.log($('div').eq(0).text());
$('div').eq(0).text('我是重新设置的');
// html()
console.log($('div').eq(1).html());
$('div').eq(1).html('<span href="">hi,叼毛</span>');
// val()
console.log($('input').val());
$('input').val('帅哥');
// 样式操作
// 传一个参数为获取 两个参为设置
console.log($('div:eq(0)').css('width'));
$('div:eq(0)').css('backgroundColor', 'red');

元素的操作

//创建元素节点
// 父子节点
let $div = $('<div>创建的</div>');
// 添加操作
$('body').append($div); //往后添加
// $div.appendTo('body'); //把创建的div添加到body里面
// 往前添加
let $a = $('<a>添加的a</a>');
$a.attr('href', 'http://www.baidu.com');
// $('body').prepend($a);
$a.prependTo($('body'));

// 兄弟节点
// after 在什么之后 before 在什么之前
let $b = $('<b>创建的b</b>');
$('div').eq(0).after($b); //在div的后面添加
$b.insertAfter($('div').eq(0)); //将b标签插入到div的后面
let $p = $('<p>创建的p</p>');
$('div').eq(0).before($p); //在div的前面添加
$p.insertBefore($('div').eq(0)); //将p标签插入到div的前面

// 替换
let $h = $('<h1>创建的h1</h1>');
$('div').replaceWith($h);
// $('<a>替换</a>').replaceAll($('div'));
// 删除 remove
// $('ul').remove()//会将对应的所有的内容包括自身的全部删除（事件也会被删除）
//将li里面匹配对于的.save内容进行删除
$('li[class=save]').remove();
// $('li') .remove('.save ')
//删除方法将里面的所有的元素全部删除
// $('li').empty() //将里面的节点全部清空
//克隆clone 是否克隆所有的属性 是否克隆事件默认为false (不克隆)
$(' body').append($('li').eq(0).clone())

关于元素的大小获取

// width height方法 不包含padding以及margin
console.log($('div').width()); //100
console.log($('div').height()); //100
// innerWidth innerHeight 包含padding 不包含margin 也不包含border
console.log($('div').innerWidth()); //200
console.log($('div').innerHeight()); //200
// outerWidth outerHeight 包含padding border 不包含margin
console.log($('div').outerWidth()); //220
console.log($('div').outerHeight()); //220
// outerWidth outerHeight这个里面 是否包含margin 如果true 就包含margin 默认为false
console.log($('div').outerWidth(true)); //320
console.log($('div').outerHeight(true)); //320

元素的位置获取

// offset 基于body偏移位置 返回的是一个对象
console.log($('div').offset()); //返回的是对象 {top: 58, left: 58}，当定位为相对定位的时候58，绝对定位的时候50
console.log($('div').offset().left); //返回的是离body左边的距离
console.log($('div').offset().top); //返回的是离body上边的距离
// position 定位 返回基于父元素定位的位置 返回的是对象
console.log($('div').position()); //返回的是对象 {top: 58, left: 58}，当定位为相对定位的时候58，绝对定位的时候50
console.log($('div').position().left);
console.log($('div').position().top);

事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.min.js"></script>
</head>

<body>
    <div>
        <button class="btn">点我</button>
    </div>
    <script>
        //事件类型 事件处理
        $('button').on('click', function(e) {
            console.log(this); //执行button
            console.log(e); //相当于window的event对象
            console.log('点击了');
        });
        // 在发布事件的时候携带数据
        $('button').on('click', {
            name: 'jack'
        }, function(e) {
            // 获取携带的数据 对象
            console.log(e.data);
        });
        // 事件委托机制
        $('div').on('click', function(e) {
            console.log(this); //指向div
            console.log(e.target); //button
        });
        // // 取消事件
        $('div').off()
            // 执行一次的事件 事件名 事件的处理函数
        $('button').one('click', function() {
            console.log('点击了');
        });
        // 自动执行事件
        $('button').trigger('click')
    </script>
</body>

</html>

滚动栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/jquery.min.js"></script>
    <style>
        body {
            height: 1500px;
            width: 3000px;
        }
    </style>
</head>

<body>
    <script>
        $(window).on('scroll', function() {
            console.log($(window).scrollLeft()); //滚动栏距离左边的距离
            console.log($(window).scrollTop()); //滚动栏距离上边边的距离
        })
    </script>
</body>

</html>