day04

最新推荐文章于 2023-12-10 19:17:00 发布

原创最新推荐文章于 2023-12-10 19:17:00 发布 · 173 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #css

本文介绍了CSS中的各种选择器，包括后代选择器、子代选择器、相邻兄弟选择器等，并探讨了如何通过这些选择器来精确地定位页面元素进行样式设置。此外，文章还涉及JavaScript的基础概念，如变量、数据类型、逻辑运算等。

day04选择器：

层次选择器：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iA3JOVwu-1603027258672)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201017194911912.png)]

后代选择器：

/*
   后代选择器
      某个元素的后面  祖爷爷 爷爷 爸爸 你
*/
body p{
     background: red;
 }

子代选择器：

/*子代选择器  一代  儿子*/
body > p {
     background: yellow;
 }

相邻兄弟选择器：

.active +p{
    background: palegreen;
}

通用选择器：

/*通用选择器
    当前选择元素向下所有的兄弟元素
*/
.active~p{
    background: slateblue;
}

结构伪类选择器

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-57BhxLFG-1603027258674)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201017195813015.png)]

/*
属性选择器：属性名=属性值（正则表达式）
a[]{
}
/
a[id]{
background: red;
}
a[id=first]{
background: yellowgreen;
}
/
class中有link的元素的
*=:包含等于
=：绝对等于
/
a[class=“link”]{
background: fuchsia;
}
/选中href中的以https开头的元素/
a[href^=https]{
background: slateblue;
}
/选中href中的以png结尾的元素/
a[href$=png]{
background: #4158D0;
}

1、为啥美化网页：

有效的传递页面的信息

美化页面，页面的漂亮，才能吸引用户

凸显主题

提高我们的用户的体验
1、span标签

重点突出的文字，使用span标起来:

2、字体的样式

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0BXb31mA-1603027258677)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201017200034975.png)]

3、悬浮和阴影

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DtmWRIFG-1603027258679)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20201017200136269.png)]

2、js概念

JavaScript介绍：

Js这门语言主要是完成页面的数据验证，一次它运行在客户端，需要运行浏览器来解析执行我们的js代码，原来他的名字LiveScript，为了吸引更多的java程序员去使用，更名为javaScript

Js是弱类型，java是强类型。

特点：

1/交互性(它可以做的就是信息对的动态交互)

2/安全性（不运行直接访问本地磁盘）

3/跨平台（只要是可以解释js的浏览器都可以执行，和平台没关系）

2.1、变量

什么是变量？变量就是存方法某些值的内存的命名。

Js的变量类型：

数值类型：number

字符串类型：string

对象类型：object

布尔类型：boolean

函数类型：function

Js中的特殊的值：

Undefined未定义：所有的js变量未赋予初始值的时候，默认都是Undefined

Null：空值

NaN：全称not a number 非数字非数值

Js中的定义变量的格式：

var 变量名;

var 变量名=值;

2.2、关系

等号：==等于是简单的做字面值的比较

全等号：===除了比较字面值之外，还会比较两个变量的数据类型

逻辑运算：

且运算：&&

或运算：||

取反运算：！

在js当中，所有的变量都可以作为boolean的变量去使用

0，null，undefined，””（空串）都认为是false

&&且运算:

第一种情况：

当表达式全为真的时候，返回最后一个表达式的值

第二种情况：

在表达式中，有一个为假的时候，返回第一个为假的表达式的值

||或运算：

第一种情况：

当表达式全为假的时候，返回最后一个表达式的值

第二中情况：

只有一个表达式为真，就会返回第一个为真的表达式的值

并且&&和||都是有一个短路效果的，

当这个&&或者||有了结果了，后面的表达式就不再执行。

2.3、数组

Js中的数组定义：

格式：

Var 数组名=[]; //空数组

Var 数组名=[1,”abc”,true]; //定义数组的同时给它赋值

写个99乘法表（用两个for循环）

  for(var i = 1; i <= 9; i++){
        for(var j = 1; j <= i; j++){
            // var str = 0;
            var str = i + "x" + j + "=" + i*j; 
         console.log(str);
        }
        console.log("<br/>");
    }

i <= 9; i++){
for(var j = 1; j <= i; j++){
// var str = 0;
var str = i + “x” + j + “=” + i*j;
console.log(str);
}
console.log("
");
}