一、html/css
1. 什么是盒子模型?
padding+border+width/height
2. float 浮动
(1)浮动的特性
脱离文档流行内变成块能设置宽高同级元素有浮动,必须全部都浮动宽度默认变窄,窄到内容的宽度浮动后到一行文本环绕
(2)清除浮动?
clear:both;clearfixclear: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
十、浏览器执行顺序
加载-----> 解析 -----> 执行
相关推荐
本书在简洁明快地讲述JavaScript和DOM的基本知识之后,过几个实例演示了大师级的网页开发技术,并透彻阐述了一些至关重要的JavaScript编程原则和最佳实践,包括预留退路、循序渐进和以用户为中心等。读者可以非常...
js+css效果 代码 其中一部分 <script language="javascript"> function tab_wwwzzjsnet(obj,id) { var arrayli = obj.parentNode.getElementsByTagName("li"); //获取li数组 var arrayul = document....
事件驱动:JavaScript的执行都是由事件引发 解释执行:先读到的先执行,后读到的会替代先读的 可以使用任何文本编辑工具编写 JavaScript 代码,然后由浏览器解释执行。 JavaScript常用于实现如下功能: |--控制...
13.3.2 onFocus和onBlur事件函数 13.3.3 onResize事件处理函数 13.4 鼠标事件处理 13.4.1 怎样使用鼠标事件 13.4.2 鼠标事件和图像——翻转 13.4.3 通过鼠标事件创建幻灯片 13.5 ...
如:<script type="text/javascript" src="ymPrompt.js"></script> 2、在页面中引入对应的皮肤文件的CSS,如:<link rel="stylesheet" type="text/css" href="skin/qq/ymPrompt.css" /> 3、自定义组件的默认配置...
@zebing/vite-plugin-css-modules@zebing/vite-plugin-css-modules 是一个vue css modules智能转化插件。让你在使用vue css modules的同时,无需通过:class="$style.cssname", class={styles.cssname}等繁琐的方式...
网页图片切换Js CSS兼容版,代码示例: //addTab("标签栏ID","标签栏子的标签tagname",左右按钮是否在标签栏中并在两侧,"标签栏选中时的className","内容栏ID","内容栏子的标签tagname",左右按钮是否在内容栏中并...
使用封装的思想,简单的实现IE浏览器在javascript中对getElementsByClassName的不兼容问题,实现的方法简单,通俗易懂
需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把“N”写成“n”,cssText也不能够把“T”写成“t”,否则无法实现效果。 调用方法: 如果改变className,则事先在样式表中申明类,但...
因为Web 浏览器会把自身默认的样式和事件加载到网页的结构层上。 B 使用className 属性 Javascript 还可以通过className 属性灵活的更改一个标签元素的CSS 类选择器来实现样式的变化。 代码示例: 代码如下: <...
由于CSS读取时是按从上到下来的,同样属性靠后写的生效,因此可以依照顺序写下来,就会让每个浏览器正确的读取到自己看得懂得CSS语法,有效区分各类型或版本: 复制代码代码如下: .classname{ blue; /*Firefox等非...
163邮箱的js文件,值得研究! var gContentContainer="divMain"; var gAppName=""; var gVersion=""; var gErrorInfo=""; var gStatus_Ok="S_OK"; var gLogoutUrl="http://www.163.com"; var gMaxThumbSize=3000000;...
简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。 那么CSS和Html是如何在网页代码中相结合的呢? CSS的引入方式通过四种方式 1.style属性方式: 利用标签中style属性来改变每个标签的显示样式。 例...
28种CSS3炫酷loading页面加载动画特效代码,兼容主流浏览器 使用方法: 1、在head区域引入样式表文件demo.css和loaders.css 2、在你的网页中加入<!-- 代码 开始 --><!-- 代码 结束 -->注释区域代码即可...
这暴露了一个单独的函数,该函数接受tachyon css类名作为字符串或字符串数组。 仅包含一次tachyons CSS。 这可以通过css文件中的import语句来完成,也可以通过将其包含在html的样式标签中来完成。 例子 import...
css-flat-loader CSS Flat CSS Flat(CSS 扁平化)是一种模块化解决方案,基于Post CSS生态开发。 主要解决问题: 达到模块化CSS的能力 解决由于业务的持续迭代,导致CSS样式文件的线性增长问题(CSS Modules尤其...
Js双日历控件,在一个网页上同时显示两个日期选择器,写成了封装类,方便使用者调用。同时美化的相当不错。 包括了以下函数: 1、2012——2020年节假日信息(包括节假日前1~3天/后1~3天) 2、格式化数字,...
React CSS-in-JS 使用标签模板,对于任何接受className属性的组件, className使用最小的React css-in-js,并且无需特殊的编译步骤。入门import { css , Styled } from 'react-css-in-js' ;const color = 'white' ;...
代码如下: [removed] function queryClass(class...//获取HTML的所有标签 for(var i in tags){//对标签进行遍历 if(tags[i].nodeType==1){//判断节点类型 if(tags[i].getAttribute(“class”) == classnames)//判断
CSS-in-JS? 还没有。 大多数库只是为您创建样式表。 来自纯CSS或纯JS代码。 CSS到JS 这个webpack加载器实际上将CSS代码转换为JavaScript 。 不仅提供className,而且用客户端CSS-in-JS库包装所有内容。 支持的API...