前言:
而今各位老铁们对“js集合对象”可能比较注重,各位老铁们都需要了解一些“js集合对象”的相关文章。那么小编在网上收集了一些关于“js集合对象””的相关知识,希望兄弟们能喜欢,姐妹们快快来学习一下吧!《大数据和人工智能交流》头条号向广大初学者新增C 、Java 、Python 、Scala、javascript 等目前流行的计算机、大数据编程语言,希望大家以后关注本头条号更多的内容。作者:软件设计师天涯雨。
(一)javascript的DOM对象总结:轻松使用原生态js开发特效-1
一、创建文本
【1】方法1
1.创建文本对象
var textNode=document.createTextNode("创建了一个文本节点");
2.获取 div对象
var divNode=document.getElementById("div_1");
3.将文本节点添加到div节点中
divNode.appendChild(textNode);
<style>
.c01{
width:200px;
height:200px;
border:5px blue solid;
}
</style>
<div class="c01">
</div>
<input type="button" value="创建" onclick="show()"/>
<script>
function show()
{
//1、.创建文本对象
var txt=document.createTextNode("Hello")
//2、获得div对象
var objs=document.getElementsByTagName("div");
var divObj=objs[0];
//3、将文本节点添加到区域对象中
divObj.appendChild(txt);
}
</script>
【2】方法2:使用innerHTML属性
<style>
.c01{
width:200px;
height:200px;
border:5px blue solid;
}
</style>
<div class="c01">
</div>
<input type="button" value="创建" onclick="show()"/>
<script>
function show()
{
var objs=document.getElementsByTagName("div");
var divObj=objs[0];
divObj.innerHTML="hello";
}
</script>
二、创建控件
【1】方法1:
1.创建一个按钮节点
var buttonNode=document.createElement("input");
buttonNode.type="button";
buttonNode.value="新按钮";
2.获取 div节点
var divNode=document.getElementById("div_1");
3.将文本节点添加到div节点中
divNode.appendChild(buttonNode);
<style>
.c01{
width:200px;
height:200px;
border:5px blue solid;
}
</style>
<div class="c01">
</div>
<input type="button" value="创建" onclick="show()"/>
<script>
function show()
{
//1、创建一个按钮节点
var node=document.createElement("input");
node.type="button";
node.value="确定";
//2、获取区域对象
var objs=document.getElementsByTagName("div");
var divObj=objs[0];
//3、将控件对象加入区域对象
divObj.appendChild(node);
}
</script>
【2】方法2:
<style>
.c01{
width:200px;
height:200px;
border:5px blue solid;
}
</style>
<div class="c01">
</div>
<input type="button" value="创建" onclick="show()"/>
<script>
function show()
{
//2、获取区域对象
var objs=document.getElementsByTagName("div");
var divObj=objs[0];
divObj.innerHTML="<input type='button' value='ok'>";
}
</script>
三、创建select控件的option节点
1、获得select控件对象
var selectObj=document.getElementById("selectId");
2、创建option子节点:语法 new Option("文本值","控件值")
var optionObj=new Option("北京","010");
3、将option选项添加到控件select对象中
selectObj.options.add(optionObj);
示例1:
<select id="s001">
<option>请选择</option>
</select>
<input type="button" value="创建" onclick="show()"/>
<script>
function show()
{
//1、获得select控件对象
var selObj=document.getElementById("s001");
//2、创建option子节点
var optObj=new Option("北京","010");
//3、将option选项添加到控件select对象中
selObj.options.add(optObj);
}
</script>
示例2:
<select id="s001">
<option>请选择</option>
</select>
<input type="button" value="创建" onclick="show()"/>
<script>
function show()
{
var arr=["北京","上海","天津"];
//1、获得select控件对象
var selObj=document.getElementById("s001");
selObj.length=1;
//2、创建option子节点
for(var i=0;i<arr.length;i++)
{
var optObj=new Option(arr[i],i);
//3、将option选项添加到控件select对象中
selObj.options.add(optObj);
}
}
</script>
/////////////////////////////////////////////表格节点的操作(***)/////////////////////////////////////////////////////
四、创建表格
【1】、 创建表格方法1
1、我们通过通过createElement创建元素形式来完成
(1)创建表格节点
var tableNode=document.createElement("table");
(2)创建tBody节点
var tbodyNode=document.createElement("tbody");
(3)创建tr节点
var trNode=document.createElement("tr");
(4)创建td节点
var tdNode=document.createElement("td");
tdNode.innerHTML="这是单元格";
2.关联这些节点,进行指定层次节点的添加
trNode.appendChild(tdNode);
tbodyNode.appendChild(trNode);
tableNode.appendChild(tbodyNode);
document.getElementsByTagName('div')[0].appendChild(tableNode);
例如:
<html>
<head>
<style>
table{
border:blue 1px solid;
width:800px;
border-collapse:collapse;
}
table td{
border:blue 1px solid;
padding:5px;
}
</style>
</head>
<body>
<input type="button" name="createButton" value="创建表格" onclick="createTable1()"/>
<hr/>
<div>
</div>
</body>
</html>
<script>
//通过createElement创建元素形式来完成
function createTable()
{
//1.创建节点
//(1)创建表格节点
var tableNode=document.createElement("table");
//(2)创建tBody节点
var tbodyNode=document.createElement("tbody");
//(3)创建tr节点
var trNode=document.createElement("tr");
//(4)创建td节点
var tdNode=document.createElement("td");
tdNode.innerHTML="这是单元格";
//2.关联这些节点,进行指定层次节点的添加
trNode.appendChild(tdNode);
tbodyNode.appendChild(trNode);
tableNode.appendChild(tbodyNode);
document.getElementsByTagName('div')[0].appendChild(tableNode);
}
</script>
【2】创建表格方式2
通过table对象来完成
(1)创建表格对象
var tableNode=document.createElement("table");
(2)创建tr对象
var trNode=tableNode.insertRow();
(3)创建td节点
var tdNode=trNode.insertCell();
关联这些节点,进行指定层次节点的添加
document.getElementsByTagName('div')[0].appendChild(tableNode);
例子1:
<html>
<head>
<style>
table{
border:blue 1px solid;
width:800px;
border-collapse:collapse;
}
table td{
border:blue 1px solid;
padding:5px;
}
</style>
</head>
<body>
<input type="button" name="createButton" value="创建表格" onclick="createTable2()"/>
<hr/>
<div>
</div>
</body>
</html>
<script>
//通过table对象来完成
function createTable2()
{
//1.创建节点
//(1)创建表格节点
var tableNode=document.createElement("table");
//(2)创建tr节点
var trNode=tableNode.insertRow();
//(3)创建td节点
var tdNode=trNode.insertCell();
tdNode.innerHTML="Hello World";
//2.关联这些节点,进行指定层次节点的添加
document.getElementsByTagName('div')[0].appendChild(tableNode);
document.getElementsByName("createButton")[0].disabled=true;
}
</script>
例子2:创建多行多列的代码为
function createTable2()
{
//1.创建节点
//(1)创建表格节点
var tableNode=document.createElement("table");
for(var i=1;i<=6;i++)
{
//(2)创建tr节点
var trNode=tableNode.insertRow();
for(var j=1;j<=6;j++)
{
//(3)创建td节点
var tdNode=trNode.insertCell();
tdNode.innerHTML=i+"--"+j;
}
}
//2.关联这些节点,进行指定层次节点的添加
document.getElementsByTagName('div')[0].appendChild(tableNode);
document.getElementsByName("createButton")[0].disabled=true;
}
五、删除表格
deleteRow()函数可以带参数,形式如下:deleteRow(index):index从0开始和上面两个方法差不多的意思,就是删除指定位置的行和单元格
【1】通过行的对象删除
<table id="tableId" border="1" width="300" border="blue">
<tr id="trid1"><td>111</td><td>111</td><td>111</td></tr>
<tr id="trid2"><td>222</td><td>222</td><td>222</td></tr>
<tr id="trid3"><td>333</td><td>333</td><td>333</td></tr>
</table>
<br>
<input type="button" value="删除行" onclick="deleteRow()"/>
<script>
function deleteRow()
{
//1、获取表格对象
var tableNode=document.getElementById("tableId");
//2、获得行的对象
var row=document.getElementById("trid2");
//3、获取改行的索引
var index=row.rowIndex;
//4、从表格对象中将该行删除
tableNode.deleteRow(index);
}
</script>
另外也可以通过document.getElementById("行的Id").removeNode();来进行删除
【2】循环删除表格的行
<table id="tableId" border="1" width="300" border="blue">
<tr><td>100</td><td>200</td><td>300</td></tr>
<tr><td>111</td><td>222</td><td>333</td></tr>
<tr><td>111</td><td>222</td><td>333</td></tr>
</table>
<br>
<input type="button" value="删除行" onclick="deleteRow()"/>
<script>
function deleteRow()
{
var tableNode=document.getElementById("tableId");
//tableNode.deleteRow(1);
var length= tableNode.rows.length;
for( var i=1; i<length; i++ )
{
tableNode.deleteRow(i);
}
}
</script>
【3】删除列deleteCell
这里涉及表格2个重要集合(注意是集合)
1、rows:获取来自于 table 对象的 tr (表格行)对象的集合
2、cells:获取表格行或整个表格中所有单元格的集合
例如:
(1)
//1、获取表格对象
var tableNode=document.getElementById("tableId");
//2、获得行对象的数组,那么数组每个元素是个行对象
var arr=tableNode.rows;
//3、删除第3行第3列
arr[2].deleteCell(2);
(2)计算第1行有多少列
var len=tableNode.rows[0].cells.length ;
alert(len);
(3)计算一共有多少行
var len=tableNode.rows.length ;
alert(len);
例如:
//删除列,其实就是在删除每一行中同一位置的单元格
function delCol()
{
//获取表格对象
var tableNode=document.getElementById("tableid");
if(tableNode==null)
{
alert("表格不存在");
return;
}
var colnum=document.getElementsByName("delcol")[0].value;
if(colnum>=1 && colnum<=tableNode.rows[0].cells.length)
{
for(var i=0;i<tableNode.rows.length;i++)
{
tableNode.rows[i].deleteCell(colnum-1);
}
}
else
{
alert("列不存在");
}
}
六、动态设置单元格与行的属性
【1】方法1:setAttribute(属性,属性值)
<table id="tableId" border="1" width="300" border="blue">
<tr id="trid1"><td>111</td><td>111</td><td>111</td></tr>
<tr id="trid2"><td>222</td><td>222</td><td>222</td></tr>
<tr id="trid3"><td id="cell333">333</td><td>333</td><td>333</td></tr>
</table>
<br>
<input type="button" value="设置" onclick="setAtt()"/>
<script>
function setAtt()
{
//1、获取表格对象
var objMyTable = document.getElementById("tableId");
objMyTable.setAttribute("border",5);//为表格设置边框为1
//为TD设置高度
var objCell = document.getElementById("cell333");
objCell.setAttribute("height",50);//为单元格设置高度为50
}
</script>
【2】方法2:获得对象的属性,然后直接赋值,此方法以前讲过
var objMyTable = document.getElementById("tableId");
objMyTable.border=5;//为表格设置边框为5
(二)javascript的DOM对象总结:轻松使用原生态js开发特效-2
1、行对象的集合
由table对象可以获得行对象大的集合
var trs=tableObj.rows;
2、获得行的索引:由当前行对象返回当前的索引
var index=trObj.rowIndex;
3、列对象的集合
var tds=trObj.cells;
4、table对象有deleteRow(index)
5、使用this指针获得当前对象
<p onclick="show(this)">Hello World</p>
<script>
function show(obj)
{
alert(obj.innerHTML);
}
</script>
6、获取父节点的对象
parentNode :获取文档层次中的父对象
示例1:
<table id="table001">
<tr>
<td>aaa0</td><td>aaa1</td>
</tr>
<tr>
<td>bbb0</td><td>bbb1</td>
</tr>
<tr>
<td>ccc0</td><td>ccc1</td>
</tr>
</table>
<input type="button" value="ok" onclick="show()"/>
<script>
function show()
{
var tableObj=document.getElementById("table001");
var trObjs=tableObj.rows;
var tdObjs1=trObjs[1].cells;
var v=tdObjs1[1].innerHTML;
alert(v);
}
</script>
示例2:
<table id="table001">
<tr>
<td>aaa0</td><td>aaa1</td>
</tr>
<tr>
<td>bbb0</td><td>bbb1</td>
</tr>
<tr>
<td>ccc0</td><td>ccc1</td>
</tr>
</table>
<input type="button" value="ok" onclick="show()"/>
<script>
function show()
{
var tableObj=document.getElementById("table001");
var trObjs=tableObj.rows;
var index=trObjs[1].rowIndex;
alert(index);
}
</script>
示例3:新增一行单元格
<style>
table{
border:blue 1px solid;
width:200px;
border-collapse:collapse;
}
td{
border:blue 1px solid;
padding:5px;
}
</style>
<table id="table001">
<tr>
<td>商品编号</td><td>商品价格</td><td>操作</td>
</tr>
<tr>
<td>g001 </td><td>100</td><td>删除</td>
</tr>
</table>
<input type="button" value="新增一行" onclick="show()"/>
<script>
function show()
{
//1、获得table对象
var tableObj=document.getElementById("table001");
//2、由table对象得到tr对象
var trObj=tableObj.insertRow();
//3、由tr对象生成列对象
//第0个对象
var tdObj0=trObj.insertCell(0);
tdObj0.innerHTML="<input type='text'>";
//第1个对象
var tdObj1=trObj.insertCell(1);
tdObj1.innerHTML="<input type='text'>";
//第2个对象
var tdObj2=trObj.insertCell(2);
tdObj2.innerHTML="<input type='button' value='删除'>";
}
</script>
示例4:删除一行
<table id="table001">
<tr>
<td>商品编号</td><td>商品价格</td><td>操作</td>
</tr>
<tr>
<td>g001 </td><td>100</td><td>删除</td>
</tr>
</table>
<input type="button" value="新增一行" onclick="show()"/>
<script>
function show()
{
//1、获得table对象
var tableObj=document.getElementById("table001");
//2、由table对象得到tr对象
var trObj=tableObj.insertRow();
var index=trObj.rowIndex;
alert(index);
//3、由tr对象生成列对象
//第0个对象
var tdObj0=trObj.insertCell(0);
tdObj0.innerHTML="<input type='text'>";
//第1个对象
var tdObj1=trObj.insertCell(1);
tdObj1.innerHTML="<input type='text'>";
//第2个对象
var tdObj2=trObj.insertCell(2);
tdObj2.innerHTML="<input type='button' value='删除' onclick='del("+index+")'>";
}
function del(x)
{
//1、获得table对象
var tableObj=document.getElementById("table001");
tableObj.deleteRow(x);
}
</script>
《大数据和人工智能交流》的宗旨
1、将大数据和人工智能的专业数学:概率数理统计、线性代数、决策论、优化论、博弈论等数学模型变得通俗易懂。
2、将大数据和人工智能的专业涉及到的数据结构和算法:分类、聚类 、回归算法、概率等算法变得通俗易懂。
3、最新的高科技动态:数据采集方面的智能传感器技术;医疗大数据智能决策分析;物联网智慧城市等等。
根据初学者需要会有C语言、Java语言、Python语言、Scala函数式等目前主流计算机语言。
根据读者的需要有和人工智能相关的计算机科学与技术、电子技术、芯片技术等基础学科通俗易懂的文章。