扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 后端开发 > Python >3)js的基础语法使用以及css定位
  • 543

0
分享到

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

语法基础js 2023-01-31 06:01:55 543人浏览 薄情痞子

Python 官方文档：入门教程 => 点击学习

摘要

CSS 定位：background-position: 20px 40px;  （1）相对定位：      如果仅仅对当前盒子设置相对定位，那么他与原来的盒子没有任何变化      只有一个作用：  父相子绝，不适用相对定位来做压盖现象  

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>

 图片1.png

2）绝对定位：

 图片2.png

 

大图居中现象：

 

 图片3.png

绝对定位盒子居中：

<!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>

 图片4.png

鼠标悬浮出来的购物车：

<!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>

图片5.png 

 

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>

 图片6.png

三种js的引入方式：

图片7.png

图片8.png

图片9.png

图片10.png

 

 

 

也可以写成：

<!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>

 

图片11.png 

全局对象  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>

图片12.png 

也可以放到最上面：

<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>

 

 图片13.png

字符串拼接使用var：

 图片14.png

图片15.png


 图片16.png

图片17.png

数字转换字符串：

<!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>

图片18.png 

基本数据类型：

 

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)

 图片19.png

数组的合并：

 

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

图片20.png 

 

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

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

图片21.png 

 

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

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

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

 

 图片22.png

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

 

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

 图片23.png

 

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

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

 

 图片24.png

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

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

 

reverse() 翻转数组

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

图片25.png 

sort对数组排序：

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

 图片26.png

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

 

 图片27.png

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

 

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

图片28.png 

 

 substr(statr,end) 左闭右开：

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

图片29.png 

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");

图片30.png 

 

伪数组 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("----------------");
}


图片31.png 

清空数组的方式：

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

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

图片32.png 

 

 

一、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>

 


您可能感兴趣的文档:

--结束END--

本文标题: 3)js的基础语法使用以及css定位

本文链接: https://lsjlt.com/news/189714.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 3)js的基础语法使用以及css定位
    Css 定位：background-position: 20px 40px;  （1）相对定位：      如果仅仅对当前盒子设置相对定位，那么他与原来的盒子没有任何变化      只有一个作用：  父相子绝，不适用相对定位来做压盖现象  ...
    99+
    2023-01-31
    语法 基础 js
  • CSS基础语法的使用
    本篇内容介绍了“CSS基础语法的使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！行内样式：就是直接在HT...
    99+
    2024-04-02
  • python基础之文件的备份以及定位
    目录小型文件备份备份大型文件总结小型文件备份 # 文件的备份 def copyFile(): # 接收用户输入的文件名 old_file=input('请输入要备...
    99+
    2024-04-02
  • CSS定位语法怎么使用
    本文小编为大家详细介绍“CSS定位语法怎么使用”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS定位语法怎么使用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。一、CSS定位：position◆语法：posit...
    99+
    2023-07-04
  • golang基础之waitgroup用法以及使用要点
    目录一、前言二、waitgroup使用示例三、waitgroup使用注意事项四、waitgroup使用总结附：陷阱避免总结一、前言 waitgroup在golang中，用于线程同步，...
    99+
    2023-01-07
    golang waitGroup golang waitgroup用法 golang waitGroup 限制个数
  • CSS基础知识及使用方法是什么
    这篇文章主要介绍“CSS基础知识及使用方法是什么”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“CSS基础知识及使用方法是什么”文章能帮助大家解决问题。 　　CSS...
    99+
    2024-04-02
  • Java基础之Bean的创建、定位和使用
    目录一、前言二、自动装配Bean2.1 注册Bean2.2 使用Bean三、手动装配3.1 Java类四、XML文件五、导入配置5.1 Java类六、导入到XML一、前言 Bean是...
    99+
    2024-04-02
  • react redux的原理以及基础使用讲解
    目录介绍为什么会使用 redux？什么时候该使用 redux？redux使用场景redux 作用工作流程使用1.下载2.创建仓库store骨架3.生成仓库4.参数函数的创建 redu...
    99+
    2022-11-13
    react redux原理 react redux使用 react redux
  • html5基础标签以及用法是怎样的
    html5基础标签以及用法是怎样的，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。1、  声明的变化<!DOCTYPE ht...
    99+
    2024-04-02
  • CSS的基础使用方法有哪些
    小编给大家分享一下CSS的基础使用方法有哪些，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！第一部分：CSS的基本使用（1）CSS...
    99+
    2024-04-02
  • 详解Mysql基础语法的使用
    MYSQL介绍 MySQL是一个关系型数据库管理系统，由瑞典MySQL AB 公司开发，目前属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一，在 WEB 应用方面，MySQL是最...
    99+
    2024-04-02
  • CSS中的position定位及用法学习指南
    了解什么是CSS中的position定位及其用法，需要具体代码示例CSS（层叠样式表）是一种用于描述网页样式和布局的标记语言。在网页开发中，经常会使用CSS来控制元素的位置和布局。其中，position属性是CSS中常用的定位属性之一。本文...
    99+
    2023-12-27
    position定位 CSS中的position position用法
  • 【Java基础篇】方法的使用（方法的使用以及形参实参的关系）
    作者简介： 辭七七，目前大一，正在学习C/C++，Java，Python等 作者主页： 七七的个人主页 文章收录专栏：Java.SE，本专栏主要讲解运算符，程序逻辑控制，方法的使用，数组的使用，类和对象，继承和多态，抽象类和接口等内容 ...
    99+
    2023-08-19
    java jvm 开发语言
  • css中id和class的定义格式以及使用方法
    本篇内容介绍了“css中id和class的定义格式以及使用方法”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成...
    99+
    2024-04-02
  • PHP基础用法及phpinfo();的使用案例
    这篇文章给大家分享的是有关PHP基础用法及phpinfo();的使用案例的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。在这个abc.php文件中写入如下代码。<php phpinfo();&nbs...
    99+
    2023-06-22
  • go语言基础 seek光标位置os包的使用
    语法： os.Open()-->*File,err ***** File.Seek(offset, whence)，设置光标的未知 offset,偏移量 whence，从...
    99+
    2022-06-07
    go语言基础 GO go语言
  • Python基础语法的使用有哪些
    这篇文章主要讲解了“Python基础语法的使用有哪些”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Python基础语法的使用有哪些”吧！数值数值包括整型和浮点型，分别对应整数和浮点数，后者精...
    99+
    2023-06-02
  • Selenium使用CSS定位的方法有哪些
    本篇内容介绍了“Selenium使用CSS定位的方法有哪些”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！大...
    99+
    2024-04-02
  • Docker Compose部署及基础使用的方法
    本篇内容主要讲解“Docker Compose部署及基础使用的方法”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Docker Compose部署及基础使用的方法...
    99+
    2024-04-02
  • 一文搞懂正则表达式基础语法以及如何应用
    目录一、正则表达式1、基本介绍2、正则表达式语法二、正则语法1、字符匹配符、选择匹配符2、限定符3、定位符4、分组三、常用类1、基本介绍2、分组、捕获、反向引用3、String 类中...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作