CSS常见用法以及JS基础语法

CSS简介

首先我们要明白css对网页的页面效果就类似于化妆的效果,使得页面更好看

我们需要明白的就是CSS怎么使用即可

首先CSS的基本语法是<style></style>标签来修改

基本语法规范是选择器+n条选择规范

例如
<style>p{color : red;}
</style>
这里就是将全部的p标签设置为红色

注:CSS页面标签可以放到任意位置,但是建议是放到header里面

CSS使用形式

css一共有三种嵌入形式

1.在header中写,称为内部样式

<style> h1 {...} </style>

只对某个标签生效只能实现简单样式

2.在一行行内写,称为行内样式

<div style="color:green">绿⾊</div>

注:会有大量冗余,只适合讲解使用

3.在外面写,再在这个html文件中引入,也称外部样式

<link rel="stylesheet" href="[CSS⽂件路径]">

企业常见开发形式,耦合度低

css选择器

顾名思义就是选择哪一小块来进行修改,这里就是一个选择的过程,CSS共有5种选择器

1.标签选择器

和上面一样,比如说对p标签进行选择

2.类选择器

给标签加上class属性,然后通过标记的class属性进行选中

选中的符号就使用.即可
<div class="font32">我是⼀个div, class为font32</div>//css中的内容,将字体大小设置为32px
.font32 {font-size: 32px;
}
3.id选择器(和上述方式类似)
#submit {color: red;
}
4.复合选择器
ul li a {color: blue;
}
这里则是负责选择ul下的li下的a标签的选择

5.通配符选择器
* {color: red;
}
这里就是将页面所有文件都变为红色

常用的CSS属性

1.color 颜色设置

2.font-Size 设置字体大小

3.border 边框是一个复合属性可以设置

颜色类型宽细这三个设置没有先后顺序

4.width/height 见文知意,这里是来设置块级元素的宽高,也就是独占一行的块级元素,div等等

5.padding & margin

这里分为外边界和内边界

这是一个相对的概念,假设相对我家俩说,隔壁和我家的距离是外边距

相对我家来说,冰箱与墙壁的边界是内边界

外边界称为padding

内边界称为margin

修改的时候可以一起修改也可以分上下左右来修改

四个参数是按照逆时针摆放的

JS(JavaScript)简介

1.变量的定义

JS是一个弱类型的语言
var a = 12;
a = "你好";
JS这里的基本数据类型其实可以和引用数据类型相互转换,是没有这些区分的

2.打印
console.log(a)
3.数据类型

number string boolean undefined(变量没有初始化)

4.运算符

和其他语言类似,不同的点有

4/5=0.8

==和===

== 判断的时候会进行类型转换

=== 判断的时候不会进行类型转换

5.数组

注:这里的数组元素可以是任何类型的,可以第一个是数字,第二个是字符串类型的
var a = new Array();
增删改查

增加直接加就行

删 a.split(2,1) 从第二个元素开始删除一个元素

改 a[1] = "你好";

查 console.log(a[1]);

6.函数
function add(a,b){console.log(x+y);
}
7.对象

这里的对象是不用先创建类的
var student = {name : "cxk",height :175sayHello: function(){console.log("hello");}
获取对象属性可以通过点的方式也可以通过索引的方式,类似于map的形式

JQuery

下面介绍一个简单的前端框架,原生的JS往往显得冗余,非常的不好用,所以我们选择引入框架的形式来加快开发效率

事件主要由三部分组成

1.事件源:哪个元素触发的

2.:事件类型:点击,选择还是修改

3.事件处理程序:往往是一个回调函数
//例如某点击事件
$("p").click(function(){//代码
});
JQuery的语法就是

$(选择器).action();

中间的选择器是用来查找或者选取HTML元素的

JQuery的代码通常写在ready函数中

选择器

语法

$("*") 选取所有元素

$(this) 选取当前 HTML 元素

$("p") 所有 <p> 元素

$("p:first") 选取第⼀个 <p> 元素

$("p:last") 最后⼀个 <p> 元素

$(".box") 所有 class="box" 的元素

$("#box") id="box" 的元素

$(".intro .demo") 所有 class="intro" 且 class="demo" 的元素

$("p.intro") 选取 class 为 intro 的 <p> 元素

$("ul li:first") 选取第⼀个 <ul> 元素的第⼀个 <li> 元素

$(":input") 所有 <input> 元素

$(":text") 所有 type="text" 的 <input> 元素

$(":checkbox") 所有 type="checkbox" 的 <input> 元素

常见JQuery方法
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="a"><span>你好</span></div><button id="test" >测试按钮</button><script src="D:\桌面\jquery-3.7.1.slim.min.js"></script><script>var a = $("#a").text();console.log(a);var b = $("#a").html();console.log(b);</script>
</body>
</html>
设置和获取值的方式是一样的,不一样的就是括号中有内容

input框的取值和复制使用val()函数而不是text();

attr方法用于设置和获取属性值

只给key就是取值,key和value都有就是复制
//点击按钮变大<button id="test" >变大变大变大</button><img src="D:\桌面\picture -- csdn\5.jpg" alt="" width="200px"><script src="D:\桌面\jquery-3.7.1.slim.min.js"></script><script>$("#test").click(function() {$("img").attr("width","555px");});