JS/JQuery各类功能实现（笔记）

以下是我在做网站开发的时候自己写前端JS时积累的一些实践：

JQueryUI实现自动完成

首先需要引入jquery ui的CSS和JS文件，然后：

var allRes = $('#all-result span').toArray();
var arr = [];
for (var i = 0; i < allRes.length; i++) {
    arr[i] = allRes[i].innerText;
}
$( "#" ).autocomplete({
  source: arr
}); 

jQuery实现无刷新搜索

$('#search').focus();

$('#search').keyup(function () {
    $('tr:contains("' + $(this).val() + '")').show();
    $('tr:not(:contains("' + $(this).val() + '"))').hide();
});

jQuery实现搜索内容变红（搜索结果变红）

这里.container是容器div，span是包裹文字的标签，b是替换成红色的标签

$('#search').keyup(function () {
    if ($(this).val()) {
        $('.container:contains("' + $(this).val() + '")').each(function () {
            var text = $(this).text();
            var val  = $('#search').val();
            $(this).find('span').replaceWith('' + text.escape().replace(new RegExp(val, 'g'), '' + val + '') + '')
        });
        $('.container:not(:contains("' + $(this).val() + '"))').each(function () {
            $(this).find('b').each(function () {
                $(this).replaceWith($(this).text());
            })
        });
    } else {
        $('.container').find('b').each(function () {
            $(this).replaceWith($(this).text());
        })
    }
});

JQuery实现图片预览效果

$('#file').change(function () {
    var prevDiv = $('#preview');
    if (this.files && this.files[0]) {
        var reader = new FileReader();
        reader.onload = function(evt){
            prevDiv.find('img').replaceWith('+ evt.target.result + '" style="width: 150px;height:150px;"/>');
            $('#base64').val(evt.target.result);
        };
        reader.readAsDataURL(this.files[0]);
    }
});

JQuery实现多文件图片预览

$('#error-image').change(function () {
    var prevDiv = $('#preview');
        prevDiv.find('img').remove();
    if (this.files) {
        $.each(this.files, function () {
            var reader = new FileReader();
            reader.onload = function(evt){
                prevDiv.append('+ evt.target.result + '" style="max-width: 250px;max-height:250px;"/>');
            };
            reader.readAsDataURL(this);
        });
    }
});

JS删除table的列(deleteCell())

function removeCells(start, end) {
  var tab = document.getElementById("month");
  var rows = tab.rows;
  for (var i = 0; i < rows.length; i++) {
      var cells = rows[i].cells;
      for (var j = 0; j < cells.length; j++) {
          if (j >= start && j <= end) {
            tab.rows[i].deleteCell(start);//因为删除后，后面的元素会移到刚删除的那个位置；所以继续删除这个位置上的元素即可。
           //要想删除其他，只需改if的条件就可以了。这里删除的是2-6月，剩下1、7-12月的
          }
      }
  }
}

window.onload = function () {
  removeCells(2, 6);
};

在javascript中如何为函数设置默认参数值:

第一种方法：

function example(a,b){ 
  var a = arguments[0] ? arguments[0] : 1;//设置参数a的默认值为1 
  var b = arguments[1] ? arguments[1] : 2;//设置参数b的默认值为2 
  return a+b; 
}

注意以上函数也可写作如下：

function example(){ 
  var a = arguments[0] ? arguments[0] : 1;//设置第一个参数的默认值为1 
  var b = arguments[1] ? arguments[1] : 2;//设置第二个参数的默认值为2 
  return a+b; 
}

调用示例：

alert( example() ); //输出3 
alert( example(10) ); //输出12 
alert( example(10,20) ); //输出30 
alert( example(null,20) ); //输出20 

第二种方法：

function example(name,age){ 
  name=name||'貂蝉'; 
  age=age||21; 
  alert('你好！我是'+name+'，今年'+age+'岁。'); 
}

该函数也可以写作如下：

function example(name,age){ 
  if(!name){name='貂蝉';} 
  if(!age){age=21;} 
  alert('你好！我是'+name+'，今年'+age+'岁。'); 
}

调用示例：

example('王五');//输出：你好！我是王五，今年21岁。  
example('王五',30);//输出：你好！我是王五，今年30岁。  
example(null,30);//输出：你好！我是貂蝉，今年30岁。 

第三种方法，这种方法适合用于参数较多的情况，使用了Jquery的扩展：

function example(setting){ 
  var defaultSetting={ 
    name:'小红', 
    age:'30', 
    sex:'女', 
    phone:'100866', 
    QQ:'100866', 
    birthday:'1949.10.01'
  }; 
  $.extend(defaultSetting,settings); 
  var message='姓名：'+defaultSetting.name 
  +'，性别：'+defaultSetting.sex 
  +'，年龄：'+defaultSetting.age 
  +'，电话：'+defaultSetting.phone 
  +'，QQ：'+defaultSetting.QQ 
  +'，生日：'+defaultSetting.birthday 
  +'。'; 
  alert(message); 
} 
调用示例：
example({ 
  name:'小红', 
  sex:'女', 
  phone:'100866' 
}); 
//输出：姓名：小红，性别：女，年龄：30，电话：100866，QQ：100866。

如何在JS中实现escape和nl2br

String.prototype.escape = function() {
  var map = {
    '&': '&',
    '<': '<',
    '>': '>',
    '"': '"',
    "'": '''
  };
  return this.replace(/[&<>"']/g, function(m){return map[m];});
};
String.prototype.nl2br = function () {
  return this.replace(/(\r\n?)/g, '\n').replace(/(\n)/g, '
');
}

可以写到单独的文件，作为项目一开始就要引入的基础JS文件，使用时，在text类型的变量后面加上.escape（）即可。

JS获取表单数据拼接字符串

由于某种需要，我需要把表单内容拼接成一个字符串来传到我的text字段里，以下是代码：

var getText = function (id) {
	var text = '';
	$(id + ' li').each(function () {
		var inputName = $(this).children().first();
		var input  = $(this).children().last();
	
		text += inputName.text();
	
		if ($(this).find('input').attr('type') === 'radio') {
			text += $(this).find('input[type="radio"]:checked').next().text() + '\n';
		} else {
			text += input.val() + '\n';
		}
	});
  	return text;
};
//传入对应内容块的id
var eduText 	= getText('#edu');
var workText 	= getText('#work');
var projectText = getText('#project');

第二版

var getText = function (id) {
	var text = '';
    $(id + ' .form-style').each(function () {
		$(this).find('li').each(function () {
		    var inputName  = $(this).find('span').text();
	
	        if ($(this).find('input').attr('type') === 'text') {
	            text += $(this).find('input[type="text"]').prev().text() +
	            $(this).find('input[type="text"]').val() + '\n';
	        }
	        if ($(this).find('input').attr('type') === 'radio') {
	            text += $(this).find('input[type="radio"]:checked').next().text() + '\n';
	        }
	
	        var select = $(this).find('select option:selected');
	        // if (select) {
	        //     if (select.text() === '') {
	        //         text += select.parents().prev().context.innerText + '\n';
	        //     } else {
	        //         text += select.parents().prev().context.innerText + select.text() + '\n';
	        //     }
	        // }
	
	        var textarea = $(this).find('.area');
	        if (textarea && textarea.val()) {
	            text += textarea.prev().context.innerText + textarea.val() + '\n';
	        }
	    });
    });
    return text;
};
$('.button-pre').click(function () {
    var eduText    = getText('#edu-form');
    var workText   = getText('#work-form');
    var proText    = getText('#pro-form');
    var trainText  = getText('#train-form');
    var dipText    = getText('#dip-form');
    var lanText    = getText('#lan-form');
    var friendText = getText('#friend-form');
    console.log(eduText);
    console.log(workText);
    console.log(proText);
    console.log(trainText);
    console.log(dipText);
    console.log(lanText);
    console.log(friendText);
});