以下是我在做网站开发的时候自己写前端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('<span>' + text.escape().replace(new RegExp(val, 'g'), '<b style="color:red;">' + val + '</b>') + '</span>')
});
$('.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('<img src="' + 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('<img src="' + 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, '<br>');
}
可以写到单独的文件，作为项目一开始就要引入的基础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);
});
593
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
