首页 > 其他分享 >jQuery--dom对象选择器

jQuery--dom对象选择器

时间:2023-08-02 20:14:56浏览次数:32  
标签:jQuery obj dom -- 标签 选择器 对象 id

一、概述

选择器:就是一个字符串,用来定位dom对象

定位了dom对象就可以通过jquery的函数操作dom对象

二、常用选择器

1、id选择器$("#id值")

通过dom对象的id定位dom对象。id是当前页面唯一值

 2、class选择器$(".class样式名")

使用样式的名称定位dom对象

3、标签选择器$("标签名称")

使用标签名称定位dom对象

4、所有选择器$("*")

定位所有的dom对象

5、组合选择器$("#id,.class,标签名")

是多个被选对象间使用逗号分割形成的选择器,可以组合id,class,标签名等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器演示</title>
    <script src="jquery-3.7.0.js"></script>
    <style>
        div{
            background: gold;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>

    <script>
        function fun1(){
            // id选择器
            var obj = $("#one")
            obj.css("background","red")
        }
        function fun2(){
            var obj = $(".two")
            obj.css("background","blue")
        }
        function fun3(){
            var obj = $("div")
            // 操作jquery对象数组中的全部成员
            obj.css("background","pink")
            obj[1].css("background","red")
            var span = $("span")
        }
        function fun4(){
            var obj = $("#one,.two")
            obj.css("background","green")
        }
    </script>

    <div id="one">我是one的div</div>
    <br>
    <div class="two">我是样式two的div</div>
    <br>
    <div>我没有id也没有class</div>
    <br>
    <span>我是span标签</span>
    <br>
    <input type="button" value="获取id是one的dom对象" onclick="fun1()">
    <input type="button" value="获取class是two的dom对象" onclick="fun2()">
    <input type="button" value="使用标签选择器" onclick="fun3()">
    <input type="button" value="组合选择器" onclick="fun4()">
</body>
</html>

 

三、表单选择器$(":type属性值")

使用input标签的type属性值,定位dom对象

表单相关元素的选择器:文本框、单选框、复选框、下拉列表等。无论是否有form标签,都可以选择。

根据元素类型来定义

// 举例
$(":text")选取所有的单行文本框
$(":password")选取所有的密码文本框
$(":button")选取所有的按钮
$(":radio")选取所有的单选框
$(":checkbox")选取所有的复选框

 

标签:jQuery,obj,dom,--,标签,选择器,对象,id
From: https://www.cnblogs.com/hyy-0/p/17601624.html

相关文章

  • 【入门教程】3202年了,还有人没用stable diffusion画个自己的AI小姐姐吗。
    个人绘画作品: 说明本文主要是讲一下如何安装、使用整合包,以及介绍画真人图片的大模型(介绍的整合包只提供二次元模型,个人不太感兴趣)通过最简单的介绍帮助大家快速入门,开始画图,不会深入的进行讲解,毕竟网上讲的已经很详细了。 介绍目前市面上用的最多的AI绘画工具是stable-......
  • 3 Linux多线程开发
    3Linux多线程开发3.1线程概述3.1.1线程概述与进程(process)类似,线程(thread)是允许应用程序并发执行多个任务的一种机制。一个进程可以包含多个线程。同一个程序中的所有线程均会独立执行相同程序,且共享同一份全局内存区域,其中包括初始化数据段、未初始化数据段,以及堆内存段。(......
  • VimScript五分钟入门-中文翻译
    这篇文章主要是为了让你能够尽可能快地学习到vimscript的基础。你可以把这当做一个速查表。在读这篇文章之前,你应该可能已经有了一些编程经验。Vim的内建文档已经很出色了。你可以在vim里尝试:h<searchterm>来阅读更多信息。你可以通过在normal模式下键入gQ命令启动REPL环境来调......
  • 03_llvm_IR测试创建变量
    主要分全局变量、函数参数、局部变量(常量)与返回值测试全局变量介绍说明、代码、编译与结果如下:#include"llvm/IR/Module.h"#include"llvm/IR/LLVMContext.h"#include"llvm/Support/raw_ostream.h"#include"llvm/IR/Function.h"#include"llvm/IR/Verifier.h&qu......
  • zt,UPF与低功耗设计实现实例 -- 附UPF与DC综合脚本
    https://blog.csdn.net/hungtaowu/article/details/120703931UPF与低功耗设计实现实例--附UPF与DC综合脚本sunvally已于 2022-11-1517:40:44 修改6059 收藏 98分类专栏: 低功耗设计与验证 文章标签: 硬件工程版权低功耗设计与验证专栏收录该内容29......
  • C习题-链表02
    1、设数据结构 B=(D, R) ,其中D={ a, b, c, d, e, f }、 R={ (a,b ) , (b, c ) , (c, d ) , (d, e), (e, f), (f,a) },该数据结构为( )。A、非线性结构B、循环队列C、循环链表D、线性结构答案:A;图是非线性结构;线性结构:一对一,除第一个与最后一......
  • [解题报告] 2023.8.2 dp专题练习赛
    比赛链接:Link[团队私有]T1:https://www.cnblogs.com/SXqwq/p/17600671.htmlT2:https://www.cnblogs.com/SXqwq/p/17601007.htmlT3:完全背包板子T4:https://www.cnblogs.com/SXqwq/p/17601622.html......
  • 导入分类管理功能代码
          ......
  • 字符串转化为整数的C库函数
    #include<stdio.h>#include<stdlib.h>intmain(void){charstr[10]="12345";charstr1[10]="hello";intval;val=atoi(str);printf("val=%d,str=%s\r\n",val,str);val=atoi(s......
  • 剑指 Offer 55 - I. 二叉树的深度
    输入一棵二叉树的根节点,求该树的深度。从根节点到叶节点依次经过的节点(含根、叶节点)形成树的一条路径,最长路径的长度为树的深度。例如:给定二叉树[3,9,20,null,null,15,7],3/\920/\157返回它的最大深度3。使用递归回溯/***Definitionfor......