放一些收集的前端知识点上来,方便查阅
2017-06-08 18:04
183 查看
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(functi
14a0b
on(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" onchange="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 file="b.htm" --> 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].onclick=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实现文字滚动公告效果:
<style>
#demo{
height: 20px;
width: 300px;
overflow: hidden;
border: 1px solid red;
}
</style>
<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>
<script>
var demo = document.getElementById('demo'),
demo1 = document.getElementById('demo1'),
demo2 = document.getElementById('demo2'),
speed = 100;
demo2.innerText = demo1.innerText;
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();
}
});
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(functi
14a0b
on(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" onchange="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 file="b.htm" --> 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].onclick=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实现文字滚动公告效果:
<style>
#demo{
height: 20px;
width: 300px;
overflow: hidden;
border: 1px solid red;
}
</style>
<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>
<script>
var demo = document.getElementById('demo'),
demo1 = document.getElementById('demo1'),
demo2 = document.getElementById('demo2'),
speed = 100;
demo2.innerText = demo1.innerText;
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();
}
});
相关文章推荐
- 收集一些有价值的前端知识点
- asp 收集的资料了,为了方便查阅。
- asp 收集的资料了,为了方便查阅。
- 用dwz时, 由于粗心产生的一些问题(记录方便自己查阅)
- 知识点要做好记录,方便以后自己查阅
- 收集夹(收集一些前端开发的小工具)
- 最近加入了控件开发团队,发现一些基础的东西,转发上来方便大家学习(转)
- 【猪猪-前端】收集了30个div+css后台模板,方便大家日常开发使用,简洁易用一贯原则。
- 小知识点,方便以后查阅
- 收集的一些前端Bug概要。先记上一笔!(二)
- 学习前端一些知识点(二)
- 在做一个小网站的一些心得与遇到的问题总结,为以后方便查阅。
- c#、js、java常用语句收集【自用,方便查阅】
- [note]贴一些常用的串指令,方便查阅
- 收集的计算机编程电子书目录,仅供日后查阅方便
- asp 收集的资料了,为了方便查阅。
- asp 收集的资料了,为了方便查阅。
- 收集的一些轻量级非常实用的前端开发小工具
- 移动Web 开发中的一些前端知识收集汇总
- 收集关于前端的一些网站、博客资源、框架、源码等 、 会持续更新哦!!!!!