JQuery(一)
- JQuery文檔非常完善
- 今日重點(diǎn):
- JQ選擇器的學(xué)習(xí)
- 概述
- jQuery是javascript的一個庫,很輕量級
- 在實(shí)際開發(fā)中,都不會使用javascript,即使使用,也是很少的一部分公司使用,一般都是用javascript封裝好的一些小型框架
- jQuery兼容CSS3，jQuery2.0之后不再支持ie6,ie7,ie8
- jQuery1.8.3用的最多
- 引入JQ
<!--現(xiàn)在1.8.3用的比較多-->
<script src="../../js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
alert("Hello JQuery!");
});
</script>
-
jQuery 和 javascript頁面加載區(qū)別
- javascript頁面加載區(qū)別
/*傳統(tǒng)js如果調(diào)用兩次window.onload會存在覆蓋問題,后面的覆蓋前面的*/ window.onload = function() {alert('hello world1')} window.onload = function() {alert('hello world2')}- jQuery加載比js快
- JQ:dom加載完成后就會加載
- JS:整個頁面加載完畢再調(diào)用
- jQuert不存在覆蓋問題,順序執(zhí)行
jQuery(document).ready(function() { //1 alert('hello world1'); }); $(document).ready(function( //2 alert('hello world2'); )); $(function( //3 alert('hello world3') ))； /* 簡寫方式 $(function(){}) */ JQ獲取元素
//頁面加載
$(function(){
//傳統(tǒng)方式獲取
document.getElementById('id').onclick = function(){
location.
}
//JQ方式獲取
$('#id').click(function(){
location.;
})
});
- DOM對象和jQuery對象的轉(zhuǎn)換
//JS的dom操作
document.getElementById('span_1').innerHTML = 'xxxx';
//jQuery的dom操作
$(function(){//docuent加載完后執(zhí)行,不加這行代碼,事件不能綁定
$('#btn').click(function(){
//jQuery獲取的對象不能調(diào)用js對象的方法，反過來也一樣
//$('#span_1').innerHTML = 'xxxx';
$('#span_1').html('xxxx');
});
});
//jQuery轉(zhuǎn)DOM
$('#btn').click(function(){
//jQuery獲取的對象轉(zhuǎn)換為DOM對象
//$('#span_1').get(0) //這樣就編程DOM對象
$('#span_1').get(0).innerHTML = 'xxxx';
$('#span_1')[0].innerHTML = 'xxxx';
});
//DOM轉(zhuǎn)jQuery
function fun() {
var spanEle = document.getElementById('#span_1');
//$(spanEle) //這樣就轉(zhuǎn)成了Jquery對象了
$(spanEle).html('xxxx');
}
jQuery選擇器
-
基本選擇器
- id選擇器:"#id"
$("#id_name").css("background-color","pink");- 類選擇器:".class"
$(".class_name").css('background-color',"yellow");- 元素選擇器:
$("div").css("background-color","#FF6500");- 匹配所有的元素(*):只要是標(biāo)簽都匹配
$("*").css("background-color",'red');- 并集選擇器:select1,select2,select3(將多個選擇器匹配的到的元素合并后返回)
//選擇id為id_name并且類為class_name的元素 $("#id_name,.class_name").css("background-color","#FF6500"); -
層級選擇器
- 在給定的祖先元素下匹配所有的元素(子孫關(guān)系)
$("body div").css("background-color","paleturquoise");- 給定父元素下的所有子元素(父子關(guān)系)
$("body>div").css("background-color","gold");- 匹配所有緊接在prev元素后的next元素(同桌)
//id為two后緊挨著的div $("#two+div").css("background-color",'#FF6500');- 匹配prev元素之后的所有siblings元素(兄弟)
//id為one的所有div兄弟元素 $("#one~div").css('background-color',"#FF0000"); -
基本過濾器
- 第一個元素
//body下的第一個div元素 $("body>div:first").css("background-color",'pink');- 最后一個元素
//body下最后一個div $("body>div:last").css("background-color","blueviolet");- 奇數(shù)集合
# body下所有div元素中序號為基數(shù)的div集合 $("body div:odd").css("background-color","yellowgreen");- 偶數(shù)集合
$("body div:even").css("background-color","red"); 屬性選擇器
//所有有id屬性的div元素
$("div[id]").css("background-color",'yellow');
//所有id為two的所有div元素
$("div[id='two']").css('background-color',"#FF0000");
- 表單選擇器
$(":input"):查找所有的input元素
$(":text"):查找所有文本框
$(":password"):查找所有密碼框
$(":radio"):查找所有單選按鈕
$(":checkbox"):查找所有復(fù)選框
$(":submit")
$(":image")
$(":reset")
$(":button")
$(":file")
jQuery彈出廣告圖片
<script>
$(function(){
//1.書寫顯示廣告圖片的定時操作
time = setInterval("showAd()",3000);
});
//2.書寫顯示廣告圖片的函數(shù)
function showAd(){
//3.獲取廣告圖片剂府，并讓其顯示
//$("#img2").show(1000);
//$("#img2").slideDown(5000);
$("#img2").fadeIn(4000);
//4.清除顯示圖片定時操作
clearInterval(time);
//5.設(shè)置隱藏圖片的定時操作
time = setInterval("hiddenAd()",3000);
}
function hiddenAd(){
//6.獲取廣告圖片视卢，并讓其隱藏
//$("#img2").hide();
//$("#img2").slideUp(5000);
$("#img2").fadeOut(6000);
//7.清除隱藏圖片的定時操作
clearInterval(time);
}
</script>
- toggle使用
<div>
<input type="button" value="顯示/隱藏" id="btn" /><br />|
</div>
<script type="text/javascript" src="../js/jquery-1.8.3.js" ></script>
<script type="text/javascript">
$(function(){
$("#btn").click(function(){
$("#img1").toggle();
});
});
</script>
jQuery隔行換色
<script type="text/javascript">
$(function(){
$("tbody>tr:even").css("background-color","gold");
$("tbody>tr:odd").css("background-color","pink");
});
</script>
- 通過JQ設(shè)置CSS一般不自己寫,都是通過引用UI提供的CSS樣式
<!--引入UI給的css樣式-->
<link rel="stylesheet" href="../css/style.css" />
$("tbody tr:even").addClass("class_name");
$("tbody tr:even").removeClass("class_name");
//3.獲取tbody下面的奇數(shù)行并設(shè)置背景顏色
$("tbody tr:odd").addClass("class_name");
jQuery全選全不選
<script>
$(function(){
$("#select").click(function(){
//獲取下面所有的 復(fù)選框并將其選中狀態(tài)設(shè)置跟編碼的前端 復(fù)選框保持一致演训。
//attr方法與JQ的版本有關(guān)，在1.8.3及以下有效上荡。
$("tbody input").attr("checked",this.checked);
$("tbody input").prop("checked",this.checked);
});
});
</script>
