当前位置：首页 > article >正文

前端知识自检

article 2025/2/9 0:15:44

CSS

lang 伪类
:lang 伪类使你有能力为不同的语言定义特殊的规则

<style>
q:lang(no)
{
	quotes: "~" "~";
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE 已经声明时 IE8 支持 :lang.</p>
</body>

下拉菜单

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
</head>
<body>

<h2>鼠标移动后出现下拉菜单</h2>
<p>将鼠标移动到指定元素上就能看到下拉菜单。</p>

<div class="dropdown">
  <span>鼠标移动到我这！</span>
  <div class="dropdown-content">
    <p>显示</p>
    <p>www.runoob.com</p>
  </div>
</div>

</body>
</html>

HTML

JS

正则方法

匹配模式：

i：忽略大小写
g：全局匹配模式
m：执行多行匹配

// 这个正则表达式可以来检查一个字符串中是否含有a
var reg = /a/i;
var str = "Abc";
var result = reg.test(str);
console.log(result);

正则进阶
需求信息：创建一个正则表达式，检查一个字符串中是否有a或b

语法格式：使用 | 表示或者的意思

// 这个正则表达式可以来检查一个字符串中是否含有a
var reg = /a|b|c/;
var str = "Abc";
var result = reg.test(str);
console.log(result);

创建一个正则表达式，检查一个字符串中是否有字母

// 这个正则表达式可以来检查一个字符串中是否含有字母
var reg = /[A-z]/;
var str = "Abc";
var result = reg.test(str);
console.log(result);

常见组合：

[a-z]：任意小写字母
[A-Z]：任意大写字母
[A-z]：任意字母
[0-9]：任意数字
[^a-z]：除了任意小写字母
[^A-Z]：除了任意大写字母
[^A-z]：除了任意字母
[^0-9]：除了任意数字

正则方法
search() 方法使用正则表达式

使用正则表达式搜索 "Runoob" 字符串，且不区分大小写：
var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i);

search() 方法使用字符串

search 方法可使用字符串作为参数。字符串参数会转换为正则表达式：
var str = "Visit Runoob!"; 
var n = str.search("Runoob");

replace() 方法使用正则表达式

使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob :

var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"Runoob");

replace() 方法使用字符串

replace() 方法将接收字符串作为参数：

var str = document.getElementById("demo").innerHTML; 
var txt = str.replace("Microsoft","Runoob");

使用 exec()
exec() 方法是一个正则表达式方法。
exec() 方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
以下实例用于搜索字符串中的字母 “e”:

/e/.exec("The best things in life are free!");

变量提升

JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
以下两个实例将获得相同的结果：

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素 
elem.innerHTML = x;                     
// 在元素中显示 xvar x; // 声明 x

var x; // 声明 x
x = 5; // 变量 x 设置为 5
elem = document.getElementById("demo"); // 查找元素 elem.innerHTML = x;                     
// 在元素中显示 x