首页 > 代码库 > JavaScript项目总结一

JavaScript项目总结一

2024-09-16 21:12:17   220人阅读

1.类选择其下，第一个

$(‘selector‘).first()==$(‘selector:first‘)==$(‘selector:eq(0)‘)

2.如果要选择非第一个

$(‘selector:eq(n)‘)

3.Dom对象添加事件(比较随意)和JQuery 对象添加事件不一样(建议用on)

Dom.onClick=function(e){}
$(‘selector‘).on(‘click‘,function(){})

4.DOM 遍历是昂贵的，所以尽量将会重用的元素缓存

$this=$(this)

5.使用 jQuery 中的方法缺少经验，需要查看的文档，有一个更好或更快的方法

$(‘#id‘).data(key,value)
//改成（高效）
$.data(‘#id‘,key,value)

6.建议申明的全剧变量和调用时采用

window.global

7.鼠标点击其他地方收起“下拉框”

$(‘body‘).click(function(e) 
{
　　if (e.target.id != ‘regionLabel‘ + pageIndex + ‘‘&& e.target.id != ‘regionSelectBox‘ + pageIndex+ ‘‘) 
　　{
　　　　if (!$(‘#regionSelectBox‘ + pageIndex + ‘‘).hasClass(‘hide‘)) 
　　　　{
　　　　　　$(‘#regionSelectBox‘ + pageIndex + ‘‘).addClass(‘hide‘);
　　　　　　$(‘#toggleRegionSelectBox‘ + pageIndex + ‘‘).removeClass(‘invert‘);
　　　　}
　　}
});

8. toggleClass() 对设置或移除被选元素的一个或多个类进行切换。

该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。

9. 同辈.siblings()

$(this).addClass(‘ant-btn-primary‘).siblings().removeClass(‘ant-btn-primary‘);

10.去空

$(this).text().trim();

11.函数结束时紧跟的一对圆括号说明这个函数定以后立即执行

12.在JQuery中，先去空，利用$(this).text().trim();接着进行if判断时，最好把==换成indexOF模糊匹配

13.检测CSS类,hasClass只能接受单个类名作为参数，并且不支持函数参数，is()方法更灵活，可以用来做同样的事。

$(‘p‘).hasClass(‘className‘)
$(‘#id‘).is(‘.className‘)
$(‘#id‘).is(‘.classOne.classTwo‘)

14.数组去重

Array.prototype.unique=function(){
    var result=[];
    var json={};
    for (var i = 0; i < this.length; i++) {
        if (!json[this[i]]) {
            result.push(this[i]);
            json[this[i]]=1;
        }
    }
    return result;
};
//调用
arr.unique();

15.防止点击事件冒泡（冒泡到祖、父类，因为它们可能也有点击事件）


//下面的方法可以借鉴：用户组成动态生成Table,特别是join() 方法用于把数组中的所有元素放入一个字符串。arrayObject.join(separator)

initE2XNeighborTable: function(){
　　　　　　　　　　　　　  var $table = $(‘#tableEx2Neighbor‘).empty();
　　　　　　　　　　　　　　var ring = $(‘#configAccessRing‘).val();
　　　　　　　　　　　　　　var list = NEIGHBOR_INFO[ring];
　　　　　　　　　　　　　　var thead = [
　　　　　　　　　　　　　　　　　　　　　 ‘<tr>‘,
　　　　　　　　　　　　　　　　　　　　　 ‘<th>pCell</th>‘,
　　　　　　　　　　　　　　　　　　　　　 ‘<th>sCell</th>‘,
　　　　　　　　　　　　　　　　　　　　　 ‘<th>No. of pCell Edge Users</th>‘,
　　　　　　　　　　　　　　　　　　　　　 ‘<th>No. of Scell Edge Users</th>‘,
　　　　　　　　　　　　　　　　　　　　　 ‘<th>No. of Neighboring Cells</th>‘,
　　　　　　　　　　　　　　　　　　　　　 ‘</tr>‘
　　　　　　　　　　　　　　　　　　　　　 ].join(‘‘);
　　　　　　　　　　　　　　var tbody = ‘‘;
　　　　　　　　　　　　　　$.each(list, function(i, row){
　　　　　　　　　　　　　　　  tbody += [
　　　　　　　　　　　　　　　　　　　　　　‘<tr>‘,
　　　　　　　　　　　　　　　　　　　　　　‘<td>‘ + row.pCell + ‘</td>‘,
　　　　　　　　　　　　　　　　　　　　　　‘<td>‘ + row.sCell + ‘</td>‘,
　　　　　　　　　　　　　　　　　　　　　　‘<td>‘ + row.pCellUser + ‘</td>‘,
　　　　　　　　　　　　　　　　　　　　　　‘<td>‘ + row.sCellUser + ‘</td>‘,
　　　　　　　　　　　　　　　　　　　　　　‘<td>‘ + row.neighborNum + ‘</td>‘,
　　　　　　　　　　　　　　　　　　　　　　‘</tr>‘
　　　　　　　　　　　　　　　　　　　　　　].join(‘‘);
　　　　　　　　　　　　　　　　　　　});
　　　　　　　　　　　　　　$table.append(thead + tbody);
　　　　　　　　　　　　　　},

 

JavaScript项目总结一


联系
我们