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>