jQuery-jq选择器-页面加载-jq控制元素对象-jq获取盒子信息-jq事件-jq动画-jq结合css完成动画

最新推荐文章于 2021-11-28 14:34:43 发布

zdc45625

最新推荐文章于 2021-11-28 14:34:43 发布

阅读量769

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习

本文链接：https://blog.youkuaiyun.com/zdc45625/article/details/86651879

本文详细介绍了jQuery的使用，包括如何引入jQuery库，使用选择器定位DOM元素，页面加载时的操作，控制元素对象，获取元素尺寸信息，处理事件以及创建平滑的动画效果。此外，还探讨了jQuery如何与CSS结合，实现更丰富的视觉动画。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

jq引入

什么是jQuery：
jQuery是一个简洁高效的且功能丰富的JavaScript工具库，是对原生JavaScript二次封装的工具函数集合

优点：
开源 | 简洁的选择器 | 简化的Ajax操作 | 良好的浏览器兼容 | 强大的链式操作

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq引入</title>
    <style>
        .wrap {
   
   
            background-color: green;
        }
    </style>
</head>
<body>
<div class="box">jq引入</div>
<div class="box">jq引入</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    console.log(jQuery);
    console.log($);

    // jq简单使用
    $('.box').text("呵呵").css("color", "red").addClass("wrap").on("click", function() {
   
   
        alert("123");
    })
</script>
</html>

jq选择器

// 获取满足条件的所有页面元素jq对象
$('css3选择器语法');

// 拿到指定索引的页面元素jq对象
$('css3选择器语法').eq(index);

// 拿到指定索引的页面元素js对象 (jq对象转js对象)
$('css3选择器语法').get(index);

// js对象转jq对象
$(js对象);

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jq选择器</title>
    <style>
        body .box:first-child {
   
   }
    </style>
</head>
<body>
<div class="box">123</div>
<div class="box">456</div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
    // 使用jq => 该html页面有jq环境 => 引入jq => 依赖jq,所以jq要提前引入
    console.log(jQuery);
    console.log($);

    // jq选择器
    // $("css3选择器位")
    
    // 命名小规范，jq变量一般以$开头
    var $boxs = $('.box');
    console.log($boxs)

    // 拿到123
    // js与jq对象的相互转化
    // jq拿到文本
    console.log($boxs.text())

    // 只获取第一个box
    var $box = $('.box:nth-child(1)');
    console.log($box);
    console.log($box.text());
    console.log($box[0].innerText);

    // 总结：jq对象就是用数组包裹的js对象，可以包裹0个到多个

    // jq转js => 使用js语法
    var box1 = $boxs[0];
    console.log(box1);
    var box2 = $boxs.get(1);
    console.log(box2)

    // js转jq => 使用jq语法
    var $box1 = $(box1);
    console.log($box1);
</script>
</html>

页面加载

// js
// 页面结构及页面所需资源全部加载完毕，只能绑定一个事件方法
window

最低0.47元/天解锁文章

200万优质内容无限畅学