jQuery 学习

jQuery

---

jQuery 下载

jQuery 官网下载：https://jquery.com/

有两个可供下载的版本：

​ Production version - 用于实际的网站中，已被精简和压缩。

​ Development version - 用于测试和开发（未压缩，是可读的代码）

---

引用 jQuery

原生 JS 和 jQuery 入口函数的加载模式不同

​ 原生 JS 会等到 DOM 元素加载完毕，并且图片也加载完毕才会执行

​ jQuery 会等到 DOM 元素加载完毕，但不会等到图片也加载完毕就会执行

​

​ 原生 JS 如果编写了多个入口函数，后面编写的会覆盖前面编写的

​ jQuery 中编写多个入口函数，后面的不会覆盖前面的

<script src="jquery-3.5.1.js"></script>
// src 内是 jQuery 文件的名字

---

解决 jQuery 冲突问题

<script>
        $(document).ready(function () {
			alert('wuwuwu')
        })

        // 释放 $ 的使用权
        // 释放操作必须在编写其他 jQuery 代码之前编写
        // 释放之后就不能在使用 $ ，改为使用 jQuery

        // 自定义一个访问符号
        jQuery.noConflict()// 释放 $ 的使用权

        jQuery(function () {
            alert('hahaha')
        })
</script>

---

jQuery 核心函数

<script>
	// jQuery 入口函数
    $(function () {
    	
	})
</script>

---

jQuery 对象

jQuery 对象是一个伪数组

伪数组

​ 有 0 到 length-1 的属性，并且有 length 属性

---

jQuery 静态方法

each() 方法

$(function () {
            var arr = [2, 4, 6, 8]

            // 第一个参数：遍历到的元素；第二个参数：当前遍历到的索引
            // 只能遍历数组，不能遍历伪数组
            // arr.forEach(function (value, index) {
            //     console.log(index, value)
            // });

            // 第一个参数：当前遍历到的索引；第二个参数：遍历到的元素
            // 可以遍历伪数组
            $.each(arr, function (index, value) {
                console.log(index, value)
            })
	})

map() 方法

$(function () {
            var arr = [1, 3, 5, 7, 9]

            // 第一个参数：当前遍历到的元素；第二个参数：当前遍历到的索引；第三个参数：当前被遍历的数组
            // 不能遍历伪数组
            // arr.map(function (value, index, array) {
            //     console.log(index, value, array)
            // })

            // 第一个参数：要遍历的数组；第二个数组：每遍历一个元素之后执行的回调函数
            // 回调函数的参数：第一个参数：遍历到的元素；第二个参数：遍历到的索引
            // 可以遍历伪数组
            $.map(arr,function(value,index){
                console.log(index,value)
            })

            /**
             * jQuery 中的 each() 方法和 map() 方法
             *      each() 方法默认的返回值就是，遍历谁就返回谁
             *      map() 方法默认的返回值是一个空数组
             * 
             *      each() 方法不支持在回调函数中对遍历的数组进行处理
             *      map() 方法可以在回调函数中通过 return 对遍历的数组进行处理然后生成一个新的数组返回
            */
	})

trim()

去除字符串两端的空格；参数：需要去除空格的字符串；返回值：去除空格之后的字符串

$(function () {
            var str = '   str   '
            var res = $.trim(str)
            console.log('---' + str + '---')
            console.log('---' + res + '---')
	})