CSS,JS,JQ 常用属性分享

Css
Hover：伪类选择器 任意选择器：hover
设置表格边框合并样式：border-collapse:collapse
Input输入框默认提示文字：placeholder

css常用样式
布局常用样式属性：
width 设置元素(标签)的宽度，如：width:100px;
height 设置元素(标签)的高度，如：height:200px;
background 设置元素背景色或者背景图片，如：background:gold; 设置元素背景色为金色
border 设置元素四周的边框，如：border:1px solid black; 设置元素四周边框是1像素宽的黑色实线
以上也可以拆分成四个边的写法，分别设置四个边的：
border-top 设置顶边边框，如：border-top:10px solid red;
border-left 设置左边边框，如：border-left:10px solid blue;
border-right 设置右边边框，如：border-right:10px solid green;
border-bottom 设置底边边框，如：border-bottom:10px solid pink;
padding 设置元素包含的内容和元素边框的距离，也叫内边距，如padding:20px;padding是同时设置4个边的，也可以像border一样拆分成分别设置四个边:padding-top、padding-left、padding-right、padding-bottom。
margin 设置元素和外界的距离，也叫外边距，如margin:20px;margin是同时设置4个边的，也可以像border一样拆分成分别设置四个边:margin-top、margin-left、margin-right、margin-bottom。
float 设置元素浮动，浮动可以让块元素排列在一行，浮动分为左浮动：float:left; 右浮动：float:right;
列表标签样式：list-style:none 去掉小圆点
文本常用样式属性一：
color 设置文字的颜色，如： color:red;
font-size 设置文字的大小，如：font-size:12px;
font-family 设置文字的字体，如：font-family:‘微软雅黑’;为了避免中文字不兼容，一般写成：font-family:‘Microsoft Yahei’;
font-weight 设置文字是否加粗，如：font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
line-height 设置文字的行高，如：line-height:24px; 表示文字高度加上文字上下的间距是24px，也就是每一行占有的高度是24px
text-decoration 设置文字的下划线，如：text-decoration:none; 将文字下划线去掉
text-align 设置文字水平对齐方式，如text-align:center 设置文字水平居中
text-indent 设置文字首行缩进，如：text-indent:24px; 设置文字首行缩进24px

Form标签
1、标签 定义整体的表单区域
• action属性 定义表单数据提交地址
• method属性 定义表单提交的方式，一般有“get”方式和“post”方式
2、标签 为表单元素定义文字标注
3、标签 定义通用的表单元素
• type属性
o type=“text” 定义单行文本输入框
o type=“password” 定义密码输入框
o type=“radio” 定义单选框
o type=“checkbox” 定义复选框
o type=“file” 定义上传文件
o type=“submit” 定义提交按钮
o type=“reset” 定义重置按钮
o type=“button” 定义一个普通按钮
• value属性 定义表单元素的值
• name属性 定义表单元素的名称，此名称是提交数据时的键名
4、标签 定义多行文本输入框
5、标签 定义下拉表单元素
6、标签 与标签配合，定义下拉表单元素中的选项

元素显示特性display
display:inline 将元素转化为内联元素
display:block 将元素转化为块元素
display:none 将元素隐藏

元素溢出样式设置：在父级上设置
overflow:visible 超出的部分显示
overflow:hidden 超出的部分隐藏
overflow:scroll 不管是否超出，都显示滚动条来滚动显示超出的部分
overflow:auto 根据实际情况，动态显示滚动条

定位
Position：relative 相对定位 相对自己定位，原位置保留
Position：absolute 绝对定位 相对有定位的父级来定位，原位置丢掉
Position：fixed 固定定位 相对浏览器定位，原位置丢掉
设置定位偏移：left right top bottom
设置定位层级： z-index
定位元素水平垂直居中技巧 top：50%， margin-top-盒子高度一半

Js
事件属性：
Onclick： 鼠标点击事件
Mouseove：r鼠标移入事件
Mouseout：鼠标移出事件
javascipt数据类型：
1、5种基本数据类型：number、string、boolean、undefined、null
2、1种复合类型：object
获取元素对象
document.getElementById(‘id名称’)
Html执行完成后执行js的方法：
Window.onload = function(){内容}
操作元素属性
1、html的属性和js里面属性写法一样
2、“class” 属性写成 “className”
3、“style” 属性里面的属性，有横杠的改成驼峰式
4、innerHTML 操作元素内包裹的内容

数组操作：
1、创建数组：面向对象方式：var aList = new Array(1,2,3) 直接量方式：var aList2 = [‘a’,’b’]
2、获取数组成员的个数：length属性
3、操作数组的某个成员：[下标]
4、在数组后面增加或者删除成员：push() 方法 pop() 方法
5、将数组反转：reverse() 方法
6、获取某个成员在数组中第一次出现的索引值：indexOf() 方法
7、在数组中增加或者删除成员：splice() 方法
8、将数组拼接成字符串：join() 方法
字符串操作方法：
1、”+” 符号两边是数字，就做加法，如果有一边是字符串，就做字符串拼接
2、parseInt() 将整数字符串转化为整数，如果是小数会去掉小数位
3、parseFloat() 将小数的字符串转化为小数
4、split() 将字符串转化为数组
5、indexOf() 获取某小段字符串在大段字符串里面的索引值 如果不存在就返回-1
6、substring() 截取字符串

定时器
只执行一次的定时器：var oTimer1 = setTimeout(函数名，间隔时间) 间隔时间单位为毫秒，不用写单位
关闭只执行一次的定时器：clearTimeout(oTimer1)
反复执行的定时器：var oTimer2 = setInterval(函数名，间隔时间)
关闭反复执行一次的定时器：clearInterval(oTimer2)

javascript调试程序的方法：
1、将变量或对象打印出来：alert(‘变量’) console.log(‘变量’) document.title = ‘变量’
2、断点调试：将js代码独立成一个js文件，然后在chrome浏览器的source窗口中打断点调试

封闭函数 三种写法： 1. ;(function(){ … })( );
2. ;!function(){ … }( ); 3. ;~function(){ … }( );

Jq
jquery文档加载完再执行：$(document).ready(function()......)简写：$(function(){ … })
检查jquery是否选择了元素：用jquery对象的length属性
绑定click事件：$(‘对象名’).click()需要执行的内容)获取索引值：$(‘对象名’).index（）
jquery有容错机制，即使没有找到元素，也不会出错，可以用length属性来判断是否找 到了元素,length等于0，就是没选择到元素，length大于0，就是选择到了元素。
选择器同css，多一个属性选择
$(‘input[name=first]’) // 选择name属性等于first的input元素
对选择集进行过滤
$(‘div’).has(‘p’); // 选择包含p元素的div元素
$(‘div’).not(’.myClass’); //选择class不等于myClass的div元素
$(‘div’).eq(5); //选择第6个div元素
选择集转移
$(’#box’).prev(); //选择id是box的元素前面紧挨的同辈元素
$(’#box’).prevAll(); //选择id是box的元素之前所有的同辈元素
$(’#box’).next(); //选择id是box的元素后面紧挨的同辈元素
$(’#box’).nextAll(); //选择id是box的元素后面所有的同辈元素
$(’#box’).parent(); //选择id是box的元素的父元素
$(’#box’).children(); //选择id是box的元素的所有子元素
$(’#box’).siblings(); //选择id是box的元素的除自己之外的所有同级元素
$(’#box’).find(’.myClass’); //选择id是box的元素内的class等于myClass的元素

动画方法animate() 的参数
参数一：要改变的样式属性，写成字典的形式
参数二：动画持续的时间，单位是毫秒，默认是400毫秒，定义时不写单位
参数三：动画曲线，有 swing 缓冲运动 linear 匀速运动
参数四：回调函数

jquery特性动画效果方法：
1、show() 元素显示
2、hide() 元素隐藏
3、toggle() 元素切换显示隐藏
4、fadeIn() 元素淡入
5、fadeOut() 元素淡出
6、fadeToggle() 切换淡入淡出
7、slideUp() 元素向上卷起
8、slideDown() 元素向下展开
9、slideToggle() 切换向上向下展开卷起
10、Stop() 如果点击多次只执行最后一次

属性操作
1、操作元素除样式属性之外的其他属性：prop() 方法，操作value属性的方法封装成了val()方法
2、操作元素内部包裹的内容：html() 方法
3、获取自定义元素内容：attr()方法

常用表单事件
1、blur 输入框失去焦点事件
2、submit 点击submit按钮，form标签发生提交事件 submit
1、focus事件 获取焦点事件，一般不在这个事件上绑定函数，一般作为让输入框自动或的焦点的方式使用，写法：$input.focus( )
2、mouseover 和 mouseout 鼠标移入移出事件 移入子元素也会触发
3、mouseenter 和 mouseleave 鼠标移入移出事件 移入子元素不会触发
4、hover 可以将mouseenter 和 mouseleave事件合并在一起写，写法：
$input.hover(function(){ mouseenter的操作 },function(){ mouseleave的操作 })

事件冒泡
原理：元素发生事件后，会将这个事件传递父级，父级还会往上传递，一直传递到最顶级标签，一般最顶级标签写成$(document)
阻止事件冒泡：return false

事件委托
原理：利用事件冒泡的特性，将事件绑定在父级上，子集发生的事件都会冒泡到父级，父级通过判断子级的特征给它特定的操作。
写法： KaTeX parse error: Expected '}', got 'EOF' at end of input: …nction(){ 这里的(this)指的是当前冒泡的子级 })

Dom操作（也叫作节点操作）
1、append 和 appendTo
2、prepend 和 prependTo
3、after 和 inserAfter
4、before 和 insertBefore
5、remove 删除节点