• CSS和Js笔记



    什么是css,为什么使用css。
    CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表单」。
    是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

    html只能做基本的页面显示,而我们想要让页面美化,必须通过css对页面进行修饰。

    示例:在页面上显示一句话.
    传智播客.

    怎样使用css
    1.html与css的结合.
    1.所有的html标签都具有一个style属性.这个属性就是用来定义css
    <span style="font-size:10cm">传智播客</span>
    这种方式只能对某一个标签进行修饰.
    2.使用<style>标签来声明我们的css
    一般是在header中通过<style>标签来声明.

    <style type="text/css">
    span,div{
    font-size:2cm;
    }
    </style>
    针对于当前页面上的所有元素.
    3.可以单独定义一个样式表(就是一个.css文件)
    在我们的页面上如果想要使用,可以直接导入这个css文件.

    <link href="css/3.css" type="text/css" rel="stylesheet">
    ------------------------------------------------------------------
    2.css的选择器.(重点)
    用来确定当前的css对哪些标签进行修饰.
    最基本的选择器有三种.
    1.ID选择器 使用# id值应该唯一.
    2.class选择器
    3.标签选择器


    标签选择器--- 针对于我们的html标签,它可以对相同名称的标签进行统一操作.

    id选择器----对标签的id的值匹配的元素进行操作,一般是个性化操作.

    class选择器---它是与class属性值匹配。

    关于样式表书写.
    属性名称:值;
    如果属性有多个值,值与值之间使用空格分开.

    如果是最后一个值,分号可以省略.

    -----------------------------------------------------------
    css过滤选择器
    关联选择器
    具有层级关系的。
    E1 E2 代表E1下的所有的E2
    子对象选择器
    E1 > E2 代表的是E1下的子E2
    组合选择器
    具有相同属性的标签,可以用,分割开使用。
    伪元素选择器
    a:link 超链接未点击状态。
    a:visited 被访问后的状态。
    a:hover 光标移到超链接上的状态(未点击)。
    a:active 点击超链接时的状态。

    属性选择器:
    E[属性名=属性值]

    例如:java是一门_____语言.
    ----------------------------------------------------------------------------
    javascript介绍
    正式名称叫 ECMASCRIPT.

    JavaScript 被设计用来向 HTML 页面添加交互行为
    无需编译,可由浏览器直接解释运行-----javascript是一门解释型语言。
    JavaScript 是一种弱类型语言
    类型不固定,可以任意改变。并且,没有像java中的声明类型的关键字 int String等。
    在js中声明类型使用var.

    js是一门基于对象的语言。

    js的三个组成部分
    1.基础------ECMASCRIPT核心
    2.BOM browser object model
    3.DOM document object model

    ---------------------------------------------------------------------------
    javascript
    在html页面中怎样书写js代码.
    第一种方式不常用
    可以直接在标签上书写我们的js。
    <input type="button" onclick="javascript:alert('hello')">
    第二种(在学习中常用)
    在页面上通过<script>标签导入
    它可以存在于页面上的任意位置
    常用的是在<head>标签中声明

    <script type="text/javascript"> type属性标识的就是我们的<script>中是javascript语言.

    早期有一个属性 language="javascript" 这个现在不使用了.


    脚本语言----在html中嵌入的其它的语言。 js

    第三种方式(在开发中常用)
    导入的方式.
    <script type="text/javascript" src="1.js"></script>
    注意:javascript文件后缀名必须是js
    如果采用导入的方式 src=“js文件的路径”

    那么在<script>标签中不能在写js代码

    1.javascript数据类型.
    js的数据类型
    1.js中的数据类型分为两种
    1.原始类型 (基本)
    2.引用类型

    js中声明一个变量使用var。

    关于js中的原始类型.
    分为5种 : number 、string 、boolean 、null、undefined

    1.number----数字
    2.string ---字符串 使用引号引起 单引号与双引号一样,都代表字符串.
    3.boolean---逻辑类型 true false
    4.null------代表的是空 一般用于引用类型赋默认值
    5.undefined ---未定义 我们在使用变量时,这个变量没有声明就使用了。

    2.可以通过typeof查看数据的类型

    3.通过instanceof可判断变量的数据类型.
    instanceof是用来判断引用类型.

    var a=new Number(10);
    alert(a instanceof Number); true

    而这种方式
    var i=10;
    alert(i instanceof Number); false

    2.关于js中的书写规范

    在书写js时,可以不写";",
    那么js会以换行做为一个语句的结束。

    为了避免一些问题.我们会对每个语句结束加上分号,进行强制语句结束.

    3.关于firefox中的debug使用.

    firebug它的主要作用有三个
    1.对页面上的元素进行调试
    2.可以进行抓包操作(后面会使用)
    3.可以调试我们js代码
    -----------------------------------------------------------------------------------
    关于js中的运算符表达式. 流程控制语句.

    1.关于运算符.
    1.算术运算符
    + - * / % ++ -- 这些操作与java一样.

    对于js来说,如果两个字符串做 - 或 * /操作,也会将值做为Number进行操作.

    2.比较运算符
    > >= < <= == !=

    == 只比较值
    === 会比较类型与值.

    3.逻辑运算符
    && || !
    也存在短路.
    4.三元运算符.
    true?值1:值2;---->值1
    false?值1:值2;---->值2

    2.流程控制语句
    if if..else if elseif..
    while()
    for()

    关于js中的条件表达式结果问题?
    if(true){}

    关于if中条件可以写的值总结.
    1.true/false
    2.0 1 0代表false 1代表的true。
    3.关于是否存在 如果存在 返回true ,如果不存在,返回false。


    ----------------------------------------------------------------------------------
    关于js中的对象
    1.String对象 代表字符串.
    //属性:求字符串长度

    //方法:
    1.charAt 根据索引得到对应位置上的字符
    2.concat 链接字符串,相当于+
    3.indexof 得到指定的字符第一次出现的位置
    4.match ------
    5.replace----
    6.seach-------
    7.split----分隔字符按照指定的方式分隔为字符串数组
    8.substr 从指定位置开始,截取指定的字符个数
    9.substring 从指定位置开始,到指定位置结束。不包含结束.

    2.Array js中的数组对象.
    js中怎样创建数组.
    js中的数组它相当于java集合.

    js中创建数组的方式.
    1.new Array();
    2.new Array(10);
    3.new Array("abc","def","kkk")
    4.[]

    关于数组的方法.
    reverse 得到一个新的数组,它是原来数组的倒序.
    sort 对数组进行排序
    join 链接数组中的元素.
    concat 合并数组
    shift()----pop()
    unshift()--push()

    3.Math 关于数学运算

    1.ceil 得到比这个数大的最小整数
    2.floor得到比这个数小的最大整数.
    3.random 得到0-1之间的一个随机数 不包1。
    3.round 四舍五入
    4.pow(m,n) 求m的n次方
    5.sqrt(m) m开平方
    6.max min

    ------------------------------------------------------------------
    4.Date
    js中的时间日期对象.

    Date
    1.new Date() 获取当前时间
    2.getFullYear() 获取年份
    3.getMonth() 获取月份 注意 1月份结果为0
    4.getHours() 小时
    5.getDate() 日期
    6.getMinutes() 分钟
    7.getSeconds() 获取秒
    8.getTime() 获取毫秒值.

    9.toLocalString() 获取本地的时间格式字符串.

    ----------------------------------------------------------------------------
    5.正则
    RegExp
    1.关于在js中的正的写法.

    1.new RegExp("正则表达式"); ---这种方式在开发中不常用.

    2.直接使用 //将正则表达式进行描述.----在开发中使用比较多
    例如: var reg=/d*/

    2.关于正则的应用

    1.正则中提供的方法
    1.exec(开发中不常使用) 检索字符串中指定的值。返回找到的值,并确定其位置。
    返回的是匹配的信息,如果不匹配返回的是null.

    2.test(开发使用) 检索字符串中指定的值。返回 true 或 false。

    2.在String提供多个方法可以直接使用正则.

    1.search 检索与正则表达式相匹配的值。

    2.match 找到一个或多个正则表达式的匹配。
    这个方法与正则中的exec功能一样.

    3.replace 替换与正则表达式匹配的子串。
    -----------------------------------------------
    在开发中什么时候使用正则:做数据的校验.

    -------------------------------------------------------------------------------
    javascript中的函数
    函数是什么?为什么使用函数?
    函数与方法一样,是完成特定功能代码块。

    函数可以提高程序的复用性。可能在特定情况下调用函数完成功能,而不是页面加载就执行.

    js中定义函数的方式:
    1.function 函数名(){}
    2.var 函数名=function(){}
    3.var 函数名=new Function();

    //第一种
    function show1(){
    alert("show 1");
    };

    //show1(); //调用函数

    //第二种
    var show2=function(){

    alert("show 2");
    };
    //show2();

    //第三种

    var show3=new Function("alert('show 3')");

    show3();
    ----------------------------------------------------------------
    关于js中的函数的返回值与参数问题.

    1.参数问题
    1.参数定义时,直接写变量,没有类型.
    2.参数在传递时可能不匹配个数.

    2.关于返回值问题.
    在js中如果方法执行后想要有返回值,不需要声明返回类型,直接在函数中return就可以.

    ------------------------------------------------------------------------------------------------------
    js中的全局函数.
    1.关于编码函数.

    一般在开发中我们经常对url进行编码与解码操作.

    http://www.baidu.com?name=张三

    url:http://www.baidu.com
    参数:?name=张三

    encodeURI / decodeURI 编解码URI ---对url进行操作
    进行url跳转时可以整体使用encodeURI
    encodeURI不编码字符有82个:!,#,$,&,',(,),*,+,,,-,.,/,:,;,=,?,@,_,~,0-9,a-z,A-Z


    encodeURIComponent / decodeURIComponent 编解码URI组件 ----对参数进行操作
    传递参数时需要使用encodeURIComponent

    encodeURIComponent不编码字符有71个:!, ',(,),*,-,.,_,~,0-9,a-z,A-Z



    escape / unescape 对字符串进行unicode编码---这个在开发不常用使用.
    escape不编码字符有69个:*,+,-,.,/,@,_,0-9,a-z,A-Z


    2.关于类型转换函数.
    parseInt parseFloat

    3.关于判断是否是数字函数.
    判断是否是数字 isNaN 如果是数字返回false,不是返回true。

    4.eval()函数.
    它直接将字符串解析成js代码.
    -----------------------
    java中的字符串转换码

    String s="中国"; //utf-8----编码

    byte[] b=s.getBytes("utf-8");

    进行传递时,将其以utf-8进行解码.

    new String(b,"utf-8");

    ----------------------------------------------------------------------------------------------------------

  • 相关阅读:
    程序员学习参考网站
    博客
    window对象
    事件触发顺序
    element对象
    正则表达式
    Date对象
    Number对象
    Math对象
    Binary Tree Maximum Path Sum
  • 原文地址:https://www.cnblogs.com/spadd/p/4192574.html
Copyright © 2020-2023  润新知