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. Linux常用命令合集

    常用命令合集 命令选项和参数 Linux中的命令格式为:command [options] [arguments]  //中括号表示可选的,即有些命令不需要选项也不需要参数,但有的命令在运行时需要多个 ...

  2. 处理kubernetes 一些比较难删除的资源

    kubernetes 提供了force 的命令在我们删除资源的时候,但是很多时候还是不可以的 一般删除资源的处理 命令 kubectl delete <resource> <reso ...

  3. 【JOISC2018|2019】【20190622】minerals

    题目 交互题 有\(2n\)个物品,编号为\(1-2n\),存在唯一的两两配对关系,即有\(n\)种物品 有一个盒子,初始为空,盒子上会显示里面存在的物品种类数\(C\) 你每次操作可以将一个物品从盒 ...

  4. 读入优化&输出优化

    读入优化 int read() { ; ') ; '; ') num=num*+c-'; return ff*num; } 输出优化 void write(int x) { ) { putchar(' ...

  5. element ui 合计/table show-summary

    在el-table 上面加上show-summary就可以对table的数据进行合计 但是上次出现了合计栏有的为空,有的合计不对的情况,如果出现的是空,那么说明你渲染的数据有undefine(即后台返 ...

  6. Eclipse R语言开发环境搭建 StatET插件

    StatET 官网 http://www.walware.de/goto/statet Installation 点击菜单栏 help --> Install New Software 配置R语 ...

  7. springMvc 入门二

    目的:请求参数接受,输出,常见的注解(在上一篇入门1基础上) 1:请求参数的绑定 1.1绑定的机制 表单中请求参数都是基于key=value的. SpringMVC绑定请求参数的过程是通过把表单提交请 ...

  8. md5加密后不能解密

    MD5加密原理是散列算法,散列算法也称哈希算法.计算机专业学的数据结构就有哈希表这一知识点.比如10除以3余数为一,4除以3余数也为一,但余数为一的就不知道这个数是哪个了.所以md5不能解密.就算是设 ...

  9. Linux在线安装Redis

    一.进入Redis官网寻找需要下载的版本:https://redis.io/ 将下载地址链接复制下来:http://download.redis.io/releases/redis-5.0.7.tar ...

  10. 日期正则表达式yyyyMMdd

    日期校验yyyyMMdd, 包括闰月等校验. package com.xgcd; import java.util.regex.Matcher; import java.util.regex.Patt ...