前端技术

10 Nov 2016 - NanJing

jquery

//添加样式
$("#cpcode").removeAttr("disabled");
$("#cpcode").attr("disabled","");

$("#groupFiltera").css("visibility","hidden");
$("#groupFiltera").css("visibility","visible");

$().toggleClass("on")

$(".confirm").click(function() {
	$(".shade").hide();
	$(".change_content1").hide();
});

//$("#dataList tr[name='checkItem']:.trSelected")
var $checkBox = $("#dataList .trSelected");

//css选择器
#id
.class
.class1.class2{}
div p{}
.class2, class2{}

append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容
html();
$("#dataList").empty();
$().remove()

//获取值
$("#tr").attr("data-prid");
$("#input").val();

//遍历
var $checkBox = $("#dataList tr[name='checkItem']:.trSelected");
var procIds = [];
$checkBox.each(function() {
	procIds.push($(this).attr("data-procid"));
});

//绑定事件
$("#modify").click(_redobd);
$(".confirm").click(function() {
	$(".shade").fadeOut(500);
	$(".pass_content").fadeOut(500);
	_resendcommit();
});
$("#bdtypecode").off('change').on('change',_bdservtypeChange);
$('.searchbar input').keypress(function (e) {
if (e.which == 13) {
		_queryData();
	}
});

//前端decode：内容选择器
$('td:contains(" 女 ")').css('background' , 'blue');
$('td:empty').html('无');
$("td:contains('0')[innerHTML='0']").removeAttr('name');
//精确匹配
var $option =$("td:contains('null')").map(function(){
	if ($(this).text() == "null") {
		return this;
	}
);
$option.html('空');

$("div span") div下所有span
$("div > span")div下直接子元素
$("div + p")匹配紧接在div元素后的第一个p元素，同级 
$("div ~ p")匹配紧接在div元素后的所有p元素 
$("p:not(.del)").css("color","red");
:even : 匹配偶数索引值的元素
:odd  : 匹配奇数索引值
:eq(index) : 匹配一个给定索引值的元素
:gt(index) : 匹配所有大于给定索引值的元素
$("div:has(p)").css("color","red");
$("div:parent").css("color","red");匹配含有子元素或者文本的元素，与empty相反
$("div[class!='myDiv']").css("color","red");
$("div[class^='my']").css("color","red");
[attribute$=value] : 匹配给定的属性是以某些值结尾的元素
[attribute*=value] : 匹配给定的属性是以包含某些值的元素

//显示 隐藏
fadeIn(500);
fadeOut(500);
show()
hide()
$("p").toggleClass("main");
$("p").toggle();
jQuery animate() 方法允许您创建自定义的动画。
slideDown()
slideUp()
slideToggle()

document.cookie="docName"+"="+($("input id='docName']").val()+";path=/");

CSS

	//css控制内容不超宽度
	td { 
		width:50px; 
		white-space:nowrap; 
	text-overflow:ellipsis; 
	overflow: hidden; 
}

	//遮罩
	.shade {
	display: none;
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	background-color: #000;
	opacity: 0.6;
	filter: alpha(opacity=60);
	-ms-filter: "alpha(opacity=60)";
	z-index: 999;
	}

	//盒子模型
	//定位
div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为
一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行
内元素”，这是因为它们的内容显示在行中，即“行内框”。
CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中
的元素的位置由元素在 (X)HTML 中的位置决定。
CSS position 属性：
static   relative absolute   fixed

css相对定位
绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相
对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为
元素的位置相对于它在普通流中的位置。

css浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个
浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得
就像浮动框不存在一样。

inline：块级元素转行内元素
block：1、隐藏元素显示2、转块级元素
inline-block：两者都包含

js数组

var colors = ["abc", "b", "d"];
for(var i = 0; i < arr.length; i++){//数组长度多长，就遍历多少次。  循环变量作为数组的下标
  console.log(arr[i]);
}
for (var index in arr) {
  console.log(num);  //循环输出： 0 1 2 3 4 5
}
//这里var 关键字也是可以省略的，但是不建议省略。
for(i in arr){
  console.log(arr[i]);
}

===数组转换===

  var arr = [50, 20, 10, 5, 15, 6];
  aalert(arr.toString());  //  50,20,10,5,15,6
  aalert(arr);  //  50,20,10,5,15,6   当把一个对象直接给aalert，则会调用这个对象的toString方法，然后再输出。

	var arr = [50, 20, 10, 5, 15, 6];
    aalert(arr.join(","));   //  50,20,10,5,15,6


===栈操作数组===

  var arr = ["张三", "李四", "王五"];
  //向栈中添加元素(最后添加的元素肯定在栈顶)   数组中的元素："张三", "李四", "王五", "志玲"   
  var len = arr.push("志玲");   //push方法返回添加成功后的数组的长度
  aalert(len);  // 弹出：4
  arr.push("a", "b");  //也可以向在push方法中传入多个参数，这样每个参数都会添加到数组中。  栈顶元素是  "b"

  //pop出栈，一次只能出栈一个元素
  var item = arr.pop();  //把栈顶的元素从栈(数组)中移除。并返回移除的这个元素
  aalert(item); // 弹出：b

===队列操作数组===

  //把arr当做队列对待，那么 队列头部元素就是 "张三", 队尾元素就是 "王五"
  var arr = ["张三", "李四", "王五"];
  var firstItem = arr.shift();  //把队首元素从队列中移除，并返回移除的这个元素
  aalert(firstItem); //张三
  aalert(arr);  // 李四, 王五
  var len = arr.unshift("志玲");  //向队列头部添加元素，并返回添加成功后队列(数组)的长度
  aalert("数组长度：" + len);  // 数组长度：3
  aalert(arr);  // 志玲, 李四, 王五
  arr.unshift("a", "b");
  aalert(arr);  // a, b, 志玲, 李四, 王五

===js数组API===

//倒置  
    var arr = ["张三", "李四", "王五"];
    aalert("数组倒置前：" + arr); 
    //对数组元素进行倒置。
    arr.reverse();  
    aalert("数组倒置后：" + arr);  

//查找
    var arr = ["张三", "张三", "李四", "王五", "张三", "李四", "王五"];
    aalert(arr.indexOf("张三"));  // 0
    aalert(arr.lastIndexOf("张三"));  // 4

//合并
var newArray = arr1.contact(arrayX,arrayX,……,arrayX)

//截取 
    var arr1 = ["a", "b", "c", "d", "e", "f"];
    // 从下标为0的位置开始截取，截取到下标2，但是不包括下标为2的元素. 原数组没有任何的变化
    var newArr = arr1.slice(0, 2);
    aalert(newArr);// a, b
    aalert(arr1.slice(1, 4)); // b,c,d
    //从下标为2的元素开始截取，一直到最后一个元素
    aalert(arr1.slice(2));  //c,d,e,f
    //从倒数第5个元素，截取到倒数第2个
    aalert(arr1.slice(-5, -2)); // b c d

//删除    
    var arr1 = ["a", "b", "c", "d", "e", "f"];
    //因为第2个参数不为0，所以表示删除元素：从小标为1的位置开始删除，共删除2个元素。(2个中包括下标为1的元素)
    var deleted = arr1.splice(1, 2);    //返回值为删除的元素组成的数组
    //原数组
    aalert(arr1);  // a,d,e,f
    aalert(deleted); // b,c

//插入  
    var arr1 = ["a", "b", "c", "d", "e", "f"];
    //因为第2参数为0，所以表示添加元素：从下标为1的位置插入元素。其余的元素会自动向后移动
    var v = arr1.splice(1, 0, "m", "n");    // 因为是添加元素，所以返回的数组长度为 0
    aalert(v.length);  // 0
    aalert(arr1);    // a,m,n,b,c,d,e,f

//删除
  
    var arr1 = ["a", "b", "c", "d", "e", "f"];
    //因为第2个参数不为0，所以表示删除元素：从小标为1的位置开始删除，共删除2个元素。(2个中包括下标为1的元素)
    var deleted = arr1.splice(1, 2);    //返回值为删除的元素组成的数组
    //原数组
   aalert(arr1);  // a,d,e,f
   aalert(deleted); // b,c


//排序
function sortAsc(num1, num2){
	return num1 - num2;
}
var arr2 = [10, 8, 6, 20, 30, 15];
arr2.sort(sortAsc);

js对象

//http传参数
var o = {}; 
o.name = "Joey"; 
o.age = "27"; 
o.job = "ITE"; 

seajs模块化封装js

封装jquery

define(function () {

   //这里放置jquery代码 把你喜欢的jquery版本放进来就好了 

return $.noConflict();
});

引用：

define(function (require, exports, module) {
    var $ = require('./js/jquery');
  

   // $(document).ready(function () {
     //   $("tr").wyhinterlaced({ "odd": "red", "even": "blue" });
     //   $("tr").wyhhover();
   // })
});

自定义类封装：

define(function (require, exports, module) {

var $ = require("../js/jquery");


var weekday = new Array(7)
weekday[0] = "星期一";
weekday[1] = "星期二";
weekday[2] = "星期三";
weekday[3] = "星期四";
weekday[4] = "星期五";
weekday[5] = "星期六";
weekday[6] = "星期日";

function GetType(arg) {
...
}
exports.GetTime = GetTime;
})

调用：

define(function (require, exports, module) {
    var $ = require('./js/jquery');
    var a=require('./js/time');

    aalert(a.GetTime(3));
});

jquery插件模块化

define(function(require) { 

return function(jQuery) {
...
}//end of function

});

调用：

define(function (require, exports, module) {
    var $ = require('./js/jquery');
    require('./js/jquery_tr')($);//共享给jquery

    $(document).ready(function () {
        $("tr").wyhinterlaced({ "odd": "red", "even": "blue" });
        $("tr").wyhhover();
    })
});

前端优化

1、请求优化

图片延迟加载（尽量减少加载资源）
ajax局部加载数据
预加载（判断可能要的资源，尽量去提前多加载）

2、资源优化

资源压缩(uglify-js,clean-css)
- HTTP压缩，我们可以在web服务器内设置压缩输出的内容
- 对javascript代码，css样式代码进行语法压缩，减少文件大小
资源合并
- 可以把多个脚本合并到一个js文件内，然后统一引用它就能减少http请求
- 也可以在web服务器内做了处理，请求多个文件，会自动合并
图片合并csssprite
iconfont
引用优化（引用css放在<head>内，引用js放在</body>结束标签前）
单独域名存放资源

3、缓存

离线缓存（manifest）
本地存储localStorage

4、其他

css3替换js动画
替换flash

高效的jQuery代码编写技巧总结

http://gcdn.gcpowertools.com.cn/showtopic-28514-1-3.html

缓存变量，DOM遍历是昂贵的，所以尽量将会重用的元素缓存。
避免全局变量

// 糟糕
$element = $('#element');
h = $element.height();
$element.css('height',h-20);

// 建议
var $element = $('#element');
var h = $element.height();
$element.css('height',h-20);

使用匈牙利命名法，在变量前加$前缀，便于识别出jQuery对象。
使用 Var 链（单 Var 模式）
精简javascript

// 糟糕
$first.click(function(){
$first.css('border','1px solid red');
$first.css('color','blue');
});

// 建议
$first.on('click',function(){
$first.css({
'border':'1px solid red',
'color':'blue'
});
});

请使用‘On’，在之前的版本中 on() 就是 bind()
链式操作，jQuery实现方法的链式操作是非常容易的。下面利用这一点。
选择捷径

// 糟糕
function initVar($myVar) {
if(!$myVar) {
$myVar = $('#selector');
}
}

// 建议
function initVar($myVar) {
$myVar = $myVar || $('#selector');
}
// 糟糕
if(collection.length 0){..}

// 建议
if(collection.length){..}

优化选择符例如，Id选择符应该是唯一的，所以没有必要添加额外的选择符。
$.data()

// 糟糕
$('#id').data(key,value);

// 建议 (高效)
$.data('#id',key,value);

坚持最新版本，摒弃弃用方法（live）

前端面试

弹出层编辑功能自动填充表单获取参数提交布局两列
一个页面从输入 URL 到页面加载完的过程中都发生了什么事情
session cookie
页面性能优化
CSS基本功：布局、盒模型、选择器优先级及使用等
js对象
线上作品
前端安全
HTML+CSS
- 1、盒子模型，块级元素和行内元素特性与区别。
- 2、行内块的使用，兼容性解决。
- 3、清除浮动的方式以及各自的优劣。
- 4、文档流的概念、定位的理解以及z-index计算规则&浏览器差异性。
- 5、CSS选择器以及优先级计算。
- 7、遇到的兼容性问题与解决方法。
- 8、垂直水平居中的实现方式。
- 9、常用布局的实现（两列布局、三列适应布局，两列等高适应布局等 flex）。
Javascript
- 1、js调试
- 2、常用的浏览器内核。
- 4、String、Array常用方法。
- 6、DOM的默认事件、事件模型、事件委托、阻止默认事件、冒泡事件的方式等。
- 7、jQuery的bind、live、on、delegate的区别（考察点与上一条重叠，切入点不同）
- 8、304还是要发请求, cache-control只要不过期就不发请求直接读缓存。

ajax 文件上传、下载

使用ajax，ajax的返回值类型是json,text,html,xml类型，或者可以说ajax的发送，接受都只能是string字符串，不能流类型，所以无法实现文件下载，强用会出现response冲突。

var form=$("<form>");//定义一个form表单
form.attr("style","display:none");
form.attr("target","");
form.attr("method","post");
form.attr("action","exportData");
var input1=$("<input>");
input1.attr("type","hidden");
input1.attr("name","exportData");
input1.attr("value",(new Date()).getMilliseconds());
$("body").append(form);//将表单放置在web中
form.append(input1);

form.submit();//表单提交 

文件上传，可通过formdata（h5）实现。Jquery.form.js

安全

sql注入
xss http://www.cnblogs.com/glyx/p/5798096.html
csrf http://www.cnblogs.com/hyddd/archive/2009/04/09/1432744.html

js脚本（公文自动审批）

$("[data-ibiz-tag=SBSY]").click();
setTimeout(function(){$(window.frames["layui-layer-iframe3"].document).find('.radio-inline')[1].click();
$(window.frames["layui-layer-iframe3"].document).find('.ibiz-id-menuitem')[2].click();
$(window.frames["layui-layer-iframe3"].document).find('#okbtn').click();},3000)

var data = [];
var timer = setInterval(function(){
if(data.length>1000){
console.log(data);
clearInterval(timer);
}
$(".programName").each(function(){data.push($(this).html())});
$('.nextPageBtn').click();
},3000);

data.join("|")

应用

行首添加字段
sed 's/^/HEAD/g' test.file
行末添加字段
sed -i 's/$/,"1234567890"/g' content.csv

去除重复
echo "获取第一列含id...";
cat contentOLD.csv | awk -F "," '{print $1}' > id1.csv;
cat contentNEW.csv | awk -F "," '{print $1}' > id2.csv;
echo "去重..."
sort id1.csv | uniq > id11.csv;
sort id2.csv | uniq > id22.csv;
echo "获得id1有的id2没有的..."
sort id11.csv id2.csv id22.csv | uniq -u > idminus.csv;
echo "done!"

juice

{@if item.spcount>=5}${item.spcount}{@else}${item.spcount}{@/if}

http://www.cnblogs.com/kuler/p/3802413.html