JQuery快速上手

1、下載
jQuery 是一個 JavaScript 庫,在官網https://jquery.com/點擊下載,將打開的js頁面內容,拷貝到本地,新建一個文件jQuery.js粘貼進去,一般放在項目的js文件夾下

2、使用+加載(使內容在加載完成後調用)

//引入文件
<script src="js/jQuery.js"></script>

<script type="text/javascript">
	$(function(){
	//內容
	});
</script>

3、常見的幾種獲取屬性方式

<script type="text/javascript">
	$(function(){
		//獲取雙標籤中內容
		//通過標籤id
		$("find").html();//html中有參數,則是修改內容
		//通過標籤class,eq()中數字指第幾個class,從0開始
		$(".c:eq(0)").html();
		//通過html標籤,如td
		$("td:eq(2)").html();
	});
</script>

4、幾種鼠標事件

<script type="text/javascript">
	$(function(){
		//幾種事件(鼠標點擊等),一般用click和hover
		//鼠標點擊
		$("#find").click(function(){
			alert("點到我了");
		});
		//鼠標懸浮
		$("#find2").mouseenter(function(){
			alert("在我上懸浮");
		});
		//鼠標懸浮後移開
		$("#find3").mouseleave(function(){
			alert("懸浮後移開");
		});
		//懸浮效果加移開效果
		$("#find4").hover(function(){
			$("#find4").html("懸浮效果");
		},function(){
			$("#find4").html("移開效果");
		});
	});
</script>

5、submit表單提交

<script type="text/javascript">
	$(function(){
		$("#subm").click(function(){
			//可寫一些判斷這裏,不符合的直接在判斷中return;
			$("#from1").submit();
		});
	});
</script>

6、顯示和隱藏

<script type="text/javascript">
	$(function(){
		//顯示和隱藏
		$("#t").click(function(){
			$("#conx").toggle();//點擊改變隱藏或顯示狀態
		});
		$("#h").click(function(){
			$("#conx").hide();//隱藏
		});
		$("#s").click(function(){
			$("#conx").show();//顯示
		});
		//慢慢改變狀態,和改變後觸發新事件
		$("#t").click(function(){
			$("#conx").toggle(3000,function(){//3000毫秒
				alert("狀態改變了");
			});
		});
	});
</script>
<body>
<!-- style="display: none;"設置默認隱藏 -->
<p id="conx" style="display: none;">我可被隱藏</p> 
	<button type="button" id="t">點擊改變是否隱藏</button>
	<button type="button" id="s">點擊顯示</button>
	<button type="button" id="h">點擊隱藏</button>
</body>

7、動畫效果

<script type="text/javascript">
	$(function(){	
		$("#div").click(function(){
			$("#div").animate({
				"left" : "=200px" ,
				"top" : "+=100px" ,//+=(-=)可點擊繼續改變
				"width" : "200px" ,
				"height" : "200px" ,
				"font-size" : "50px"
			},2000);//2000參數,設置時間,可不寫
		});
	});
</script>	
<body>
	<div id="div" style="width: 100px; height: 100px; background-color: aqua; position: relative; top: 10px; left: 10px;">
		123
	</div>
</body>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章