琐碎代码笔记
来源：互联网 发布：ug编程教程入门视频 编辑：程序博客网 时间：2024/06/11 05:51
a{
-webkit-tab-highlight-color:transparent; //取消a标签手指按下时出现的黑色遮罩层
text-decoration:none;
}
input{
-webkit-appearance:none //解决IOS下表格元素圆角问题
}
获取文档中的锚点数：
<a name="first">第一个锚</a><br />
<a name="second">第二个锚</a><br />
<a name="third">第三个锚</a><br />
<br />
文档中锚的数目：
<script type="text/javascript">
document.write(document.anchors.length)
</script>
计算文档中的表单数：
<form name="Form1"></form>
<form name="Form2"></form>
<form name="Form3"></form>
<script type="text/javascript">
document.write("文档包含： " + document.forms.length + " 个表单。")
</script>
访问集合中的项目：
<form id="Form1" name="Form1">
您的姓名：<input type="text">
</form>
<form id="Form2" name="Form2">
您的汽车：<input type="text">
</form>
<p>
要访问集合中的项目，你既可以使用项目编号，也可以使用项目名称：
</p>
<script type="text/javascript">
document.write("<p>第一个表单名称是：" + document.forms[0].name + "</p>")
document.write("<p>第一个表单名称是：" + document.getElementById("Form1").name + "</p>")
</script>
计算文档中的图像数目：
<img border="0" src="/i/eg_smile.gif" />
<br />
<img border="0" src="/i/eg_mouse.jpg" />
<br /><br />
<script type="text/javascript">
document.write("本文档包含：" + document.images.length + " 幅图像。")
</script>
哪个鼠标按钮被点击：
<head><script type="text/javascript">
function whichButton(event)
{
var btnNum = event.button;
if (btnNum==2)
{
alert("您点击了鼠标右键！")
}
else if(btnNum==0)
{
alert("您点击了鼠标左键！")
}
else if(btnNum==1)
{
alert("您点击了鼠标中键！");
}
else
{
alert("您点击了" + btnNum+ "号键，我不能确定它的名称。");
}
}
</script>
</head>
<body onmousedown="whichButton(event)">
<p>请在文档中点击鼠标。一个消息框会提示出您点击了哪个鼠标按键。</p>
</body>
哪个元素被点击了：
<head>
<script type="text/javascript">
function whichElement(e)
{
var targ
if (!e) var e = window.event
if (e.target) targ = e.target
else if (e.srcElement) targ = e.srcElement
if (targ.nodeType == 3) // defeat Safari bug
targ = targ.parentNode
var tname
tname=targ.tagName
alert("You clicked on a " + tname + " element.")
}
</script>
</head>
<body onmousedown="whichElement(event)">
<p>在文档中点击某个位置。消息框会提示出您所点击的标签的名称。</p>
<h3>这是标题</h3>
<p>这是段落。</p>
<img src="/i/eg_mouse2.jpg" /></body>
选取文本域中的内容：
<head>
<script type="text/javascript">
function selText()
{
document.getElementById("myText").select()
}
</script>
</head>
<body>
<form>
<input size="25" type="text" id="myText" value="选定我吧！">
<input type="button" value="选择文本" onclick="selText()">
</form>
</body>
当达到文本域的最大字符数时跳至下一域：
<head>
<script type="text/javascript">
function checkLen(x,y)
{
if (y.length==x.maxLength)
{
var next=x.tabIndex
if (next<document.getElementById("myForm").length)
{
document.getElementById("myForm").elements[next].focus()
}
}
}
</script>
</head>
<body>
<p>这段脚本在达到文本框的最大长度时跳到下一个文本框：</p>
<form id="myForm">
<input size="3" tabindex="1" maxlength="3" onkeyup="checkLen(this,this.value)">
<input size="2" tabindex="2" maxlength="2" onkeyup="checkLen(this,this.value)">
<input size="3" tabindex="3" maxlength="3" onkeyup="checkLen(this,this.value)">
</form>
</body>
取得下拉列表中的选项数目：
<head>
<script type="text/javascript">
function getLength()
{
alert(document.getElementById("mySelect").length)
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<input type="button" onclick="getLength()" value="在这个列表中，有多少选项？">
</form>
</body>
从下拉列表中删除选项：
<head>
<script type="text/javascript">
function removeOption()
{
var x=document.getElementById("mySelect")
x.remove(x.selectedIndex)
}
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>苹果</option>
<option>桃子</option>
<option>香蕉</option>
<option>桔子</option>
</select>
<input type="button" onclick="removeOption()" value="删除被选的选项">
</form>
</body>
规定表格是外部边框：
<head>
<script type="text/javascript">
function aboveFrames()
{
document.getElementById('myTable').frame="above"
}
function belowFrames()
{
document.getElementById('myTable').frame="below"
}
</script>
</head>
<body>
<table id="myTable">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<br />
<input type="button" onclick="aboveFrames()" value="显示上边框">
<input type="button" onclick="belowFrames()" value="显示下边框">
</body>
规定表格的内部边线：
<head>
<script type="text/javascript">
function rowRules()
{
document.getElementById('myTable').rules="rows"
}
function colRules()
{
document.getElementById('myTable').rules="cols"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="rowRules()" value="仅显示行边框">
<input type="button" onclick="colRules()" value="仅显示列边框">
</body>
为表格创建一个标题：
<head>
<script type="text/javascript">
function createCaption()
{
var x=document.getElementById('myTable').createCaption()
x.innerHTML="我的表格标题"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="createCaption()" value="创建标题">
</body>
从表格删除行：
<head>
<script type="text/javascript">
function deleteRow(r)
{
var i=r.parentNode.parentNode.rowIndex
document.getElementById('myTable').deleteRow(i)
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row 1</td>
<td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>Row 2</td>
<td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
<tr>
<td>Row 3</td>
<td><input type="button" value="删除" onclick="deleteRow(this)"></td>
</tr>
</table>
</body>
向表格中添加新行和内容：
<head>
<script type="text/javascript">
function insRow()
{
var x=document.getElementById('myTable').insertRow(0)
var y=x.insertCell(0)
var z=x.insertCell(1)
y.innerHTML="NEW CELL1"
z.innerHTML="NEW CELL2"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<br />
<input type="button" onclick="insRow()" value="插入行">
</body>
向一个已有的行中插入单元格：
<head>
<script type="text/javascript">
function insCell()
{
var x=document.getElementById('tr2').insertCell(0)
x.innerHTML="John"
}
</script>
</head>
<body>
<table border="1">
<tr id="tr1">
<th>Firstname</th>
<th>Lastname</th>
</tr>
<tr id="tr2">
<td>Peter</td>
<td>Griffin</td>
</tr>
</table>
<br />
<input type="button" onclick="insCell()" value="插入单元">
</body>
更改表格单元格中的内容：
<head>
<script type="text/javascript">
function changeContent()
{
var x=document.getElementById('myTable').rows[0].cells
x[0].innerHTML="新的内容"
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<td>Row1 cell1</td>
<td>Row1 cell2</td>
</tr>
<tr>
<td>Row2 cell1</td>
<td>Row2 cell2</td>
</tr>
<tr>
<td>Row3 cell1</td>
<td>Row3 cell2</td>
</tr>
</table>
<form>
<input type="button" onclick="changeContent()" value="改变内容">
</form>
</body>
- 琐碎代码笔记
- 琐碎笔记
- 琐碎笔记
- C的琐碎笔记
- oracle琐碎笔记
- 琐碎的笔记
- ggplot琐碎笔记
- 生活琐碎笔记
- JAVA琐碎笔记
- Oracle琐碎笔记2
- android 功耗分析琐碎笔记
- 琐碎
- 琐碎
- 琐碎
- 琐碎
- 琐碎
- 琐碎
- 琐碎
- Android 实现沉浸式通知栏
- 使用ZeroMQ实现CS通信
- Linux总结（1）
- NOIP2015 day2t3 运输计划
- Verilog组合逻辑和时序逻辑的比较
- 琐碎代码笔记
- Linux及Arm-Linux程序开发笔记（零基础入门篇）
- Windows Socket 异步编程（非阻塞模式）
- SpringMVC上传下载
- Servlet总结（1）
- Python 数据科学手册 5.6 线性回归
- 数据库索引设计与优化读书笔记--《一》概述
- Servlet问题积累（1）
- SpringMVC的mybatis分页
