jq: 引用dom

2024-08-20 16:48
文章标签 引用 dom jq

本文主要是介绍jq: 引用dom,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

在jQuery实参中,可以传

  1. css选择器: 如css2的id class 子元素选择器,css3的等等
        <div id="dom">Hello, world!</div><div class="dom1">1-1</div><div class="dom1">1-2</div><div class="dom1">1-3</div>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>console.log( $('#dom') )console.log( $('#dom')[0] )console.log( $('#dom').text() )console.log( $('.dom1') )console.log( $('.dom1')[2] )console.log( $('.dom1')[2].innerText )
</script>

v2-83ec7f9b439578cefc076e4a9fd6d7a5_b.jpg
  1. 原生dom,如原生dom 有索引的数组和类数组(索引会插入到对应的jq对象下)
        <div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</div><div class="div1">我是div</div>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>var oLi = document.getElementsByTagName('li');var div1 = document.getElementsByClassName('div1')[0];console.log( $(oLi) )console.log( $(div1) )console.log( $({0: 'a', 1: 'b'}) )console.log( $(['c', 'd']) )
</script>

v2-a849baed3039a61c13276f7099aa87f3_b.jpg
  1. function: dom解析完成后执行,这种方式可以把script标签放在heard头部中(不推介),但是必须用函数包裹,不然执行的时候dom还没有解析完。
        <div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</div>
<script src="http://code.jquery.com/jquery-3.4.1.js"></script>
<script>// dom文档解析完后执行
 $(function() {console.log( $('li').text() )})// 相同
 $(document).ready( function() {console.log( $('li').text() )})
</script>

v2-9ae494f0098baa21d9179665426362af_b.jpg
  1. 空值: 可以填null false 空 ,反会空的jq对象
        console.log( $(null) )
console.log( $(false) )
console.log( $() )

v2-522c641239e90a7415d036f7e9a10f8d_b.jpg
  1. 其他: 放入其他时会也会放在jq对象的0位中,可以放true 123 obj 等等,但注意不要同时放多个,那样会返回空,那样的话建议使用数组。
        console.log( $(true) )
console.log( $(123) )
console.log( $({name: "fanghuayong"}) )
console.log( $("abc", "d", "efg") )

v2-ee22efc1e64de466f571a79910772745_b.jpg

这篇关于jq: 引用dom的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1090623

相关文章

Linux jq命令的使用解读

《Linuxjq命令的使用解读》jq是一个强大的命令行工具,用于处理JSON数据,它可以用来查看、过滤、修改、格式化JSON数据,通过使用各种选项和过滤器,可以实现复杂的JSON处理任务... 目录一. 简介二. 选项2.1.2.2-c2.3-r2.4-R三. 字段提取3.1 普通字段3.2 数组字段四.

C++中悬垂引用(Dangling Reference) 的实现

《C++中悬垂引用(DanglingReference)的实现》C++中的悬垂引用指引用绑定的对象被销毁后引用仍存在的情况,会导致访问无效内存,下面就来详细的介绍一下产生的原因以及如何避免,感兴趣... 目录悬垂引用的产生原因1. 引用绑定到局部变量,变量超出作用域后销毁2. 引用绑定到动态分配的对象,对象

Python内存管理机制之垃圾回收与引用计数操作全过程

《Python内存管理机制之垃圾回收与引用计数操作全过程》SQLAlchemy是Python中最流行的ORM(对象关系映射)框架之一,它提供了高效且灵活的数据库操作方式,本文将介绍如何使用SQLAlc... 目录安装核心概念连接数据库定义数据模型创建数据库表基本CRUD操作创建数据读取数据更新数据删除数据查

C++11右值引用与Lambda表达式的使用

《C++11右值引用与Lambda表达式的使用》C++11引入右值引用,实现移动语义提升性能,支持资源转移与完美转发;同时引入Lambda表达式,简化匿名函数定义,通过捕获列表和参数列表灵活处理变量... 目录C++11新特性右值引用和移动语义左值 / 右值常见的左值和右值移动语义移动构造函数移动复制运算符

Java资源管理和引用体系的使用详解

《Java资源管理和引用体系的使用详解》:本文主要介绍Java资源管理和引用体系的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、Java的引用体系1、强引用 (Strong Reference)2、软引用 (Soft Reference)3、弱引用 (W

Spring 中的循环引用问题解决方法

《Spring中的循环引用问题解决方法》:本文主要介绍Spring中的循环引用问题解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录什么是循环引用?循环依赖三级缓存解决循环依赖二级缓存三级缓存本章来聊聊Spring 中的循环引用问题该如何解决。这里聊

SpringBoot项目中Maven剔除无用Jar引用的最佳实践

《SpringBoot项目中Maven剔除无用Jar引用的最佳实践》在SpringBoot项目开发中,Maven是最常用的构建工具之一,通过Maven,我们可以轻松地管理项目所需的依赖,而,... 目录1、引言2、Maven 依赖管理的基础概念2.1 什么是 Maven 依赖2.2 Maven 的依赖传递机

JavaScript DOM操作与事件处理方法

《JavaScriptDOM操作与事件处理方法》本文通过一系列代码片段,详细介绍了如何使用JavaScript进行DOM操作、事件处理、属性操作、内容操作、尺寸和位置获取,以及实现简单的动画效果,涵... 目录前言1. 类名操作代码片段代码解析2. 属性操作代码片段代码解析3. 内容操作代码片段代码解析4.

JavaSE(十三)——函数式编程(Lambda表达式、方法引用、Stream流)

函数式编程 函数式编程 是 Java 8 引入的一个重要特性,它允许开发者以函数作为一等公民(first-class citizens)的方式编程,即函数可以作为参数传递给其他函数,也可以作为返回值。 这极大地提高了代码的可读性、可维护性和复用性。函数式编程的核心概念包括高阶函数、Lambda 表达式、函数式接口、流(Streams)和 Optional 类等。 函数式编程的核心是Lambda

17 通过ref代替DOM用来获取元素和组件的引用

重点 ref :官网给出的解释是: ref: 用于注册对元素或子组件的引用。引用将在父组件的$refs 对象下注册。如果在普通DOM元素上使用,则引用将是该元素;如果在子组件上使用,则引用将是组件实例: <!-- vm.$refs.p will be the DOM node --><p ref="p">hello</p><!-- vm.$refs.child will be the c