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 :175 sayHello: 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"); });
