1. 为网页链接添加快捷键：accesskey 属性

　　https://zhidao.baidu.com/question/2267343500557447508.html

2. 键盘事件设置快捷键：https://blog.csdn.net/gao_xu_520/article/details/80538334

3. 点击链接执行js：https://www.cnblogs.com/myboke/p/4629110.html

4. Dom对象：HTML DOM 元素对象

一个将导航栏滚动时固定的实例

<!DOCTYPE html>

<html lang="zh-cn">

<head>

    <meta charset="utf-8" />

</head>

<body>

    <div id="page_begin_html">

<style>

#home{width:100%}

#header{

    width:960px;

    position:fixed;

    top:0;

    right:0;

    left:0;

    margin:0 auto;

    border-top:0;

    background:#fff;

    opacity:.95;

    border-bottom:1px #eef2f8 solid;

    padding-bottom:0;

    display:block;

    height:60px;

    z-index:999

}

#header

#blogTitle{

    position:relative;

    height:60px

}

#header

#blogTitle h1{

    font-size:25px;

    font-family:Georgia;

    width:auto;

    margin-left:0;

    margin-top:12px;

    padding-left:15px

}

#header

#blogTitle h1 a{color:#404040}

#header

#navigator{

    height:inherit;

    position:absolute;

    right:0;

    top:0;

    background-color:transparent;

    display:inline-block;

    z-index:999

}

#header #navList{height:inherit}

#header #navList li{position:relative}

</style>

</div>

<div id="home">

    <div id="header">

        <div id="blogTitle">

            <h1><a id="Header1_HeaderTitle">Alexander</a></h1>

        </div>

    </div>

</div>

<br><br><br><br>

<div id="navigator" style="background-color:yellow;text-align:center;">Title</div>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

</body>

</html>

HTML获取某个类的所有元素：

直接获取：

document.querySelectorAll("div.aa")

类似属性选择器的写法：

document.querySelectorAll("div[class='aa']")

补充一下还可以not选择器：

document.querySelectorAll(".aa:not(ul)")

获取某个Class的所有DIv。document.querySelectorAll 需要高版本浏览器支持。这边给一个低版本浏览器上也能跑的方法：

var list = document.getElementsByClassName('bo-dropdowm-menu');

var rel  = [];

var i;

for (i = 0; i < list.length; ++i)

{

    if (list[i].tagName === 'DIV') {

        rel.push(list[i]);

    }

}

// 这个就是你想要的结果了

console.log(rel);

HTML常用技巧的更多相关文章

  1. 【shell 大系】Linux Shell常用技巧

    在最近的日常工作中由于经常会和Linux服务器打交道,如Oracle性能优化.我们数据采集服务器的资源利用率监控,以及Debug服务器代码并解决其效率和稳定性等问题.因此这段时间总结的有关Linux ...

  2. oracle存储过程常用技巧

    我们在进行pl/sql编程时打交道最多的就是存储过程了.存储过程的结构是非常的简单的,我们在这里除了学习存储过程的基本结构外,还会学习编写存储过程时相关的一些实用的知识.如:游标的处理,异常的处理,集 ...

  3. Vim 常用技巧：

    Vim 常用技巧: 将回车由默认的8个空格改为4个空格: 命令:set sw=4 修改tab为4空格: 命令:set ts=4 设置每一级的缩进长度: 命令:set shiftwidth=4 设置文件 ...

  4. JS~~~ 前端开发一些常用技巧 模块化结构 &&&&& 命名空间处理 奇技淫巧！！！！！！

    前端开发一些常用技巧               模块化结构       &&&&&     命名空间处理 奇技淫巧!!!!!!2016-09-29    17 ...

  5. Android ListView 常用技巧

    Android ListView 常用技巧 Android TextView 常用技巧 1.使用ViewHolder提高效率 ViewHolder模式充分利用了ListView的视图缓存机制,避免了每 ...

  6. JavaScript常用技巧总结（持续添加中...）

    在我学习过程中收集的一些常用技巧: typeof x !== undifined 判断x是否已定义: x === Object(x)  判断x是否为对象: Object.keys(x).length ...

  7. Eclipse调试常用技巧(转)

    Eclipse调试常用技巧 转自http://daimojingdeyu.iteye.com/blog/633824 1. 条件断点 断点大家都比较熟悉,在Eclipse Java 编辑区的行头双击就 ...

  8. AS技巧合集「常用技巧篇」

    转载:http://www.apkbus.com/forum.php?mod=viewthread&tid=254723&extra=page%3D2%26filter%3Dautho ...

  9. iPhone不为人知的功能常用技巧，看完后才发现很多用iPhone的人实在是愧对乔布斯！ - imsoft.cnblogs

    很多人花了四五千买部苹果,结果只用到四五百块钱的普通手机功能. iPhone不为人知的功能,常用技巧: 网上搜集整理的iPhone快捷键操作,虽然表面上iPhone按键只有一个HOME键,大部分操作都 ...

  10. C# Datetime类常用技巧

    C#类常用技巧 //今天DateTime.Now.Date.ToShortDateString();//昨天,也就是今天的日期减一DateTime.Now.AddDays(-1).ToShortDat ...

随机推荐

  1. 洛谷 P4281 [AHOI2008] 紧急集合 题解

    挺好的一道题,本身不难,就把求两个点的LCA变为求三个点两两求LCA,不重合的点才是最优解.值得一提的是,最后对答案的处理运用差分的思想:假设两点 一点深度为d1,另一点 深度为d2,它们LCA深度为 ...

  2. 2019SDSC夏令营游记

    Day 1 2019.7.22 晴 第一天夏令营,是在一所大学举办的. 到之前的我好兴奋,要提前看一下大学到底是什么样的. 聊了一上午的天 坐了一上午的公交终于到了目的地,下午很自由,自己在宿舍里面休 ...

  3. 富文本编辑器kindeditor的使用

    第一步:导入前端js文件 <!-- 富文本编辑器 --> <link rel="stylesheet" href="../plugins/kindedi ...

  4. 京东购物车的Java架构实现及原理！

    今天来写一下关于购物车的东西, 这里首先抛出四个问题: 1)用户没登陆用户名和密码,添加商品, 关闭浏览器再打开后 不登录用户名和密码 问:购物车商品还在吗? 2)用户登陆了用户名密码,添加商品,关闭 ...

  5. 块元素&行内元素

    大多数HTML 元素被定义为块级元素或内联元素.块级元素在浏览器显示时,通常会以新行来开始(和结束) block元素特点 1 总是在新行上开始: 2 高度,行高以及外边距和内边距都可控制: 3 宽度缺 ...

  6. 第06组 Beta冲刺（5/5）

    队名:拾光组 组长博客链接 作业博客链接 团队项目情况 燃尽图(组内共享) 组长:宋奕 过去两天完成了哪些任务 继续维护后端代码 准备beta版本的答辩 GitHub签入记录 接下来的计划 整理任务, ...

  7. [源码分析]LinkedHashMap

    一个键有序的 HashMap   可以将 LinkedHashMap 理解为 LinkList + HashMap,所以研究LinkedHashMap之前要先看HashMap代码.这里不再赘述.其实L ...

  8. pgsql 聚合函数array_to_string，ARRAY_AGG

    array_to_string--将sql中的数组转为字符串 ARRAY_AGG--将sql中的数据转为数组处理 以下给大家一个简单的例子即可体会: 1.需求     2.数据库中原数据   1.pn ...

  9. Linux /var/log下各种日志文件

    Linux /var/log下各种日志文件:

  10. android -------- DES加密解密算法

    DES全称为Data Encryption Standard,即数据加密标准,是一种使用密钥加密的块算法,1977年被美国联邦政府的国家标准局确定为联邦资料处理标准(FIPS),并授权在非密级政府通信 ...