javascript基礎學習

原創 yht_1990 2018-09-10 03:44

<--目錄-->

1、js存在形式及其它

2、函數

3、自執行函數

4、jquery3添加事件

5、jquery自動增減樣式

6、返回頂部

7、滾動條

8、跑馬燈

9、搜索框


js存在形式及其它

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>測試js</title>
		<style>
			.show{
				
			}
			.hide{
				display:none;
			}
		</style>
	</head>
	<body>

	
	    <!--js存在形式-->
	
	    <!--引用js文件-->
	    <!--<script src="js/test.js"></script>-->
	    <!--<script src="js/zhixi.js"></script> -->
	    
	    <!--當前頁-->
	    <!--
	    <script type="text/javascript">
	    	alert('wsyht');
	    </script> -->
	    
	    <div id='t1' class='show' name='wsyht'>內容</div>	  
	   <!-- <div id='t2' style="width:500px;height:200px;border:2px solid #333;"></div>-->
	    
	    <form id='F1' action='https://www.baidu.com/s?'>
	    	<input type='text' name='wd' />
	    	<!--<input type='submit' value='提交' />-->
	    	<input type='button' value="僞提交" onclick="Foo();" /> <!--當點周僞提交會執行Foo父函數-->
	    </form>
	    
	    <script type="text/javascript">
	    	function Foo(){
	    		document.getElementById('F1').submit(); //找到這個id，並提交這個id
	    	}
	    </script>
	    
	    
        <!--<script type="text/javascript">
        
        
        /*
                                   創建標籤
	        var tag = document.createElement("a");
	        tag.href = "http://www.baidu.com";
	        tag.innerText = '點我';
	        
	        var id1 = document.getElementById('t1');
	        id1.appendChild(tag);
	    */   
	     
	     //第二種標籤方式
	        /*
		    var tag = "<a href='http://baidu.com'>走你</a>"
		    var id1 = document.getElementById('t1');
	     	id1.innerHTML = tag;
	     	*/
	     	//隱藏標籤
	     	//var id1 = document.getElementById('t1');
	     	//id1.className = 'hide;'
	     	
	     	//獲取屬性
	     	//var id1 = document.getElementById('t1');
	     	//console.log(id1.getAttribute('name'));
	     	
	     	//修改屬性
	     	//id1.setAttribute('name','jenkins')
	     	//console.log(id1.getAttribute('name'));
	     	
	     	
	     	//獲取他的寬度
	     	/*
	     	//var id2 = document.getElementById('t2');
	     	//var width = id2.style.width;
	     	//console.log(width);
	     	//id2.style.width='100px'  //修改他的寬度
	     	//a = '123'
	     	//parseInt(a)  //將字符轉成數字
	     	
	     	*/
	     	
	     	
 	    </script>-->

	    <!--javascript基礎，Dom編程,jquery-->
	   <!-- http://www.cnblogs.com/wupeiqi/articles/4457274.html-->
	   
	   <!--
	   	<script type="text/javascript">
		   var name = ' wsyht ';
		   name.trim() 
		</script> 
		-->  <!--去空格-->
	   
	   <!--切片
	   <script type="text/javascript">
		   var name = 'wsyht'
		   name.charAt(0)
		   name.charAt(1)
		   name.charAt(2)
		</script> 
	   -->
	   
	   <!-- 輸出1和2個字母
	   	<script type="text/javascript">
		   	var name = 'wsyht'
		   	name.substring(1,3) 
	   	
		   	輸出長度
		   	name.length
	   	</script> 
	   -->
	   

		
	    
	    
	</body>
</html>


函數.js

//alert('楊過');

//這是單行註釋

/*
 這是多行註釋
 name=123   全局變量設置
 var name=123   局部變量設置
 * */

//函數變量，函數聲明，函數返回值
name = '123'
tes = 'test1' 

Foo('wsyht1','wsyht2','wsyht3') //賦值第1、2、3位參數
Bar()
Bat()
function Foo(name1,name2){   //傳第1、2位參數

	var name3 = arguments[2];var name4 = arguments[3];  //聲明第3、4位參數，不推薦使用
	console.log(name1);
	console.log(name2);
	console.log(name3);console.log(name4);    //加分號寫多條語句，輸出3、4位參數，第四位沒有賦值，則會輸出沒有定義
	return console.log(name1);
}

function Bar(){
	tes = 'test2';
	console.log(name);
	console.log(tes);
}
function Bat(){
	var name = '456' ;
	console.log(name);  
}


自執行函數

/*

var temp = function(){ //匿名函數
	
}
*/

//自執行函數，不用調用，自已去執行

/*
(function(){
	console.log('hello world');
	
})()
*/

/*
(function(name){
	console.log(name);
	
})('wsyht')
*/

//聲明數組
//var arry = arry(12,3,4,5)

/*
var arry = [1,2,3,4]
arry.push('wsyht');
console.log(arry);
arry.unshift('wsy');
console.log(arry);
arry.splice(1,0,'ht');   //在1後面插入數字ok，0代表插入不刪除的意思 
console.log(arry);
arry.splice(100,0,'ok'); //在100後面插入數字ok，0代表插入不刪除的意思 
console.log(arry);
*/

//a = [1,2,3]
//a[10] = 9
//a

//names = [1,22,33,44,55,66]
//names.slice(1,5) //取第1位後面的所有數字


//dic = {'name':'wsyht','age':18}
//dic = {'name':{'xx':'oo'},'age':18}


//第一種for循環

var array = [11,22,33,44,55]
var dict = {'name':'wsyht','age':19}
/*
for(var item in array){
	console.log(item)
}
for(var item in dict){
	console.log(dict[item])
}
*/


//第二種for循環
/*
for(var i=0;i<array.length;i++){
	console.log(array[i]);
}


for(var i=0;i<10;i++){
	console.log(dict[i]);
}
*/


js添加事件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
	</head>
	<body>
		<p>I would like to say：<span></span></p>
		
		<input type='button' id='addId1' value="追加1" />
		<input type='button' id='addId2' value="追加2" />
		
		<script src='js/jquery-3.1.0.js'></script>
		<script type="text/javascript">
			$(function(){
				$('#addId1,#addId2').click(function(){    //給id1和id2都創建追加事件
					var currentId = $(this).attr('id');	  //this:獲得點擊的div，attr：獲得點擊的div的id的屬性賦值給currentID
					if(currentId == 'addId1'){    //如果是id1
						//$('p').append('wsyht ');  //p標籤添加wsyht
						//$('p').text('I would like to say：wsyht '); //覆蓋添加wsyht
						$('p span').text('wsyht')  //p標籤下的span標籤覆蓋添加wsyht
					}else if(currentId == 'addId2'){  //如果是id2
						//$('p').append('jenkins '); //p標籤添加jenkins
						//$('p').text('I would like to say：jenkins ');  //覆蓋添加jenkins
						$('p span').text('jenkins')   //p標籤下的span標籤覆蓋添加jenkins
					}else{
						
					}
					
					
					
					
				}); 
			})
		</script>
		
	</body>
</html>


js自動增減樣式

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>jquery</title>
		<style>
			.c1{
				border: 2px solid red;
			}
			.c2{
				font-size: 58px;
			}
			
		</style>
		
		
	</head>
	<body>
		<!--http://www.php100.com/manual/jquery/-->
		
		
		<div id = 'id1'> 1234<a>12</a>3</div>
		<input name='username' type='text' value='9999'>
		
		<input name='username' type='checkbox' value='9999'>
		
		<hr/>  //下劃線
		
		<div class="c1">dddddd</div>
		
		<div class="c1">aaaa</div>
		
		<div class="c1">bbbbb</div>
		
		<input onclick="Foo();" type='button'  value="點我">
		
		<script src="js/jquery-3.1.0.js"></script>
		<script type="text/javascript">
		
			/*
			var text = $('#id1').text();  //獲取id1文件內容，test()不設置參數是取值，設置了參數是賦值
			var html = $('#id1').html();  //獲取id1html
			console.log(text);  //輸出內容
			console.log(html);  //輸出html
			$('#id1').text('wsyht');  //賦值
			*/
			
			/*
			var data = $("input [ name = 'username' ]").val()
			console.log(data);
			$("input [ name = 'username' ]").val('python')
			*/
			
			var data = $("input[name='username']").attr('name');
			console.log(data);
			$("input[name='username']").attr('name','ok');
			
			//$("input[type='checkbox']").prop('checked',true);  //默認給複選框打勾
			$("input[type='checkbox']").prop('disabled',true);   //複選框不可用
			
			
			
			function Foo(){
				//$('.c1').addClass('c2'); //爲所有class=c1的標籤再加上c2的樣式功能
				$('.c1').toggleClass('c2');   //只要一點擊，就會自動添加或刪除c2的樣式功能
			}
			
		</script>
	</body>
</html>


js返回頂部

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style>
			.returnTop{
				position: fixed;
				width: 70px;
				height: 25px;
				right: 20px;
				bottom: 20px;
				background-color: blue;
				color: white;
			}
			.hide{
				display: none;
			}
			
		</style>
		
	</head>
	<body>
		
		
		<!--返回頂部-->
		
		<!--<div id='return_top' class="returnTop hide" onclick="Go();">返回頂部</div>-->
		<div id='return_top' class="returnTop hide">返回頂部</div>
		
		
		<div style='height: 3000px;'>asd</div>
		
		<script src='js/jquery-3.1.0.js'></script>
		<script type="text/javascript">
			$(function(){
				//當頁面加載完成之後，默認執行該函數
				$('#return_top').click(function(){
					$(window).scrollTop(0);   //0返回頂部，頂部數字爲0
				})
			})
			
			$(window).scroll( function(){   //當頁面滾動條滾動時執行的函數
				//console.log(123);
				var height = $(window).scrollTop();   //獲得當前所在高度
				if(height>0){
					//顯示返回頂部
					$('#return_top').removeClass('hide')		
				}else{		
					//隱藏返回頂部
					$('#return_top').addClass('hide')
				}
			});
			
			/*
			function Go(){
				$(window).scrollTop(0);
			}
			*/
			
			
		</script>

	</body>
</html>


js滾動條

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
	</head>
	<body>
		<!--滾動條-->
		<div style="width: 500px;background-color: #ddd;">
			<div id='process' style="width: 10%;background-color:green;height: 10px;"></div>
		</div>
		
		<!--
		<input value="停止" onclick='stop()' />
        -->
		<script type="text/javascript">
		
		 	pro = 10
		 	
			function Foo(){
				var id = document.getElementById('process')
				pro = pro + 10
				if(pro > 100){
					clearInterval(interval)   //停止滾動條
				}else{
					id.style.width = pro + '%';
				}
			}
				
			interval =  setInterval('Foo()',2000) //每隔2秒執行一次v
			//interval = setTimeout('Foo()',2000)  //只執行一次 
			
		    
		    
			/*
		    function Foo(){
				var id = document.getElementById('process')
				pro = pro + 10
				id.style.width = pro + '%';
			}
			interval = setTimeout('Foo()',5000);
			
			function stop(){
				clearTimeout(interval);
			}
			*/
			
		</script>
	</body>
</html>


js跑馬燈

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title>歡迎wsyht來參觀我的項目&nbsp;&nbsp;</title>
		 <script type="text/javascript">
		 	function Go(){
		 		var content = document.title;
		 		//歡
		 		var firstChar = content.charAt(0);
		 		//迎wsyht來參觀我的項目
		 		var sub = content.substring(1,content.length);
		 		//迎wsyht來參觀我的項目;歡
		 		document.title = sub + firstChar;
		 	}
		 	interval = setInterval('Go()',1000); //每隔1秒執行Go函數
		 	function Stop(){
		 		clearTimeout(interval) //只執行一次stop
		 	}	 
		 </script>
		
	</head>
	<body>
			<input value="停止" type="button" onclick="Stop();" />
	</body>
</html>


js搜索框

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<title></title>
		<style>
			.gray{
				color:gray
			}
			.black{
				color: black;
			}
			
		</style>
		
	</head>
	<body>
		
		<!--搜索js事件    http://www.w3school.com.cn/jsref/jsref_events.asp -->
		<input type="text" class="gray" id='tip' value="請輸入關健字"
			onfocus="Enter();" onblur="Leave();" />
			
			<script type="text/javascript">
				function Enter(){
					var id = document.getElementById('tip')
					id.className = 'black';
					if(id.value=="請輸入關健字" || id.value.trim()==''){   //trim左右兩邊去除空格
						id.value = ''
					}
				}
				function Leave(){
					var id = document.getElementById('tip')
					var val = id.value
					if(val.length==0||id.value.trim()==''){
						id.value='請輸入關健字'
						id.className = 'gray';
					}else{
						id.className = 'black';
					}
				}
			</script>

	</body>
</html>


發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Java项目面试实操 提升大厂面试成功率

wy53780 2020-04-23 14:14:04

玩转算法系列--图论精讲 面试升职必备（Java版）

wy53780 2020-04-23 14:03:23

玩转Java并发工具，精通JUC，成为并发多面手

wy53780 2020-04-23 13:56:08

线程八大核心+Java并发底层原理精讲（Java并发核心知识体系精讲）

wy53780 2020-04-23 13:55:55

Java通用型支付+电商平台双系统实战

wy53780 2020-04-23 13:54:42

【躍遷之路】【734天】程序員高效學習方法論探索系列（實驗階段491-2019.2.24）

Wall_Breaker 2019-02-24 23:25:10

Java是怎麼運行的？

勤思 2019-02-24 22:52:36

sql語法、關係建模

死瘦宅 2019-02-24 22:35:22

MySQL 事務、函數、觸發器、數據庫備份、權限管理

死瘦宅 2019-02-24 22:35:12

Python與家國天下

豌豆花下貓 2019-02-24 22:22:40

Java面試 | 002

Java貓說 2019-02-24 21:05:12

《從0到1學習Flink》—— Flink 讀取 Kafka 數據批量寫入到 MySQL

zhisheng 2019-02-24 21:04:11

Redis | 001能做什麼？

Java貓說 2019-02-24 21:03:51

java中具有繼承關係的類及其對象初始化順序

Linus脫襪子 2019-02-24 19:55:05

包、異常

死瘦宅 2019-02-24 19:31:11