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. 【dp】P1064 金明的预算方案

    题目描述 金明今天很开心,家里购置的新房就要领钥匙了,新房里有一间金明自己专用的很宽敞的房间.更让他高兴的是,妈妈昨天对他说:“你的房间需要购买哪些物品,怎么布置,你说了算,只要不超过NN元钱就行”. ...

  2. HEXO快速搭建自己的博客

    关注我,每天都有优质技术文章推送,工作,学习累了的时候放松一下自己. 本篇文章同步微信公众号 欢迎大家关注我的微信公众号:「醉翁猫咪」 很多人有自己的博客,那么你想要吗?利用Hexo就可以搭建专属自己 ...

  3. 后退欧拉法求解常微分方程（c++）

    #include<iostream> #include<iomanip> using namespace std; int main() { double x,y,yn,h,t ...

  4. DB proxy, mysql proxy

    db proxy 在大型互联网站的数据库部署中,部署最多的数据库为MySQL.随着MySQL中Innodb存储引擎对事物的支持,MySQL在互联网公司部署中,应用量越来越多.典型应用MySQL的公司有 ...

  5. 以SQL命令方式调用存储过程

    string str = "Data Source=.;Initial Catalog=***;Integrated Security=True"; using (SqlConne ...

  6. RecyclerView 实现快速滚动

    RecyclerView 实现快速滚动 https://www.cnblogs.com/mamamia/p/8311449.html

  7. MySQL事务隔离级别（一）

    本文实验的测试环境:Windows 10+cmd+MySQL5.6.36+InnoDB 一.事务的基本要素(ACID) 1.原子性(Atomicity):事务开始后所有操作,要么全部做完,要么全部不做 ...

  8. PostgreSQL中的表连接操作

  9. Spring cloud微服务安全实战-6-11sentinel之配置持久化

    规则的持久化问题.现在的规则都是在内存里的,我们要写一些代码来编一些规则.启动以后规则在内存里了.如果你配置里面有sentinel的dashboard,有流量经过客户端的时候,它会把规则同步给Dash ...

  10. ELK - logstash 多个配置文件及模板的使用

    目录 - 前言 - 多配置文件的实现方式 - 为logstash 增加模板 - 将 logstash 作为服务启动 1. 前言 在使用 logstash 编写多个配置文件,写入到 elasticsea ...