行业资讯

3)js的基础语法使用以及css定位

发布时间：2020-08-07 10:37:05 作者：tty之星
来源：网络 阅读：7456

Css 定位：

background-position: 20px 40px;

 

（1）相对定位：

      如果仅仅对当前盒子设置相对定位，那么他与原来的盒子没有任何变化

      只有一个作用：  父相子绝，不适用相对定位来做压盖现象

   不脱标、形影分离、老家留坑

（2）绝对定位：

设置绝对定位的盒子，脱离标准流

（3）固定定位

1）：相对定位：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
div{
    width: 200px;
    height: 200px;
}
        .box1{
            background-color: red;
        }
        .box2{
            background-color: green;
            position: relative;
        }
        .box3{
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>

 3)js的基础语法使用以及css定位

2）绝对定位：

 3)js的基础语法使用以及css定位

 

大图居中现象：

 

 3)js的基础语法使用以及css定位

绝对定位盒子居中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        body{
            position: relative;
        }
        .box{
            width: 500px;
            height: 500px;
            background-color: red;
            position: absolute;
            left: 50%;
            margin-left: -250px;
        }
    </style>
</head>
<body>
<div class="box"></div>
</body>
</html>

 3)js的基础语法使用以及css定位

鼠标悬浮出来的购物车：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .cart{
            width: 100px;
            height: 50px;
            background-color: #000;
            position: relative;
            margin: 100px auto;

        }
        .cart-info{
            position: absolute;
            width: 300px;
            height: 100px;
            background-color: red;
            top: 50px;
            left: -200px;
            display: none;
        }
        .cart:hover .cart-info{
            display: block;
            background-color: green;
        }
    </style>
</head>
<body>
<div class="cart">
    <div class="cart-info"></div>
</div>
</body>
</html>

3)js的基础语法使用以及css定位 

 

Z-index:

这个是设置权重的类似，父怂子牛逼不管事

 

固定导航栏：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0;
        }
        body{
            padding-top: 80px;
        }
        .head{
            width: 100%;
            height: 80px;
            background-color: rgba(0,0,0,.5);
            position: fixed;
            top:0;
            left:0;
            z-index: 99;
        }
        .wrapper{
            width: 100%;
            height: 500px;
            background-color: red;
        }
        .top{
            width: 100px;
            height: 100px;
            background-color: purple;
            position: fixed;
            bottom: 20px;
            right: 20px;
            line-height: 100px;
            text-align: center;
        }
    </style>
</head>
<body style="height: 2000px">
<div class="head">
导航栏
</div>
<div class="wrapper">
中心内容
</div>
<div class="top">
    返回顶部
</div>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $('.top').click(function () {
        $('html,body').animate({
            scrollTop:'50px'
        },2000);
    });
</script>

</body>
</html>

 3)js的基础语法使用以及css定位

三种js的引入方式：

3)js的基础语法使用以及css定位

3)js的基础语法使用以及css定位

3)js的基础语法使用以及css定位

3)js的基础语法使用以及css定位

 

 

 

也可以写成：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
    var a = '234';
    console.log(a);
</script>
</body>
</html>

 

3)js的基础语法使用以及css定位 

全局对象  window

 

也可以写成：

<body>
<script type="text/javascript">
    var a = '234';
    console.log(window.a);
</script>
</body>

 

函数方法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
function add(x,y) {
    return x+y;
};
console.log(add(1,24))
</script>
</body>
</html>

3)js的基础语法使用以及css定位 

也可以放到最上面：

<script type="text/javascript">
console.log(add(1,24))
function add(x,y) {
    return x+y;
};

</script>

 

函数对象：

<script type="text/javascript">
    var add = function (x,y) {
        console.log(x+y)
    }
    add(5,6)
</script>

 

 3)js的基础语法使用以及css定位

字符串拼接使用var：

 3)js的基础语法使用以及css定位

3)js的基础语法使用以及css定位


 3)js的基础语法使用以及css定位

3)js的基础语法使用以及css定位

数字转换字符串：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript">
var n1 = 123;
var str1 = String(n1);
console.log( typeof str1)
</script>
</body>
</html>

3)js的基础语法使用以及css定位 

基本数据类型：

 

number：

var a = 123;//typeof 检查当前变量是什么数据类型

console.log(typeof a)//特殊情况var a1 = 5/0;

console.log(typeof e1) //Infinity 无限大. number类型

 

string：

var str  = '123'

console.log(typeof str)

 

Boolean：布尔

var b1 = false;

console.log(typeof b1)

 

Null：

var c1 = null;//空对象. object

console.log(c1)

 

Undefined：

 

 

字符串的拼接：

var  firstName  = '晓';

var lastName = '峰峰';

var name = '伊拉克';

var am = '美军';// 字符串拼接

var str = "2003年3月20日,"+name+"战争爆发，以美军为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后，"+am+"又一次取得的大规模压倒性军事胜利。

"var fullStr = str;

console.log(fullStr)

var fullName = firstName +" "+ lastName;

console.log(fullName)

 

备注：

// 不能对字符串进行+运算 只能拼接var a1 = '1';var a2 = '2';

console.log(a1-a2) //12

var b1 = 'one';var b2  = 'two';

// NaN. ==== not a number 是number类型

console.log(typeof(b1*b2))

 

 

数据类型的转换：

隐式转换：

 

var n1 = 123;

var n2 = '123';

var n3 = n1+n2;// 隐式转换

console.log(typeof n3);

 

 

强制类型转换：

// 强制类型转换String(),toString()
var n1 = 123
var str1 = String(n1);
console.log(typeof str1);

var num = 234;
console.log(num.toString())

 

 

将字符串类型转换成数值类型：

var  stringNum = '789.123wadjhkd';
var num2 =  Number(stringNum);
console.log(num2)

// parseInt()可以解析一个字符串 并且返回一个整数
console.log(parseInt(stringNum))
console.log(parseFloat(stringNum));

 

 

任何数据类型都可以转换为boolean类型：

都是false

var b1 = '123';
var b2 = 0;
var b3 = -123

var b4 = Infinity;
var b5 = NaN;

var b6; //undefined
var b7 = null;

// 非0既真
console.log(Boolean(b5))
console.log(Boolean(b7))

 

If 、if-else、if-else使用：

var ji  = 20;
if(ji >= 20){
    console.log('恭喜你，吃鸡成功，大吉大利')
}

 

var ji  = 20;
if(ji!=20){
    console.log('恭喜你，吃鸡成功，大吉大利')
}else{
    console.log('很遗憾 下次继续努力')

}

 

 

逻辑与&& 、逻辑||

//1.模拟  如果总分 >400 并且数学成绩 >89分 被清华大学录入
//逻辑与&& 两个条件都成立的时候 才成立
var sum = 300;
var math = 100;
if(sum>400 && math>90){
    console.log('清华大学录入成功')
}else{
    alert('高考失利')
}

 

 

//1.模拟  如果总分 >400 并且数学成绩 >89分 被清华大学录入
//逻辑与&& 两个条件都成立的时候 才成立
var sum = 300;
var english = 100;
if(sum>500 || english>85){
    alert('被复旦大学录入')
}else{
    alert('高考又失利了')
}

 

 

Switch：遇到匹配的找到break马上停止

var gameScore = 'better';

switch(gameScore){

//case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break，那么直到该程序遇到下一个break停止
    case 'good':
    console.log('玩的很好')
    //break表示退出
    break;
    case  'better':
    console.log('玩的老牛逼了')
    break;
    case 'best':
    console.log('恭喜你 吃鸡成功')
    break;

    default:
    console.log('很遗憾')

}

 

 

while：循环：

var i = 1; //初始化循环变量

while(i<=9){ //判断循环条件    console.log(i);

    i = i+1; //更新循环条件

}

var i = 1; //初始化循环变量

while(i<=100){ //判断循环条件
    if (i%2==0)
    console.log(i);
    i = i+1; //更新循环条件
}

 

 

 

For循环：

for(var i = 1;i<=10;i++){

     console.log(i)

 }

 

 

for(var i = 1;i<=100;i++){

    if(i%2==0){

        //是偶数        console.log(i)

    }

}

 

1--100整数和

var sum = 0;for(var j = 1;j<=100;j++){

    sum = sum+j

}

console.log(sum)

 

 

双重for循环：

<script>
for(var i=1;i<=3;i++){

 　　for(var j=0;j<6;j++){
        document.write('*')
    }

   document.write('<br>')
 }
</script>

 

 

数组的赋值和添加颜色

var colors = ['red','color','yellow'];
var colors2 = new Array();
var arr = [];
//通过下标进行一一赋值
arr[0] = 123;
arr[1] = '哈哈哈';
arr[2] = '嘿嘿嘿'
    console.log(arr)

 3)js的基础语法使用以及css定位

数组的合并：

 

var north = ['北京','山东','天津'];
var south = ['东莞','深圳','上海'];
var newCity = north.concat(south);
console.log(newCity)

3)js的基础语法使用以及css定位 

 

Join（）将数组中的元素用指定字符串连接

var score = [98,78,76,100,0];
var str = score.join('|');
console.log(str);

3)js的基础语法使用以及css定位 

 

 将数组转换成字符串 toString()

var score = [98,78,76,100,0];
//toString() 直接转换为字符串  每个元素之间使用逗号隔开

var str = score.toString();
console.log(str);//98,78,76,100,0

 

 3)js的基础语法使用以及css定位

slice(start,end); 返回数组的一段，左闭右开

 

var arr = ['张三','李四','王文','赵六'];
var newArr  = arr.slice(1,3);
console.log(newArr);//["李四", "王文"]

 3)js的基础语法使用以及css定位

 

pop 移除数组的最后一个元素

var arr = ['张三','李四','王文','赵六'];
var newArr  = arr.pop();
console.log(newArr);//["张三", "李四"，"王文"]

 

 3)js的基础语法使用以及css定位

 push() 向数组最后添加一个元素

//var arr = ['张三','李四','王文','赵六'];
//var newArr  = arr.push('李晓峰');
//console.log(newArr);//["张三", "李四"，"王文"，"赵六"，"李晓峰"]

 

reverse() 翻转数组

var names = ['alex','xiaoma','tanhuang','angle'];
//4.反转数组
names.reverse();
console.log(names);

3)js的基础语法使用以及css定位 

sort对数组排序：

var names = ['alex','xiaoma','tanhuang','abngel'];
names.sort();
console.log(names);// ["alex", "angle", "tanhuang", "xiaoma"]

 3)js的基础语法使用以及css定位

chartAt() 返回指定索引的位置的字符

var str = 'alex';
var charset = str.charAt(2);
console.log(charset);//e

 

concat 返回字符串值，表示两个或多个字符串的拼接

var str1 = 'al';
var str2  = 'ex';
console.log(str1.concat(str2,str1));//alexal

 

 replace(a,b) 将字符串a替换成字符串b

var a = '1234567755';
var newStr = a.replace("4567","****");
console.log(newStr);//123****755

 

 indexof() 查找字符的下标，如果找到返回字符串的下标，找不到则返回-1 。跟seach()方法用法一样

var str = 'alexss33';
console.log(str.indexOf('e'));//2
console.log(str.indexOf('p'));//-1

 

 3)js的基础语法使用以及css定位

split('a',1) 以字符串a分割字符串，并返回新的数组。如果第二个参数没写，表示返回整个数组，如果定义了个数，则返回数组的最大长度

 

var  str =  '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.split('a'));//["我的天呢,", "是嘛,你在说什么呢?", "哈哈哈"]

3)js的基础语法使用以及css定位 

 

 substr(statr,end) 左闭右开：

var  str =  '我的天呢,a是嘛,你在说什么呢?a哈哈哈';
console.log(str.substr(0,6));//我的天呢,a

3)js的基础语法使用以及css定位 

toLowerCase()转小写：

var str = 'XIAOMAGE';
console.log(str.toLowerCase());//xiaomage

toUpperCase()转大写

var str = 'xiaomage';

console.log(str.toUpperCase());

 

 

函数：

function sum(a,b) {
    console.log(a+b)
}
sum(3,4)
sum("Hello","World");

3)js的基础语法使用以及css定位 

 

伪数组 arguments

fn(2,4);
fn(2,4,6);
fn(2,4,6,8);

function fn(a,b,c) {
    console.log(arguments);
    console.log(fn.length);         //获取形参的个数
    console.log(arguments.length);  //获取实参的个数

    console.log("----------------");
}


3)js的基础语法使用以及css定位 

清空数组的方式：

var array = [1,2,3,4,5,6];

 array.splice(0);      //方式1：删除数组中所有项目
 array.length = 0;     //方式1：length属性可以赋值，在其它语言中length是只读
 array = [];           //方式3：推荐

3)js的基础语法使用以及css定位 

 

 

一、JavaScript的组成

JavaScript基础分为三个部分：

ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。

DOM：文档对象模型，操作网页上的元素的API。比如让盒子移动、变色、轮播图等。

BOM：浏览器对象模型，操作浏览器部分功能的API。比如让浏览器自动滚动。

 

 

代码书写步骤如下：（重要）

（1）获取事件源：document.getElementById(“box”); //类似与ios语言的 UIButton *adBtn = [UIButton buttonWithType:UIButtonTypeCustom];

（2）绑定事件： 事件源box.事件onclick = function(){ 事件驱动程序 };

（3）书写事件驱动程序：关于DOM的操作

<body>

<div id="box1"></div>

 

<script type="text/javascript">

    // 1、获取事件源

    var div = document.getElementById("box1");

    // 2、绑定事件

    div.onclick = function () {

        // 3、书写事件驱动程序

        alert("我是弹出的内容");

    }</script>

 

</body>

 

 

绑定事件的方式

 

方式一：直接绑定匿名函数

<div id="box1" ></div>

 

<script type="text/javascript">

    var div1 = document.getElementById("box1");

    //绑定事件的第一种方式

    div1.onclick = function () {

        alert("我是弹出的内容");

    }</script>

 

方式二：先单独定义函数，再绑定

 <div id="box1" ></div>

 

<script type="text/javascript">

    var div1 = document.getElementById("box1");

    //绑定事件的第二种方式

    div1.onclick = fn;   //注意，这里是fn，不是fn()。fn()指的是返回值。

    //单独定义函数

    function fn() {

        alert("我是弹出的内容");

    }</script>

 

方式三：行内绑定

<!--行内绑定--><div id="box1" onclick="fn()"></div>

<script type="text/javascript">

 

    function fn() {

        alert("我是弹出的内容");

    }

</script>

 

 

3、事件驱动程序

我们在上面是拿alert举例，不仅如此，我们还可以操作标签的属性和样式。举例如下：

  <style>

        #box {

            width: 100px;

            height: 100px;

            background-color: pink;

            cursor: pointer;

        }

    </style></head>

<body>

<div id="box" ></div>

<script type="text/javascript">

    var oDiv = document.getElementById("box");

    //点击鼠标时，原本粉色的div变大了，背景变红了    oDiv.onclick = function () {

        oDiv.style.width = "200px";   //属性值要写引号        oDiv.style.height = "200px";

        oDiv.style.backgroundColor = "red";   //属性名是backgroundColor，不是background-Color    }</script>

 


推荐阅读：
  1. HTML相关的基础知识点有哪几个
  2. python基础梳理（一）（推荐）

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

基础 语法 使用

上一篇：p是什么f=ps中的什么

下一篇：有哪些判断php数组是几维的方法

相关阅读

您好，登录后才能下订单哦！

密码登录
登录注册
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
产品服务
地区划分
帮助支持
关于我们
行业资讯-文章归档 问答-问答归档
广州亿速云计算有限公司

7*24小时在线电话：400-100-2938

7*24小时在线QQ：800811969

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有
粤ICP备17096448号-1 粤公网安备 44010402001142号