一、原生JS选择器

JS选择器常用的有getElementById()、getElementsByName()、getElementsByTagName()、getElementsByClassName()、querySelector()、querySelectorAll()

  • A: getElementById(ID): 返回对指定ID的第一个对象的引用,如果在文档中查找一个特定的元素,最有效的方法是getElementById()
  • B: getElementsByName(name): 返回文档中name属性为name值的元素,因为name属性值不是唯一的,所以查询到的结果有可能返回的是一个数组,而不是一个元素。
  • C: getElementsByTagName(tagname): 返回文档中指定标签的元素
  • D: getElementsByClassName():返回文档中所有指定类名的元素
  • E: querySelector():返回文档中匹配指定css选择器的第一个元素
  • F: querySelectorAll():返回文档中匹配指定css选择器的第一个元素

二、jQuery选择器

内容
基本选择器有ID选择器、类选择器、标签选择器、通用选择器,事件的添加方法如下:
$(...).事件名(function() { });
属性样式有:

$(...).css("border","1px solid red")
$(...).css({...})
$(...).css("border")
$(...).attr(属性名,值)
$(...).html() innerHTML
$(...).text() innerText
$(...).val() value值
$(...).addClass() 增加
$(...).removeClass() 移除
$(...).toggleClass() 开关**

选择器的详细使用方法:

Js选择器总结的更多相关文章

  1. js选择器

    原生JS选择器有getElementById.getElementsByName.getElementsByTagName和getElementsByClassName这四个,下面我就一个一个介绍这四 ...

  2. 使用HTML5的JS选择器操作页面中的元素

    文件命名为:querySelector.html,可在Chrome浏览器中预览效果. 1 <!DOCTYPE html> 2 <html lang="en"> ...

  3. js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  4. js导读,js引入,js选择器,事件,操作页面文档,计算后样式,数据类型

    js导读 ''' js属于编写运行在浏览器上的脚本语言 js采用ECMAScript语法 操作BOM:浏览器对象模型 eg:浏览器上下滑动,浏览器历史记录 操作DOM:文档对象模型 ''' js引入 ...

  5. JS高级语法与JS选择器

    元素(element)和节点(node) childNode属性和children属性的区别 <!DOCTYPE html> <html lang="en"> ...

  6. 7-80 HTML5新增的JS选择器

    7-80 HTML5新增的JS选择器 学习要点 HTML5新增的JS选择器 在传统的 JavaScript 开发中,原生的 JavaScript 所提供的 DOM 选择方法并不多,仅仅局限于通过 ta ...

  7. js 进阶 10 js选择器大全

    js 进阶 10 js选择器大全 一.总结 一句话总结:和css选择器很像 二.JQuery选择器 原生javaScript中,只能使用getELementById().getElementByNam ...

  8. 前端(十二)—— JavaScript基础操作:if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式

    JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...

  9. JS选择器querySelector和~All,三个原生选择器

    定义: querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素. 注意: querySelector() 方法仅仅返回匹配指定选择器的第一个元素.如果你需要返回所有的元素,请 ...

随机推荐

  1. The Way to Home CodeForces - 910A

    4个月前做的一道题,当时不知道为什么,写了一个bfs,直接就超时了. 现在再看这个题目,发现就是一个简单的贪心,每次走最远即可. #include <bits/stdc++.h> usin ...

  2. 栈和队列----设计一个有getMin功能的栈

    设计一个有getMin功能的栈 设计一个具有getMin功能的栈,可以返回栈中的最小的元素,可以使用现有的栈的数据结构,要求pop/push/getMin操作的时间复杂度是O(1). package ...

  3. Linux下用Bash语言实现判断素数的功能

    题目链接: 题目描述 写一个判断素数的函数,在主函数输入一个整数,输出是否是素数的消息. 输入 一个数 输出 如果是素数输出prime 如果不是输出not prime 样例输入 97 样例输出 pri ...

  4. Struts2学习-struts执行过程简述

    1.web.xml <web-app> <filter> <filter-name>struts2</filter-name> <filter-c ...

  5. [POI2010] GRA-The Minima Game - 贪心,dp,博弈论

    给出N个正整数,AB两个人轮流取数,A先取.每次可以取任意多个数,直到N个数都被取走.每次获得的得分为取的数中的最小值,A和B的策略都是尽可能使得自己的得分减去对手的得分更大.在这样的情况下,最终A的 ...

  6. gitlab 更换服务器后访问 Integrations 出现 500 错误

    异常问题解决方案:问题:gitlab 更换服务器后访问 Integrations 出现 500 错误解决方案:从原服务器上将 /etc/gitlab/gitlab-secrets.json 复制过来覆 ...

  7. Node.js、npm和webpack的安装

    1. 前往Node.js官网下载安装程序 2. 一路点击下一步即可 3. 测试是否安装成功 4. 配置npm在安装全局模块时的路径和缓存cache的路径 因为在执行例如npm install webp ...

  8. eureka server 单节点与多节点部署演示

    环境搭建 目录结构(ad-eureka为子模块) --ad-spring-cloud --ad-eureka --pom.xml --pom.xml 主pom.xml <?xml version ...

  9. C编译过程

    system()调用系统命令 C语言源代码——> 预编译(1.去掉注释:2.包含文件)——> gcc -o a.o a.c 编译(编译成二进制质量)——> 链接系统库函数——> ...

  10. AntDesign(React)学习-7 Menu添加事件

    今天花了大半天时间从老家回到工作地,路上因为肺炎封堵挺厉害,希望国家挺过这个难关,要不大家都失业可就惨了,上一篇做了一个展示数据的demo,这一篇研究antd Menu item点击事件 1.还是先看 ...