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

相关文章

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

react笔记 8-19 事件对象、获取dom元素、双向绑定

1、事件对象event 通过事件的event对象获取它的dom元素 run=(event)=>{event.target.style="background:yellowgreen" //event的父级为他本身event.target.getAttribute("aid") //这样便获取到了它的自定义属性aid}render() {return (<div><h2>{

DOM 添加节点

DOM 添加节点 在Web开发中,文档对象模型(DOM)是一个非常重要的概念。DOM是HTML和XML文档的编程接口,它将文档表示为节点树,允许开发人员通过JavaScript等脚本语言进行操作。在本文中,我们将探讨如何在DOM中添加节点,包括各种方法和最佳实践。 DOM节点简介 在DOM中,文档的每一个部分都是一个节点。主要的节点类型包括: 元素节点:HTML标签,例如<div>或<sp

js操作Dom节点拼接表单及ajax提交表单

有时候我们不希望html(jsp、vm)中有创建太多的标签(dom节点),所以这些任务都由js来做,下面提供套完整的表单提交流程,只需要在html中添加两个div其余的都由js来做吧。下面原生代码只需略微修改就能达到你想要的效果。 1、需要创建表单的点击事件 <a href="javascript:void(0);"onclick="changeSettleMoney('$!doctor.do

【JAVA入门】Day35 - 方法引用

【JAVA入门】Day35 - 方法引用 文章目录 【JAVA入门】Day35 - 方法引用一、方法引用的分类1.引用静态方法2.引用成员方法2.1 引用其他类的成员方法2.2 引用本类和父类的成员方法2.3 引用构造方法2.4 使用类名引用成员方法2.5 引用数组的构造方法 二、方法引用的例题         方法引用就是“把已经有的方法当作函数式接口中抽象方法的方法

gcc 编译器对 sqrt 未定义的引用

man sqrt  Link with -lm. gcc -o test test.c -lm 原因:缺少某个库,用 -l 参数将库加入。Linux的库命名是一致的, 一般为 libxxx.so, 或 libxxx.a, libxxx.la, 要链接某个库就用   -lxxx,去掉头 lib 及 "." 后面的 so, la, a 等即可。 常见的库链接方法为

【JavaScript】基本数据类型与引用数据类型区别(及为什么String、Boolean、Number基本数据类型会有属性和方法?)

基本数据类型   JavaScript基本数据类型包括:undefined、null、number、boolean、string。基本数据类型是按值访问的,就是说我们可以操作保存在变量中的实际的值。 1)基本数据类型的值是不可变的 任何方法都无法改变一个基本类型的值,比如一个字符串: var name = "change";name.substr();//hangconsole.log

被审稿人批得体无完肤?参考文献这样引用就对了!

我是娜姐 @迪娜学姐 ,一个SCI医学期刊编辑,探索用AI工具提效论文写作和发表。 审稿人对参考文献引用提出质疑,在comments中还挺常见的。一般来说,是最新的、相关的、重要的文献引用缺失。此外,如果仔细分析引文来源,娜姐还发现有些常见问题: 1 引用不全面。 比如,声称某药物有ABCD四个功能,但是引文只证明了ABC三个功能。 2 引用不准确。 引文中上升趋势是25%,但是你

WebAPI (一)DOM树、DOM对象,操作元素样式(style className,classList)。表单元素属性。自定义属性。间歇函数定时器

文章目录 Web API基本认知一、 变量声明二、 DOM1. DOM 树2. DOM对象3. 获取DOM对象(1)、选择匹配的第一个元素(2)、选择匹配多个元素 三、 操作元素1. 操作元素内容2. 操作元素属性(1)、常用属性(href之类的)(2)、通过style属性操作CSS(3)、通过类名(className)操作CSS(4)、通过classList操作控制CSS(5)、操作表单