需要准备的材料分别有:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建html文件,例如:indexhtml,编写基础代码。
2、在indexhtml中的<script>标签,输入js代码:
var el = windowdocumentbody;
windowdocumentbodyonmouseover = function(event) {
el = eventtarget;
$('body')append('<br/>当前鼠标在' + $(el)html() + '元素上');
}
3、浏览器运行indexhtml页面,此时鼠标移动到123上,会打印出光标在123元素上。
<!DOCTYPE html><html>
<head>
<title>文件示例</title>
<meta name="name" content="content" charset="utf-8">
</head>
<body>
<input type="file" id="file" />
<input type="button" onclick="readText()" value="File Button">
<div id="tt">
</div>
</body>
</html>
<script charset="utf-8">
windowonload=function () {
if(typeof(FileReader)=="undefined")
{
alert("你的浏览器不支持文件读取");
documentwrite("");
}else
{
alert("你的浏览器支持文件读取");
}
}
function readText() {
var file=documentgetElementById("file")files[0];
var reader=new FileReader();
readerreadAsText(file);
readeronload=function(data)
{
var tt=documentgetElementById("tt")
ttinnerHTML=thisresult;
}
}
</script>包括我自己在内(其实我也就这两天才知道这样可以快速获取的),很多jQuery的使用者都对这一问题深感疑惑。为什么在众多方便的各种获取属性和设置属性的方法中就不能像DOM中一样直接设置html元素的outerHTML呢? 原生DOM中获取和设置html元素的outerHTML大家都很熟悉: // 原生DOM获取outerHTML alert('原生DOM获取outerHTML'); alert(documentgetElementById('lz66303')outerHTML); // 原生DOM设置outerHTML alert('原生DOM设置outerHTML'); documentgetElementById('lz66303')outerHTML = '<textarea id="lz66303"><hr>原生DOM设置outerHTML</textarea>'; 当然在jQuery中我们可以用prop()方法来获取和设置html元素的outerHTML,在网上若搜索jQuery获取outerHTML竟然还有人写出函数来了,可悲!——jQuery自带的方法不知还自以为自己写个函数这种方法是什么好的解决方案。 当你看到本文时,请转给更多还在用自定义函数获取outerHTML的jQuery使用者——我这个经验就没白分享了! 其实就这么简单: // 成功获取到 alert('jQueryprop()获取outerHTML'); alert($('textarea')prop('outerHTML')); // 成功设置,已生效 alert('jQueryprop()设置outerHTML'); $('textarea')prop('outerHTML', '<input>');
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)