目录

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.8 for循环

  3.9 while循环

  3.10 函数

4.作业:使用CSS实现小米商城的导航栏

CSS选择器优先级

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

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

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.cc{
height: 100px;
width: 600px;
border: 1px solid red;
}
.c1{
height: 50px;
width: 100px;
background-color: green;
/* 给margin设置百分比 */
margin-left: 10%;
}
</style>
</head>
<body>
<div class="cc">
<div class="c1"></div>
</div>
</body>
</html>

实现效果如下所示

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代码
</script>
<!-- 方式2:创建.js结尾的文件,写js代码,通过script标签的src属性来引入(建议放到body标签下面) -->
<script src="xx.js"></script>

2.变量

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

3.数据类型

数值类型(number)

var a = 11;
var b = 11.11;
typeof 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, 22, 33, "xx"] var ele = names.obj.pop() // 尾部移除一个元素
// 示例:names.pop(); -- [11, 22, 33] names.unshift(ele) // 头部插入元素
// 示例:names.unshift('ssss'); --  ["ssss", 11, 22, 33] var ele = obj.shift() // 头部移除一个元素
// 示例:names.shift(); --  [11, 22, 33]

splice:删除和替换

var name = [11,22,33]
// names.splice(从哪删(索引),删几个(个数),删除位置替换的新元素(可不写,可写多个))
names.splice(index,0,ele) // 在指定索引位置插入元素
// 示例:names.splice(2,0,'ele'); --[11, 22, "ele", 33] names.splice(index,1,ele) // 指定索引位置替换元素
// 示例:names.splice(1,1,'kkk'); -- [11, "kkk", "ele", 33] names.splice(index,1) // 指定位置删除元素
// 示例:names.splice(1,2); -- [11, 33]

其他

names.slice(start,end) // 切片
// 示例:names.slice(1,3); --  [22, 33] names.reverse() // 原数组反转
// 示例:a.reverse(); -- [33, 22, 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, 22, "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; // 弱不等于
false
a !== b; // 强不等于
true

算术运算符

// js中的算术运算符有 +  -  * / %   ++  --
// ++ 自增 1
// -- 自减 1 var a = 3;
// a++ 先执行逻辑 在+1
// ++a 先+1 在执行逻辑 简单示例:
if (++a === 4){ // 先加1,再执行逻辑,所以这个条件成立,打印xxx
console.log('xxx');
}
else{
console.log('ooo');
};

8.for循环

// 1.循环数组
// 方式1:
for (var i in a){
console.log(i,a[i]);
}
// 方式2
for (var i=0;i<a.length;i++){
console.log(i,a[i]);
} // 2.循环自定义对象
var d = {name:'chao', age:18};
for (var i in d){
console.log(i,d[i]);
}
// 不能用下面的属性取值的方法
for (var i in d){
console.log(i,d.i);
}

9.while循环

var a = 0;

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

10.函数

普通函数

function f1(a,b){
return a+b;
}
// 执行: f1(1,2); -- 3 // 注意:不能返回多个值
function f1(a,b){
return a,b;
};
// 执行:f1(1,2); -- 2[return不能返回多个值]

匿名函数

// 匿名函数:function后面没有跟名字
var a = function (a,b){
console.log('xxx');
} // 在value中定义一个函数,通过变量名.键(参数) 执行函数
var d = {'xx':'oo','f':function (a,b){
console.log('xxx');
}};
// 执行:d.f(1,2);

自执行函数

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

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

HTML部分

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

CSS部分

/* 清除左上的小空白 */
body{
margin:;
padding:;
} /* 长方形黑框 */
.nav{
height: 40px;
background-color: #333333;
line-height: 40px;
} /* 防止父级标签塌陷 */
.clearfix:after{
content: '';
display: block;
clear: both;
} /* 左部分内容和右部分内容浮动 离左右40px */
.nav-content .nav-left{
float: left;
height: 40px;
}
.nav-content .nav-right{
float: right;
height: 40px;
}
/* 设置内容里面所有a标签的样式 */
.nav-content a{
color: #b0b0b0;
text-decoration: none;
font-size: 12px;
}
/* 设置所有竖杠的样式 */
.nav-content .shugang{
color: #424242;
} /* 购物车 (0)的位置 */
.cart-part{
float: right;
}
/* 设置购物车小块块的样式 */
.cart-part .cart{
display: inline-block;
height: 40px;
width: 120px;
background-color: #424242;
text-align: center;
} /* 触碰购物车会出现一个下拉框 */
/* 原本display是none 当触碰购物车时会变为block状态*/
/* 在block块级标签状态下可与设置高度宽度等参数 */
.cart-part:hover .cart-list{
display: block;
}
/* 触碰购物车下拉框的样式 */
.cart-list{
height: 100px;
width: 320px;
position: absolute;
right:;
top: 40px;
background-color: red;
}
/* 隐藏 */
.hide{
display: none;
}

实现效果

day44:CSS选择器优先级&JS基础的更多相关文章

  1. 看完就懂--CSS选择器优先级的计算

    CSS选择器优先级的计算 什么是选择器的优先级 优先级的计算与比较(一) - 优先级具有可加性 - 选择器优先级不会超过自身最大数量级 - 同等优先级情况下,后写的覆盖前写的 - 并集选择器之间的优先 ...

  2. 关于Css选择器优先级

    今天练习css的时候,重叠后的style发现不起作用,原来css选择器优先级大有文章. 声明: yi下内容选自 51cto.com  --加以自己的理解 以备日后参照使用,毕竟自己理解的才是自己的. ...

  3. 深入理解CSS选择器优先级

    题外话 今天把 <CSS REFACTORING>(中文名叫<CSS重构:样式表性能调优>)电子书粗略的浏览了一遍,这本书很薄,150页左右,首先是介绍了什么是重构并举了两个简 ...

  4. CSS选择器优先级(转)

    原文:http://www.cnblogs.com/wangfupeng1988/p/4285251.html 另外,w3c有文章介绍了CSS选择器的特定性,见https://www.w3.org/T ...

  5. CSS选择器优先级 CSS权值

    计算指定选择器的优先级:重新认识CSS的权重 标签的权值为 0,0,0,1 类的权值为 0,0,1,0 属性选择的权值为 0,0,1,1  ID的权值为 0,1,0,0 important的权值为最高 ...

  6. 深入理解CSS选择器优先级的计算

    选择器的优先级关系到元素应用哪个样式.在CSS2.1的规范(http://www.w3.org/TR/2009/CR-CSS2-20090908/cascade.html#specificity)中是 ...

  7. CSS选择器优先级总结

    CSS三大特性-- 继承. 优先级和层叠. 继承:即子类元素继承父类的样式; 优先级:是指不同类别样式的权重比较; 层叠:是说当数量相同时,通过层叠(后者覆盖前者)的样式. css选择符分类 首先来看 ...

  8. 导航栏布局时遇到的问题以及解决办法 css选择器优先级

    得到的导航栏效果 添加#menu ul li{width:30px;} 效果如图 将会使列表项和分隔区域的宽度同时改变因为id选择器的优先级高于类选择器,此时应该为列表项添加内联样式如图 才能得到如下 ...

  9. 前端CSS css引入方式 css选择器 css选择器优先级

    一.       CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表 ...

随机推荐

  1. CF R630 div2 1332 E Height All the Same

    LINK:Height All the Same 比赛的时候 被这道题给打自闭了 还有1个多小时的时候开始想 想了30min 无果 放弃治疗. 心态炸了 F不想看了 应该要把题目全看一遍的 下次不能这 ...

  2. SparkSQL JDBC和JDBCServer区别

    注意SparkSQL JDBC和SparkSQL JDBCSever是完全两种不同的场景. SparkSQL JDBC SparkSQL可以使用JDBC的方式访问其他数据库,和普通非spark程序访问 ...

  3. Spark初探

    Apache Spark是一个针对大规模数据的快速.统一处理引擎. One stack rule them all 1-Stream Processing :spark Streaming 2-Ad- ...

  4. 数据库Schema

    在学习SQL的过程中,会遇到一个让你迷糊的Schema的概念.实际上,schema就是数据库对象的集合,这个集合包含了各种对象如:表.视图.存储过程.索引等.为了区分不同的集合,就需要给不同的集合起不 ...

  5. Canal工作原理

    摘自:http://www.importnew.com/25189.html 背景 mysql主备复制实现: 从上层来看,复制分成三步: master将改变记录到二进制日志(binary log)中( ...

  6. 【Python 实例】面向对象 | 按相反的顺序输出列表的值

    [Python 实例]面向对象 | 按相反的顺序输出列表的值 题目: 解答: 运行结果: 题目: 按相反的顺序输出列表的值 解答: """ 按相反的顺序输出列表的值 &q ...

  7. 修改jar包配置文件的正确操作,jar包解压出来的文件夹重新打成jar,不依靠开发工具!!!!

    修改jar包配置文件的正确操作,有的时候通过一些解压工具可以对内部的文件进行修改,但是有时候会无效.这就很烦了 一.背景:       有一个springboot项目,事先我已经用编译好打成jar包以 ...

  8. GRE 协议 - 和 ISP 用的协议不一样怎么办

    GRE 出现的背景: 随着网络(公司)规模的增大,越来越多的公司需要在跨区域之间建设自己的分公司.但随之也就出现了这样的问题,考虑这样一个场景.公司 A 在北京和上海间开设了两家公司,由于业务的需要, ...

  9. Spark基础学习精髓——第一篇

    Spark基础学习精髓 1 Spark与大数据 1.1 大数据基础 1.1.1 大数据特点 存储空间大 数据量大 计算量大 1.1.2 大数据开发通用步骤及其对应的技术 大数据采集->大数据预处 ...

  10. C++ Templates (1.5 重载函数模板 Overloading Function Templates)

    返回完整目录 目录 1.5 重载函数模板 Overloading Function Templates 1.5 重载函数模板 Overloading Function Templates 和普通函数一 ...