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. Using HAProxy as an API Gateway, Part 2 [Authentication]

    转自:https://www.haproxy.com/blog/using-haproxy-as-an-api-gateway-part-2-authentication/ HAProxy is a ...

  2. 洛谷 P4707 重返现世

    洛谷 P4707 重返现世 k-minimax容斥 有这一个式子:\(E(\max_k(S))=\sum_{T\subseteq S}(-1)^{|T|-k}C_{|T|-1}^{k-1}\min(T ...

  3. javascript预览本地图片

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vim配置无插件

    其实,vim插件会影响编辑器的启动速度,虽然有些插件影响不大,我依然觉得不够,其实通过简易的状态栏,可以显示必要的信息,能自定义颜色和背景甚至透明就足够了. 一.自定义状态栏其实以下内容可以写在一行上 ...

  5. 作业——09 安装关系型数据库MySQL 安装大数据处理框架Hadoop

    作业的要求来自于:https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/3161 简述Hadoop平台的起源.发展历史与应用现状. 起源: 2 ...

  6. Nginx配置简单基于域名的虚拟主机

    首先修改hosts文件,让浏览器在看到a.com或是www.a.com的网址时知道上哪里去找: # Copyright (c) 1993-2009 Microsoft Corp. # # This i ...

  7. OpenSSL的证书, 私钥和签名请求(CSRs)

    概述 OpenSSL是一个多用途的工具, 适用于涉及Public Key Infrastructure(PKI), HTTPS(HTTP over TLS)的用途. 这份文档提供关于OpenSSL命令 ...

  8. zk集群部署

    一.环境准备 当前环境:centos7.3三台软件版本:zookeeper-3.5.2部署目录:/usr/local/zookeeper启动端口:2181配置文件:/usr/local/zookeep ...

  9. nodejs 读取目前下所有文件

    var fs = require('fs'); var join = require('path').join; function getJsonFiles(jsonPath) { let jsonF ...

  10. laravel composer 使用阿里云镜像

    使用composer安装错误提示: 即: [Composer\Downloader\TransportException] The "https://packagist.laravel-ch ...