19第一周

最新推荐文章于 2023-10-20 23:32:35 发布

Venciki

最新推荐文章于 2023-10-20 23:32:35 发布

阅读量98

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_33188421/article/details/88808575

版权

web 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

JavaScript

用var声明变量；
重新声明的javascript变量，它的值不会丢失:例如

var carname="Volvo";
var carname;

在执行这两条语句后，变量 carname 的值依然是 “Volvo”：

js数组

JavaScript 数组
下面的代码创建名为 cars 的数组：

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

//或者 (condensed array)

var cars=new Array("Audi","BMW","Volvo");

//或者 (literal array)

实用：

<!DOCTYPE html>
<html>
<body>

<script>
var i;
var cars = new Array();
cars[0] = "Audi";
cars[1] = "BMW";
cars[2] = "Volvo";

for (i=0;i<cars.length;i++)
{
document.write(cars[i] + "<br>");
}
</script>

</body>
</html>

使用 String 对象的 length 属性来查找字符串的长度：

var message="Hello World!";
var x=message.length;

在以上代码执行后，x 的值是：

注意JavaScript对大小写敏感，所以无论再写什么的时候要注意区分大小写。

条件运算符

JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

//语法
variablename=(condition)?value1:value2 
//例子
greeting=(visitor=="PRES")?"Dear President ":"Dear ";

如果变量 visitor 中的值是 “PRES”，则向变量 greeting 赋值 "Dear President "，否则赋值 “Dear”。

css中的伪类（目前用过的）

:hover 伪类可以让你实现一个当鼠标悬停在div上时做出相应的变化。
eg .foo:hover { background: gold; }这行代码的意思时当鼠标移动到class名为foo的div上时让他的背景变为金色（gold）
在此分享一个使用:hover创建一个下拉按钮：


CSS内容：
div.menu-bar ul ul {
 display: none;
}

div.menu-bar li:hover > ul {
 display: block;
}

HTML内容如下:

<div class="menu-bar">
 <ul>
   <li>
     <a href="example.html">Menu</a>
     <ul>
       <li>
         <a href="example.html">Link</a>
       </li>
       <li>
         <a class="menu-nav" href="example.html">Submenu</a>
         <ul>
           <li>
             <a class="menu-nav" href="example.html">Submenu</a>
             <ul>
               <li><a href="example.html">Link</a></li>
               <li><a href="example.html">Link</a></li>
               <li><a href="example.html">Link</a></li>
               <li><a href="example.html">Link</a></li>
             </ul>
           </li>
           <li><a href="example.html">Link</a></li>
         </ul>
       </li>
     </ul>
   </li>
 </ul>
</div>

:active

示例

:active CSS选择器示例

这个链接在鼠标按下和松开的这段时间内会变成绿色: Mozilla Developer Network.

<html>
<head>
<style>
	body { background-color: #ffffc9 }
	a:link { color: blue } /* 未访问链接 */
	a:visited { color: purple } /* 已访问链接 */
	a:hover { font-weight: bold } /* 用户鼠标悬停 */
	a:active { color: lime } /* 激活链接 */
</style>
</head>
<body>
	<h1>:active CSS选择器示例</h1>
    <p>这个链接在鼠标按下和松开的这段时间内会变成绿色: <a href="#">Mozilla Developer Network</a>.</p>
</body>
</html>

:nth-of-type()这个 CSS 伪类匹配文档树中在其之前具有 an+b-1 个相同兄弟节点的元素，其中 n 为正值或零值。简单点说就是，这个选择器匹配那些在相同兄弟节点中的位置与模式 an+b 匹配的相同元素。
eg:

/* 在每组兄弟元素中选择第四个 <p> 元素 */
p:nth-of-type(4n) {
  color: lime;
}

示例：
HTML

<div>
  <div>这段不参与计数。</div>
  <p>这是第一段。</p>
  <p>这是第二段。</p>
  <div>这段不参与计数。</div>
  <p>这是第三段。</p>
  <p>这是第四段。</p>
</div>

CSS

/* 奇数段 */
p:nth-of-type(2n+1) {
  color: red;
}

/* 偶数段 */
p:nth-of-type(2n) {
  color: blue;
}

/* 第一段 */
p:nth-of-type(1) {
  font-weight: bold;
}

Venciki

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录