`
yumo12
  • 浏览: 18525 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

JS一起学01:css复习、js基础知识、事件、参数、函数、网页换肤、if判断、className问题、浏览器执行顺序

    博客分类:
  • js
阅读更多
一、html/css
1. 什么是盒子模型?
    padding+border+width/height
2. float 浮动
(1)浮动的特性
        脱离文档流
        行内变成块   
        能设置宽高
        同级元素有浮动,必须全部都浮动
        宽度默认变窄,窄到内容的宽度
        浮动后到一行
        文本环绕
(2)清除浮动?
          clear:both;
clearfix
clear:after{display:block; content:''; clear:both;}
clear{zoom:1;}
overflow:hidden;
3. position 定位
(1)相对定位——relative
不脱离文档流、相对自身定位、行内不变块
(2)绝对定位——absolute
行内可以变成块、脱离文档流、相对于有定位的父级,如果没有找body、宽度默认变窄,窄到内容的宽度
(3)固定定位——absolute      
            脱离文档流、相对于可视区定位、不兼容ie6、行内元素变块、宽度默认变窄,窄到内容的宽度
二、基础知识
1. JS是做什么的?  ------写效果 做交互 操作样式
2. alert(456) 带确定按钮的弹出框 -------主要用于调试程序
3. 遇到程序不对,第一件事---->F12 ---- chromeF12->右下角,如果有红点:有错
4. 引号:
    (1) 数字 0-9 不用加引号
    (2) 字母+中文 字符串 需要加引号 (变量除外)
    (3) 对于JS来说:单引或双引都可以
            外面用双引,里面用单引
            外面用单引,里面用双引
5. JS所有普通事件都是小写 onclick
    onclick/onmouseover/onmouseout
6. 等号
   = 赋值         == 等于
   a=4; 是将4这个值赋值给a
7. 所有标签都可以给事件 ,都可以加ID,都可以被操作 
    所有样式都可以操作
8. 遇到复合样式将横杠去掉,后面首字母大写
    font-size -> fontSize               padding-right ->paddingRight
9. 函数:可重复调用的代码块
    无论在什么情况什么地方 函数名() 就是调用函数
10. 在JS里.长得像的都可以合并
11. 变量——存储数据的容器
    (1)一定要 var开头,第二次不用加var,可以直接用,如果第二次赋值,会将上一个值覆盖
    (2)对大小写敏感 a A 不是一个变量
    (3)以字母和下划线开头
    (4)变量(看不到值)不需要加引号,字符串 字面量 需要带引号
var 变量名=变量值;
var 变量名='abc';
var 变量名=12;
var 变量名=document.getElementById('');
var a=b=c=4; 只有a有var
var a=4,b=5; 都有var 
    (5)局部变量只能在定义它的函数里使用
    (6)全局变量: JS自动放到前面 不知道具体是什么值,先给一个undefined
定义函数可以放到调用函数后面,JS会自动将所有的函数放到最前面定义 -->全局函数
    (7)变量没有预解析.
12. class 易于维护,用style或class都可以 ------原则:不能混用
13. xxx.style.xx 赋值在行间 读的时候也读的行间,行间层级最高
三、事件:用户操作
***兼容性:document.getElementById(' ') ---低版本火狐不兼容
***元素属性操作:obj.style(……)
、编写js的流程
 1.布局:HTML+CSS
 2.属性:确定要修改哪些属性
 3.事件:确定用户用哪些操作
 4.js编写:在实践中,用js来修改页面元素的样式
五、参数
(1)参数:声明时,在括号里多了一点东西。参数名是自定义的,相当于建了一个局部变量 var n=……
(2)function 函数名(参数){语句}
          函数名(参数值)
(3)调用的时候给的参数值
(4)当值可以变动的时候
(5)参数可以有多个值
function 函数名(参数1,参数2,…){语句}
函数名(参数1,参数2,…);
、函数
 1.函数定义:function 函数名(){ 代码; }
 2.函数调用:函数名();
只声明,啥都不做;只调用,会报错。函数在哪儿定义不重要,重要的是在哪儿调用。
 
    例一:
    var a=15;--------------------15
    function show(){-------------不执行
        alert(a);
    }
    var a=5;---------------------5
    show();----------------------调用,此时a=5
 
例二    
    var n=4;
    var n2=55;
    var a1=function(){   //定义函数
    //alert(abc);   //没有提过一个变量叫abc,所以报错 
    }    
    function a(b1,b2,b3){
        alert(b3);    //传几个都可以,可以不用   
    } 
    a(n,5,'abc');
    var a1=function(){
        alert(123);
    }
    alert(a1);
    function a(f){
        //相当于 f=a1    把a1传进去,用f接收,相当于给a1又取了一个名字叫f
        f();
    }
    a(a1);
4. 传参变颜色
    function setColor(c){
        var oBox=document.getElementById('box');
        oBox.style.background=c;
    }
    <input type="button" value="变红"   onclick="setColor('red')">
5. 恢复样式
    function fn(a,b){
        var oBox=document.getElementById('box');
        if(a=='tt'){
            oBox.style.width='400px';
            oBox.style.height='400px';
            oBox.style.background='red';
            oBox.style.display='block';
        }else{
            oBox.style[a]=b;
        }
    }
    <input type="button" value="变宽" onclick="fn('width','600px')" />
    <input type="button" value="恢复" onclick="fn('tt')" />
七、网页换肤
 1.任何标签都可以加ID,包括link、html
 2.任何标签的任何属性都可以修改
 3.html里怎么写,js里就怎么写(className和复合样式例外)
兼容性问题:objtxt.title='……' 火狐不支持
八、if判断
 1.例子:
#box{display:none;}
if(oBox.style.display=='none'){  
    oBox.style.display='block';   //读取行间样式,第一次点的时候没有行间样式所以为空,第一次判断不成立,所以要点击两次。所以应该把第一次要做得事情放在else里。
}else{
    oBox.style.display='none';
}
2. else部分可以省略
九、扩展
 1.为a链接加js
        <a href="javascript:;"></a>
 2.className问题
      原本自带的属性可以直接操作 。只有一个例外class,是Js的关键字(保留字),所以在js中要写成className
十、浏览器执行顺序
加载----->  解析 -----> 执行
分享到:
评论

相关推荐

    js 5种颜色网页换肤测试程序

    在这个“js 5种颜色网页换肤测试程序”中,我们将会探讨如何利用JavaScript实现网页皮肤的动态切换,让用户体验不同的视觉效果。 首先,让我们了解换肤的基本原理。网页换肤通常是通过更改CSS样式或替换背景图像来...

    js+css网站换肤

    ### JavaScript + CSS 实现网站换肤功能详解 随着互联网技术的发展和用户体验需求的不断提高,网站换肤功能成为了许多网站提高用户粘性和个性化体验的重要手段之一。本文将详细解析如何使用JavaScript和CSS技术来...

    js换肤圆角代码兼容各个浏览器

    在网页设计中,实现元素的圆角效果以及动态换肤是常见的需求,尤其在JavaScript(JS)的帮助下,这些功能可以轻松地实现,并且能够确保在不同的浏览器之间具有良好的兼容性。"js换肤圆角代码兼容各个浏览器"这个主题...

    CSS or PHP判断浏览器源代码

    在网页开发过程中,了解用户使用的浏览器类型和版本是非常重要的,因为不同的浏览器可能对某些特性支持不一。本文将深入探讨如何使用CSS和PHP来判断浏览器的类型和版本,以实现更好的兼容性和用户体验。 首先,我们...

    HTML.CSS.JavaScript网页编程教程

    JavaScript方面,重点掌握变量、数据类型、函数、对象和DOM操作等基础知识,以及异步编程和常见库的使用。 在实践中,通过阅读《HTML.CSS.JavaScript标准教程》(实例版)(第2版),你可以逐步跟随教程完成实例,将...

    javascript推断css3动画结束 css3动画结束的回调函数_.docx

    在JavaScript和CSS3结合开发网页动态效果时,有时我们需要在CSS3动画结束后执行特定的JavaScript代码,例如更新页面状态或加载下一个操作。本篇将详细讲解如何利用JavaScript推断CSS3动画结束,并触发回调函数。 ...

    html_css_js

    **层叠与继承**:CSS的“层叠”特性允许样式覆盖,而“继承”则使某些样式可以自动应用于子元素。 #### JavaScript:动态网页的灵魂 JavaScript是一种脚本语言,用于实现网页的动态效果和交互功能。它能操纵HTML和...

    html+js+css-一个基础的"Hello, World!"静态网页案例

    对于事件监听,通常使用 `element.addEventListener("click", function) {...}` 来为元素添加事件监听器,其中 `"click"` 是事件类型,`function` 是触发事件后执行的回调函数。 总结来说,HTML、CSS 和 JavaScript...

    学校网页设计成品 基于HTML+CSS+JavaScript仿山东财经大学官网 学校班级网页制作模板 校园网页设计成品

    综上所述,该项目不仅涵盖了HTML5、CSS3和JavaScript的基础知识,还深入探讨了如何将这些技术应用到实际网页设计中,是一份非常全面的学习资源。通过实践这些示例,学生能够更好地理解网页制作的核心概念和技术要点...

    情人节程序员用HTML网页表白【春娇-志明结婚邀请函】 HTML5七夕情人节表白网页源码 HTML+CSS+JavaScript

    ### 知识点二:CSS样式设计与布局 #### 2.1 CSS基础选择器 - **类型选择器**: 直接指定元素类型,如`div`、`img`等。 - **类选择器**: 使用`.classname`来选择带有特定类名的元素。 - **ID选择器**: 使用`#idname`...

    移动互联应用开发复习提纲,复习必备

    移动互联应用开发复习提纲 移动互联应用开发是指在移动设备上开发的应用程序,涉及到多个技术领域,如HTML、CSS、JavaScript等。本文将从移动应用开发的基础知识入手,总结了移动互联应用开发的知识点,旨在帮助...

    韩顺平轻松搞定网页设计(html.css.js)(完整版)

    ### 知识点二:CSS详解 **CSS(Cascading Style Sheets)**是一种用来表现HTML或XML等文件样式的语言,可以用来控制网页的布局、颜色、字体等视觉效果。 - **CSS选择器**:用于指定哪些HTML元素应用样式规则。 - ...

    这是一篇分析html css js网页设计的文章

    它由一系列的标签组成,这些标签告诉浏览器如何解析和显示网页上的文本、图片、链接等内容。 - **标签与属性**:HTML 使用标签来定义网页的不同部分。例如,`&lt;p&gt;` 标签表示一个段落,`&lt;a&gt;` 标签用于创建链接。标签...

    JS+CSS实现的一种符合用户体验的网页表单特效

    ### JS+CSS实现的一种符合用户体验的网页表单特效 #### 概述 本文将详细介绍如何通过结合JavaScript(JS)和层叠样式表(CSS)来创建一种能够提升用户体验的网页表单特效。此方法适用于前端开发人员进行深入研究,...

    mui.previewImg的css和js

    在这个场景中,我们关注的是 "mui.previewImg" 的 CSS 风格定义(imgpreview.css)、JavaScript 实现(mui.previewimage.js)以及与图片缩放相关的 JavaScript 文件(mui.zoom.js)。 1. **imgpreview.css**: ...

    html css js网页设计的简单案例

    ### 知识点详解 #### 一、HTML (超文本标记语言) - **简介**: HTML是一种标准标记语言,主要用于定义网页的结构和内容。它由一系列的元素组成,这些元素通常被称为“标签”(tags)。 - **用途**: HTML被用来创建...

    react-React组件的CSS构造函数

    这个概念是为了解决传统CSS与JavaScript之间松散耦合的问题,尤其是在大型项目中,这种耦合可能导致样式冲突和难以调试的问题。本文将深入探讨React组件的CSS构造函数及其相关知识点。 1. CSS模块化:React组件倾向...

    简单个人网页设计作业 静态HTML个人博客主页——HTML+CSS+JavaScript 明星鹿晗(7页)

    - **盒模型**:CSS中的盒模型用于定义元素如何在其周围空间中占据位置,包括margin、border、padding和content。 - **浮动布局**:通过设置`float`属性来实现元素的左浮动或右浮动,从而达到布局的目的。 - **...

    html css js网页设计教程.docx

    ### HTML CSS JS网页设计教程知识点概述 #### 一、HTML基础 **HTML(HyperText Markup Language)**,即超文本标记语言,是用于构建网页结构的基础语言。它由一系列的元素组成,这些元素通过标签来表示。每个标签都...

Global site tag (gtag.js) - Google Analytics