前端开发中快速掌握的技巧

- 3加载jsp中的空间
- 比如现在我的jsp中有一个select空间，我在页面初始化的时候需要把后台的数据拿过来，你可以自己写，如果我说这个jsp中有100select 的话，你难道要一个一个写？答案当然是NO，还是一样我在jsp中给每个select 的column 属性赋值，然后我在通用函数中将传这个column的字段，这个函数就会将column这个select框加载到指定的select的位置上去，怎么样方便吧

/** * 加载 下拉框 * @param jsonArray */
function loadSelectData(jsonArray,select) {
    $("select[column='"+select+"']").empty();
    $.each(jsonArray,function(i) {    // 遍历下拉框数据
        var data = jsonArray[i];
        $("select[column='"+select+"']").append('<option value="'+data.ID+'">'+data.NAME+'</option>');
    });
}

• 下面的方法我就不一一介绍了，总的来说就是不要仅仅局限于孔健中给我们提供 的那些属性，我们要善于自定义属性
• 4js操作cookie
  
  • 你知道session和cookie吗，JavaWeb开发师最属性的两个东西，但是我们用的最多的就是在后台操作，在前台还是第一次听说吧，相信不少朋友都忘记js怎么操作cookie的了，
  • 这里我们要用到document

// 写cookie
function _setCookie(key,value,time) {
    var strsec = getsec(time);
    var exp = new Date();
    exp.setTime(exp.getTime() + strsec * 1);
    document.cookie = key + "=" + escape(value) + ";expires="
            + exp.toGMTString();
}

• 既然可以设定cookie的时间，必须有获取时间的方法

// 获取cookie时间
function getsec(str) {
    var str1 = str.substring(1,str.length) * 1;
    var str2 = str.substring(0,1);
    if (str2 == "s") {
        return str1 * 1000;
    } else if (str2 == "h") {
        return str1 * 60 * 60 * 1000;
    } else if (str2 == "d") {
        return str1 * 24 * 60 * 60 * 1000;
    }
}

• 下面我们来获取cookie吧

// 获取cookie
function _getCookie(key) {
    var arr,reg = new RegExp("(^| )" + key + "=([^;]*)(;|$)");
    if (arr = document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
}

• js既然想操作cookie那必须像Java一样，所以我们还差一个删除cookie的方法

// 删除cookie
function _delCookie(key) {
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval = _getCookie(key);
    if (cval != null)
        document.cookie = key + "=" + cval + ";expires=" + exp.toGMTString();
}

• 到这里cookie基本操作就这些，没了。下面我们来谈谈ajax,上面我们也提到了，封装的json是如何传入后台的呢，ajax，对就是他，网站开发中的王者，没了他我们就要失业了
• ajax同步
  
  • async: false 就这一个属性就可以实现了，默认是true我们有的时候需要进行同步操作，只需要将async改为false就可以了
• ajax异步
  
  • async: true 异步更简单写这句话，或者什么都不写就是异步
• ajax会发送吗？不会？那我就没办法了$.ajax(url,param,success,error); 这是最基本的ajax，还有好多他的变形方法，读者可以百度一下或看一下手册就好了
• 前端美工是不可忽视的一种行业，在条CSS的时候最怕的就是浏览器版本问题，所以我们的知道我们的浏览器的版本

$(document).ready(function() {
      if (navigator.userAgent.match(/msie/i) ){
        alert('I am an old fashioned Internet Explorer');
      }
});

• 元素固定在顶部 这个是很有用的，有时候我们的导航按钮就需要这样设计，还有我们的工具栏也是需要固定在顶部的

$(function(){
    var $win = $(window)
    var $nav = $('.mytoolbar');
    var navTop = $('.mytoolbar').length && $('.mytoolbar').offset().top;
    var isFixed=0;

    processScroll()
    $win.on('scroll',processScroll)

    function processScroll() {
    var i,scrollTop = $win.scrollTop()

    if (scrollTop >= navTop && !isFixed) { 
        isFixed = 1
        $nav.addClass('subnav-fixed')
    } else if (scrollTop <= navTop && isFixed) {
        isFixed = 0
        $nav.removeClass('subnav-fixed')
    }
}

• 用其他内容取代html标志 jQuery使得用另外一个东西取代html标志很简单。

`$('li').replaceWith(function(){ return $(" ").append($(this).contents()); });`

• 检测视窗宽度 这个也很重要，我们的用户有的喜欢小屏幕有的喜欢超大的，你的网站需要适合所有大小的屏幕这样才能赢得用户的好感
  var responsive_viewport = $(window).width();
• 检测复制、粘贴和剪切的操作 你的网站如果不是那种要求高的，都是可以让用户赋值你网站上面的东西的，

$("#textA").bind('copy',function() {
    $('span').text('copy behaviour detected!')
}); 
$("#textA").bind('paste',function() {
    $('span').text('paste behaviour detected!')
}); 
$("#textA").bind('cut',function() {
    $('span').text('cut behaviour detected!')
});

• 遇到外部链接自动添加target=”blank”的属性 现在网络的发展快，很多网站希望提高自己的访问量，会到一些知名网站上发送外链(我也经常干，但我都是发别人需要的，不是那种水军)，这样我们可以防止

var root = location.protocol + '//' + location.host;
$('a').not(':contains(root)').click(function(){
    this.target = "_blank";
});

• 在文本或密码输入时禁止空格键

$('input.nospace').keydown(function(e) {
    if (e.keyCode == 32) {
        return false;
    }
});

• 页面显示也是前端的菜，显示中最常见的就是分页显示了，我们的数据可能是成千上万的数据，你想一次都展示吗，当然不，我们就炫耀用到分页，下面我简单介绍几种分页插件吧

• 

  
  jqPagination 是一个简单易用的轻量级 jQuery 分页插件，其使用了 HTML5 和 CSS3 技术来实现。此插件提供了几个参数设置选项，通过简单的配置即可生成分页控件。此外，它的外观样式是可自定义的，扩展性很强

• 

  
  这个是我用的最多的，读者可以结合我的另外一篇文章看看
  http://www.voidcn.com/article/p-ubluojmk-tk.html
• 下面接不介绍了，分页只要懂就行，下面看看其他的分页的效果吧

• 

  
  

  

• +++++++++++++++++++++++++++++++++++++++++++
• 下面我在讲讲显示的框架，我用的最多的是jQuery 、bootstrap
  里面显示数据的用的datagrid最多，最近用的是mmgrid,其实两者类似，只需要搞懂流程这些就不是事，给读者推荐这几个网址
  
  • mmGrid：http://miemiedev.github.io/mmGrid/examples/index.html
  • datagrid:http://www.php1.cn/Article/index/id/6040
  • jQuery EasyUI:http://www.runoob.com/jeasyui/jqueryeasyui-intro.html
  • bootstrap:http://www.runoob.com/bootstrap/bootstrap-tutorial.html
• 后续还会整理 《程序员常用网站简介》
  -一个网站为了实现友好，就得用到弹出层，下面贴几个弹出层的效果

（编辑：滨州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!