放一些收集的前端知识点上来,方便查阅

js:
1.获取input Textarea中用户输入的内容:
var inpval2=document.getElementsByTagName("input")[1]; 不要在这个后面直接写 .value
var textvalue=document.getElementById("textareac");
console.log(inpval2.value,textvalue.value);

2.jquery中css(),多个样式设置时候:css({"color":"red","font-size":"20px"});

3.onchange 事件会在域的内容改变时发生。
支持该事件的 HTML 标签：
<input type="file">, <input type="text">, <select>, <textarea>
支持该事件的 JavaScript 对象：
fileUpload, select, text, textarea
4.onchange事件与onpropertychange事件的区别：
onchange事件在内容改变（两次内容有可能还是相等的）且失去焦点时触发；
onpropertychange事件却是实时触发，即每增加或删除一个字符就会触发，通过js改变也会触发该事件，但是该事件IE专有。
oninput事件是IE之外的大多数浏览器支持的事件，在value改变时触发，实时的，即每
增加或删除一个字符就会触发，然而通过js改变value时，却不会触发；oninput要通过addEventListener()来注册

5.splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目
arrayObject.splice(index,howmany,item1,.....,itemX)
index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX可选。向数组添加的新项目。

6.shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

CSS的选择器写的层数多,可以覆盖层数少的选择器
0.-webkit-appearance: inherit;对任何元素的默认渲染风格改变

1./*他人写好的公共的CSS文件可以引入使用,,实现了代码的复用\减轻了任务量*/

2.css transform属性:
translate(x,y) ----- 以(0,0)为原点平移(x,y) (这里写的只是2D,这个属性还有3D)
scale(x,y) ----- 缩放 (这里写的只是2D,这个属性还有3D)
rotate(x deg) ----- 旋转x角度(这里写的只是2D,这个属性还有3D) 循环转动:infinite
skew(x deg) ----- 倾斜角度 (这里写的只是2D,这个属性还有3D)
perspective(n) ----- 为3D转换元素定义透视视图

animation: rotate 6s infinite; ----- infinite循环动画

3./*盒模型*/
*{
box-sizing: border-box;
-webkit-box-sizing: border-box;
}

4./*去除点击超链接时背景色*/
a{
-webkit-tap-highlight-color:transparent;
}

5.给元素加背景图片时,一定要先给元素宽高,并display:block或者 inline-block
背景图大小 background-size:宽px 高px;

6.元素阴影: box-shadow:0 0 10px linear; 加 inset 是内阴影

7.单行文字处理:
overflow: hidden; /*自动隐藏文字*/
text-overflow: ellipsis;/*文字隐藏后添加省略号*/
white-space: nowrap;/*强制不换行*/
word-break: break-word;/*多行文字超出宽度强制换行*/

8.p:nth-of-type(n){
color:red;
}

9.图片纵向对齐:
vertical-align: top;

10.Xcode ios模拟器快捷键:
Cmd+1/2/3 可以切换模拟器的显示比例。
Option+Shift 可以在模拟器中调出双指拖动效果。
Option 可以在模拟器中调出双指放大缩小效果。
command+Shift+H 模拟器的Home键。
Cmd+向左箭头/向右箭头切换横竖屏。

11.CSS没有滚动条:
::-webkit-scrollbar {
display: none;
}

12.做一个横向滚动的ul:
ul{
overflow-x: auto;
white-space: nowrap;
}
/// ul li{ list-style:none;float:left; }
13.绝对定位的居中布局方式:
left:50%; margin-left:-宽度的一半;
CSS:
要布局的元素:{
width:60px;
// height:20px;
position:absolute;
left:50%; //right:50%; 这里是50%固定值
margin-left:-30px; //margin-right:-30px; 元素宽度的一半,负值
}

14.正则表达式

test()是RegExp的方法，参数是字符串，返回值是boolean类型。
match()是String的方法，参数是正则表达式，返回值是数组。

^[\u4E00-\u9FA5\w\d]+$/u
\u4E00-\u9FA5 表示中文
\w 表示字母及下划线
\d 表示数字
注意：要让这个正则生效,你的网页必须是UTF-8编码,否则中文部分无效

15.
CSS selector level 3规范中定义了一些和文档层级结构有关的连接选择器（或称组合选择器），
分为后代选择器（Descendant combinator/Child combinators）和同级选择器（Sibling combinators）：

其中后代选择器分以下3个：
1. 空格。div p: 表示p是div的后代元素, div是p的祖先。该选择器选择所有div下的p后代元素。
2. 箭头（>）。表示直系关系。div > p 表示div的儿子辈的元素。
3. 星号（*）。表示隔代关系。div * p表示div的孙子辈及之后的元素。
同级选择器分为以下2个：
1. 加号（+）。表示紧随关系。h1 + h2: 表示紧跟在h1后面的h2元素。
2. 波浪号（~）。表示后续关系。h1 ~ h2: 表示和h1元素同在一个父元素下的后续h2元素（中间可以隔着其他元素）。

16.
通过document.forms，Form.elements，document.styleSheets, Select.options，document.getElementsByName ，
document.getElementsByTagName ，childNodes/children 等方式获取的是集合HTMLCollection，NodeList等。

17.
jQuery remove() 方法
jQuery remove() 方法删除被选元素及其子元素。
jquery empty() 方法删除被选元素的子元素

18.
数组5中常用方法: arr.indexOf() arr.filter(function(item){}) arr.map() arr.forEach(function(item,index){}) arr.reduce()
(参见:http://caibaojian.com/5-array-methods.html)

19.
rem等比例适配屏幕 rem (font size of root element)
举个例子:
html{
font-size:20px;//根html里设置font-size,以后的元素直接根据这个值进行宽高设置,改变这个值,样式自动改变.
}
.btn {
width: 6rem;
height: 3rem;
line-height: 3rem;
font-size: 1.2rem;
display: inline-block;
background: #06c;
color: #fff;
border-radius: .5rem;
text-decoration: none;
text-align: center;
}

20.
stringObject.substr(start,length) //start--开始位置,,,length--截取长度注意是长度
substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。(javascript方法)
<script type="text/javascript">
var str="Hello world!"
document.write(str.substr(3,7)) //lo worl
</script>

==================
split() 方法用于把一个字符串分割成字符串数组。
如: var param=window.location.search; //获取URL后带的参数
var paramA=decodeURI(param.substr(1).split("&")); //获取的内容包括?,,所以从截取除了他之后的内容,并以&进行把字符串分割成字符串数组

21.
判断是否是在微信上打开:
<script type="text/javascript">
//判断是否是在微信上打开
// function is_weixn(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
//在微信中打开
your code;
} else{
your code;
}
// }
</script>

这里有个更全的多端判断:http://www.cnblogs.com/leejersey/p/4704837.html

22.
获取元素的index(索引),要把获取的代码放在事件里,类似获取的还有很多都是放在事件里面,不能提前定义
$(".txt").mouseover(function(){
var index=$(".txt").index(this);
console.log(index);
});

23.
HTML5新特新除了canvas video audio 还有一套可以突破浏览器沙盒限制File System API(文件系统API),可以实现对本地文件的读写!!!!!
案例:http://blog.csdn.net/zdavb/article/details/50266215
1.文件读取:
文件读取要利用到的API是FileReader，在HTML中的元素为：
<div>
<input type="file" id="files" style="display:none" οnchange="import();"/>
<input type="button" id="import" value="导入"/>
</div>
HTML中元素就这么简单，首先需要一个file类型的input元素，这里为啥要display:none呢？因为这个东西太丑了，，
JS代码：
$("#import").click(function(){//点击导入按钮，使files触发点击事件，然后完成读取文件的操作。
$("#files").click();
});

function import(){
var selectedFile = document.getElementById("files").files[0];//获取读取的File对象
var name = selectedFile.name;//读取选中文件的文件名
var size = selectedFile.size;//读取选中文件的大小
console.log("文件名:"+name+"大小："+size);

var reader = new FileReader();//这里是核心！！！读取操作就是由它完成的。
reader.readAsText(selectedFile);//读取文件的内容

reader.onload = function(){
console.log(this.result);//当读取完成之后会回调这个函数，然后此时文件的内容存储到了result中。直接操作即可。
};
}
注:这样，读取本地文件的操作就完成了。有些网友说什么使用ActiveXObject的什么的，这个只有在IE中才能使用，但是现在连微软都放弃了IE，所以，不要这样使用。

2.写入文件
写入文件稍微复杂了一些，虽然在HTML5中与FileReader相对应的也有一个FileWriter，但是这个东西用起来实在是不爽，至少我查了大半天，没有找到一个可以用的API，此外，FileReader可以被Chrome、FF和Safari都支持。当然了，要求一定版本以上的。
但是FileWriter似乎只有被Chrome支持。不管了，能用就好。
//首先导入一个Js文件,,这里使用bootstorp的cdn
<script src="//cdn.bootcss.com/FileSaver.js/2014-11-29/FileSaver.js"></script>
//HTML中添加一个导出元素
<input type="button" id="export" value="导出"/>
//JS文件
$("#export).click(function(){
var content = "这是直接使用HTML5进行导出的";
var blob = new Blob([content], {type: "text/plain;charset=utf-8"});
saveAs(blob, "file.txt");//saveAs(blob,filename)
});

24.
js监听浏览器刷新和关闭页面的事件:onbeforeunload()

25.
js原生方法set()去重: 比如数组去重
var arr=[1,1,1,2,3,4,53,43,44,3,3,3];
arr=Array.from(new Set(arr));// [1,2,3,4,53,43,44,3]
console.log(arr);

26.
网页自动刷新的两种方法: 更多的详见 http://www.jb51.net/article/14397.htm

head中使用meta: <meta http-equiv="refresh" content="20;url=http://www.jb51.net">
其中20指隔20秒后跳转到http://www.jb51.net页面

js:
<script language="JavaScript">
function myrefresh()
{
window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>

27.
js 数组的各种方法 http://blog.163.com/sammer_rui/blog/static/846200442010717900634/
如:选取已有数组的指定元素并返回用slice(start,end) 参数为负则从最后查,-1即最后一个 -2即倒数第二个....

28.
form 表单要添加 enctype="multipart/form-data" 属性才能上传文件。
<form class="form" method="post" enctype="multipart/form-data">
<input type=“file” name=“”>
</form>

29.
css3才有的background-size,,,他有几个值
cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。
背景图像的某些部分也许无法显示在背景定位区域中。
contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。 (实例见w3School)
如果纯粹的 background-size:100%,100%; 图片会随着包含他的div拉伸变形,所以可以改写为background-size:cover;(也可以试试contain)
IE低版本要处理兼容性

30. 一种居中方法:
position:absolute;
left:50%; // <-------------------
top:10%; // |
transform:translate(-50%,0);// <--
-webkit-transform:translate(-50%,0);

31: jquery UI实现元素拖拽 http://blog.csdn.net/lgh2626/article/details/7951010
原理:
首先要明确几个概念。
　　ource：拖拽源，要拖动的元素。
　　taerget：拖放目标，能够放入source的容器。
拖拽的动作分解如下：
　　1. drag start：在拖拽源(source)上按下鼠标并开始移动
　　2. drag move: 移动过程中
　　3. drag enter: 移动进入目标(target)容器
　　4. drag leave: 移出目标(target)容器
　　5. drop: 在目标(target)容器上释放鼠标
　　6. drag end: 结束
在HTML5之前，页面元素不直接支持拖拽事件。所以都是通过监听鼠标事件并记录拖拽状态的方式来实现拖拽功能。

1.一个简单的直接拖拽例子
1.jQuery 2.jQuery UI 3.$( "div" ).draggable();//div可以拖拽
2.拖动到另一个容器
应用droppable函数
4.$("p").droppable();//p作为容器装拖进来的元素
3.事件监听和回显（Feedback）
运行上一个例子，你可能会产生疑惑，真的放到目标容器上了吗？用户也会产生同样的疑惑。所以，可以监听拖动过程中发生的一些事件，并用可见的方式让用户知道。这就叫做回显（Feedback）。

对于源（source)，可以监听的事件包括：

　　create: 在source上应用draggable函数时触发
　　start：开始拖动时触发
　　drap：拖动过程中触发
　　stop：释放时触发
对于目标（target）,可以监听的事件包括：
　　create: 在target上应用droppable函数时触发
　　activate：如果当前拖动的source可以drop到本target，则触发
　　deactivate：如果可以drop到本target的拖拽停止，则触发
　　over：source被拖动到target上面
　　out：source被拖动离开target
　　drop：source被释放到target
事件处理函数都是通过draggable和droppable函数的参数传递，在这些事件处理函数中就可以进行Feedback。
$( "#dragsource" ).draggable({
start: function(event,ui) {
$(this).find("p").html(":-S");
},
stop:function(event,ui){
$(this).find("p").html(":-|");
}
});
4.复制拖动
5.拖动控制方向(控制在x,y轴上拖动)
$(function() {
$("#dragX").draggable({axis:"x"});
$("#dragY").draggable({axis:"y"});
});
6.拖动范围
除了方向之外，还可以通过containment参数约束拖动的范围。该参数接受Selector, Element, String, Array类型。
其中String可以为parent,document,window，Array是指定一个矩形区域（regin）的四元数组：[x1,y1,x2,y2]。
$(function() {
$("#draggable1" ).draggable({containment: "parent" });
$("#draggable2").draggable({containment: [20,20,300,200] });
});
7.拖动吸附
还可以在拖动的时候吸附到其他元素或网格。使用snap参数指定要吸附到的元素，使用grid参数指定吸附到网格
$(function() {
$("#draggable1").draggable({ snap: true });
$("#draggable2").draggable({ snap: "#container"});
$("#draggable3").draggable({grid: [30,30]});
});
小结:JQuery UI提供了强大的拖拽功能和良好的用户体验，同时又非常容易使用。http://blog.csdn.net/lgh2626/article/details/7951010

31. jQuery的拖动轮播图（支持触屏）

32. setTimeout(function(),1000);
^ 这里是个方法或者方法名

33. parseInt()会将字符串转换为整数,遇到小数则只要小数前面的,这样处理计算不准确.
所以以后遇到小数字符串转换要用parseFloat();

34. jQuery对象和DOM对象: https://zhidao.baidu.com/question/192875376.html
var domObj = document.getElementById("id"); //DOM对象
var $obj = $("#id"); //jQuery对象;
===========
$("#foo").html(); //获取id为foo的元素内的html代码，html()是jQuery特有的方法;
上面的那段代码等同于:
document.getElementById("foo").innerHTML;

使用jQuery语法得到的都是jQuery对象,但是数组对象中存储的元素却是dom对象.如果要使用jQuery对这些元素做处理,需将其转换为jQuery对象:即$(元素)

35. 想要找到一个元素,可以使用find()方法
find() 方法返回被选元素的后代元素，一路向下直到最后一个后代
$(".p").find("p_child");

36. toFixed(n)
javascript中的toFixed(n)方法可以处理数值类型强制保留n为小数:
var i=2; i.toFixed(3); console.log(i); //2.000

37. $(selector).slideUp(speed,callback)
jQuery的slideUp() slideDown()将执行一个显示与隐藏动画; speed:必选的速度参数, callback执行完动画的回调函数

38.  include是SSI（Server Side Include)，#include命令的文件必须使用映射到SSI解释器的文件扩展名;否则，Web 服务器将不处理该命令。
在html中不支持include,想达到这样的效果，可以使用iframe标签:
<iframe frameborder=0 border=0 width=300 height=300 src="b.htm" mce_src="b.htm"></iframe>

39. 移动端的一些滑动和滑动动画可以通过swiper.js完成 http://www.swiper.com.cn/

40. var t=setInveral("function()",5000); 每隔5秒执行一次function(),直至clearInveal(t);
注意:定时器用在$(document).ready(function(){});里面会报找不到function;

41. js闭包就是能够读取其他函数内部变量的函数可以把闭包简单理解成“定义在一个函数内部的函数” f2()
闭包可以用在许多地方。它的最大用处有两个,一个是提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。
http://www.jb51.net/article/24101.htm
function f1(){
　　　　n=999;
　　　　function f2(){
　　　　　　alert(n);
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999

42. js修改元素的浮动元素.style.cssFloat 想其他的可以:元素.style.color 元素.style.marginTop 元素.style.textAlign

43. 元素浮动之后记得清除浮动 float:left; clear:both;

44. cssText 元素.style.cssText="float:right; background:rgb(43, 55, 160);";

45. 更好的使用jQuery:http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html
1. 比如:有一个表格（table元素），里面有100个格子（td元素），现在要求在每个格子上面绑定一个点击事件（click），请问是否需要将下面的命令执行100次？
　　$("td").on("click", function(){
　　　　$(this).toggleClass("click");
　　});
回答是不需要，我们只要把这个事件绑定在table元素上面就可以了，因为td元素发生点击事件之后，这个事件会"冒泡"到父元素table上面，从而被监听到。
不需要在子元素上绑定100次，从而大大提高性能。这就叫事件的"委托处理"，也就是子元素"委托"父元素处理这个事件。
$("table").on("click", "td", function(){
　　　　$(this).toggleClass("click");
　　});
更好的写法，则是把事件绑定在document对象上面。
　　$(document).on("click", "td", function(){
　　　　$(this).toggleClass("click");
　　});
如果要取消事件的绑定，就使用off()方法。
　　$(document).off("click", "td");

2.选中某一个网页元素，是开销很大的步骤。所以，使用选择器的次数应该越少越好，并且尽可能缓存选中的结果，便于以后反复使用。
jQuery('#top').find('p.classA');
　　jQuery('#top').find('p.classB');
更好的写法是：
　　var cached = jQuery('#top');
　　cached.find('p.classA');
　　cached.find('p.classB');

3.插入html代码的时候，浏览器原生的innterHTML()方法比jQuery对象的html()更快。
4.javascript原生循环方法for和while，要比jQuery的.each()方法快，应该优先使用原生方法。

46. 元素标签中加 title="" 后,在压面加载后鼠标悬浮上会提示title中的内容

47. js中reverse() 方法用于颠倒数组中元素的顺序

48. JS查看Object对象的内容 http://blog.csdn.net/tfy1332/article/details/46742285

49. js获取浏览器宽高: var device_width=document.body.clientWidth;
var device_height=document.documentElement.clientHeight;

50. CSS3过渡:
transiton: 过渡属性过渡所需要时间过渡动画函数过渡延迟时间；

liner ：匀速
ease-in：减速
ease-out：加速
ease-in-out：先加速再减速
cubic-bezier：三次贝塞尔曲线

51. input type='checkbox'或者是'radio',为了让用户点击后面的字也可以选择input,则:
<label for="这里的值等于input的id值">
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>

52. css:最小高度:min-height:100%; table只能设置margin td只能设置padding

53. css font-family中文字体: 更多见: http://www.xwbetter.com/font-family/
宋体 SimSun 黑体SimHei 微软雅黑 Microsoft YaHei
微软正黑体 Microsoft JhengHei 新宋体NSimSun
新细明体 PMingLiU 细明体MingLiU
标楷体 DFKai-SB 仿宋FangSong
楷体 KaiTi 仿宋：FangSong 华文仿宋：STFangsong
华文楷体：STKaiti 仿宋：FangSong

54. transition: all 0.4s ease;全局css动画延迟0.4秒(CSS3)
exp:
.postTitle a:link, .postTitle a:visited, .postTitle a:active {
color: #21759b;
transition: all 0.4s linear 0s;
}

55. http://www.cnblogs.com/Songyc/p/4458570.html
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。
1.语法：这个方法没有参数。
rectObject = object.getBoundingClientRect();
2.返回值类型：TextRectangle对象，每个矩形具有四个整数性质（上，右，下，和左）表示的坐标的矩形，以像素为单位。
　rectObject.top：元素上边到视窗上边的距离;
　rectObject.right：元素右边到视窗左边的距离;
　rectObject.bottom：元素下边到视窗上边的距离;
　rectObject.left：元素左边到视窗左边的距离;

56.点击切换元素状态,举例:
<script type="text/javascript">
$(".more").click(function(){
var item_top=$(this).prev();
var divIntroduce=item_top.children('.divIntroduce');
var introduce=divIntroduce.find('.introduce');
var introduceHide=introduce.hasClass('hide');//主要,返回true/false
if(introduceHide){
introduce.removeClass("hide");
$(this).find("span:eq(0)").text("收起");
$(this).find("span:eq(1) img").attr("src","img/other_img/up.png");
}else{
introduce.addClass("hide");
introduce.first().removeClass('hide');
$(this).find("span:eq(0)").text("更多");
$(this).find("span:eq(1) img").attr("src","img/other_img/down.png");
}
});
</script>

57. filter()
这里说一下jQuery的filter()方法,,作过滤用, 你可以用它找出( return $(this); )指定的元素,再给这个元素加效果等操作
filter()很好用详情见 w3c

点击指定图片后,页面滚动到指定对应位置: 这里jQuery的offset().top很好用
$(".banklist table td a").click(function(){
var thisClass=$(this).attr("class");
// var thisClassOffTop=$(this).offset().top; //
var flag=$(".images img").filter(function(index){//这里用到jQuery的循环过滤,并在回调里返回指定的元素
if ($(this).attr('data-name') == thisClass) {
return $(this);
}
}).offset().top;//这里直接获取返回元素的offsetTop 是数值类型
$("body,html").animate({scrollTop:flag+'px'},400);
});

58. HTML5 WEB存储--localstorage
存储数据的方法就是直接给 window.localStorage 添加一个属性，例如：window.localStorage.name 或者 window.localStorage["name"]。

1.设置setItem
2.读取getItem
3.删除removeItem
4.全部清除clear

1.获取localStorage的长度：window.localStorage.length
2.添加/编辑localStorage的内容：window.localStorage.setItem(键,值);
3.根据对应的索引去获取对应localStorage的key的值：window.localStorage.key(索引);
4.根据对应的key获取对应的的value：window.localStorage.getItem(key);

localStorage.name = 'jack';
localStorage.getItem('name'); // jack
localStorage.setItem('name','tom'); // 重新覆盖，变为了tom了
localStorage.setItem('age','18');
localStorage.getItem('name'); // tom
localStorage.getItem('age'); // 18
localStorage.removeItem('name');
localStorage.getItem('name'); // 已经被清除了null
localStorage.getItem('age'); // 18
localStorage.clear(); // 清除了所有
localStorage.getItem('age'); // null

数据究竟保存到哪里了呢,看这里:http://www.jb51.net/html5/435192.html

需要注意的是：这里的存储不同于cookie，没有时间限制。

59.一种字体: html{font-size:12px; font-family: Ubuntu, simHei, sans-serif;} p{ font-size:2rem; }

60. jquery可以通过setInterval()实现帧动画,,但是会有bug,,,可以该用reqeustAnimationFrame(),jq3.X版本支持

61. jq resize()
当调整浏览器窗口的大小时，发生 resize 事件。$(selector).resize(function(){});

62. 路径问题:
./SRC/ 这样写表示，当前目录中的SRC文件夹；
../SRC/ 这样写表示，当前目录的上一层目录中SRC文件夹；
/SRC/ 这样写表示，项目根目录（可以只磁盘根目录，也可以指项目根目录，具体根据实际情况而定）

63. flex布局: (弹性布局)
父元素:displat:flex; 子元素1:flex:1; 子元素2:flex:1; 可以使两个子元素直接左右平分父元素宽度
当然也可以子元素1:flex:1; 子元素2:flex:2; 子元素3:flex:1;

若想div上下左右居中,父元素:display:flex; 子元素:margin:auto auto;

64. 一张很宽的设计好的图片,做成网页:切好图,写对应切片个数的div,div宽度可能没图片宽度大,把切片当做div的背景图:background:url(XXXXX.jpg) center no-repeat;也可以是background:url(XXXXX.jpg) no-repeat;background-position:center;
这样的话,图片的中间主题位置在div的中间位置

65. :animated
通过 :animated 选择器可以找正在发生animate动画的元素,,,详情百度
$(selector).is(':animated')

66. 图片懒加载:

// 图片懒加载
var lazy_load = function(img, src){
var image = new Image();
image.src = src;
image.onload = function(){ img.src = src; };
};
$('.goods-image').each(function(idx,item){
var src = $(item).attr('data-src');
lazy_load(item, src);
});

67. js 获取事件:event || window.event
获取触发事件的元素: e.target || e.srcElement
举例:点击指定的li弹出他自己的内容:
var oUl=document.getElementsByTagName('ul')[0],
aLi=oUl.getElementsByTagName('li'),
i=0;
for(i=0;i<aLi.length;i++){
aLi[i].οnclick=function(event){
var e=event||window.event;//获取事件
var ele=e.target||e.srcElement;//获取触发事件的元素
if(this===ele)//如果这个元素就是触发事件的元素
alert(ele.innerHTML);//弹出他的内容
}
}

68. 事件委托 on() 当元素是动态添加的时候,直接向他绑定事件是无效的,所以用事件委托.那么这个元素是js操作DOM加的,要把事件绑定到已经存在的一个他的父元素上,比如肯定会有的body,document,html等
例如: $(document).on("click","类名/元素/id",function(){ XXXXX });

69. jq 的prop() 和 attr() 都是进行元素的属性设置的方法,区别是prop()是对元素原本自带的属性(如:select中option的selected,input的checked,用prop可以兼容ios;在ios中用attr()设置属性会有兼容问题)的设置,而attr()可以对自定义的属性进行设置.

70. 原生js提供了类似jQuery选择器的API,
1.querySelector()查找单个元素
2.querySelector()查找多个元素,返回nodelist集合
()中的参数必须是合法的css选择语法,此API不能查找伪类比如querySelector(':hover')不会得到预期结果
此API兼容到IE8+

71. js中setInterval(function(){},time)与setTimeout(function(){},time)
两者都是js中的延时函数,区别是setTimeout()是在延时后执行一次,,而setInterval()是在一定时间内重复执行

72. 使用swiper做pc或移动端滑屏效果时候,,一定记住 .swiper-container 的高度为100%,,,另外这个container一定要紧挨着<body>在其下面,, 严格按照官网的dom结构书写自己的结构

73. 自定义浏览器滚动条css: ::-webkit-scrollbar{width:7px;height:7px;} —-> 设置滚动条的宽高
::-webkit-scrollbar-thumb{border-radius:1em;background-color:rgba(50,50,50,0.3);} —-> 设置滚动条的圆角和颜色
::-webkit-scrollbar-track{box-shadow: inset 0 0 6px rgba(0,0,0,0.3);} —-> 设置滚动条轨道的背景颜色

::selection{background: #fe7300;color: rgba(255,255,255,0.8);} 浏览器选中文本时候的背景色和文字颜色

74. 对一类元素进行each时, 如:$(".show").each(function(index,item){ ...code }) ; 这里的item是循环出来的每一项(可以console看看,这是个html结构,,注意:这样写可以利用jQuery获取属性等想要的东西 : $(item) ,,,,,这个$(item)直接可以用jq的方法 )

each() 也可以这么写 var error_arr =......;
$.each(error_arr, function (k, v) {
$(k).addClass("note").text(v);
error_msg = false;
});

75. 注意js原生的这几个方法: split() splice() replace()
split() 吧数组以规定的字符或正则分割 hello | nihao.split("|") ==> hello niaho
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。 arrayObject.splice(index,howmany,item1,.....,itemX)
replace() replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。(这个厉害了,看看文档吧还是,结合正则牛奔)

76. 用push只是把数据存入数据，怎么实现存在数组里的数据是键值对的形式？
arr.push(
{key : value},
{sex : w_m},
{birth : m_birth},
{final_val :final_val}
);

arr = {
joinNo:p_num,
companyName : comp_name,
workersNo : scale,
birthdayWelfare: birthdayWelfare,
cityName : c_city,
countyName : area,
address : detail,
place : pinchang,
userName : people,
mobile : mobile,
remark : remark,
salesman:salesman
};

77. js实现文字滚动公告效果:

<div id="demo">
<div id="demo1">
<p>x***y ：作为一名金牛，最大的理想就是躺在钱堆里数钱。（最好出个栗子系列的，因为也是黄灿灿的）啊~ 能出个今年躺在钱堆的系列吗，我肯定下手买的~~</p>
<p>S**ny ：我是金牛座的，可是也有白羊座的激情四射，能不能用提拉米苏裱出来的钱浪，让我在这个钱的海洋里面游泳吧。或者可以搞个金牛拿个叉棘站在钱海里，太威武了</p>
<p>dek**y ：我，大金牛，一般的礼物不会入我金眼，因为我只想要$$$$$$$$</p>
<p>ice*iek ：钱钱钱（奢侈品）蛋糕</p>
<p>li**y ：难道你不爱钱？</p>
<p>Ci**d ：别把我们大金牛想得辣么俗气，我们也是有品位的啊，我们除了money，还有超凡的艺术细胞，手工与艺术的完美演绎</p>
<p>sa**dy：金牛是个吃货且爱$，所以给我的生日蛋糕一定要这2者的完美结合，哈哈哈哈～</p>
</div>
<div id="demo2"></div>
</div>

function t(){
if( demo2.offsetHeight - demo.scrollTop <= 0 ){
demo.scrollTop = demo1.offsetHeight;
}else{
demo.scrollTop++
}
}
var tt = setInterval(t,speed);

demo.onmouseover = function(){ clearInterval(tt) };
demo.onmouseout = function(){ tt = setInterval(t,speed); };

</script>

78. js 数组去重

// 数组去重
Array.prototype.unique3 = function(){
var res = [];
var json = {};
for(var i = 0; i < this.length; i++){
if(!json[this[i]]){
res.push(this[i]);
json[this[i]] = 1;
}
}
return res;
}
var arr = [1,1,1,32,4,5,4,6,45,'你好','我好'];
console.log(arr.unique3());

79. JS 将表格table导出excel
function tableToExcel(id)
{
var tb = document.getElementById(id);
var html = '<html><head><meta charset="UTF-8"></head><body><table>' + tb.innerHTML + '</table></body></html>';

html = window.btoa(unescape(encodeURIComponent(html)));

var uri = 'data:application/vnd.ms-excel;base64,' + html;
window.location.href = uri;
}

80.主流浏览器支持预算元素背景模糊:
filter: blur(10px);
-webkit-filter: blur(10px);
-moz-filter: blur(10px);
-o-filter: blur(10px);
-ms-filter: blur(10px);
filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius="4")

81. 设置浏览器cookie:
var setCookie = function(name,value,time,path,domain) {
var exp = null;
if(typeof(time) != "undefined") {
exp = new Date();
exp.setTime(exp.getTime() + time*1000);
}
var str = name + "=" + escape(value);
if(exp != null) {
str += ";expires=" + exp.toGMTString();
}
if(path) {
str += ";path="+path;
}
if(domain) {
str += ";domain="+domain;
}
document.cookie = str;
}
setCookie("PROMOTION_SOURCE_ID",'8036',60 * 60,"/","lecake.com");

82. 点击元素之外,元素隐藏:
$(document).click(function (e) {
e = window.event.srcElement || window.event.target;
if (e.className != 'current' && e.className != 'current_span' && e.className != 'discount') {
$('ul.sel_ul').hide();

}
});

放一些收集的前端知识点上来,方便查阅相关推荐

前端知识点总结——JS高级（持续更新中）
前端知识点总结--JS高级(持续更新中) 1.字符串什么是: 连续存储多个字符的字符数组相同: 1. 下标 2. .length 3. 遍历 4. 选取: slice(starti[, endi] ...
「划线高亮」和「插入笔记」—— 不止是前端知识点
如今前端领域:serverless,low code,全栈化等概念遍布漫天.开发者们热衷于讨论「如何把前端格局做大」,「如何将高高在上的概念落地」.此时,你有没有感受到「还不知道发展方向到底是什么,就 ...
前端知识点总结——H5
前端知识点总结--H5 1.html5新特性 (1)新的语义标签 (2)增强型表单* (3)音频和视频 (4)Canvas绘图 (5)SVG绘图 (6)地理定位 (7)拖动API (8)Web Wor ...
前端知识点HTML+基础JS总结
前端知识点要概 1.基本类型和引用类型基本类型:Number, String, Null, Undefined, Boolean, Symbol(ES6数据类型) 引用类型:Object.Array ...
前端知识点总结—-响应式
前端知识点总结--响应式 1.Responsive Web Page:响应式网页/自适应的网页2010年提出, 一个网页,会自动根据用户浏览设备不同,自动必变布局,可以被PC/PAD/PHONE 正常 ...
bom event周期_前端知识点总结——BOM
前端知识点总结--BOM 1.BOM: Browser Object Model 什么是: 专门操作浏览器窗口的API 没有标准, 导致浏览器兼容性问题包括: window history loca ...
前端知识点回顾——HTML，CSS篇
前端知识点回顾篇--是我当初刚转行为了面试而将自己学过的前端知识整理成的一份笔记,个人目的性很强,仅供参考. doctype 有什么用 doctype是一种标准通用标记语言的文档类型声明,目的是告诉标 ...
分享一张前端知识点思维导图
前端知识点梳理
web前端知识点太多_前端知识点总结——框架中报错集锦（含解决方法）
前端知识点总结--框架中报错集锦(含解决方法) 1.vue 1.指定template直接返回多个标签 Component template should contain exactly one roo ...

放一些收集的前端知识点上来,方便查阅

放一些收集的前端知识点上来,方便查阅相关推荐

最新文章

热门文章