jQuery 學習筆記
阿新 • • 發佈：2018-12-10
// jQuery的三個步驟
1.引入jQuery檔案
2.入口與函式
3.功能實現
//1.1jquery 函式入口標準1
$(document).ready(function(){
...
});
//1.2jquery 函式入口標準2
$(function(){
...
});
//2.註冊事件
$("#btn").click(function(){
...
});
//3. show
$("#div").show();
jquery物件與Dom物件 的區別 jq物件就是jq方式獲取的物件：$("btn1"); Dom物件(JS物件)就是jq方式獲取的物件: var btn1 = document.getElementById("btn1");
1.隔行變色
<script>
$(function () {
// $("ul li:even").css("background","red"); //奇數行變色1357
$("ul li:odd").css("background","red"); //偶數行變色2468
});
</script>2.jQuery 基本選擇器
$(function(){ //1.id 選擇器 $("#id") $("#four").css("background","red"); //2.類選擇器 $(".class") $(".green").css("background","green"); //3.標籤選擇器 $("標籤名") $("li").css("background","pink"); //4.並集選擇器 $("#four,.green").css("background","red"); //5.交集選擇器 $("li.green").css("background","red"); });
3.層級選擇器
<script>
$(function(){
$("#father>p").css("background","red");//子選擇器
$("#father p").css("background","red");//後代選擇器
});
$("li>a");//子選擇器
$("li a");//後代選擇器
$("li.a");//交集選擇器
$("li,a");//並集選擇器
</script>4.過濾選擇器
<script> $(function () { $("ul li:even").css("background","red"); $("ul li:odd").css("background","red"); $("li:eq(2)").css("background","red"); //eq 下標過濾選擇器 }); </script>
5.篩選選擇器 (.children)
篩選選擇器:是方法
<script>
$(function(){
$("#uu>li").mouseover(function(){
//alert("aaa");
$(this).children("ul").show(); // children
});
$("#uu>li").mouseout(function(){
$(this).children("ul").hide();
});
});
</script>6.屬性操作
<script>
$(function(){
$("img").attr({
alt:"alt改法二",
title:"錯錯錯"
});
$("img").attr("alt","alt改法一");
});
</script>7.attr與prop的使用
<script>
$(function(){
//attr: 使用一次就會失效
$("input").eq(0).click(function(){
$("#ck").attr("checked",true);
});
$("input").eq(1).click(function(){
$("#ck").attr("checked",false);
});
//prop: 是對於使用Boolean值得屬性設定
$("input").eq(3).click(function(){
// alert("eq2");
$("#ck").prop("checked",true);
});
$("input").eq(4).click(function(){
$("#ck").prop("checked",false);
});
});
</script>8.全選案例
<body>
<input type="checkbox" name="" id="" class="hhg">全選
<div id="all">
<input type="checkbox" name="" id="">1
<input type="checkbox" name="" id="">2
<input type="checkbox" name="" id="">3
<input type="checkbox" name="" id="">4
<input type="checkbox" name="" id="">5
<input type="checkbox" name="" id="">6
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
//--全選按鈕
$(".hhg").click(function(){
alert("操作了全選按鈕");
$("#all input").prop("checked",$(this).prop("checked"));
});
//一個個選中直至全選中
$("#all input").click(function(){
var $c= $("#all input").length; //輸出一共多少checkbox
// alert($c);
//輸出一共選中了幾個checkbox
var $cd= $("#all input:checked").length;
// alert($cd);
if ($c == $cd){
$("input:eq(0)").prop("checked",true);
}else{
$("input:eq(0)").prop("checked",false);
}
});
});
</script>
</body>
9.三組基本動畫
<body>
//三組基本動畫
/*
1.顯示 隱藏
2.滑入 滑出
3.淡入 淡出
*/
<br>
<input type="button" value="顯示show">
<input type="button" value="隱藏hide">
<input type="button" value="滑入slideDown">
<input type="button" value="滑出slideUp">
<input type="button" value="淡入fadeIn">
<input type="button" value="淡出fadeOut">
<div style="width: 200px;height: 200px;background-color: red;display: none;"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
//顯示
$("input:eq(0)").click(function(){
// $("div").show();
$("div").show(1000);
});
//隱藏
$("input:eq(1)").click(function(){
// $("div").hide();
$("div").hide(1000);
});
//滑入
$("input:eq(2)").click(function(){
$("div").slideDown();
});
//滑出
$("input:eq(3)").click(function(){
$("div").slideUp();
});
//淡入
$("input:eq(4)").click(function(){
$("div").fadeIn();
});
//淡出
$("input:eq(5)").click(function(){
$("div").fadeOut();
});
});
</script>
</body>10.輪播圖 手動
<body>
<div style="width: 790px;height:340px;margin: 0 auto; background-color: red;">
<ul>
<li><a href="#"><img src="../images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="../images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="../images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="../images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="../images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="../images/6.jpg" alt=""></a></li>
</ul>
</div>
<input type="button" value="下一張">
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
var i=0;
$("input").click(function(){
i++;
$("li").eq(i).fadeIn().siblings("li").fadeOut();
var $li=$("li").length;
if (i== $li){
i=0;
}
});
});
</script>
</body>11.自定義 動畫☆
<body>
<input type="button" value="開始">
<input type="button" value="結束">
<div style="width: 200px;height: 200px;background-color: red;" id="div1"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function() {
$("input").eq(0).click(function(){
//4個引數; 位置設定 動作時長 動作曲線 回撥函式
$("#div1").animate({left:500},2000,swing,function(){
alert("animate起作用了");
});
});
});
</script>
</body>12.stop的使用
<body>
<div>1</div>
<br>
<div>2</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
$("div").mouseover(function(){
$(this).stop().slideUp();
});
$("div").mouseout(function(){
$(this).stop().slideDown();
});
});
</script>
</body>13.創建於新增節點
<body>
<div id="box" style="width: 400px;height: 400px;background-color: red;">
<!--<a href="https://www.baidu.com" target="_blank">點我帶你去百度</a>-->
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
// js
/*var a = document.createElement("a");//1.建立a 標籤
var box = document.getElementById("box");
box.appendChild(a);
a.setAttribute("href","https://www.baidu.com");
a.setAttribute("target","_blank");
a.innerHTML="點我帶你去百度";*/
//jQuery
$("#box").append('<a href="https://www.baidu.com" target="_blank">點我帶你去百度</a>');
var $li=$('<br><a href="https://www.baidu.com" target="_blank">點我帶你去百度2</a>')
$("div").append($li);
$("div").prepend($li);
$("li").appendTo($div);
$("div").after($li);
$("div").before($li);
//append 新增到最後面 √
//prepend 新增到最前面
//appendTo 新增到某節點的下面 √
//prependTo 新增到某節點的前面
//after 新增到後面
//before 新增到前面
});
</script>
</body>14.清空與刪除與克隆節點
<body>
<div style="width: 200px;height: 200px;background-color: red;">
<p>1111</p>
<p>2222</p>
</div>
<p>333</p>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
// $("div").html(""); //容易導致記憶體洩漏
// $("div").empty();//清空內容 包含事件
// $("div").remove();//刪除節點
$("p:eq(2)").click(function(){
alert("我是P 3");
});
// true:深度克隆(包含事件) false(不包含事件);
$("p:eq(2)").clone(true).appendTo($("div"));
});
</script>
</body>15.widht height scrollTop scrollLeft offset position 方法
