A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© zhoufan0628 中级黑马   /  2017-12-13 21:38  /  1454 人查看  /  2 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

周帆

今天学习了css和js的内容,然后自己预习下后面的js内容给,为后面的课程做好准备
下面依旧是贴上笔记,有不对的地方欢迎大家积极指正
div:
    块标签
    <div></div>
span:行内的块标签
    <span></span>
/////////////////
css:渲染
    层叠样式表
    作用:
        渲染页面
        提高工作效率
    格式:
        选择器{属性:值;属性:值}
    后缀名:
        .css独立的css(样式)文件
    和html元素的整合★
        方式一:内联样式表
            通过标签的style属性设置样式
        方式二:内部样式表
            在当前页面中使用的样式
        <style>
                div{
                    background-color: #f00;
                }
        </style>
        方式三:外部样式表:需要导入.css文件
            用link标签即可
            <link rel="stylesheet" href="css/1.css" type="text/css"/>
    选择器:★
        id选择器:
            要求:
                html标签必须有id属性且必须有值
                css中通过#引入,后面加上id的值
                    #id{.......}
        类选择器:
            要求:
                html标签必须有class属性且必须有值
                css中引入通过“.”引入 。后面加上class值  .cla{......}
        元素选择器:
            直接用标签名就可以  xxx{...}
        
    派生的选择器
        属性选择器:★
            要求:
                html标签必须有一个属性不论属性是什么且有值
                css中通过下面的方式使用
                    元素名[属性="属性值"]{........}
                    例如:
                        xxx[nihao="wohenhao"]{....}
        后代选择器:
            选择器 后代选择器{.....} 在满足第一个选择器的条件下 找第二个选择器 给后代满足条件的标签添加样式
            
    了解的选择器:
            锚伪类选择器:
            link:未访问的连接
            visited:已访问的连接
            hover:鼠标移动到连接上
            active:选定的连接
            定义该选择器属性顺序一定不能乱
            
    选择器使用小结:
        id选择器:一个元素(标签)
        class选择器:一类标签
        标签选择器:一种标签
        属性选择器:标签选择器的特殊用法
    使用的时候注意:
        若多个样式作用与一个元素的时候
            不同的样式会叠加
            相同的样式,就近原则
        若多个选择器作用于一个元素的时候
            越特殊优先级越高
                id>class>标签
////////////////////////////////////////
属性(了解)            
    字体:
    font-family:设置字体(隶书) 设置字体家族
    font-size:设置字体大小
    font-style:设置字体风格
    文本:
        color:文本颜色
    等等 具体可以去看老师的笔记
   
////////////////////////////////////////////
javascript 俗称js
            
组成部分:
    ECMAScript:js基础语法(规定 关键字 语句 函数等等)
    BOM:游览器对象模型
    DOM:文档对象模型
作用:
    修改html页面的内容
    修改html的样式
    完成表单的验证
注意:
    js页面上可以直接写,也可以单独去写.
    js的文件的后缀名 .js
js和html整合
    方式一:在页面上直接写
        将js代码放在<script></script>标签中
        一般放在head标签中
        
    方式二:独立的js文件
        通过script文件引入
        <script type="text/javascript" src="js文件的路径" ></script>
        
js中的变量声明:
    var 变量名 = 初始化值;
    var 变量名;
    变量名 = 初始化值;
    注意:
        var可以省略,建议不要省略
        每一句用分号结尾,最后一个可以不用分号,建议不要省略.
   
js的数据类型
    原始类型:(5种)
        Null
        String
        Number
        Boolean
        undefined 没有初始化
        注意:通过typeof运算符可以判断一个值或者变量是否属于原始类型
        如果是还可以判断出是哪种原始类型
        typeof 值/数据类型
        变量值为null  使用typeof运算符会返回object
    引用类型:
/////////////////////////////////////////////////////////////////////
js:事件驱动函数
    函数定义格式
        方式1:
            function 函数名(参数){
                方法体
            }
        注意:函数不用声明返回值类型
            参数不用加数据类型
            函数调用的时候
                函数名(参数);
js中的事件:
    常见的事件:
        单击:onclick
        表单提交:onsubmit;加在form表单上的 方法的返回值为boolean值
        双击:ondblick
        页面加载事件:onload
js事件和函数的绑定
    方式一:
        通过标签的事件属性 <xxxx></xxxx>
        
js获取元素:
    方式一:
        var object = document.getElementById("id值");
        
获取标签的value值
    object.value;
获取标签的文本内容:
    object.innerHTML
///////////////////////////////////////////////////////////////////////
bom中有个window对象的定时器对象
定时器:
    setInterVal(code,毫秒数);每隔指定的毫秒数执行一次函数 在传入方法名字时  如果是方法名()这种形式 请一定记得加括号 否则就直接写方法名 个人建议用第一种
    setTimeout(code,毫秒数);延迟指定的毫秒数之后,只执行一次
   
    clearInterVal(id):清除定时
    clearTimeout(id):清除定时
///////////////////////////////////////////////////////////////////////
补充:
    运算符:
        和java几乎差不多
        比较运算符 >, >= ,< ,<=
        若两边都是数字,和java一样
        如果一遍为数字 另一边为字符串形式的数字 如 3>"2" 会将字符串转成数字
        两边都是字符串: 比较ascii
        如果一遍为数字,另一边为不是数字的字符串 会返回false
    灯性运算符 ==   ===
    ==:只判断值是否相同 例:3=="3"  true
    ===:不仅判断是否相同,而且还要判断类型是否一样 例:3=="3"  false
   
语句:
     if for while 语句和java一样
     switch 和java一样(区别 switch后面跟字符串 还可以跟常量)
///////////////////////////////////////////////////////////////////////
总结:
    1.css和html整合
        3种
        第一种:标签上面加style属性
        第二种:在head标签中加入<style></style>标签 在标签中写css代码
        第三种:在外部建一个css文件,在要引入的html页面中的head标签中添加
        <link rel="stylesheet" href="css文件的路径" type="text/css" />即可
    2.css中的选择器
        id class 标签
        属性 后代
        
    3.js
        js和html整合
            两种方法
        第一种:在head标签中加入<script></script>标签,然后在标签中写入js代码即可
        第二种:在外部建立一个js的文件 文件中写入js代码 然后在要引入的html页面中
        的head标签中添加<script type="text/javascript src="js文件路径名称"></script>
    4.变量定义
         第一种:var 变量名 = 变量值;
         第二种:var 变量名;
         变量名 = 变量值;
    5.方法定义
        两种格式:
            第一种:function 方法名(参数){.....}
            第二种:var 方法名 = function(参数){.....}
    6.事件
        onclick onload onsubmit
    7.事件和函数的绑定方式
        2种
        第一种:
            在标签上添加事件 如:<input type="button">
        第二种:
            在script标签中直接给得到的元素添加事件
                document.getElementById("xx").事件名 = 方法名(参数)
   
    8定时器 2种
        setInterVal(方法名,毫秒值): 在指定毫秒后执行一次该方法 循环执行
        setTimeout(方法名,毫秒值):在指定毫秒后执行一次该方法,就不在执行了
    9 for while if
        和java一样
总结完毕!!!!!!!!!!!!!!!!!!!!!

2 个回复

倒序浏览
棒棒哒
回复 使用道具 举报
不错不错   加油   学习使你快乐
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马