JS技巧与模式解析-CSDN博客

JSON与对象自面量的区别


对象自面量：var item={name: "tom", value:123}
JSON:var item={"name":"tom", "value":123}

Facade模式

var module = (function () {
    var _private = {
        i: 5,
        get: function () {
            console.log('current value:' + this.i);
        },
        set: function (val) {
            this.i = val;
        },
        run: function () {
            console.log('running');
        },
        jump: function () {
            console.log('jumping');
        }
    };
    return {
        facade: function (args) {
            _private.set(args.val);
            _private.get();
            if (args.run) {
                _private.run();
            }
        }
    }
} ());

module.facade({run:true, val:10});
//outputs current value: 10, running

var shortcutTemp = 
'<li style="left:{left}px;top:{top}px" shortcut="{shortcut}">'+
	'<img src="{imgsrc}">'+
	'<span>{title}</span>'+
	'<em></em>'+
'</li>';

var shortcutModel = {"top":30,"left":40,"title":"xiaohan","shortcut":"33","imgsrc":"../images/33.png"};
var FormatModel = function(str,model){
	for(var k in model){
		var re = new RegExp("{"+k+"}","g");
		str = str.replace(re,model[k]);
	}
	return str;
}
FormatModel(shortcutTemp,shortcutModel);

if( $("#foo").data("events")["click"] ){
//your code
//如果绑定了click事件
}

@import url(base.css);

submitStr=$("form").serializeArray();

if (file_exists('test.xml')) {
    $xml = simplexml_load_file('test.xml');
 
    print_r($xml);
} else {
    exit('Failed to open test.xml.');
}

function get(a){
		a=a||'xiaohan';
		alert(a);
		}

[HTML] overflow:auto;

http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js

JSON具有以下这些形式：

对象是一个无序的“‘名称/值’对”集合。一个对象以“{”（左括号）开始，“}”（右括号）结束。每个“名称”后跟一个“:”（冒号）；“‘名称/值’ 对”之间使用“,”（逗号）分隔。

数组是值（value）的有序集合。一个数组以“[”（左中括号）开始，“]”（右中括号）结束。值之间使用“,”（逗号）分隔。

<html>
<body>
<script type="text/javascript">
    var x
    var arr0 = new Array()
    //array
    arr0[0] = new Array('a', 'b', 'c');
    arr0[1] = new Array('d', 'e', 'f');
    arr0[2] = new Array('h', 'i', 'j');

    //alert(arr0[0]);
    //alert(arr0[0][0]);

    var arr1 = [ [ 'a', 'b', 'c' ], [ 'd', 'e', 'f' ], [ 'h', 'i', 'j' ] ];//array

    var arr2 = {
        11 : 'a',
        12 : 'b',
        13 : 'c'
    };//object

    /*
    var arr3 = { {101:'a',102:'b',103:'c'},{201:'d',202:'e',203:'f'},{301:'h',302:'i',303:'j'} };
    ↓↓↓*/
    var arr4 = {
        1 : {
            10 : 'a',
            11 : 'b',
            12 : 'c'
        },
        2 : {
            name : 'xiaohan',
            sex : 'male',
            age : '23'
        }
    };
    document.write('输出数组' + '<br/>');
    for (x in arr0) {
        document.write(x + '0:' + arr0[x][0] + '<br/>');
    }
    document.write('输出数组' + '<br/>');
    for (x in arr1) {
        document.write(x + '1:' + arr1[x][1] + '<br/>');
    }
    document.write('输出数组' + '<br/>');
    for (x in arr2) {
        document.write(x + ':' + arr2[x] + '<br/>');
    }
    document.write('输出数组' + '<br/>');
    for (x in arr4) {
        var obj = arr4[x];
        document.write(x + ':' + obj + '<br/>');
        for (y in obj) {
            document.write(y + ':' + obj[y] + '<br/>');
        }
    }
</script>
</body>
</html>

//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++//
//js截取字符串，中英文都能用
//如果给定的字符串大于指定长度，截取指定长度返回，否者返回源字符串。
//字符串，长度
//edit: by zhjp
//time: 2011年11月4日15:24:03
/**
* js截取字符串，中英文都能用
* @param str：需要截取的字符串
* @param len: 需要截取的长度
*/
function cutStr(str,len){
 var str_length = 0;
 var str_len = 0;
    str_cut = new String();
    str_len = str.length;
    for(var i = 0;i<str_len;i++){
      a = str.charAt(i);
      str_length++;
      if(escape(a).length > 4){
    	  // 中文字符的长度经编码之后大于4
    	  str_length++;
       }
       str_cut = str_cut.concat(a);
       if(str_length>=len){
    	   str_cut = str_cut.concat("····");
    	   return str_cut;
       }
  }
  // 如果给定字符串小于指定长度，则返回源字符串；
  if(str_length<len){
   return  str;
  }
}

var menuIconArr = [ [ '001', "谷歌", "", "http://www.google.com.hk" ],
			[ '002', "百度", "", "http://www.baidu.com" ],
			[ '003', "博客", "", "http://www.cnblogs.com" ],
			[ '004', "社区", "", "http://www.csdn.net" ], ];

	alert(menuIconArr[0][1]);//谷歌
	

	var google={name:'谷歌','url':'http://www.google.com.hk'};
	alert(google.name);//谷歌

    for(var k in menuIconArr){
    //    stuhtml=stuhtml+k+'<br/>';
        stuhtml=stuhtml+menuIconArr[k][0]+' 和 '+menuIconArr[k][1]+'<br/>';
    }
    
    for (var k in google){
    //    stuhtml=stuhtml+k+'<br/>';
        stuhtml=stuhtml+k+' 为 '+google[k]+'<br/>';
    }

<script type="text/javascript">
	if (sessionStorage.pagecount) {
		sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
	} else {
		sessionStorage.pagecount = 1;
	}
	var iStorageStr=document.getElementById('iStorage');
	iStorageStr.innerHTML="Visits " + sessionStorage.pagecount + " time(s) this session.";


</script>

<input type="radio" name="isReceive"  value="success">成功
<input type="radio" name="isReceive"  value="failure">失败

$('input[name=isReceive]:checked').val();

$(id).find('input[type=text]').val('');

<select name="deliArea" id="deliArea">{$selArea}</select>

var area=$(this).find('option:selected').text();

'money'=>number_format($sArr[4]*$sArr[5]+$sArr[6],2)//两位小数

class TuanCouponAction extends OrderAction {
	
	private $db;
	
	
	public function __construct(){
		parent::__construct();
		import ( "@.ORG.DbMysql" );
		$this->db = new Mysql ( C ( 'JTUAN_DBNAME' ), C ( 'JTUAN_DBHOST' ), C ( 'JTUAN_DBUSER' ), C ( 'JTUAN_DBPWD' ), C ( 'JTUAN_CHARSET' ) );
	
	}
}

获取一组radio被选中项的值
var item = $('input[@name=items][@checked]').val();
获取select被选中项的文本
var item = $("select[@name=items] option[@selected]").text();
select下拉框的第二个元素为当前选中值
$('#select_id')[0].selectedIndex = 1;
radio单选组的第二个元素为当前选中值
$('input[@name=items]').get(1).checked = true;

获取值：

文本框，文本区域：$("#txt").attr("value")；
多选框checkbox：$("#checkbox_id").attr("value")；
单选组radio： $("input[@type=radio][@checked]").val();
下拉框select： $('#sel').val();

控制表单元素：
文本框，文本区域：$("#txt").attr("value",'');//清空内容
$("#txt").attr("value",'11');//填充内容

多选框checkbox： $("#chk1").attr("checked",'');//不打勾
$("#chk2").attr("checked",true);//打勾
if($("#chk1").attr('checked')==undefined) //判断是否已经打勾

单选组radio：    $("input[@type=radio]").attr("checked",'2');//设置value=2的项目为当前选中项
下拉框select：   $("#sel").attr("value",'-sel3');//设置value=-sel3的项目为当前选中项
                $("<option value='1'>1111</option><option value='2'>2222</option>").appendTo("#sel")//添加下拉框的option
                $("#sel").empty()；//清空下拉框