jQuery 学习笔记

已于 2023-10-02 19:50:13 修改
阅读量79 收藏
点赞数 1
分类专栏： 前端 笔记 jQuery 文章标签： jquery 学习 笔记
于 2023-10-02 19:49:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33365152/article/details/133488508
版权
笔记 同时被 3 个专栏收录
26 篇文章 1 订阅
订阅专栏
前端
8 篇文章 0 订阅
订阅专栏
jQuery
1 篇文章 0 订阅
订阅专栏

jQuery 学习笔记

jQuery 手册地址

什么是 jQuery ?

  • jQuery 是一款跨主流浏览器的 JavaScript 库，封装了 JavaScript 相关方法调用，简化 JavaScript 对 HTML DOM 操作。

语法

  • 示例代码如下：
/**
 * $:jQuery 中的函数名
 * document：是参数
 * $(document)：把 js 中的 document 对象变成 jQuery 可以使用的对象。
 *              然后调用 ready() 的函数。
 *              这个 ready() 是 jQuery 中的函数
 * ready() 的执行时间再页面 dom 对象加载后执行，相当于 js 中的 onload 事件
 * ready(函数)：表示在页面对象加载后执行 
 */

// 第一种写法
$(document).ready(function () {
    alert('你好，世界1')
})

// 第一种写法等价于下面写法
$(document).ready(
    myinit(),
    myinit2()
)
function myinit() {
    alert('我是 myinit 函数')
}
function myinit2() {
    alert('我是 myinit2 函数')
}

简写方式

  • 示例代码如下：
/**
 * 参数是一个函数
 */
$(function () {
    // 页面 DOM 加载之后执行
    alert('你好，世界1')
})

DOM 对象和 jQuery 对象

对象的分类

  • DOM 对象：是用 JavaScript 语法创建的对象，也看做是 js 对象。html 中的对象都是 DOM 对象。
  • jQuery对象：使用 jQuery 获取的对象。
  • DOM 对象可以转换成 jQuery 对象。

DOM 对象转换为 jQuery 对象

  • 使用 $(DOM 对象) 方式，可以 DOM 对象转换为 jQuery 对象，转换为 jQuery 对象才可以使用 jQuery 中提供的方法，操作 DOM 对象。一般情况下，在命名 jQuery 对象时，为了与 DOM 对象进行区分，习惯性的以 $ 开头，这不是必须的。
  • 示例代码如下：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!-- <script src="./js/index.js"></script> -->
    <script>
        $(function () {
            // 通过 js 的函数，获取 DOM 对象
            var dom = document.getElementById('txt')
            // 把 DOM 对象转换为 jQuery 对象
            var jQueryObj = $(dom)
            // 调用 jQuery 中的函数，获取 dom 对象的 value 属性的值
            alert(jQueryObj.val())
        })
    </script>
</head>

<body>
    <input type="text" id="txt" value="你好，jQuery">
</body>

</html>

jQuery 对象转换为 DOM 对象

  • 语法：jQuery 对象是一个数组，数组成员是 DOM 对象。使用 [下标] 或 get(下标)
  • 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <!-- <script src="./js/index.js"></script> -->
    <script>
        $(function () {
            // js 获取 DOM 对象
            var obj = document.getElementById('txt')
            console.log(obj);

            // $('#txt')：获取 id 为 txt 的 DOM 对象，结果是数组 jQuery 对象
            console.log($('#txt'));

            // $('#txt')[0] 就是 DOM 对象
            console.log($('#txt')[0]);
        })
    </script>
</head>

<body>
    <input type="text" id="txt" value="你好，jQuery">
</body>

</html>

上面示例代码运行结果，如下图：
在这里插入图片描述

选择器

  • 选择器：就是定位条件。通知 jQuery 函数定位满足条件的 DOM 对象
  • 基本选择器
    • 根据 ID 、class 属性目标前类型名定位 HTML 元素，转换为 jQuery 对象

1、ID 选择器

  • 语法：$(‘#ID’)
  • 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script>
        // 点击按钮切换 div 的样式，添加 .box 类名
        $(function () {
            $('#btn').on('click',()=>{
                $('#container').addClass('box')
            })            
        })
    </script>
</head>

<body>
    <div id="container">你好，jQuery</div>
    <button id="btn">切换</button>
</body>

</html>

2、class类选择器

  • 语法：$(‘.class名称’)
  • 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script>
        // 点击按钮切换 div 的样式，添加 .box 类名
        $(function () {
            $('.btn').on('click',()=>{
                $('.container').addClass('box')
            })            
        })
    </script>
</head>

<body>
    <div class="container">你好，jQuery</div>
    <button class="btn">切换</button>
</body>

</html>

3、标签选择器

  • 语法：$(‘标签名称’)
  • 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
    <script>
        // 点击按钮切换 div 的样式，添加 .box 类名
        $(function () {
            $('button').on('click',()=>{
                $('div').addClass('box')
            })            
        })
    </script>
</head>

<body>
    <div class="container">你好，jQuery</div>
    <button class="btn">切换</button>
</body>

</html>

4、所有选择器

  • 语法：${“*”} 选取页面中所有 DOM 对象。

5、组合选择器

  • 组合选择器是多个被选对象间使用逗号分隔后形成的选择器，可以组合 id、class、标签名等。
  • 语法：$(“#id ,.class,标签名”)

表单选择器

  • 表单相关元素选择器是指文本框、单选框、复选框、下拉列表等元素的选择方式。该方法无论是否存在表单 form ，均可做出相应选择。表单选择器是为了能更加容易地操作表单，表单选择器是根据元素类型定义的。
  • 语法：$(“:type 属性值”)
  • 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function () {
            // 获取文本内容
            $('#btn1').on('click', () => {
                console.log($(':text').val());
            })

            // 获取单选框内容
            $('#btn2').on('click', () => {
                for (var i = 0; i < $(':radio').length; i++) {
                    var obj = $(':radio')[i]
                    console.log(obj.value); // js 写法
                    console.log($(':radio').val()); // jQuery 写法
                }
            })

            // 获取复选框内容
            $('#btn3').on('click', () => {
                for (var i = 0; i < $(':checkbox').length; i++) {
                    var obj = $(':checkbox')[i]
                    console.log(obj.value); // js 写法
                    console.log($(':checkbox').val()); // jQuery 写法
                }
            })
        })
    </script>
</head>

<body>
    <input type="text" value="我是表单 input 组件">
    <button id="btn1">获取文本内容</button>
    <br>
    <hr>
    <input type="radio" name="1" value="man">男
    <input type="radio" name="1" value="woman">女
    <button id="btn2">获取单选框内容</button>
    <br>
    <hr>
    <input type="checkbox" value="篮球">篮球
    <input type="checkbox" value="足球">足球
    <input type="checkbox" value="排球">排球
    <button id="btn3">获取复选框内容</button>
</body>

</html>

过滤器

  • jQuery 对象中存储的 DOM 对象顺序与页面标签声明位置关系

基本过滤器

  • 1、示例：选择第一个（first），保留数组中第一个 DOM 对象
  • 语法：$(“选择器:first”)
  • 2、示例：选择最后一个（last），保留数组中最后一个 DOM 对象
  • 语法：$(“选择器:last”)
  • 3、示例：选择数组中指定对象
  • 语法：$(“选择器:eq(数组索引)”)
  • 4、示例：选择大于某个下标的所有成员
  • 语法：$(“选择器:gt(数组索引)”)
  • 5、示例：选择小于某个下标的所有成员
  • 语法：$(“选择器:lt(数组索引)”)
  • 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function () {
            // 获取元素内容
            console.log($('ul li:first').text());   // 第一个
            console.log($('ul li:last').text());    // 最后一个
            console.log($('ul li:eq(2)').text());   // 第三个
            console.log($('ul li:gt(2)').text());   // 下标大于 2 的元素内容
            console.log($('ul li:lt(2)').text());   // 下标小于 2 的元素内容
        })
    </script>
</head>

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</body>

</html>

表单对象属性过滤器

  • 1、示例：选择可用的文本框
  • 语法：$(“:text:enabled”)
  • 2、示例：选择不可用的文本框
  • 语法：$(“:text:disabled”)
  • 3、示例：复选框选中的元素
  • 语法：$(“:text:checked”)
  • 4、示例：选择指定下拉列表的被选中元素
  • 语法：$(“选择器>option:selected”)
  • 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function () {
            // 获取可用的文本框
            $('#btn1').click(() => {
                console.log($(':text:enabled').val());
            })

            // 获取不可用的文本框
            $('#btn2').click(() => {
                console.log($(':text:disabled').val());
            })

            // 获取选中的复选框内容
            $('#btn3').click(() => {
                var selectedObj = $(':checkbox:checked')
                for (var i = 0; i < selectedObj.length; i++) {
                    // $(selectedObj[i]).val() DOM 对象转换为 jQuer 对象
                    console.log($(selectedObj[i]).val());
                }
            })

            // 获取选中的下拉列表内容
            $('#btn4').click(() => {
                console.log($('#selected>option:selected').val());
            })
        })
    </script>
</head>

<body>
    <input type="text" value="我是可用的文本框">
    <button id="btn1">选择可用的文本框</button>
    <br>
    <input type="text" disabled value="我是不可用的文本框">
    <button id="btn2">选择不可用的文本框</button>
    <br>
    <hr>
    <input type="checkbox" value="篮球">篮球
    <input type="checkbox" value="足球">足球
    <input type="checkbox" value="排球">排球
    <button id="btn3">被选中的复选框内容</button>
    <br>
    <hr>
    <select name="" id="selected">
        <option value="篮球">篮球</option>
        <option value="足球">足球</option>
        <option value="排球">排球</option>
    </select>
    <button id="btn4">获取选中的下拉选择器内容</button>
</body>

</html>

函数（常用的函数）

val 函数

  • 获取 DOM 对象的 value 属性；
  • $(“选择器”).val()：无参数调用形式，读取数组中第一个 DOM 对象的 value 属性值
  • 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function () {
            console.log($(':text').val());
        })  
    </script>
</head>

<body>
    <input type="text" value="你好，jQuery">
</body>

</html>

text 函数

  • 操作标签的文本内容，标签开始和结束之间的内容
  • 没有参数 ，把 DOM 数组中所有 DOM 对象的文本内容链接起来，形成一个字符串，并返回这个字符串。
  • 有参数，给 DOM 数组中的所有成员统一赋予新的文本
  • 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function () {
            console.log($('.box').text());  // 获取内容
            $('.box').text('国庆节快乐！')  // 赋值内容
        })  
    </script>
</head>

<body>
    <div class="box">你好，jQuery</div>
    <div class="box">你好，jQuery</div>
    <div class="box">你好，jQuery</div>
</body>

</html>

arrt 函数

  • 操作 value ，文本以外的属性。
  • attr(“属性名”)：获取 DOM 数组中第一个 DOM 成员的此属性值
  • attr(“属性名”，“属性值”)：给 DOM 数组中所有 DOM 成员此属性赋值
  • 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function () {
            console.log($('img').attr('src'));  // 获取 src 值
            $('img').attr('src', "www.baidu.com")    // 赋值
        })  
    </script>
</head>

<body>
    <img src="https://www.baidu.com/img/flexible/logo/pc/peak-result.png" alt="">
</body>

</html>

remove 函数

  • 将数组中所有 DOM 对象及其子对象一并删除
  • 语法：$(选择器).remove()
  • 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function () {
            $('.btn').click(() => {
                $('select').remove()
            })
        })  
    </script>
</head>

<body>
    <select name="" id="">
        <option value="篮球">篮球</option>
        <option value="足球">足球</option>
        <option value="排球">排球</option>
    </select>
    <button class="btn">删除 DOM 元素</button>
</body>

</html>

empty 函数

  • 将删除数组中所有 DOM 对象的子对象
  • $(选择器).empty()
  • 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function () {
            $('.btn').click(() => {
                $('select').empty()
            })
        })  
    </script>
</head>

<body>
    <select name="" id="">
        <option value="篮球">篮球</option>
        <option value="足球">足球</option>
        <option value="排球">排球</option>
    </select>
    <button class="btn">删除 DOM 元素</button>
</body>

</html>

append 函数

  • 给 DOM 对象在他的后面增加新的 DOM 对象
  • 语法：$(“选择器”).append(子 DOM 对象)
  • 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function () {
            $('.btn').click(() => {
                $('select').append('<option value="乒乓球">乒乓球</option>')
            })
        })  
    </script>
</head>

<body>
    <select name="" id="">
        <option value="篮球">篮球</option>
        <option value="足球">足球</option>
        <option value="排球">排球</option>
    </select>
    <button class="btn">添加 DOM 元素</button>
</body>

</html>

html 函数

  • 无参数：获取 DOM 数组中第一个 DOM 对象的文本值（html() 返回结果相当于 innerHTML）
  • 有参数：给 DOM 数组中所有成员设置新的文本内容
  • 语法：$(选择器).html()
  • 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function () {
            $('.btn').click(() => {
                console.log($('span').html());  // 获取
                $('span').html('我是新的<b>元素</b>')   // 添加
            })
        })  
    </script>
</head>

<body>
    <div class="container">
        <span>
            <b>中国</b>
        </span>
        <span>
            <b>内蒙古自治区</b>
        </span>
    </div>
    <button class="btn">获取、添加内容</button>
</body>

</html>

each 函数

  • 是循环函数，可以循环数组、json、dom 对象数组
  • 第一种写法：
  • 语法：$.each(要循环的内容，function(index,element){处理函数})
  • 要循环的内容：可以是数组，json对象，dom对象数组
  • funciton：循环的处理函数，每个成员都会执行函数一次。
    • index：是循环变量的值，名称自定义
    • element：和 index 对应的成员， element 名称是自定义的
  • 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function () {
            $('.btn').click(() => {
                $.each($('ul li'), (index, item) => {
                    // $(item) 转换成 jQuery 对象
                    console.log(index, $(item).text());
                })
            })
        })  
    </script>
</head>

<body>
    <ul>
        <li>篮球</li>
        <li>足球</li>
        <li>排球</li>
        <li>乒乓球</li>
    </ul>
    <button class="btn">循环输出</button>
</body>

</html>
  • 第二种写法
  • 语法：$(选择器).each(funciton(index,element){处理函数})
  • 可以对 jQuery 对象进行循环处理。jQuery 对象就是 DOM 数组
  • 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function () {
            $('.btn').click(() => {
                $('ul li').each(function (index, item) {
                    console.log(index, $(item).text());
                })
            })
        })  
    </script>
</head>

<body>
    <ul>
        <li>篮球</li>
        <li>足球</li>
        <li>排球</li>
        <li>乒乓球</li>
    </ul>
    <button class="btn">循环输出</button>
</body>

</html>

事件

  • jQuery 可以给 DOM 对象绑定事件，在程序执行期间动态的处理事件

第一种事件绑定语法

  • 语法：$(“选择器”).事件名称(事件的处理函数)
    • 事件名称：就是 js 中的去掉 on 的部分。例如：单击事件 onclick ，这里的事件名称就是 click
    • 事件的处理函数：函数定义，当事件发生时，执行这个函数
  • 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function () {
            // 绑定点击事件
            $('#btn').click(() => {
                alert('jQuery 事件绑定成功')
            })
        })
    </script>
</head>

<body>
    <button id="btn">点我</button>
</body>

</html>

第二种事件绑定语法

  • on() 方法在被选元素上添加事件处理程序。该方法给 API 带来很多便利，推荐使用该方法
  • 语法：$(选择器).on(event,function(){处理函数})
    • event：事件一个或者多个，多个之间空格分开
    • function：规定当事件发生时运行的函数
  • 示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        $(function () {
            $('.btn').on('click', () => {
                alert($('.btn').text())
            })
        })  
    </script>
</head>

<body>
    <button class="btn">on绑定事件方法</button>
</body>

</html>
W.Y.B.G
关注
专栏目录
jQuery学习笔记
06-23
**jQuery学习笔记** jQuery是一个广泛使用的JavaScript库，它极大地简化了JavaScript代码的编写，使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记，以HTML页面的形式呈现，方便阅读和...
JQuery学习笔记
热爱编程、热爱生活、热爱探索
08-21 1206
万字详解带你快速了解并上手JQuery，同时文中还参杂一些使用JQuery的经验，帮助你提前避坑
jQuery——jQuery学习笔记(完整版）
Bonsoir777的博客
09-16 1330
本文主要介绍有关jQuery的相关知识点
jquery学习笔记
05-16
《jQuery学习笔记详解》 jQuery，作为一款广泛应用于Web开发的JavaScript库，以其简洁的API、强大的功能和广泛的社区支持，极大地简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。这篇学习笔记将深入探讨...
jQuery学习笔记（一）
07-13
**jQuery学习笔记（一）** 在深入探讨jQuery之前，我们首先要理解什么是jQuery。jQuery是一个高效、易用且功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。由John Resig在2006...
Jquery学习笔记分享
11-24
**jQuery学习笔记分享** 在Web开发中，jQuery是一个非常重要的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务。本文将深入探讨jQuery的基本概念、核心功能以及常见用法。 ### 第1章：...
shader 案例学习笔记之将坐标系分成4个象限
localhost
09-13 214
坐标系被分成了4个单元格，每个单元格都有唯一的索引，后续就可以根据索引去渲染。
看Threejs好玩示例，学习创新与技术(二)
htsitr2的专栏
09-14 484
它的主要特点是确保生成的点之间保持一定的最小距离，从而避免点的聚集。这种方法在计算机图形学、游戏开发、物理模拟等领域中非常有用，尤其是在需要生成自然分布的对象（如树木、石头等）时。如果不进行裁剪，那么效果如下（初步的锯齿感是因为矩形内采样的结果）。为啥这么复杂呢，为啥不开始存储每个方块的UV呢？下面代码的vTexCoords（=savedModelMatrix，已修改）记录方块所在的位置，vWorldPosition表示方块中像素的偏移。在上面那副图中，聪明的你一定初步猜到了每个方块的纹理是怎么得到的。
Spring Framework 学习总结博客
2302_80084329的博客
09-13 1017
通过本文的学习，我们从Spring的核心架构入手，逐步理解了IoC和DI的概念，并通过代码示例掌握了如何在实际项目中使用这些技术。Spring通过IoC容器管理bean，依赖注入将bean之间的关系解耦，大大简化了复杂系统的开发过程。这些基本的Spring知识是理解其高级特性（如AOP、事务管理）的基础，掌握这些概念后，我们可以更加自如地使用Spring构建复杂的企业级应用。
计算几何学习
网安小白
09-12 452
学习计算几何过程中对经典算法的记录
关于HarmonyOS的学习
最新发布
m0_72035166的博客
09-16 868
1.node模块化​​​​// tab()2.path模块// path内置模块，专门用来处理路径​// 获取路径最后一部内容，一般用它来获取文件名称​// 给定的路径连接在一起，可以把路径片段拼成完整路径// const result = path.join('day13', 'code', '03_path模块.js')// const result = path.join('day13', 'code', '../','03_path模块.js')​。
【学习笔记】SSL密码套件之哈希
Taki_UP的博客
09-12 1184
本篇介绍了TLS/SSL密码套件中常用的哈希算法，包括Poly1305、SHA384、SHA256、SHA、MD5
C语言从头学59——学习头文件math.h（二）
m0_72128260的博客
09-11 555
继续学习头文件的数学函数。
(更新20240727)机器视觉康耐视visionpro学习步骤
视觉人机器视觉的博客
09-16 182
(更新20240727)机器视觉康耐视visionpro学习步骤
AdaBoost算法（AdbBoost Algorithm）—有监督学习方法、非概率模型、判别模型、非线性模型、非参数化模型、批量学习
nanxiaotao的博客
09-11 875
AdaBoost算法（AdbBoost Algorithm）—有监督学习方法、非概率模型、判别模型、非线性模型、非参数化模型、批量学习
java开发中间件学习记录（持续更新中~）
m0_74969835的博客
09-14 1340
Java,Springboot,Springcloud,Redis,Mysql,Rabbitmq,Jvm,Juc等等
Jquery学习笔记分享：优势应用及选择器详解
在这里，我们将分享一些 Jquery 学习笔记，希望能够帮助广大开发者更好地掌握和运用 JQuery。 在第一章中，我们首先了解了 JQuery 的概述。JQuery 的基本作用主要是简化 JavaScript 编程，提高开发效率，减少代码量...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

W.Y.B.G

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值