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

    CSS简介

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

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

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

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

    例如

    1. <style>
    2.     p{
    3.         color : red;
    4.     }
    5. style>

    这里就是将全部的p标签设置为红色

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

    CSS使用形式

    css一共有三种嵌入形式

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

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

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

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

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

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

    css选择器

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

    1.标签选择器 

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

    2.类选择器

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

    选中的符号就使用.即可

    1. <div class="font32">我是⼀个div, class为font32div>
    2.  
    3. //css中的内容,将字体大小设置为32px
    4. .font32 {
    5.  font-size: 32px;
    6. }

    3.id选择器(和上述方式类似)

    1. #submit {
    2.  color: red;
    3. }

    4.复合选择器

    1. ul li a {
    2.  color: blue;
    3. }

    这里则是负责选择ul下的li下的a标签的选择

    5.通配符选择器

    1. * {
    2.  color: red;
    3. }

    这里就是将页面所有文件都变为红色

    常用的CSS属性

    1.color  颜色设置

    2.font-Size 设置字体大小

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

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

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

    5.padding & margin

    这里分为外边界和内边界

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

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

    外边界称为padding

    内边界称为margin

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

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

    JS(JavaScript)简介

    1.变量的定义

    JS是一个弱类型的语言

    1. var a = 12;
    2. 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.函数

    1. function add(a,b){
    2.     console.log(x+y);
    3. }

    7.对象

    这里的对象是不用先创建类的

    1. var student = {
    2.     name : "cxk",
    3.     height :175
    4.     sayHello: function(){
    5.             console.log("hello");
    6.     }

    获取对象属性可以通过点的方式也可以通过索引的方式,类似于map的形式

    JQuery 

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

    事件主要由三部分组成 

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

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

    3.事件处理程序:往往是一个回调函数

    1. //例如某点击事件
    2. $("p").click(function(){
    3.         //代码
    4. });

    JQuery的语法就是

    $(选择器).action();

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

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

    选择器

    语法
    $("*")     选取所有元素
    $(this)   选取当前 HTML 元素
    $("p")    所有

    元素

    $("p:first")  选取第⼀个

    元素

    $("p:last")  最后⼀个

    元素

    $(".box")  所有 class="box" 的元素
    $("#box")    id="box" 的元素
    $(".intro .demo")   所有 class="intro" 且 class="demo" 的元素
    $("p.intro")   选取 class 为 intro 的

    元素

    $("ul li:first")   选取第⼀个
      元素的第⼀个
    • 元素
    $(":input")   所有 元素
    $(":text")   所有 type="text" 的 元素
    $(":checkbox")      所有 type="checkbox" 的 元素

    常见JQuery方法

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Documenttitle>
    7. head>
    8. <body>
    9.     <div id="a"><span>你好span>div>
    10.     <button id="test" >测试按钮button>
    11.     <script src="D:\桌面\jquery-3.7.1.slim.min.js">script>
    12.     <script>
    13.         var a = $("#a").text();
    14.         console.log(a);
    15.  
    16.         var b = $("#a").html();
    17.         console.log(b);
    18.  
    19.     script>
    20. body>
    21. html>

    设置和获取值的方式是一样的,不一样的就是括号中有内容

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

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

    只给key就是取值,key和value都有就是复制

    1. //点击按钮变大
    2.  <button id="test" >变大变大变大button>
    3.     <img src="D:\桌面\picture -- csdn\5.jpg" alt="" width="200px">
    4.     <script src="D:\桌面\jquery-3.7.1.slim.min.js">script>
    5.     <script>
    6.         $("#test").click(function() {
    7.             $("img").attr("width","555px");
    8.         });

  • 相关阅读:
    表白墙/留言墙 —— 中级SpringBoot项目，MyBatis技术栈MySQL数据库开发，练手项目前后端开发(带完整源码) 全方位全步骤手把手教学
    【C语言实现简单的数据结构】栈和队列
    逆向案例二：关键字密文解密，自定义的加密解密。基于企名片科技的爬取。
    vue3+vite在线预览pdf
    再谈回声消除测评丨Dev for Dev 专栏
    智慧环保：科技驱动下的环境保护新篇章
    Centos系统使用rsyn实现双主机目录实时同步
    Java中JDK到底指什么呢?
    Linux15 --- 信号量
    使用python编程数学建模-数据模块理论数据相似性常用基础指标(课程3)
  • 原文地址：https://blog.csdn.net/qiuqiushuibx/article/details/136505812