javascript/jquery知识点记录(1)

1、window.top 与 window.self 与window.parent：

在应用有frameset或者iframe的页面时，parent是父窗口，top是最顶级父窗口（有的窗口中套了好几层frameset或者iframe），self是当前窗口， opener是用open方法打开当前窗口的那个窗口。
window.parent:
返回父窗口。
注：如果窗口本身是顶层窗口，parent属性返回的是对自身的引用。
在框架网页中，一般父窗口就是顶层窗口，但如果框架中还有框架，父窗口和顶层窗口就不一定相同了。
window.top:
返回顶层窗口，即浏览器窗口。
注：如果窗口本身就是顶层窗口，top属性返回的是对自身的引用。
window.self:
是对当前窗口自身的引用。它和window属性是等价的。
注：window、self、window.self是等价的。

2、使用jquery 怎么获取div的实际高度？

1. $("#div_id").height(); // 获得的是该div本身的高度, (不包含padding,margin,border)

2. $("#div_id").outerHeight(); // 包含该div本身的高度, padding上下的高度, 以及border上下的高度(不包含margin的高度)

3. $("#div_id").outerHeight(true); // 包含该div本身的高度, 以及padding,border,margin上下的总高度

jquery找兄弟节点：

$('#id').siblings() 当前元素所有的兄弟节点
$('#id').prev() 当前元素前一个兄弟节点
$('#id').prevaAll() 当前元素之前所有的兄弟节点
$('#id').next() 当前元素之后第一个兄弟节点
$('#id').nextAll() 当前元素之后所有的兄弟节点
这三个方法都可以添加选择器，给出选择条件，就能找到你指定的兄弟节点了。

parent()  当前子元素向上遍历单一层级； 取得一个包含着所有匹配元素的唯一父元素的元素集合。

parents()  和 .parent() 方法类似，不同的是后者沿 DOM 树向上遍历单一层级。 则是取得一个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

children();  返回匹配元素集合中每个元素的子元素

3.js，jquery对json数组的操作：比如现在保存一个材料列表的数据，json的数据格式是：

<span style="font-size:10px;">var file_kxcl = 
[
		{
		"id":"12",
		"mody_id":null,
		"file_type":"dsrsfzm",
		"file_name": "a.txt",
		},
		{
		"id":"13",
		"mody_id":null,
		"file_type":"dsrsfzm",
		"file_name": "b.txt",
		},
		{
		"id":"14",
		"mody_id":"",
		"file_type":"sqzxs",
		"file_name": "c.txt",
		}
]</span>

怎么动态的生成这样一个json数组呢？
增加和修改数据：

function save_filelist(id, modyid, file_type, filename){
	if(file_kxcl.length==0){          //为空，新增条目
		file_kxcl[file_kxcl.length]=
		{
		"id":id,
		"modyid":modyid,
		"file_type":file_type,
		"file_name":filename
		}	
	}else{
		var exist = false; //记录数据列表是否存在某条数据
		$.each(file_kxcl, function(n, value){
			if(value!=null){
				if(value.id == id){  //已经存在该条目,覆盖
					value.modyid = modyid;
					value.file_type = file_type;
					value.file_name = filename;
					exist = true;
					return false;
				}
			}
		});
		if(exist==false){
			file_kxcl[file_kxcl.length]=          //不存在该条目,新增
			{
			"id":id,
			"modyid":modyid,
			"file_type":file_type,
			"file_name":filename
			}	
		}
	}
}

删除一组数据：

function delete_filelist(id){               //必选材料列表
	if(file_bxcl.length){
		$.each(file_bxcl, function(n, value){
			if(value!=null && value.id == id){
				delete file_bxcl[n];
				return false;
			}
		});
	}
	console.log(file_bxcl);
	localStorage.setItem("file_bxcl_list", JSON.stringify(file_bxcl)); //必选材料
}

上面的删除，只是将json数组中的这个id所在的位置的一组数据删除了，但是该位置上的数据为null了，保存后发现该位置上数据为null

3、js jquery获取select框被选中的值：

jquery获取select被选中的value：

"<option value="6" selected="selected">abc</option>"  //该项被选中

 $("#xxx").val();                                     //获取select的value值
 
 "<option value=\"7\" "+("7"==""+value.file_type+""?"selected":"")+">营业执照</option>"  //判断该选项要不要被选中

4、html禁止页面缓存：

<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache,must-ridate">
<meta http-equiv="expires" content="0">

5、判断input file选择的值是不是空？

<input type="file" name="uploadfile" id="input_file">
js:
if(document.getElementById("input_file").value == "")
jquery:
if($("#input_file").val() == "")

6、 /*禁用页面的右键菜单和文本选中*/

$(function () {

    $(document).bind("selectstart", function () {

        return false;

    });

    $(document).bind("dragstart", function () {

        return false;

    });

});

7、关于input file的一些知识：

1）input file选择相同的文件 不会触发onchange事件；

     把input file的value值清空，再选择文件会触发onchange事件；

2）js 获取input file的值：

document.getElementById("inputFile_1").value

     

       获取选择的文件大小：

      document.getElementById("inputFile_1"). files[0].size;

    jquery获取input file的值：

    	$("#input_file").val()   //这里得到的就是file的值，即上传 路径

3）如何清空input file 的值呢？

function delete_inputfile_value(id){

    var file = document.getElementById("inputFile_"+id);

    if(file.outerHTML){                                      // for IE, Opera, Safari, Chrome

        file.outerHTML = file.outerHTML;

    }else{                                                          // FF(包括3.5)

        file.value = "";

    }

    console.log(file.value);

}

但是上面的console.log打印出来还是原来的值。需要研究下outerHTML是怎么清掉的；

此时再选择文件 可以触发onchange事件。