day44:CSS选择器优先级&JS基础

发布时间：2020-12-20 09:57:19 所属栏目：Python 来源：网络整理

导读：这是一个删除不掉的代码区！！我也没办法目录 1.CSS选择器优先级 2.补充：margin是可以设置百分比的 3.JS 3.1 js代码的引入方式 3.2 变量 3.3 数据类型 3.4 数组(类似于python中的列表) 3.5 自定义对象类型(类似于python中的字典) 3.6 if判断 3.7 运算符 3.

这是一个删除不掉的代码区！！我也没办法

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>Title</style>
        /* css继承效果 优先级为0 */
         元素选择器 优先级为1 */
        div{
            color: red;
        }
        span blue}
         类值选择器 优先级为10 
        .c1 green
        .c2 purple id选择器 优先级为100 
        #d1 aqua !important 优先级为最高  antiquewhite!important 多级选择器，优先级累加，但是不进位  意思就是11个类值选择器比不过1个id选择器 
        .c1 .c2 seagreen}
    bodydiv class="c1">
        div1111
        <!-- 内联样式 优先级为1000 -->
        span ="c2" id="d1" style="color: orange">span1111spandivhtml>

关于css选择器优先级的总结

补充：margin是可以设置百分比的

>
        .cc
            height 100px;
            width 600px
            border 1px solid red 50px
            background-color;
             给margin设置百分比 
            margin-left 10%="cc">
        ></>

实现效果如下所示

JS

1.JS全称Javascript

2.JS现在最常用的两个版本是ECMAjavascript5和ECMAjavascript6

3.ECMAjavascript的三部分:

　　a.ECMAjavascript的核心是js代码

　　b.BOM（浏览器对象模型）：js操作浏览器，帮助你做事情

　　c.DOM（HTML文档对象模型）：通过js代码控制html文档中的所有元素（标签，标签属性，文本内容，css样式等等）

1.js代码的引入方式

 方式1：script标签中写js代码 -->
    script
        js代码
     方式2：创建.js结尾的文件，写js代码，通过script标签的src属性来引入（建议放到body标签下面） script src="xx.js">

2.变量

var a = 10;  // 声明变量
var b;    只声明没有赋值，默认值为undefined

3.数据类型

数值类型(number)

var a = 11;
var b = 11.11typeof a;   number
typeof b;   number
// + - * / % 都行,没有取整

字符串类型(string)

var s = '我爱我的家'typeof s;  "string"
 索引取值
s[0]  "我"
s.charAt(1);  "爱" 切片 s.substring(起始值,结束值); 都是索引值
s.substring(2,4);  "我的"
var a = '  hello  ';
a.trim();  移除两端空格
a.trimLeft();  移除左边的空格
a.trimRight();  移除右边的空格

布尔类型(boolean)

 js中的bool类型的true和false都是小写
true
false

underfine和null类型

undefined  变量声明了,但是没有赋值,此时这个变量是undefined类型
null  变量不用了,就可以给变量赋值为null,--- object类型

4.数组(类似于python中的列表)

头部/尾部追加或移除元素

var name = [11,22,33];

 数组常用方法:
names[0]  索引,索引也是从0开始的

names.push(ele)  尾部追加元素 示例:names.push('xx'); -- ?[11,33,"xx"]

var ele = names.obj.pop()  尾部移除一个元素 示例:names.pop(); -- [11,33]

names.unshift(ele)  头部插入元素 示例:names.unshift('ssss'); -- ?["ssss",11,33]

var ele = obj.shift()  头部移除一个元素 示例:names.shift(); -- ?[11,33]

splice：删除和替换

]
 names.splice(从哪删(索引),删几个(个数),删除位置替换的新元素(可不写,可写多个)) 
names.splice(index,ele)  在指定索引位置插入元素 示例:names.splice(2,'ele'); --[11,"ele",1)">
names.splice(index,1,1)"> 指定索引位置替换元素 示例：names.splice(1,1,'kkk'); -- [11,"kkk",1)  指定位置删除元素
names.slice(start,end)  切片 示例:names.slice(1,3); -- ?[22,1)">    
names.reverse()  原数组反转 示例:a.reverse(); -- [33,11]

names.join(sep) 将数组元素连接起来以构建一个字符串 示例: var a = ['ni','hao','ma',18]        a.join('+'); -- "ni+hao+ma+18"

names.concat(val,..)  连接数组示例: var a = [11,22]; var b = ['aa','bb'] var c = a.concat(b); c --?[11,"aa","bb"]

names.sort() 对原数组进行排序
     需要自己定义规则:
        function compare(a,b){
           return a - b;  当大于0时,两个数据换位置
        };
         使用: a.sort(compare); 升序排列

5.自定义对象类型(类似于python中的字典)

var a = {username:'xx',password:'123'};  key可以不加引号
typeof info;  "object"

 常用方法
var val = info['name']  获取,通过键取值必须加引号,
var val = info.name info.name 也是可以的
info['age'] = 20  修改
info['gender'] = 'male'  新增
delete info['age']  删除

在js中，创建一个string字符串对象的语法：

 创建一个string字符串对象
var a = new String('ss')
typeof a; 'object'

6.if判断

 var a = 0;
    if(a > 1){
        console.log('1111');
    }else if(a<1){
        console.log('2222'else {
        console.log('3333');
    }

7.运算符

比较运算符

 js中的比较运算符有 > < == !=  >=  <=   ===  !==
var a = '11'var b = 11;

a == b;  弱等于 只判断数值大小 并不判断数据类型
true
a === b;  强等于 会判断数据类型是否一致
false
a != b;  弱不等于

a !== b;  强不等于
true

算术运算符

 js中的算术运算符有 +  -  * / %   ++  --   ++ 自增 1   -- 自减 1

var a = 3 a++  先执行逻辑  在+1 ++a  先+1 在执行逻辑

简单示例:
    if (++a === 4){  先加1，再执行逻辑，所以这个条件成立，打印xxx
        console.log('xxx');
    }
    {
        console.log('ooo');
    };

8.for循环

 1.循环数组 方式1：
for (var i in a){
    console.log(i,a[i]);
}
 方式2
var i=0;i<a.length;i++){
    console.log(i,a[i]);
}

 2.循环自定义对象
var d = {name:'chao',age:18};
 d){
    console.log(i,d[i]);
}
 不能用下面的属性取值的方法

;

while (a < 10){
    console.log(a);  打印 0 1 2 3 4 5 6 7 8 9
    a++;
}

10.函数

普通函数

 f1(a,b){
    return a+b;
}
 执行: f1(1,2); -- 3

 注意：不能返回多个值
return a,b;
};
 执行：f1(1,2); -- 2[return不能返回多个值]

匿名函数

 匿名函数：function后面没有跟名字
 (a,b){
    console.log('xxx');
}

 在value中定义一个函数，通过变量名.键(参数) 执行函数
var d = {'xx':'oo','f':);
}};
 执行:d.f(1,2);

自执行函数

 定义function，并且整个function都用括号包起来 在括号外面加上（）来执行function函数
( () {
    alert('自执行函数!')
})()

用CSS写一个小米商城的导航栏

HTML部分

link rel="stylesheet" href="xiaomi.css"="nav"="nav-content clearfix">
            ="nav-left">
                a href="" class="nav-link">小米商城a> ="shugang">|>MIUI>LoT>云服务>金融>有品>小爱开放平台>企业团购>资质证照>协议规则>智能生活>Select Location="cart-part"="nav-link cart">购物车 (0)="cart-list hide"="nav-right">登录>注册>消息通知>

CSS部分

/* 清除左上的小空白 */
body{
    margin: 0;
    padding: 0;
}

 长方形黑框 
.nav{
    height: 40px;
    background-color: #333333;
    line-height: 40px;
}

 防止父级标签塌陷 
.clearfix:after{
    content: '';
    display: block;
    clear: both;
}
 让整个内容向右偏移5% 并且内容占90% 所以右边也占5% 保持左右对称 
.nav-content{
    margin-left: 5%;
    width: 90%;
    position: relative;
}

 左部分内容和右部分内容浮动 离左右40px 
.nav-content .nav-left{
    float: left; 40px;
}
.nav-content .nav-right{ right; 40px;
}
 设置内容里面所有a标签的样式 
.nav-content a{
    color: #b0b0b0;
    text-decoration: none;
    font-size: 12px;
}
 设置所有竖杠的样式 
.nav-content .shugang{ #424242;
}


 购物车 (0)的位置 
.cart-part{ right;
}
 设置购物车小块块的样式 
.cart-part .cart{ inline-block; 120px; #424242;
    text-align: center;
}

 触碰购物车会出现一个下拉框 */
 原本display是none 当触碰购物车时会变为block状态 在block块级标签状态下可与设置高度宽度等参数 
.cart-part:hover .cart-list{ block;
}
 触碰购物车下拉框的样式 
.cart-list{ 100px; 320px; absolute;
    right:
    top: red;
}
 隐藏 
.hide{ none;
}

实现效果

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

day44:CSS选择器优先级&amp;JS基础

目录

CSS选择器优先级