jquery的$

news2024/11/16 9:31:39

jQuery是什么

jQuery是一个快速、简洁的JavaScript框架,jQuery设计的宗旨是“write Less,Do More”。

jQuery的$

使用过jQuery的应该都知道jQuery的$,看到源码中的这一段就能知道相当于jquery的简写,

jquery有两种用法,一种是用$表示,还有一种是jQuery
 // Map over jQuery in case of overwrite
       var   _jQuery = window.jQuery,

        // Map over the $ in case of overwrite
        _$ = window.$;

    jQuery.noConflict = function(deep) {
        if (window.$ === jQuery) {
            window.$ = _$;
        }

        if (deep && window.jQuery === jQuery) {
            window.jQuery = _jQuery;
        }

        return jQuery;
    };

jQuery的$()函数

主要的用法有下面几种

1. 作为选择器 jQuery(selector,context)

在函数中接收一个css选择器表达式(selector)和可选的选择器上下文(context),返回一个包含了匹配的DOM元素的jQuery对象。默认情况下,查找时从根元素上开始找,也就是说查找范围是整棵文档树。但是如果给定了上下文context,则在指定上下文中查找,也可以直接写在css选择器表达式(selector)后,如下

<!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>
    <style>
        div {
            width: 200px;
            height: 80px;
            margin-top: 30px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div1 sos"></div>
    <div class="div2"></div>
    <div class="div1"></div>
    <div class="div2"></div>
    <script src="/jquery.js"></script>
    <script>
        // 入口函数
        $(document).ready(function() {
            console.log($('.div1'));
            console.log($('.div1.sos'));
            console.log($('.div1', '.sos'));


        })
    </script>
</body>

</html>

打印结果,第二个和第三个选择了一样,但是要注意的是返回的是伪数组,自己可以使用($(‘.div1’, ‘.sos’) instanceof Array)打印看下
在这里插入图片描述

2.创建dom元素

后面一起放图

  $('<div>我是傻瓜</div>').appendTo('body')

3.入口函数

当传进去的参数是函数的时候,则在document对象上绑定一个ready事件监听函数,当DOM结构加载完成的时候执行

// jquery入口函数
        $(document).ready(function() {
            console.log('入口2');
        })
        $(function() {
                console.log('入口1');
            })
            // 原生的入口函数
        window.onload = function() {
                console.log('原生的入口函数');
            }

两者之间的区别随便百度下就有,这里不在多说

4.将dom对象转换为Jquery对象

下面介绍了两者相互转换的方法

 <div class="contain">
    </div>
    <script src="./jquery.js"></script>
    <script>
        var contain = document.querySelector('.contain');
        console.log(contain);
        //将dom对象变为jq对象
        console.log($(contain));
        //将jq对象转为dom对象
        console.log($(contain)[0], $(contain).get(0));
    </script>

在这里插入图片描述

两者的区别

    $可以调用那些不需要操作对象的方法,如$.prototype,如果是给某个对象赋值(注意,这里有操作对象),就需要用$('#abc').val('123')的方式,因为像val()等方法中会用到$(this)去操作当前对象。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1205768.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python 日志记录器logging 百科全书 之 日志回滚

Python 日志记录器logging 百科全书 之 日志回滚 前言 在之前的文章中&#xff0c;我们学习了关于Python日志记录的基础配置。 本文将深入探讨Python中的日志回滚机制&#xff0c;这是一种高效管理日志文件的方法&#xff0c;特别适用于长时间运行或高流量的应用。 知识点&…

【OS】操作系统课程笔记 第七章 内存管理

目录 7.1 内存管理的功能 7.1.1 内存分配 7.1.2 地址转换 1. 空间的概念 2. 地址转换 7.1.3 存储保护 7.1.4 存储共享 7.1.5 存储扩充 7.2 程序的链接和加载 7.2.1 程序的链接 链接的分类 7.2.2 程序的加载 1. 加载器的功能 2. 装入方式分类 7.3 连续分配方式 7.…

CentOS 7镜像下载;VMware安装CentOS 7;解决新安装的虚拟机没有网络,无法ping通网络的问题

CentOS 7镜像下载&#xff1b;VMware安装CentOS 8.5&#xff1b;解决新安装的虚拟机没有网络&#xff0c;无法ping通网络的问题 CentOS 8.5镜像下载VMware安装CentOS 7解决新安装的虚拟机没有网络&#xff0c;无法ping通网络的问题写入配置文件 CentOS 8.5镜像下载 阿里提供的…

排序 算法(第4版)

本博客参考算法&#xff08;第4版&#xff09;&#xff1a;算法&#xff08;第4版&#xff09; - LeetBook - 力扣&#xff08;LeetCode&#xff09;全球极客挚爱的技术成长平台 本文用Java实现相关算法。 我们关注的主要对象是重新排列数组元素的算法&#xff0c;其中每个元素…

NSSCTF题库——web

[SWPUCTF 2021 新生赛]gift_F12 f12后ctrlf找到flag [SWPUCTF 2021 新生赛]jicao——json_decode() 加密后的格式 $json {"a":"php","b":"mysql","c":3}; json必须双引号传输 构造&#xff1a;GET里json{"x"…

【JUC】三、集合的线程安全

文章目录 1、ArrayList集合线程安全问题分析2、解决方式一&#xff1a;Vector或synchronizedList( )3、解决方式二&#xff1a;CopyOnWriteArrayList 写时复制4、HashSet集合线程不安全的分析与解决5、HashMap集合线程不安全的分析与解决 1、ArrayList集合线程安全问题分析 对…

TLP超线程技术

在实现IPL指令级并行的同时实现TLP(Thread Level Parallelism)线程级并行实现多线程有两种主要的方法超线程即同时多线程&#xff0c;在单个处理器或单个核中设置了两套线程状态部件&#xff0c;共享高速缓存和功能部件当两个线程同时需要某个资源时&#xff0c;其中一个线程必…

VuePress介绍及使用指南

VuePress是一个基于Vue.js的静态网站生成工具&#xff0c;它专注于以Markdown为中心的项目文档。VuePress具有简单易用的特性&#xff0c;同时提供了强大的自定义和扩展性。在本文中&#xff0c;我们将介绍VuePress的基本概念&#xff0c;并提供一个简单的使用指南。 什么是Vue…

【C语言】

C语言 1. C语言基础1.1 数据类型和占位符1.2 异或1.3 关键字1.4 const1.5 extern1.6 typedef1.7 static1.8 左值和右值1.9 位进行操作赋值 2. C指针3. 二维数组和指针4. 函数传递二维数组4.1 形参给出第二维的长度。4.2 形参声明为指向数组的指针。4.3 形参声明为指针的指针。 …

快速掌握队列的基础知识

目录 队列的特点基于链表实现队列用栈实现队列用队列实现栈 队列是一种线性数据结构&#xff0c;它只允许在一边进行插入操作&#xff08;队尾&#xff09;&#xff0c;另一边进行删除操作&#xff08;队头&#xff09;。插入操作称为入队&#xff0c;删除操作称为出队。队列遵…

【网络奇缘】我和英特网再续前缘

&#x1f308;个人主页: Aileen_0v0&#x1f525;系列专栏: 一见倾心,再见倾城 --- 计算机网络~&#x1f4ab;个人格言:"没有罗马,那就自己创造罗马~" 目录 计算机网络的概念 计算机网络的功能 ⭐1.数据通信 ⭐2.资源共享 ⭐3.分布式处理 ⭐4.提高可靠性 ⭐…

Java17新增特性

前言 前面的文章&#xff0c;我们对Java9、Java10、Java11、Java12 、Java13、Java14、Java15、Java16 的特性进行了介绍&#xff0c;对应的文章如下 Java9新增特性 Java10新增特性 Java11新增特性 Java12新增特性 Java13新增特性 Java14新增特性 Java15新增特性 Java16新增特…

Eclipse打包Springboot项目

首先&#xff0c;在pom.xml文件中添加配置&#xff0c;修改mainClass主函数&#xff1a; <build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId><configurat…

【电路笔记】-戴维南定理(Thevenin‘s Theorem)

戴维南定理&#xff08;Thevenin’s Theorem&#xff09; 文章目录 戴维南定理&#xff08;Thevenins Theorem&#xff09;1、概述与定义2、戴维南模型确定3、一些线性电路的戴维南模型3.1 单电压源3.2 单电流源3.3 多电流/电压源 4、结论 在本文中&#xff0c;我们将介绍一种强…

LLaMA模型之中文词表的蜕变

在目前的开源模型中&#xff0c;LLaMA模型无疑是一颗闪亮的⭐️&#xff0c;但是相对于ChatGLM、BaiChuan等国产大模型&#xff0c;其对于中文的支持能力不是很理想。原版LLaMA模型的词表大小是32K&#xff0c;中文所占token是几百个左右&#xff0c;这将会导致中文的编解码效率…

Python---综合案例:通讯录管理系统---涉及点:列表、字典、死循环

需求&#xff1a; 开个一个通讯录的管理系统&#xff0c;主要用于实现存储班级中同学的信息&#xff08;姓名、年龄、电话&#xff09; 涉及点&#xff1a;列表、字典、死循环 相关链接&#xff1a;Python--列表及其应用场景---增、删、改、查。-CSDN博客 Python---字典---…

ip数据包

数据报文格式 首部 版本&#xff08;Version&#xff09; 版本字段占4bit&#xff0c;通信双方使用的版本必须一致。对于IPv4&#xff0c;字段的值是4。 首部长度&#xff08;Internet Header Length&#xff0c; IHL&#xff09; 占4bit&#xff0c;首部长度说明首部有多少…

ubutun上编译出现undefined reference to symbol ‘dladdr@@GLIBC_2.2.5‘的错误

作者&#xff1a;朱金灿 来源&#xff1a;clever101的专栏 为什么大多数人学不会人工智能编程&#xff1f;>>> ubutun上编译一段C程序&#xff0c;出现错误&#xff1a; /usr/bin/ld: /tmp/ccghh3FJ.o: undefined reference to symbol ‘dladdrGLIBC_2.2.5’ //lib/…

前端---CSS的盒模型

文章目录 什么是盒模型&#xff1f;设置边框设置内边距设置外边距块级元素水平居中 什么是盒模型&#xff1f; 页面上的每个HTML元素都是一个一个的“盒子”&#xff0c;这些盒子由&#xff1a;内容、内边距、边框、外边距组成。 我们可以和住的房子联系起来&#xff0c;更好…

HarmonyOS开发(二):TypeScript入门

1、编程语言介绍 ArkTS是HarmonyOS主推的应用开发语言&#xff0c;它是在TypeScript语言的基础之上&#xff0c;匹配ArkUI框架&#xff0c;扩展了声明式UI、状态管理等相应的能力&#xff0c;让开发者以更简洁、更自然的方式开发跨端应用。 ArkTS、TypeScript和JavaScript之间…