JavaScript笔记_js取tbody数量-CSDN博客

本文链接：https://blog.csdn.net/yiya_eryi/article/details/89429295

HTML：是整个网站的骨架

CSS：对整个网站骨架进行美化

JavaScript:使整个页面具有动态效果

ECMAScript:是JavaScript核心，包含（基本语法，变量，关键字，数据类型，语句，函数）

DOM：文档对象模型，包含（整个HTML页面的内容）

BOM：浏览器对象模型，包含（整个浏览器相关内容）

获取元素内容

window.onload=function(){
				//获取页面指定位置的元素
				var uEle=document.getElementById("username")
				//获取页面指定位置的内容（只）
				var uValue=uEle.value;
			}

事件（onload）

定时操作：setInterval("changeImg()",3000);

轮播图

<script>
			function init(){
				//书写 轮图片显示的定时操作
				window.setInterval("changeImg()",3000);
			}
			//书写函数
			var i=1;
			function changeImg(){
				i++;
				document.getElementById("img1").src="../../img/im"+i+".png";
				if(i==4)i=0;
			}
		</script>

获取图片位置（document.getElementById(""）)

隐藏图片：display:none

		<script>
			function init(){
				
				//设置显示广告图片的定时操作
				time=window.setInterval("showAd()",3000);
			}
			
			//显示广告图片的函数
			function showAd(){
				//获取广告图片的位置
				var adEle=document.getElementById("img2");
				//修改广告图片元素里面的属性让其显示
				adEle.style.display="block";
				//清除显示图片的定时操作
				clearInterval(time);
				//设置隐藏图片的定时操作
				time=setInterval("hiddenAd()",3000);
				
			}
			//书写隐藏广告图片的函数
			function hiddenAd(){
				//获取广告图片并设置其style.display为none
				document.getElementById("img2").style.display="none";
				//清除隐藏广告图片的定时操作
				clearInterval(time);
			}
		</script>

其他

window对象

		<script>
			//确认弹出框
			//confirm("您确认删除吗？");
			//输入框
			//prompt("请输入价格");
		</script>

History对象

        <script>
			function fanhui(){
				history.go(-1);
				history.back();
				
			}
		</script>

location对象

<input type="button" value="跳转到history页面" onclick="javascript:location.href='history对象.html'"/>

事件：

onsubmit( ) 此事件写在form标签中，必须有返回值

onload( ) 只能写一次，放在body标签中

onclick( ) 点击按钮

onfocus( ) 点击条形框

onblur( ) 鼠标点击其他地方后

向页面输出

弹窗 alert( )

向浏览器中写入内容： document.write(内容）；

向页面指定位置写入内容： innerHTML

使用JS完成表格的隔行换色

新标签

		<thead><tr>
			<th></th>
		</tr></thead>
		<tbody>
			<th>
				<td></td>
			</th>
		</tbody>

确定事件（页面加载事件onload）

获取元素：获取表格（document.getElementById()）,最终是为了获得表格中tbody的行数（长度）

tbody里面的行数（rows.length）

设置背景颜色（.style.backgroundColor）

效果图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>表格隔行换色</title>
		<script>
			window.onload=function(){
//				获取表格
				var tblEle=document.getElementById("tbl");
//				获取表格中第一个tbody里面的行数(长度)
				var len=tblEle.tBodies[0].rows.length;
				for(var i=0;i<len;i++){
					if(i%2==0){
						tblEle.tBodies[0].rows[i].style.backgroundColor="pink";
					}
					else{
						tblEle.tBodies[0].rows[i].style.backgroundColor="gold";
					}
				}
			}
		</script>
	</head>
	<body>
		<table border="1" width="500" height="50" align="center" id="tbl">
			<thead>
				<tr>
					<th>1</th>
					<th>2</th>
					<th>3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
				<th>1</th>
				<th>2</th>
				<th>3</th>
			</tr>
			<tr>
				<th>1</th>
				<th>2</th>
				<th>3</th>
			</tr>
			<tr>
				<th>1</th>
				<th>2</th>
				<th>3</th>
			</tr>
			</tbody>
			
		</table>
	</body>
</html>

实现表格高亮显示

确立事件（onmouseover和onmouseout）并分别为其绑定一个函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>高亮显示</title>
		<script>
			function changeColor(id,flag){
				if(flag=='over')
				document.getElementById(id).style.backgroundColor="#40E0D0";
				else if(flag=='out')
				document.getElementById(id).style.backgroundColor="white";
			}
		</script>
	</head>
	<body>
		<table border="1" width="500" height="50" align="center">
			<thead>
				<tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
					<th>1</th>
					<th>2</th>
					<th>3</th>
				</tr>
			</thead>
			<tbody>
				<tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">
					<th>1</th>
					<th>2</th>
					<th>3</th>
				</tr>
				<tr onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">
					<th>1</th>
					<th>2</th>
					<th>3</th>
				</tr>
			</tbody>
		</table>
	</body>
</html>

onfocus/onblur:聚焦离焦事件，用于表单校验的时候比较合适

onclick/ondbclick:鼠标单击和双击事件

onkeydown/onkeypress:搜索引擎使用较多

onload:页面加载事件，所有的其他操作(匿名方式）都可以放进去

onmouseover/onmouseout/onmousemove:购物网站商品详情页

onchange:当用户改变内容的时候使用这个事件（二级联动）

全选和全不选

获得复选框：var checkAllEle=document.getElementById("id")

获取复选框的状态：checkAllEle.checked?;

注意在表格中，表头里<thead></thead>用<th></th>那么显示的是表头，会是粗体

表的数字用<tbody></tbody>用<td></td>那么显示的是身体部分，就是正常的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选和全不选</title>
		<script>
			function checkAll(){
				var checkAllEle=document.getElementById("checkAll");
				if(checkAllEle.checked==true){
					var checkones=document.getElementsByName("checkone");
					for(var i=0;i<checkones.length;i++){
						checkones[i].checked=true;
					}
				}
				else{
					var checkones=document.getElementsByName("checkone");
					for(var i=0;i<checkones.length;i++){
						checkones[i].checked=false;
					}
				}
			}
		</script>
	</head>
	<body>
		<table border="1" width="500" height="50" align="center">
			<thead>
				<tr><th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
					<th>1</th>
					<th>2</th>
					<th>3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td><input type="checkbox" name="checkone"/></td>
				<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
				<tr><td><input type="checkbox" name="checkone"/></td>
				<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
				<tr><td><input type="checkbox" name="checkone"/></td>
				<td>1</td>
					<td>2</td>
					<td>3</td>
				</tr>
			</tbody>
		</table>
	</body>
</html>

Document:整个HTML文件都成为一个document文件

Element:所有标签都是element元素

Attribute:标签里面的属性

Text：标签中间夹着的内容为text文本

Node:以上都称为node节点

创建文本节点：document.createTextNode()

创建元素节点：document.createElement()

Element.appendChild()向元素添加新的子节点,作为最后一个子节点
Element.firstChild 返回元素的首个子节点
Element.lastChild 返回元素的最后一个子元素
Element.getAttribute()返回元素节点的指定属性值
Element.setAttribute()把指定属性设置或更改为指定值
Element.innerHTML设置或者返回元素的内容
Element.insertBefore()在指定的已有的子节点之前插入新节点

小练习：通过按钮动态添加城市

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态添加城市</title>
		<script>
			window.onload=function(){
				document.getElementById("ad").onclick=function(){
					var adtext=document.createTextNode("深圳");
					var adli=document.createElement("li");
					var getul=document.getElementById("ul1");
					adli.appendChild(adtext);
					getul.appendChild(adli);
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="添加城市" id="ad">
		<ul id="ul1">
			<li>上海</li>
			<li>北京</li>
			<li>广州</li>
		</ul>
	</body>
</html>

使用JS完成省市二级联动

主要代码

				<script>
			var cities=new Array(3);
			cities[0]=new Array("长沙","益阳","株洲");
			cities[1]=new Array("啊","我","是");
			cities[2]=new Array("在","为","额");
			function changecity(val){
//				获取第二个循环下拉列表
				var city=document.getElementById("city");
				city.options.length=0;
				for(var i=0;i<cities.length;i++){
					if(val==i){
						for(var j=0;j<cities[i].length;j++){
							var adtext=document.createTextNode(cities[i][j]);
							var adoption=document.createElement("option");
							adoption.appendChild(adtext);
							city.appendChild(adoption);
						}
					}
				}
			}
		</script>
//body代碼===================================================================================================
						<tr>
							<td>
								籍贯
							</td>
							<td>
								<select onchange="changecity(this.value)">
									<option>--请选择--</option>
									<option value="0">湖南</option>
									<option value="1">湖北</option>
									<option value="2">安徽</option>
								</select>
								<select id="city">
									
								</select>
							</td>
						</tr>

数组的创建

new Array();

new Array(size);

new Array(a,b,c,d);

eval() 把字符串作为脚本代码运行

var str="alert('abc')";
eval(str)
//弹出abc

进制转换

parseInt("11",2);返回二进制下11的十进制数 3

String对象

match（）找到一个或多个正则表达式的匹配

substr（，）从起始索引号提取字符串中指定书目的字符

substring(，)提取字符串中两个指定的索引号之间的字符

正则表达式对象 test

JavaScript笔记

“相关推荐”对你有帮助么？