08.css、JS-2018/07/18

  • 1.css的属性

    • 文字属性:font-size:大小,font-family字体类型,font-color:颜色
    • 文本颜色:color:颜色,test-decoration下划线(属性值:none/underline),text-align对齐方式(左中右)
    • 背景属性:
      • background-color背景颜色
      • background-image背景图片(属性值URL(“图片地址”))
      • background-repeat平铺方式
        • 属性值:repeat默认横向纵向平铺
        • no-repeat不平铺
        • repeat-y纵向
        • repeat-x横向
    • 列表属性:list-style-type列表前的小标志,list-style-image列表前的小图片(属性值url("图片地址"))
    • 尺寸属性:width宽度height高度
    • 显示属性:
      • display属性:

        • none隐藏,block块级显示,inline行级显示
    • 浮动属性:
      • float属性:left,right;clear:清除浮动(属性值:左右、both)
      • 缺点:(1)影响相邻的元素不能正常显示(2)影响父元素不能正常显示
  • 2.css的盒子模型
    • border:

      • border-width边框宽度
      • border-color边框颜色
      • border-style边框线型
      • border-top上边框
      • border-bottom下边框
      • border-left左边框
      • border-right右边框
    • padding:代表边框内壁与内部元素之间的距离(auto居中)
      • 10px代表上下左右间距
      • 1px 2px 3px 4px;上右下左
      • 1px 2px 上下/左右
      • 1px 2px 3px;上/左右/下
      • padding-top上边框
      • padding-bottom下边框
      • padding-left左边框
      • padding-right右边框
    • margin:代表边框外壁与其他元素之间的距离
      • 同padding
  • 3.javascript(js)
    • js是可以嵌入到HTML中,是基于对象和事件驱动的脚本语言
    • 特点:(1)交互性(2)安全性:不能访问本地磁盘(3)跨平台
    • js作用
      • 能动态修改(增删)HTML和CSS的代码
      • 能动态的校验数据
    • 被引入的方式
      • 内嵌脚本input type="button" value="button" onclick="alert('xxx')"/
      • 内部脚本:藏在head里边的
        • script type="text/javascript" //<> alert("xxx"); /script //<>
      • 外部脚本 :首先创建一个JS文件,其次在HTML中引入
        • script type="text/javascript" src="demo1.js" /script //<>
        • js代码放在哪都行,但是在不影响HTML功能的前提下,越晚加载越好。
  • 4.js基本语法

    • 变量:

      • (1) var x = 5; x='hello'; var y="hello";(''和""相同)
      • (2)x=5;
    • 原始数据类型(typeof)(1/2/3是伪对象,可以调用方法)
      • (1)number数字
      • (2)string字符串类型
      • (3)boolean布尔类型
      • (4)null空类型
      • (5)underfined未定义
    • 类型转换
      • number/boolean转成string,通过toString();
      • 数字字符串string转成number,通过parseInt(),parseFloat();“123xxx”-->123
      • 强制转换:Boolean()强转成布尔(空字符串为假),Number()强转成数字(布尔的true是1,false是0,只能强转数字字符串)。
    • 引用数据类型
      • var obj = new Object();
      • var num = new Number();
    • 运算符
      • (1)赋值运算符 var x = 5;
      • (2)算数运算符
        • - * / % +: 遇到字符串变成连接 -:先把字符串转成数字然后进行运算 *: 先把字符串转成数字然后进行运算 /: 先把字符串转成数字然后进行运算
      • (3)逻辑运算符 && ||
      • (4)比较运算符 < > >= <= != == ===:全等:类型与值都要相等
      • (5)三元运算符 3<2?"大于":"小于"
      • (6)void运算符(点击不跳转)
        • <a href="javascript:void(0);">xxxxxx</a>
      • (7)类型运算符
        • typeof:判断数据类型 返回我的数据类型
        • instanceof:判断数据类型 是否是某种类型
        • var obj = new Object();
          alert(typeof obj);//object
          alert(obj instanceof Object);//true
    • 逻辑语句

      • (1)if-else语句

        //条件:数字非0 字符串非空就为true  
        if(9){
          alert("true--");
        }else{
          alert("false--"); 
        }
      • (2)switch语句

        var x = "java";
        switch(x){
        case "css": alert("css"); break;
        case "js": alert("js"); break;
        case "java": alert("java"); break;
        default: alert("def");
        }
      • (3)for 语句

        for(var i = 0;i<5;i++){
        alert(i);
        }
      • (4)for迭代
        var arr = [1,3,5,7,"js"];
        for(index in arr){//index代表角标
        //alert(index);
        alert(arr[index]);
        }
  • 5.js内建对象
    • (1)Number

      • 创建方式:

        • var myNum=new Number(value);
        • var myNum=Number(value);(强转)
      • 属性和方法:
        • toString():转成字符串
        • valueOf():返回一个 Number 对象的基本数字值
    • (2)Boolean
      • 创建方式:

        • var bool = new Boolean(value);
        • var bool = Boolean(value);
      • 属性和方法:
        • toString():转成字符串
        • valueOf():返回一个 Boolean 对象的基本值(boolean)
    • (3)String
      • 创建方式:

        • var str = new String(s);
        • var str = String(s);
      • 属性和方法:
        • length:字符串的长度
        • charAt(index):根据索引,返回字符
        • charCodeAt(index):返回索引字符unicode
        • indexOf(‘char’):返回字符的索引
        • lastIndexOf(‘char’);逆向返回字符的索引
        • split(‘char’);将字符串按照特殊字符切割成数组
        • substr(index,num):从起始索引号提取字符串中指定数目的字符
        • substring(index1,index2):提取字符串中两个指定的索引号之间的字符,包头不包尾
        • toUpperCase();转大写
    • (4)Array
      • 创建方式:

        • var arr = new Array();//空数组
        • var arr = new Array(size);//创建一个指定长度的数据,超出长度还可以加
        • var arr = new Array(element0, element1, ..., elementn);//创建数组直接实例化元素
        • var arr = [];//空数组
        • var arr = [1,2,5,"java"];//创建数组直接实例化元素
      • 属性和方法:
        • length:数组长度
        • join():把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
        • pop():删除并返回最后元素
        • push():向数组的末尾添加一个或更多元素,并返回新的长度
        • reverse();反转数组
        • sort();排序
    • (5)Date
      • 创建方式:

        • var myDate = new Date();
        • var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值
      • 属性和方法
        • getFullYear():年
        • getMonth():月 0-11
        • getDate():日 1-31
        • getDay():星期 0-6
        • getTime():返回1970年1月1日午夜到指定日期(字符串)的毫秒数
        • toLocaleString();获得本地时间格式的字符串
    • (6)Math
      • 创建方式:

        • Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,
        • 不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。
      • 属性和方法
        • PI:圆周率
        • abs():绝对值
        • ceil():对数进行上舍入
        • floor():对数进行下舍入
        • pow(x,y):返回 x 的 y 次幂
        • random():0-1之间的随机数
        • round():四舍五入
    • (7)RegExp
      • 创建方式:

        • var reg = new RegExp(pattern);
        • var reg = /^正则规则$/;
      • 规则的写法:
        • [0-9]
        • [A-Z]
        • [a-z]
        • [A-z]
        • \d 代表数字
        • \D 非数字
        • \w 查找单词字符
        • \W 查找非单词字符
        • \s 查找空白字符
        • \S 查找非空白字符
        • n+ 出现至少一次
        • n* 出现0次或多次
        • n? 出现0次或1次
        • {5} 出现5
        • {2,8} 2到8次,包头包尾
      • 方法: test(str):检索字符串中指定的值。返回 true 或 false
      • 需求:
        • 校验邮箱:

          var email = "haohao_827@163.com";
          var reg = /^[A-z]+[A-z0-9_-]*\@[A-z0-9]+\.[A-z]+$/;
          reg.test(email);
  • 6.js的函数

    • js函数定义的方式

      • (1)普通方式

        • 语法:function 函数名(参数列表){函数体}
        • 示例: function method(){ alert("xxx"); } method();
        • (2)匿名函数
        • 语法:function(参数列表){函数体}
        • 示例: var method = function(){ alert("yyy"); }; method();
      • (3)对象函数
        • 语法:new Function(参数1,参数2,...,函数体);
        • 注意:参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式
        • 示例: 
          var fn = new Function("a","b","alert(a+b)");
          fn(2,5);
    • 函数的参数

      • (1)形参没有var去修饰
      • (2)形参和实参个数不一定相等(可以多不能少,少的形参为undefined)
      • (3)arguments对象,是个数组,会将传递的实参进行封装

        function fn(a,b,c){
        //var sum = a+b+c;
        //alert(sum);
        //arguments是个数组 会将传递的实参进行封装
        for(var i=0;i<arguments.length;i++){
        alert(arguments[i]);
        }
        }
        fn(1,2,4,8);
    • 返回值

      • (1)在定义函数的时候不必表明是否具有返回值
      • (2)返回值仅仅通过return关键字就可以了,return后的代码不执行 function fn(a,b){ return a+b; //alert("xxxx"); } alert(fn(2,3));
    • js的全局函数

      • (1)编码和解码

        • encodeURI() decodeURI() encodeURIComponet() decodeURIComponent() escape() unescape()
        • 三者区别: 进行编码的符号范围不同,实际开发中常使用第一种
      • (2)强制转换
        • Number()
        • String()
        • Boolean()
      • (3)转成数字
        • parseInt()
        • parseFloat()
      • (4)eval()方法
        • 将字符串当作脚本进行解析运行

          //var str = "var a=2;var b=3;alert(a+b)";
          //eval(str);
          function print(str){
          eval(str);
          }
          print("自定义逻辑");
  • 7.js的事件(事件、事件源、响应行为)

    • js的常用事件

      • onclick:点击事件
      • onchange:域内容被改变的事件
      • onfocus:获得焦点的事件
      • onblur:失去焦点的事件
      • onmouseover:鼠标悬浮的事件
      • onmouseout:鼠标离开的事件
      • onload:加载完毕的事件 等到页面加载完毕在执行onload事件所指向的函数
    • 事件的绑定方式

      • (1)将事件和响应行为都内嵌到html标签中<input type="button" value="button" onclick="alert('xxx')"/>
      • (2)将事件内嵌到html中而响应行为用函数进行封装 <input type="button" value="button" onclick="fn()"/>
      • (3)将事件和响应行为 与html标签完全分离 <input id="btn" type="button" value="button"/>

        var btn = document.getElementById("btn");
        btn.onclick = function(){ alert("zzz"); };
    • this关键字
      • this经过事件的函数进行传递的是html标签对象
    • 阻止事件的默认行为
      • IE:window.event.returnValue = false;
      • W3c: 传递过来的事件对象.preventDefault();
      • 通过事件返回false也可以阻止事件的默认行为
    • 阻止事件的传播
      • IE:window.event.cancelBubble = true;
      • W3c: 传递过来的事件对象.stopPropagation();
  • 8.js的bom

    • (1)window对象

      • 弹框的方法:

        • 提示框:alert("提示信息");
        • 确认框:confirm("确认信息"); 有返回值:如果点击确认返回true;如果点击取消 返回false
        • 输入框:prompt("提示信息"); 有返回值:如果点击确认返回输入框的文本;点击取消返回null
      • open方法: window.open("url地址");

      • 定时器:

        • setTimeout(函数,毫秒值); setTimeout( function(){ alert("xx"); },3000 );
        • clearTimeout(定时器的名称);
        • setInterval(函数,毫秒值);
        • clearInterval(定时器的名称)
    • (2)location:location.href="url地址";

    • (3)history:back();forward();go();

08css、JS的更多相关文章

  1. JQuery 加载 CSS、JS 文件

    JS 方式加载 CSS.JS 文件: //加载 css 文件 function includeCss(filename) { var head = document.getElementsByTagN ...

  2. Asp.net 后台添加CSS、JS、Meta标签

    Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中, Page参数也可以不要. 首先导入命名空间 using System.Web.UI.Htm ...

  3. django 关于html、css、js 目录位置

    项目目录: project/ ---------------init.py ---------------views.py ---------------settings.py ----------- ...

  4. JavaScript知识 一、JS的数据类型

    一.JS的数据类型 1.基本类型 JS共有5大基本类型,分别是: 1)Undefined.他只有一个值:undefined.如果一个变量被定义但是没有给他赋值,那么这个时候系统会默认给这个变量赋值为u ...

  5. nodejs处理图片、CSS、JS链接

    接触Nodejs不深,看到页面上每一个链接都要写一个handler,像在页面显示图片,或者调用外部CSS.JS文件,每个链接都要写一个handler,觉得太麻烦,是否可以写个程序出来,能够自动识别图片 ...

  6. HTML、CSS、JS在前端开发中都扮演怎样的角色

    前端开发,需要经常接触 HTML.DOM.CSS.JS等,那么HTML.CSS.JS在前端开发中究竟扮演怎样的角色呢?以下是个人的一些观点... HTML:超文本标记语言 (Hyper Text Ma ...

  7. C#、js、json Datetime格式总结

    在工作过程中遇到时间格式的数据在C#.js 和 json保存的不同结果,现在总结一下 JavaScript Parser: 1.数字型时间转字符串时间 如var data = "/Date( ...

  8. 处理ios webview 更新缓存本地css、js后webview缓存无法更新的问题

    项目中需要使用app本地css.js,并且可以根据服务下发自动更新本地css.js.测试发现只要更新后的css或者js和更新前路径一致,webview加载的还是更新前的css.js.怀疑是webvie ...

  9. Eclipse中jsp、js文件编辑时,卡死现象解决汇总

    使用Eclipse编辑jsp.js文件时,经常出现卡死现象,在网上百度了N次,经过N次优化调整后,卡死现象逐步好转,具体那个方法起到作用,不太好讲.将所有用过的方法罗列如下: 1.取消验证 windo ...

随机推荐

  1. Google's Hybrid Approach to Research

    文档地址:戳我 总结: (i) aims to generate scientific and engineering advances in fields of import to Google, ...

  2. what is Servlet Container[转载]

    1 在这个博客中,我将描述一下web服务器.Servlet容器的基本概念,以及Servlet容器和jvm之间的关系.我想要证明的是Servlet容器不过就是一个java程序. 2 什么是web服务器 ...

  3. Matlab7.1——启动时只显示Logo

    1. 现象 Matlab7.1在启动时只显示Matlab的Logo: 2. 解决方法 听我的吧,这个是官方办法,我也亲自试过了1结束matlab进程:2在C:\user\APPDATA\Roaming ...

  4. Resharper 实现接口的方式

  5. YTU 2509: 奇怪的分式

    2509: 奇怪的分式 时间限制: 1 Sec  内存限制: 128 MB 提交: 113  解决: 48 题目描述 上小学的时候,小明经常自己发明新算法.一次,老师出的题目是:   1/4 乘以 8 ...

  6. mysql中decimal的使用

    float,double,decimal区别 创建表test_float_double_decimal CREATE TABLE `test_float_double_decimal` ( `id` ...

  7. 开源框架 KJFrameForAndroid

    一个Android的快速开发工具包,使用它你可以轻松实现网络请求.插件化开发.图片加载等功能.KJFrameForAndroid的设计思想是通过封装Android原生SDK中复杂的复杂操作而达到简化A ...

  8. luogu 3951 小凯的疑惑

    noip2017 D1T1 小凯的疑惑 某zz选手没有看出这道结论题,同时写出了exgcd却不会用,只能打一个哈希表骗了30分 题目大意: 两个互质的正整数a和b,求一个最小的正整数使这个数无法表示为 ...

  9. Runtime ----- 带你上道

    在IOS开发和学习过程中,我们经常会接触到一个词: Runtime  .很多开发者对之既熟悉又陌生,基本都是浅尝辄止,达不到灵活使用的水平(话说开发中也确实不经常用..)本文和大家一起研究一下,Run ...

  10. AutoCAD VBA添加菜单

    # 给cad添加自定义菜单 Private Sub AddBar() Dim NewMenuItem As AcadPopupMenuItem Dim TheMacro As String Dim M ...