HTML、CSS、JS、JQ速查笔记
一、HTML
1.编写html文件
a.格式
<!DOCTYPE html>
<html>
<head>
<title>标题</title>
</head>
<body>
<!-- 内容 -->
</body>
</html>
b.注释
<!-- 注释内容 -->
2.标签分类
a.自闭合标签
<meta charset="UTF-8">
b.主动闭合标签
<title>我的HTML页面</title>
3.标签<head>
a.标题<title>
b.内联样式<style>
c.引入资源<link>
<link rel="stylesheet" href="commons.css" />
<link rel="shortcut icon" href="commons.ico" />
d.引入js文件<script>
<script src='commons.js'></script>
<script> /*JavaScript代码*/ </script>
e.页面信息<meta>
编码:<meta http-equiv="content-type" content="text/html;charset=utf-8">
刷新和跳转:<meta http-equiv="Refresh" Content="10">
<meta http-equiv="Refresh" Content="5;Url=baidu.com"/>
关键字:<meta name="keywords" content="关键字1;关键字2;关键字3">
描述:<meta name="description" content="页面描述........">
IE兼任:(先兼任IE8,再考虑IE7):<meta http-equiv="X-UA-Compatible" content="IE=IE8;IE=IE7;" />4.body标签
a.基本分类(依据:是否独占一行)
- 块级标签:<div>
- 行内标签:<span>
b.段落标签
- H系列标签
- <p>两段落间有间距
- <br/>换行
- <hr/>水平线
c.超链接<a>
- 页面跳转 <a href="www.baidu.com">百度</a> 当前页面跳转 <a href="www.baidu.com" target="_blank">百度</a> 新建一个页面跳转
- 锚(位置跳转) <a href="#某个标签的id">跳转</a>
d.图片标签<img>
<img src="URL" title="描述" alt="替换文本">
e.特殊符号:
- (space)
- >(<)
- <(>)
- &(&)
f.表格标签
<table>
<thead>
<tr>
<th>
<tbody>
<tr>
<td>
colspan = '2' 横向合并单元格
rowspan = '2' 纵向合并单元格
g.列表标签
- 无序列表
<ul>
<li>
- 有序列表
<ol>
<li>
PS:默认:数字列表
type="A"大写字母、type="a"小写字母
type="I"罗马数字、type="i"小写罗马数字
- 自定义列表
<dl>
<dt>
<dd>
h.框架标签(同一个窗口显示不止一个页面)
<iframe src="URL" width="200" height="200" frameborder="0"></iframe>
i.表单
- 格式:
<form action='提交的地址' methed='提交方式(GET/POST)'>
<!-- 表单 -->
<input type='submit'>
</form>
GET:http://dddddd?q=值&b=值
POST:放在报表里面传输
- input系列
文本框:type='text'
密码框:type='password'
<input type='text' name="后端" value='默认值'>
提交按钮:type='submit'
普通按钮:type='button'
<input type='submit' value="显示">
单选按钮:type='radio'(互斥选项,name相同,得到选中的value)
复选按钮:type='checkbox'(name相同,得到选中的个value)
<input name='识别' checked="checked" value='1'>
文件上传按钮(依赖form属性:enctype="multipart/form-data")
<input type='file' value="显示">
重置按钮(重置当前页面所有按钮)
<input type='reset' value="值">
- 其他控件
多行输入框:
<textarea name="后端">(默认值)</textarea>
下拉选择框:
<select name="后端" >
<option value="1">1</option>
<option value="2" selected="selected">2</option>
<option value="3">3</option>
</select>
下拉框分组:
<optgroup label="分组名称"></optgroup>
属性: size="2" 默认列数 multiple="multiple" 是否多选
- label标签(点击文字关联的控件获得光标 )
<label for="username">用户名:</label>
<input id="username" type="text" name="user" />
- 控件分组框 <fieldset>
<legend>分组标题</legend>
<!-- 内容 -->
</fiedset>
二、CSS样式
1.结构
选择器:{
属性1:值;
属性1:值
}
/* 注释.... */
2.选择器
<标签 class="mcls" id="mid"></标签>
a.id选择器:
#mid{
样式。。。
}
b.class选择器
.mcls{
样式。。。
}
c.标签选择器
标签{
样式。。。
}
d.属性选择器(已选标签再通过属性二次筛选)
input[type='text']{ width:100px;height:200px; }
.c1[n='alex']{ width:100px;height:200px; }
e.组合选择器(多个属性设置同样的样式)
.c1,.c2,div{
样式。。。
}
f.层级选择器(层以下的标签选择样式)
.c1 .c2 div{
样式。。。
}
g.后代选择器(space),子元素选择器(>),相邻兄弟选择器(+),普通兄弟选择器(~)
3.伪类/元素选择器
a.链接标签
- a:link {color:#000000;} /* 未访问链接*/
- a:visited {color:#00FF00;} /* 已访问链接 */
- a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
- a:active {color:#0000FF;} /* 鼠标点击时 */
b.常用选择器
- :active 选择正在活动链接
- :hover 把鼠标放在链接上的状态
- :checked 选择所有选中的表单元素
- :disabled 选择所有禁用的表单元素
- :before 在每个<p>元素之前插入内容
- :after 在每个<p>元素之后插入内容
4.文字文本
a.文本格式
- 颜色:color
- 行高:line-height
- 对齐方式:text-align(right,center,left,justify(展开行末尾无空格))
- 删除修饰:text-decoration:none;(主要用于删除链接的下划线)
b.字体
- 字体:font-family:"宋体", "微软雅黑","华文新魏";
- 斜体:font-style(normal,italic,oblique)
- 加粗:font-weight:900;(normal,lighter,bold)
- 大小:font-size:40px;(16px=1em)
5.背景样式
a.
背景颜色:background-color:red;
背景图片:background-image:url('URL');
不重复图片:background-repeat:none;(no-repeat,repeat-x,repeat-y)
起始位置:background-position:right top;
单独设置:background-position-x/y
简写属性:background:#ffffff url('img_tree.png') no-repeat right top;
b.透明度和层
透明度:opacity:0.5;
层级顺序:z-index
6.表格样式
a.折叠边框:border-collapse: collapse;
b.文字上下对齐:vertical-align:bottom;
c.隐藏表格:visibility: collapse;
7.盒子模型
a.高度:height(像素、百分比)
b.宽度:width(像素、百分比)
c.最大最小高宽:max,min
d.外边距:margin
e.内边距:padding
f.边框:
边框属性:border-top-color:red;[top,bottom,left,right][style,width,color]
(solid,dotted,dashed,double,groove,ridge,inset,outset)
简写属性:border:5px solid red;
圆角:border-radius:50%;圆
8.内联块属性
display:inline;(none,inline,block,inline-block)
9.页面布局
a.position:(top,bottom,left,right)
- 流水定位:static(默认定位)
- 固定定位:fixed(固定在页面的某个位置)
- 相对定位:relative + absolute(先对于块的某个位置)
- 绝对定位:absolute(第一次定位,可以在指定位置,滚轮滚动时就不在了)
- 粘性定位:sticky,-webkit-sticky(Safari)(top:0)(滚动后黏在顶部)
b.Overflow(hidden,scroll,auto,visible内容溢出)
c.float+overflow:hidden
clear(left,right)
<div style="clear:both"></div>
10.页面对齐
a.水平居中:margin: auto;需置宽度
b.左右对齐
- position: absolute;
- float:left,right;(防溢出:verflow: auto;)
c.垂直居中
- line-height 属性值和 height 属性值相等
- 相对定位 + top: 50%;left: 50%;-ms-transform: translate(-50%, -50%);transform: translate(-50%, -50%);
三、JavaScript
1.JavaScript代码需要放置在<body>标签内部的最下方
2.注释:
单行注释: //
多行注释: /* */
3.变量:
name = 'alex' ===> 全局变量
var name = 'alex' ===> 局部变量
4.基本数据类型
数字
a = 18
字符串
a = 'sjl'
a.chartAt(索引位置)
a.substring(起始位置,结束位置)
a.lenght 获取当前字符串长度
...
数组
a = [11,22,33,44]
字典
a = {'k1':'v1','k2':'v2'}
布尔类型
true、flase
5.for循环
1.循环时,循环的元素是索引
a =[11,22,33,44]
for(var item in a){
console.log(a[item]);
} a ={'k1':'v1','k2':'v2'}
for(var item in a){
console.log(a[item]);
} 2.
for(var i=0;i<a.lenght){
...
}
6.判断
&& ||
== != 不严格比较(不比较数据类型)
=== !== 严格比较 if(条件){
...
}
else if(条件){
...
}
else{
...
} var v = 条件 ? 真值 : 假值 switch(c){
case 1:
...
case 2:
...
case 3:
...
default:
...
}
7.函数
a.普通函数:
function func(){
console.log(666);
} b.匿名函数:
setInterval(function(){
console.log(666);
},5000) c.自执行函数(创建函数并且自动执行)
(function(arg){
console.log(arg);
})(666)
8.JavaScript库函数
1.序列化
JSON.stringify(obj) 序列化
JSON.parse(str) 反序列化 2.转义
decodeURI( ) URl中未转义的字符
encodeURI() URI中的转义字符
decodeURIComponent() URI组件中的未转义字符
encodeURIComponent() 转义URI组件中的字符
escape() 对字符串转义
unescape() 给转义字符串解码 3.eval
eval("1+1") 表达式/代码都可以执行 4.时间
Date类
var d = new Date();
d.getXXX 获取
d.setXXX 设置
9.正则表达式
test - 判断字符串是否符合规定的正则
exec - 获取匹配的数据 /.../ 用于定义正则表达式
/.../g 表示全局匹配
/.../i 表示不区分大小写
/.../m 表示多行匹配 示例:
rep = /\d+/;
rep.text("sdkjahcuisan44454") rep = /\d+/g; //全局匹配,后面加个g,匹配一个拿一个
rep.exec("sdkja66hcuisan44454")
rep.exec("sdkja66hcuisan44454")
10.作用域
a.JavaScript以函数为作用域
示例1:
function func(){
if(1==1){
var name = 'sjl';
}
console.log(name);
}
func();
//输出:sjl b.函数的作用域在函数未被调用之前,已经创建 c.函数的作用域存在作用域链,而且也是在被调用前创建
实例2:
xo = "sjl";
function func(){
var xo = "lyy";
function inner(){
var xo = "lsm";
console.log(xo);
}
inner();
}
func();
//输出:lsm 示例3:
xo = "sjl";
function func(){
var xo = "lyy";
function inner(){
console.log(xo);
}
return inner;
}
var ret = func();
ret();
//输出:lyy 示例4:
xo = "sjl";
function func(){
var xo = "lyy";
function inner(){
console.log(xo);
}
var xo = "yp";
return inner;
}
var ret = func();
ret();
//输出:yp
==================================================
|| 全局 || func || inner ||
|| xo = sjl || xo = yp || : ||
|| || || ||
==================================================
//func函数执行的时候xo就已经替换成"yp"了,所以执行inner函数往上一个函数链找得到的xo=yp d.函数内局部变量在创建时就已经声明
示例5:
function func(){
console.log(xxoo);
}
func()
//程序直接报错 示例6:
function func(){
console.log(xxoo);
var xxoo = "sjl";
}
func();
//输出:undefined(变量声明了,但是在执行的时候才赋值)
11.JavaScript面向对象
a.this代指对象
b.创建对象时,new函数
function foo(){
var xo = "sjl";
} function Foo(n){
this.name = n;
} function Fooo(n){
this.name = n;
this.logName = function(){
console.log(this.name);
}
} foo();
var obj1 = new Foo("I");
var obj2 = new Foo("WE"); c.原型:
function Foo(n){
this.name = n;
} //Foo的原型,无论实例多少个对象,在内存里只会生成一个函数
Foo.prototype = {
'sayName': function(){
console.log(this.name);
}
}
obj1 = new Foo("we");
obj1.sayName(); obj2 = new Foo("wee");
12.JavaScrip的AO
active object ===>> AO
1.形式参数
2.局部变量
3.函数声明表达式
//示例:
function t1(age){
console.log(age);
var age = 27;
console.log(age);
function age(){}
console.log(age);
}
//输出:function 27 27
四、DOM
1.查找标签
a.直接找
document.getElementById //根据ID获取一个标签
document.getElementsByName //根据name属性获取标签集合
document.getElementsByClassName //根据class属性获取标签集合
document.getElementsByTagName //根据标签名获取标签集合 b.间接找
parentNode // 父节点
childNodes // 所有子节点
firstChild // 第一个子节点
lastChild // 最后一个子节点
nextSibling // 下一个兄弟节点
previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
2.操作标签
标签.innerText = "" // 仅文本,忽略标签 标签当字符串赋值进去
标签.innerHTML = "" // 全部内容 可以赋值标签 value // 获取和赋值(input系列,textarea)
selectIndex // select标签特有的(select)
3.样式操作
className // 获取所有类名 添加class
classList // 获取所有类
classList.remove(cls) // 删除指定类
classList.add(cls) // 添加类 标签.style.color //操作单个样式
标签.style.backgroundColor //操作单个样式
4.属性操作
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性
removeAttribute(key) // 移除指定标签属性
5.标签操作
a.方式一
var obj = "<input type='text' />";
node.insertAdjacentHTML("beforeEnd",obj);
node.insertAdjacentElement('afterBegin',document.createElement('p')) //外面套一个<p>标签
//注意:第一个参数只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd' b.方式二
var tag = document.createElement('a')
node.appendChild(tag) //放入<a>标签里面
document.getElementById("i1").appendChild(tag);
6.提交表单
//任何标签通过DOM提交表单
document.getElementById("form_id").submit();
7.其他操作
console.log // 控制台输出
alert // 弹出框
confirm // 确认框 location.href // 获取URL
location.href = "url" // 重定向
location.reload() // 重新加载 setInterval // 多次定时器
clearInterval // 清除多次定时器
setTimeout // 单次定时器
clearTimeout // 清除单次定时器
8.事件
绑定事件的方式:
a.直接标签绑定 onclick="func()" onfocus
b.先获取Dom对象,然后进行绑定
document.getElementById("id").onclick
document.getElementById("id").onfocus
c.
document.getElementById("id").addEventListener("click",function(){console.log("666");},flase);
flase为冒泡
true为捕捉 this当前触发事件的标签
a.第一种绑定方式
<input id="i1" type="button" onclick="Clicked(this)"> function Clicked(self){
// self为当前点击的标签
} b.第二种方法
<input id="i1" type="button">
document.getElementById("i1").onclick = function{
//this为当前标签
}
五、JQuery
1.基本信息
a.
DOM/BOM/JavaScript的类库
b.转换
jquery对象[0] => Dom对象
Dom对象 => $(Dom对象)
2.选择器,直接找到某个或者某类标签
1.id
$('#id') 2.class
$('.cl') 3.标签<a></a>
$('a') 4.组合
$('a,.cl,#id') 5.层级
$('#id a') //子子孙孙
$('#id>a') //儿子 6.基本
:first
:last
:eq() 7.属性
$('[sjl]')
$("[sjl='123']") $("input[type='text']")
$("input[type='text'][value='ok']")
$(':text') 9.事件和其他
$('input').click(function(){ ... }) $('input').each(function(k){ ... }) //循环每个元素,k为索引
3.筛选器
$(this).eq(1) //索引
$(this).first() //第一个
$(this).last() //最后一个
$(this).hasClass(class) //是否具有某个class $(this).next() //下一个
$(this).nextAll() //下面所有的
$(this).nextUntil() //下一个直到.. $(this).prev() //上一个
$(this).prevAll() //上面所有的
$(this).prevUntil() //上一个直到.. $(this).parent() //父标签
$(this).parents() //所有的父标签
$(this).parentUntil() //所有的父标签 $(this).children() //孩子标签
$(this).siblings() //兄弟标签 $(this).find('.content') //找到某个标签
4.文本操作
$('#id').text() //获取文本内容
$('#id').html() //获取包括标签和内容 $('#id').text('666') //修改文本内容
$('#id').html('<a>666</a>') //解析标签 $('#id').val() //获取input文本
$('#id').val('666') //修改input文本
5.样式操作
$('#id').removeClass() //移除class
$('#id').addClass() //添加class
$('#id').toggleClass('cl') //有cl就去掉,没有cl就加上
6.属性操作
- 一般用于自定义属性
$('#id').attr('type') //获取type的值
$('#id').attr('name','sjl') //设置type的值
$('#id').removeAttr('value') //删除某个属性 - 专门用于checkbox,radio
:enabled
:disabled
:checked
:selected $('input').prop('enabled') //得到某个属性
$('input').prop('enabled',true) //设置input属性 PS:$('#id').index() //索引位置
7.文档处理
$('#id').append() //添加到标签内后
$('#id').prepend() //添加到标签内前
$('#id').after() //添加到标签外后
$('#id').before() //添加到标签外前 $('#id').remove() //移除标签和内容
$('#id').empty() //移除包括标签和内容 $('#id').clone() //复制包括标签和内容
8.css处理
$('#id').css('样式名称','样式值')
9.位置
$(window).scrollTop() //获取位置
$(window).scrollTop(12) //设置位置
$(window).scrollLeft([val]) $('#id').offset().top //指定标签在html中的坐标
$('#id').offset().left //指定标签在html中的坐标 $('#id').position() //指定标签相对父标签(relative)中的坐标 $('#id').height([val|fn])
$('#id').innerHeight()
$('#id').outerHeight([options]) $('#id').width([val|fn])
$('#id').innerWidth()
$('#id').outerWidth([options])
10.事件
$('#id').click();
blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])1.8-
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn]) //委托,点的时候才绑定事件
$('#id').delegate("a","click",function(){...})
.undelegate //阻止其他事件
$('#id').click(function(){
...
return false;
}); //当页面框架加载完毕后,自动执行(绑定事件和默认执行的操作)
$(function(){
...
})
11.扩展JQuery
示例一:
$.fn.extend({
"wefun1":function(){
return "666";
}
});
var v = $('#id').wefun1(); 示例二:
$.extend({
"wefun2":function(){
return "666";
}
});
var v = $.wefun2(); - $.extend //$.方法
- $.fn.extend //$(..).方法 (function(){
var status = 1;
//封装变量
})(jquery)
w3cschool速查:https://www.w3cschool.cn/html/dict/
CSS3查找手册:http://css.cuishifeng.cn/
JQuery查找手册:http://jquery.cuishifeng.cn/
HTML、CSS、JS、JQ速查笔记的更多相关文章
- 写shell脚本速查笔记
linux shell脚本的语法蛋疼,而且对于java开发人员来说又不常用,常常是学了一次等到下次用的时候又忘记了.因此制作这个速查笔记,用于要写shell脚本时快速回忆&速查. 获取当前脚本 ...
- java字节码速查笔记
java字节码速查笔记 发表于 2018-01-27 | 阅读次数: 0 | 字数统计: | 阅读时长 ≍ 执行原理 java文件到通过编译器编译成java字节码文件(也就是.class文件) ...
- 实用掌中宝--HTML&CSS常用标签速查手册 PDF扫描版
实用掌中宝--HTML&CSS常用标签速查手册 内容推荐: 本书第一篇以语法和实例相结合的形式,详细讲解了HTML语言中各个元素及其属性的作用.语法和显示效果:第二篇从CSS基本概念开始,分别 ...
- Makefile速查笔记
Makefile速查笔记 Makefile中的几个调试方法 一. 使用 info/warning/error 增加调试信息 a. $(info "some text")打印 &qu ...
- 【Linux】【MySQL】CentOS7、MySQL8.0.13 骚操作速查笔记——专治各种忘词水土不服
1.前言 [Linux][MySQL]CentOS7安装最新版MySQL8.0.13(最新版MySQL从安装到运行) 专治各种忘词,各种水土不服. - -,就是一个健忘贵的速查表:(当然不包括SQL的 ...
- HTML+CSS+JS 传智 详细笔记
HTML(1)- -毕向东老师对Html的简介 CSS- -毕老师对CSS的简介 Javascript- -毕老师对JS的简介 html&css等等练习表(W3Cscholl) js练习表回顾 ...
- 整理前端css/js/jq常见问题及解决方法(2)
移动端 手机 1.点击图片或按钮,选中状态影响到其他范围解决:html{-webkit-user-select:none}<meta name="msapplication-tap-h ...
- 整理前端css/js/jq常见问题及解决方法(1)
1. 兼容ie8圆角的解决方法:下载ie-css3.htc文件在css中加入behavior:url(ie-css3.htc);z-index:3; position:relative 即可 2. 去 ...
- HTML/HTML5/CSS/CSS3教程速查手册地址以及如何快速直到webkit的用法
http://www.w3school.com.cn/ http://www.runoob.com/ 不过上面这两个都是标准的CSS和CSS3教程,针对一些类似-webkit-内核的样式没有公布. 下 ...
随机推荐
- 【C#】清除webBrowser 缓存和Cookie的解决方案
试了很多方法,最后发现万剑大哥的方法管用,转载一下 转自:https://www.cnblogs.com/midcn/p/3527123.html 通过测试webBrowser与IE缓存和Cookie ...
- ProtoBuf练习(一)
基础数据类型 protobuf语言的基础字段类型相当于C++语言的基础类型 工程目录结构 $ ls proto/ TFixed.proto TInt.proto TScalar.proto TStr. ...
- Linux ifconfig-etho文件参数详解
1.ifcfg-eth0文件参数详解 DEVICE 网卡名称/网络接口的名称BOOTPROTO 系统启动地址协议 常用参数: none:不使用启动地址协议,none禁止DHCP bootp:BOOTP ...
- java二分法查找实现代码
package util; class BinarySearch { static int binarySearch(int[] array,int goal){//传入排好序的数组和目标数字 int ...
- 【转】C# 使用正则表达式去掉字符串中的数字,或者去掉字符串中的非数字
源地址:http://www.cnblogs.com/94cool/p/4332957.html
- 暴风魔镜SDK:MojingSDK For Unity V1.3.5112 (R).zip
去年买了个暴风魔镜4,如今一直放在家里吃灰,这些天对Unity3D开发VR兴趣正浓,刚好公司项目不忙,花了几天玩玩暴风魔镜SDK,因为网上的资料不算多,暴风提供的文档也不太适合像我这样的Unity小白 ...
- 事务隔离实现并发控制:MySQL系列之十
一.并发访问控制 实现的并发访问的控制技术是基于锁: 锁分为表级锁和行级锁,MyISAM存储引擎不支持行级锁:InnoDB支持表级锁和行级锁: 锁的分类有读锁和写锁,读锁也被称为共享锁,加读锁的时候其 ...
- POJ1021 2D-Nim
题目来源:http://poj.org/problem?id=1021 题目大意: 有一种在棋盘上玩的游戏,每一步,一个玩家可以从棋盘上拿走连续行或列的棋子.谁拿到最后一颗棋子就胜利.如下图所示的棋盘 ...
- Linux--2 Linux之文档与目录结构、shell基本命令
一.Linux之文档与目录结构 1.Linux之文档与目录结构 Linux目录结构的组织形式和Windows有很大的不同.Linux没有“盘(如C盘.D盘.E盘)”的概念,而是建立一个根"/ ...
- /sbin/int的启动及后续进程的启动_3
转载自: http://www.ruanyifeng.com/blog/2013/08/linux_boot_process.html 半年前,我写了<计算机是如何启动的?>,探讨BIOS ...