1. 概述

前端技术得更新换代实在太快，JQuery可能已经不再适合着重学习，不过JQuery得思想已经融入了很多前端框架技术之中，比如这个美元符号，总是可以在一些地方看到，作为最开始使用得JS库，就学习下JQuery中得使用。

2. 详论

2.1. 加载脚本

在HTML页面中引入原生的JS脚本一般都会这样开头：

window.onload=function(){

    Func1();

    Func2();

    Func3();

    .....

}

使用window.onload()的原因是因为一般都会希望直到网页加载完毕后，再立刻执行JS脚本的操作，否则会造成在执行JS脚本的时候， HTML文档没有渲染完成，DOM树是不完整，获取DOM中元素未定义的错误。

与window.onload()相对应的，包含JQuery或者采用相似技术的框架会这样加载js脚本：

$(document).ready(function(){

    Func1();

    Func2();

    Func3();

    .....

});

$(document)表示的就是选择整个文档对象，.ready()就是DOM加载完成时的相应事件。这个写法进一步简化，就是如下的加载方案：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>样例</title>

    <script src="./3rdParty/jquery-3.5.1.js">

    </script>

    <script>

        $(function () {

            console.log(jQuery.fn.jquery);

        });

    </script>

</head>

<body>

    <p>这是一个段落。</p>

</body>

</html>

当然，window.onload与jQuery ready()两种加载方式还是有区别的：

2.2. 选择器

可以认为JQuery的美元符号就是一种选择器，基于已经存在的 CSS 选择器（当然不局限于），能够选取网页中的各种元素。CSS有三种常用的选择器：元素选择器、ID选择器和类选择器；JQuery也有对应的选择器。

2.2.1. 元素选择器

下面例子展示通过实现选取标签元素，实现了一个效果：每次点击按钮，就会修改P元素的颜色属性。

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>样例</title>

    <script src="./3rdParty/jquery-3.5.1.js">

    </script>

    <script>

        $(function () {

            var active = false;

            $("button").click(function () {

                if(active){

                    $("p").css("color","#ff0000");

                }else{

                    $("p")[0].style.color = "#00ff00";

                }

                active = !active;

            })

        });

    </script>

    <style type="text/css">

        p {

            color:#ff0000;

        }

    </style>

</head>

<body>

    <p>这是一个段落。</p>

    <button>点我</button>

</body>

</html>

通过$选择器，可以实现获取html中的标签元素，从而进一步实现修改对应的CSS属性。

2.2.2. ID选择器

给上面那个例子加上另外一个P标签的段落，id属性设置为test，那么可以像设置css选择器一样设置$()的参数：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>样例</title>

    <script src="./3rdParty/jquery-3.5.1.js">

    </script>

    <script>

        $(function () {

            var active = false;

            $("button").click(function () {

                if(active){

                    $("#test").css("color","#ff0000");

                }else{

                    $("p#test")[0].style.color = "#00ff00";

                }

                active = !active;

            })

        });

    </script>

    <style type="text/css">

        p {

            color:#ff0000;

        }

        #test {

            color:#0000ff;

        }

    </style>

</head>

<body>

    <p>这是一个段落。</p>

    <p id="test">这是另外一个段落</p>

    <button>点我</button>

</body>

</html>

显示结果与之前的例子类似，同样是P标签元素，只有id值为test的元素改变颜色的功能生效了。

2.2.3. 类选择器

类选择器仍然与css一样，通过.符号+类名作为$()的参数，选择所有有相同class的元素：

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>样例</title>

    <script src="./3rdParty/jquery-3.5.1.js">

    </script>

    <script>

        $(function () {

            var active = false;

            $("button").click(function () {

                if(active){

                    $(".test1").css("color","#ffff00");

                }else{

                    $("p.test1")[0].style.color = "#00ff00";

                    $("h2.test1")[0].style.color = "#00ff00";

                }

                active = !active;

            })

        });

    </script>

    <style type="text/css">

        p {

            color:#ff0000;

        }

        #test {

            color:#0000ff;

        }

        .test1{

            color: #ffff00;

        }

    </style>

</head>

<body>

    <h2 class="test1">这是一个标题</h2>

    <p class="test1">这是一个段落。</p>

    <p id="test">这是另外一个段落</p>

    <button>点我</button>

</body>

</html>

需要注意这时选取到元素可能元素标签可能不同。

2.3. 引入方法

在JQuery中，$还有个作用是引入各种JQuery已经封装好的方法，例如：

.trim() 去除字符串两端的空格

.each() 遍历一个数组或对象。

.inArray() 返回一个值在数组中的索引位置。

.type() 判断对象的类别

.getJSON() 使用 AJAX 请求来获得 JSON 数据。

......

3. 参考

  1. JavaScript window.onload
  2. jQuery 教程
  3. jQuery选择器大全整理

JQuery中美元符号$的更多相关文章

  1. 解决jQuery中美元符号（$）命名与别的js脚本库引用冲突方法

    在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg') 的写法.然而,当我们引入多个js库后,在另外一个js库 ...

  2. jquery中美元符号命名冲突问题解决

    在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替换,如$('#msg')等同于JQuery('#msg') 的写法.然而,当我们引入多个js库后,在另外一个js库 ...

  3. jquery中美元符号（$）命名冲突

    http://blog.csdn.net/shanshan209/article/details/6341727 在Jquery中,$是JQuery的别名,所有使用$的地方也都可以使用JQuery来替 ...

  4. Vue中美元$符号的意思

    vue的实例属性和方法 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = n ...

  5. 【转】js程序中美元符号$是什么

    $符号在php中是表示变量的特征字符, 在js中它也有很多作用, 一般我们用来命名一个函数名称,获取id的1.首先可以用来表示变量, 比如变量 var s='asdsd'或var $s='asdasd ...

  6. js程序中美元符号$是什么(转)

    $符号在php中是表示变量的特征字符, 在js中它也有很多作用, 一般我们用来命名一个函数名称,获取id的1.首先可以用来表示变量, 比如变量 var s='asdsd'或var $s='asdasd ...

  7. php中美元符号是什么意思

    php中$符号是变量符号: 把$符号加上字符串,这个字符串就是一个变量名或对象名. 其实PHP采用的是C语言的语法,但是也有一些区别,$符号加上字符串,这就是一个变量名或对象名. 例如下面的代码:(推 ...

  8. jQuery基础之（二）jQuery中的$

    在jQuery中,最常用的莫过于使用美元符号$,它提供了各种各样的丰富功能.包括选择页面中一个或者一类元素.作为功能函数的前缀.windows.onload的完善,创建DOM节点等.本文介绍jQuer ...

  9. jQuery中的常用内容总结(一)

    jQuery中的常用内容总结(一)   前言 不好意思(✿◠‿◠),由于回家看病以及处理一些其它事情耽搁了,不然这篇博客本该上上周或者上周写的:同时闲谈几句:在这里建议各位开发的童鞋,如果有疾病尽快治 ...

  10. $ -----JavaScript 中美元符号 $ 的作用

    JavaScript 中美元符号 $ 是什么 1.首先可以用来表示变量,比如变量 var s='asdsd'或var $s='asdasd'; 2.在正则表达式中,它可以匹配结尾:/sa$/.test ...

随机推荐

  1. 利用ChatGPT提升测试工作效率——测试工程师的新利器(一)

    1.前言 随着ChatGPT的爆火,各个行业开始尝试利用ChatGPT来提升工作效率.其中,测试工程师们也开始探索如何应用ChatGPT来加强测试工作.在本文中,我们将从测试工程师的角度出发,探讨Ch ...

  2. TIM-有感BLDC转速解析

    TIM-有感BLDC转速解析 1.基本概念解析 霍尔传感器的原理:通电线圈产生的磁场会使得转子所在位置会产生磁场,其中离得最近的霍尔传感器的磁场最强,进而导致最近霍尔传感器会产生最大的电压信号,这个最 ...

  3. 利用OpenXML获取Excel单元格背景色

    利用OpenXML获取Excel单元格背景色 最近项目上遇到了关于Excel获取处理的问题,关于Excel单元格背景色的获取,水的文章都大同小异,都没注意到Excel单元格背景色是怎么赋值,这会导致出 ...

  4. 21.4 Python 使用GeoIP2地图定位

    GeoIP2是一种IP地址定位库,它允许开发人员根据IP地址查找有关位置和地理位置的信息.它使用MaxMind公司的IP地址数据库,并提供一个方便的Python API.GeoIP2可以用于许多不同的 ...

  5. 《流畅的Python》 读书笔记 第5章 一等函数 20231025

    第5章 一等函数 第四章相对偏僻,但时间上一样要花我很久,就先跳过了,回头再补.而这个第5章节是非常重要的.只是最近工作有点忙,我读的越来越慢了~继续坚持吧. 在 Python 中,所有函数都是一等对 ...

  6. 基于Echart的前端可视化

    GitHub 上有许多关于低代码自助可视化的项目,前端使用 Vue 和 ECharts 的示例.以下是一些可能符合你要求的项目: DataV: 项目链接:DataV 描述:DataV 是一款基于 Vu ...

  7. mybtis-plus 出现 Wrong namespace

    今天进行项目整合,刚开始代码搬的还挺快乐的,但是到后面调试起来,头晕眼花的.记录一个基本的错误. Cause: org.apache.ibatis.builder.BuilderException:  ...

  8. 巅峰对决：英伟达 V100、A100/800、H100/800 GPU 对比

    近期,不论是国外的 ChatGPT,还是国内诸多的大模型,让 AIGC 的市场一片爆火.而在 AIGC 的种种智能表现背后,均来自于堪称天文数字的算力支持.以 ChatGPT 为例,据微软高管透露,为 ...

  9. SimpleDateFormat线程安全性

    SimpleDateFormat线程安全性 0 结论 SimpleDateFormat是线程不安全的. 在JDK中关于SimpleDateFormat有这样一段描述: Date formats are ...

  10. 数据结构与算法 | 图（Graph）

    在这之前已经写了数组.链表.二叉树.栈.队列等数据结构,本篇一起探究一个新的数据结构:图(Graphs ).在二叉树里面有着节点(node)的概念,每个节点里面包含左.右两个子节点指针:比对于图来说同 ...