jQuery學習記錄一
jQuery:就是JavaScript庫中的一種,jQuery,很多優點
* JavaScript庫也可以叫JavaScript函式庫
* JavaScript庫:把一些瀏覽器相容性的程式碼或者是常用的函式封裝在一個js檔案中,這個檔案就是一個JavaScript庫,common.js可以看成是一個js庫.
*
* 封裝了很多js程式碼的一個js檔案,就是一個庫
*
* 有的js庫封裝的程式碼很少,小型的js庫
* 有的js庫封裝的程式碼很多,大型的js庫
* 有的js庫是一個人編寫的,這樣的js庫可能是免費的
* 有的js庫是一個團隊(公司)編寫,這樣的js庫可能是收費
*
* 物件.on事件名字=匿名函式;
*
* jQuery是JS庫中的一種,
* JS庫也叫JS函式庫
* Prototype、YUI(網路反響一般)、Dojo、ExtJS、jQuery等 都是JS庫
*
* jQuery的優點:寫的少做的多,體積小,功能強大,鏈式程式設計,隱式迭代.外掛豐富,開源,免費
jQuery初試
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery</title> </head> <body> <input type="button" value="顯示效果" id="btn"> <div id="dv"></div> <script src="jquery-1.12.1.js"></script> <script> $('#btn').click(function () { $('#dv').css({'width':'200px','height':'200px','backgroundColor':'blue'}); }); </script> </body> </html>
jQuery再體驗
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <input type="button" value="顯示效果" id="btn"/> <p>第一個</p> <p>第二個</p> <script src="jquery-1.12.1.js"></script> <script> //jQuery版本的 $("#btn").click(function () { $("p").text("我們都是p,我驕傲"); }); </script> </body> </html>
jQuery中的頂級物件
* 瀏覽器中的頂級物件:window,瀏覽器中和頁面中所有的東西都是window的
* 頁面中的頂級物件:document,頁面中某些東西是document
*
*
* jQuery中的頂級物件:jQuery----可以用$符號來代替,為了方便,jQuery(jQuery的js檔案中的所有的東西都是jQuery或者都是$符號下的)
*
*
* 如果想要使用jQuery中的屬性或者方法,那麼需要jQuery.屬性或者jQuery.方法()來使用
*
* 簡單的寫法:$.屬性,或者$.方法
*
* 大多數情況下,jQuery中幾乎都是方法,屬性很少
*
* jQuery中幾乎把DOM中的事件都封裝成了一個方法,在jQuery中幾乎是把on去掉,然後變成方法了
*
* DOM中註冊事件
* 例子:
* document.getElementById("id屬性值").onclick=匿名函式;
* jQuery中註冊事件
*
* 例子:
* $("#id屬性值").click(匿名函式);
jQuery和DOM物件的裝換
*什麼是DOM物件?什麼是jQuery物件
//這個按鈕----如果通過DOM獲取----DOM物件
//這個按鈕----如果通過$或者是jQuery的方式獲取---jQuery物件
*為什麼要把DOM物件轉jQuery物件,為什麼又把jQuery物件轉DOM物件
//DOM操作很麻煩(相容,一個功能寫好多程式碼)---->轉jQuery物件,操作簡單,不需要寫相容,
//jQuery操作中,有一些相容沒封裝在jQuery中,轉DOM物件,通過原生的js程式碼實現功能,如果後面都解決了,又想簡單的寫程式碼操作內容,再轉回jQuery物件
*轉化
//DOM物件
var btnObj=document.getElementById("btn");
//jQuery物件
//$(btnObj) ---------->通過這樣就可以實現DOM物件和jQuery之間的轉換
//jQuery獲取的---jQuery物件
//var btnObj2=$("#btn");
// btnObj2[0].onclick=function () { ----------->通過這種方式 btnObj2[0] 可以實現之間的轉換
// console.log("哈哈,我又變帥了");
// };
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery</title>
</head>
<body>
<input type="button" value="顯示效果" id="btn">
<div id="dv"></div>
<script src="jquery-1.12.1.js"></script>
<script>
var btnObj=$('#btn');
btnObj[0].onclick=function () {
alert();
}
</script>
</body>
</html>
jQuery檔案匯入的一個小問題
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="按鈕" id="btn"/>
<script src="jquery-1.12.1.js">
</script>
<script>
$("#btn").click(function () {
console.log("班主任好漂亮啊");
}); /*這裡一定要加分號,這裡預設認為直接呼叫了下面程式碼,報錯*/
(function () {
console.log('hello world!');
})();
</script>
</body>
</html>
老版本的body開關燈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
.cls{
background-color: black;
}
</style>
</head>
<body>
<input type="button" value="關燈" id="btn"/>
<script>
//DOM版本的---10行程式碼
document.getElementById("btn").onclick=function () {
//判斷
var body=document.body;
if(body.className=="cls"){
body.className="";
this.value="關燈";
}else{
body.className="cls";
this.value="開燈";
}
};
</script>
</body>
</html>
jQuery版本的開關燈
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
.cls{
background-color: black;
}
</style>
</head>
<body>
<input type="button" value="開關" id="btn"/>
<script src="jquery-1.12.1.js"></script>
<script>
$("#btn").click(function () {
//判斷body標籤是否應用了cls的類樣式
if($("body").hasClass("cls")){
//此處應用了cls類樣式,那麼就移除這個類樣式
$("body").removeClass("cls");
}else{
//此處沒有應用類樣式cls,那麼就新增類樣式
$("body").addClass("cls");
}
});
// $("#btn").click(function () {
// if($("body")[0].className=="cls"){
// $("body")[0].className="";
// }else{
// $("body")[0].className="cls";
// }
// });
</script>
</body>
</html>
表單標籤DOM操作中設定和獲取value屬性的值---->物件.value
//jQuery中:
* jQuery物件.val();-------表示的是獲取該元素的value屬性值
* jQuery物件.val("值");----表示的是設定該元素的value屬性
* jQuery物件.css("css的屬性名字","屬性的值");---->設定元素的樣式屬性值
* 注意:
* .css("屬性","值");屬性的寫法可以是DOM操作中的js寫法,也可以是css中的寫法
於是開關燈案例又有了一種新實現
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
</head>
<body>
<input type="button" value="關燈" id="btn"/>
<script src="jquery-1.12.1.js"></script>
<script>
$("#btn").click(function () {
if($(this).val()=="關燈"){
$("body").css("backgroundColor","black");
$(this).val("開燈");
}else{
$("body").css("backgroundColor","");
$(this).val("關燈");
}
});
</script>
</body>
</html>
頁面載入的不同方式
*不載入
// $("#btn").click(function () {
// console.log("小蘇好帥哦");
// });
*DOM載入:頁面全部載入完畢才觸發(標籤,文字,圖片,引入的檔案)
// window.onload=function () {
// console.log("小蘇好帥");
// };
*jQuery的第一種載入方式:同上DOM載入
// $(window).load(function () {
// console.log("小蘇好猥瑣哦");
// });
*jQuery的第二種載入方式:比上面第一種的快---頁面中的基本的元素載入後就觸發
$(document).ready(function () {
console.log("1");
});
*jQuery的第三種載入方式:頁面中基本的元素載入後就觸發
jQuery(function () {
console.log("頁面載入了1111");
}); ↑ 或者 ↓
$(function () {
console.log("頁面載入了1");
});
頁面載入問題:頁面時至上而下載入的,如果繫結的時候,需要繫結的元素並沒有載入,事件是無法繫結的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
//頁面載入的事件
$(function () {
//根據id獲取按鈕,新增點選事件
$("#btn").click(function () {
console.log("哈哈,真的好帥");
});
});
</script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
</body>
</html>
DOM中獲取元素的方式
* 根據id獲取元素
* document.getElementById("id屬性的值");
* 根據標籤名字獲取元素
* document.getElementsByTagName("標籤名字");
* 根據name屬性獲取元素
* document.getElementsByName("name屬性的值");
* 根據類樣式名字獲取元素
* document.getElementsByClassName("類樣式的名字");
* 根據選擇器獲取元素
* document.querySelector("選擇器");---->id選擇器,類選擇器,標籤選擇器...一個
* document.querySelectorAll("選擇器");多個的
jQuery中獲取元素的方式:
* $("選擇器")----jQuery物件
案例:id選擇器取值和設定值,注意語法。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
$("#btn").click(function () {
console.log($(this).val());
$(this).val("嘎嘎,下雨了");
});
});
</script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
</body>
</html>
案例:標籤選擇器
* id選擇器
* $("#id屬性的值")---->某個元素
* 標籤選擇器
* $("標籤名字")------>多個元素或者是某個元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
//.text()方法相當於DOM中的.innerText屬性
//物件.text()----->獲取該元素的文字內容
//物件.text("值")---->設定該元素的文字內容
//本身程式碼沒有迴圈操作,jQuery中內部幫助我們迴圈操作的----->隱式迭代
//頁面載入的事件
$(function () {
//根據id選擇器獲取按鈕,新增點選事件
$("#btn").click(function () {
//根據標籤選擇器獲取p標籤
$("p").text("我們都是p");
});
});
</script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<p>鳴人</p>
<p>佐助</p>
<p>卡卡西</p>
<p>自來也</p>
<p>大蛇丸</p>
</body>
</html>
案例:類選擇器的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
.cls {
width: 200px;
height: 100px;
background-color: pink;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
//類選擇器:$(".類樣式的名字")---某個或者是多個
//.css("屬性","值");-----設定某個元素的css樣式屬性值
$(function () {
//根據id選擇器獲取按鈕,新增點選事件
$("#btn").click(function () {
//獲取所有應用cls類樣式的元素,改變背景顏色
$(".cls").css("backgroundColor","yellow");
$(".cls").css("border","1px solid red");
});
});
</script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<div class="cls"></div>
<p class="cls">這是一個p</p>
<p>山東盛產一種補藥,藥力極強,男人吃了女人受不了,女人吃了男人受不了,記者問老農:這麼好的藥為什麼不多種一些,老農眯起眼睛:笑了笑,說:種多了,地受不了</p>
</body>
</html>
案例:交集選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
.cls{
background-color: blue;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//根據id選擇器獲取按鈕,新增點選事件
$("#btn").click(function () {
//交集選擇器----標籤+類選擇器
//先找p標籤,從p標籤中找應用了cls類樣式的元素
$("p.cls").css("backgroundColor","green");
});
});
</script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<p class="cls">小蘇喜歡助教很久了</p>
<p>其實助教也喜歡小蘇</p>
<ul>
<li>小蘇</li>
<li>助教</li>
<li>班主任</li>
</ul>
<span class="cls">我和小蘇坐地鐵上班,看到了一個很漂亮的女生,旁邊站著一個很猥瑣的男生,我回頭和小蘇說:真想大聲的喊出來,好白菜都讓豬拱了,小蘇快速的拉動著我的衣角,千萬不要這麼做,我的輪椅都換了兩個了</span>
</body>
</html>
案例:並集選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 300px;
height: 200px;
background-color: green;
}
.cls{
background-color: red;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
/*
*
* 交集選擇器 標籤名.類樣式的名字
* 並集選擇器 選擇器,選擇器,選擇器...
*
* */
//頁面載入的事件
$(function () {
$("#btn").click(function () {
//div,p,span
$("#dv,p,.cls").css("backgroundColor","orange");
});
});
</script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<div id="dv"></div>
<p>這是一個p</p>
<span class="cls">這是一個span</span>
<ul>
<li>小蘇喜歡吃榴蓮</li>
<li>助教喜歡吃臭豆腐</li>
<li>班主任都喜歡吃</li>
</ul>
</body>
</html>
案例:點選按鈕在div中新增一個p標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 300px;
height: 200px;
background-color: green;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
/*
* .val();----設定或者是獲取表單標籤的value屬性值
* .text();----設定或者是獲取標籤中的文字內容---就相當於DOM中innerText
* .css();-----設定元素的css樣式屬性值
* .html();----設定或者是獲取標籤中的html內容---就相當於DOM中innerHTML
* */
$(function () {
//點選按鈕
$("#btn").click(function () {
$("#dv").html("<p>這是一個p標籤</p>");
});
});
</script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>
案例:點選按鈕設定元素的樣式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
//點選按鈕,設定div的寬,高,背景顏色,邊框
$(function () {
$("#btn").click(function () {
$("#dv").css("width","300px");
$("#dv").css("height","200px");
$("#dv").css("backgroundColor","red");
$("#dv").css("border","1px solid green");
});
});
</script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<div id="dv"></div>
</body>
</html>
案例:層級選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
div{
width: 500px;
height: 300px;
border:2px solid green;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
//點選按鈕,設定div中span的樣式
//層次選擇器---後代選擇器
$("#btn").click(function () {
//獲取的是div這個父級元素中所有span標籤(直接的子元素,孫子元素)
//$("#dv span").css("backgroundColor","red");
//獲取的是div這個父級元素中直接的子元素
//$("#dv>span").css("backgroundColor","red");
//獲取的是div這個父級元素後面的所有的兄弟元素---span
//$("#dv~span").css("backgroundColor","red");
//獲取的是div後面直接的兄弟元素
//$("#dv+span").css("backgroundColor","red");
});
});
</script>
</head>
<body>
<input type="button" value="顯示效果" id="btn"/>
<span>這是div前面的兄弟元素span</span>
<div id="dv">
<span>這是第一個span</span>
<ul>
<li>第一個li</li>
<li>第二個li
<span>第二個li中的span</span>
<span>第二個li中的span</span>
</li>
<li>第三個li</li>
</ul>
<span>這是第二個span</span>
<span>這是第三個span</span>
</div>
<p>這是p</p>
<span>這是div後面的兄弟元素span</span>
<span>這是div後面的兄弟元素span</span>
<span>這是div後面的兄弟元素span</span>
</body>
</html>
選擇器的總結
//id選擇器
//$("#id屬性值")
//標籤選擇器
//$("標籤名字")
//類選擇器
//$(".類樣式的名字")
//交集選擇器--------標籤+類選擇器
//$("標籤名.類樣式名字")
//並集選擇器--------多條件選擇器
//$("標籤名字,.類樣式名字,#id選擇器")
//層次選擇器
//$("選擇器 選擇器");======>$("#dv span")
案例:隔行變色輕鬆版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
$('#btn').click(function () {
$('#uu>li:even').css('backgroundColor','red');
$('#uu>li:odd').css('backgroundColor','yellow');
});
});
</script>
</head>
<body>
<input type="button" value="隔行變色" id="btn"/>
<ul id="uu">
<li>喬峰:降龍十八掌</li>
<li>張無忌:乾坤大挪移</li>
<li>段譽:鱗波微步</li>
</ul>
</body>
</html>
案例:高亮顯示以及鏈式程式設計
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
ul {
list-style-type: none;
cursor: pointer;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
//高亮顯示效果:滑鼠進入,當前的li有背景顏色,離開顏色就幹掉了
//獲取ul中所有的li標籤,新增滑鼠進入和滑鼠離開事件
//鏈式程式設計
$(function () {
//滑鼠進入
$("#uu>li").mouseenter(function () {
$(this).css("backgroundColor", "red");
}).mouseleave(function () {
$(this).css("backgroundColor", "");
}).click(function () {
$(this).css("color","green").css("fontSize","30px").css("fontFamily","全新硬筆行書簡");
});
});
</script>
</head>
<body>
<ul id="uu">
<li>倩女幽魂</li>
<li>海闊天空</li>
<li>千紙鶴</li>
<li>真的愛你</li>
</ul>
</body>
</html>
案例:中文驗證
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="jquery-1.12.1.js"></script>
<script>
//點選按鈕,驗證使用者輸入的是不是中文名字,如果是中文名字,則文字框的背景為綠色,否則為紅色
$(function () {
//按鈕的點選事件
$("#btn").click(function () {
var reg=/^[\u4e00-\u9fa5]{2,6}$/;
var flag=reg.test($("#txt").val());
if(flag){
$("#txt").css("backgroundColor","green");
}else{
$("#txt").css("backgroundColor","red");
}
});
});
</script>
</head>
<body>
請輸入中文名字:<input type="text" value="" id="txt"/><br/>
<input type="button" value="驗證" id="btn"/>
</body>
</html>
案例:顯示和隱藏下拉選單
*頻繁的操作可能會延時執行,通過stop()方法可以將上一個操作清掉。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
*{
padding: 0;
margin: 0;
}
ul{
list-style: none;
}
.wrap{
width: 330px;
height: 30px;
margin: 100px auto 0;
background-image: url(images/bg.JPG);
}
.wrap li{
background-image: url(images/libg.JPG);
}
.wrap > ul > li{
float: left;
margin-left: 10px;
position: relative;
}
.wrap a{
display: block;
height: 30px;
width: 100px;
text-decoration: none;
color: #000;
line-height: 30px;
text-align: center;
}
.wrap li ul{
position: absolute;
top: 30px;
display: none;
}
</style>
<script src="jquery-1.12.1.js"></script>
<script>
$(function () {
$('.wrap>ul>li').mouseenter(function () {
$(this).children('ul').show(200);
});
$('.wrap>ul>li').mouseleave(function () {
$(this).children('ul').hide(200);
});
});
</script>
</head>
<body>
<div class="wrap">
<ul>
<li>
<a href="javascript:;">吳建兵</a>
<ul>
<li>
<a href="javascript:;">吳建兵</a>
</li>
<li>
<a href="javascript:;">吳建兵</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">吳建軍</a>
<ul>
<li>
<a href="javascript:;">吳建軍</a>
</li>
<li>
<a href="javascript:;">吳建軍</a>
</li>
</ul>
</li>
<li>
<a href="javascript:;">吳建軍</a>
<ul>
<li>
<a href="javascript:;">吳建軍</a>
</li>
<li>
<a href="javascript:;">吳建軍</a>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
案例:精品服飾展示
*注:右邊獲取index需要相加對應的 li 值,比如前邊有5個 li 後邊就要加上五
//.index()方法---->當前這個元素的索引,從零開始異世界生活。。
//:eq(索引值)---->選擇器---對應索引的元素
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
.wrapper {
width: 298px;
height: 248px;
margin: 100px auto 0;
border: 1px solid pink;
overflow: hidden;
}
#left, #center, #right {
float: left;
}
#left li, #right li {
background: url(images/lili.jpg) repeat-x;
}
#left li a, #right li a {
display: block;
width: 48px;
height: 27px;
border-bottom: 1px solid pink;
line-height: 27px;
text-align: center;
color: black;
}
#left li a:hover, #right li a:hover {
background-image: url(images/abg.gif);
}
#center {
border-left: 1px solid pink;
border-right: 1px solid pink;
}
</style>
<script src="jquery-1.12.2.js"></script>
<script>
//頁面載入事件
$(function () {
//左邊的ul中的li
$("#left>li").mouseenter(function () {
//先獲取當前li的索引值
var index=$(this).index();
//先隱藏所有的li
$("#center>li").hide();//隱藏
//設定某個li顯示
//$("#center>li:eq(索引值)")---->對應的li標籤
//顯示當前的對應的li即可
$("#center>li:eq("+index+")").show();
});
//右邊的ul中的li
$("#right>li").mouseenter(function () {
//先獲取當前li的索引值
var index=$(this).index()+9;
//先隱藏所有的li
$("#center>li").hide();//隱藏
//設定某個li顯示
//$("#center>li:eq(索引值)")---->對應的li標籤
//顯示當前的對應的li即可
$("#center>li:eq("+index+")").show();
});
});
</script>
</head>
<body>
<div class="wrapper">
<ul id="left">
<li><a href="#">女靴</a></li>
<li><a href="#">雪地靴</a></li>
...多個...
</ul>
<ul id="center">
<li><a href="#"><img src="images/女靴.jpg" width="200" height="250"/></a></li>
<li><a href="#"><img src="images/雪地靴.jpg" width="200" height="250"/></a></li>
...多個...
</ul>
<ul id="right">
<li><a href="#">女包</a></li>
<li><a href="#">男包</a></li>
...多個...
</ul>
</div>
</body>
</html>