jQuery基礎與JavaScript與CSS交互-第五章
阿新 • • 發佈：2018-08-03
back 展示 tel 不可見 多一個空格 元素 mouseout ade 事件
目錄
- JavaScript框架種類及其優缺點
- jQuery庫
- jQuery對象$
- 掌握基本選擇器
- 掌握過濾選擇器
- 掌握表單選擇器
RIA技術
常見的RIA技術
- Ajax
- Sliverlight
- Flex
什麽是框架？
框架是程序員將一個又一個功能進行封裝，供其他人使用的程序組件，了解為模板而已。我們使用框架是為了簡化開發進程。
jQuery庫文件
導入：
<script src="js/jquery-1.11.3.js" type="text/javascript"></script>jquery-1.版本號.js（開發版）和 jquery-1.版本號.min.js（發布版）
第一個jQuery程序
<script src="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
alert(“開啟JQuery的學習之旅！ ");
});
</script>$(document).ready()是整個運行的核心。
練習
<script type = "text/javascript"> function init(){ alert(1); alert(2); } $(document).ready(init); $().ready(init); $(init); $(document).ready(function(){ alert(11); alert(12); }); $().ready(function(){ alert(11); alert(12); }); $(function(){ alert(11); alert(22); }); </script>
jQuery選擇器
$("h2").css("background","#08F");- 類CSS選擇器
- 過濾選擇器
基本選擇器
#id $(‘#test’) id為test
.class $(“.test”) class為test
element $(‘p’) 所有的<p>
* $(‘*’)選取所有的元素層次選擇器
$(‘div span’)：選取<div>裏所有的<span>元素 $(‘div > span’)：選取<div>下元素名是<span>的子元素 $(‘.one + div’)：class為one的下一個<div>元素 $(‘#two ~ div’)：id為two的元素後面的所有<div>兄弟元素
過濾選擇器
語法特點是使用“:”
分類如下：
- 基本 過濾選擇器
- 屬性 過濾選擇器
- 子元素 過濾選擇器
- 可見性 過濾選擇器
- 內容 過濾選擇器
- 表單對象屬性 過濾選擇器
- $(" li:first"?)：選取所有
- 元素中的第一個
- 元素
- $(" li:last"?)：選取所有
- 元素中的最後一個
- 元素
- $(" li:even"?)：選取索引為偶數的所有
- 元素
- $(" li:odd"?)：選取索引為奇數的所有
- 元素
- $(" li:not(.three)"?)：選取class不是three的元素
- $(":header"?)：選取網頁中所有標題元素
- $(":focus"?)：選取當前獲取焦點的元素
- $("li:eq(1)"?)：選取索引等於1的
- 元素，eq-gt-lt，gt為大於，lt為小於。
特殊符號的轉義
<div id="id#a">a</div>
$("#id\\#a");
<div id="id[3]">b</div>
$("#id\\[3\\]");內容過濾選擇器
- :contains(text)
- :empty
- :has(selector)
- :parent
選擇器的書寫規範很嚴格，多一個空格或少一個空格，都會影響選擇器的結果。
要求
- 選擇器
- 基本選擇器
- 層次選擇器
- 過濾選擇器
- 表單選擇器
技能
（1）基本過濾選擇器
（2）jQuery對象的click()方法
（3）jQuery對象的css()方法
（4）選擇器
（5）is()方法
（6）show()方法
（7）hide()方法
（8）addClass()方法
（9）mouseout()方法
（10）mouseover()方法
代碼：
<html>
<head>
<title>基本過濾選擇器</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js">
</script>
</head>
<body>
<h2>用戶交互設計學習參考書</h2>
<ul>
<li>JavaScript DOM編程</li>
<li>鋒利的JQuery</li>
<li>JQuery入門與提高</li>
<li>JavaScript高級編程</li>
<li>JQuery權威指南</li>
<li>JQuery實戰</li>
</ul>
</body>
</html>
代碼：
<html>
<head>
<title>可見性過濾選擇器</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
</head>
<body>
<p>蘿莉是什麽意思？</p>
<div class="tips">
蘿莉是洛麗塔的縮寫。“洛麗塔”原指1955年由俄裔美國作家的小說《洛麗塔》，或指小說中的女主角12歲的洛麗塔，後在日本引申發展成一種次文化，用來表示小女孩，或用在與其相關的事物，例如羅莉塔時裝。第一個被世人公認的蘿莉角色是1982年推出的《甜甜仙子》裏的主角Momo公主。第一代蘿莉萌王是《魔卡少女櫻》裏的主角木之本櫻。
</div>
</body>
</html>效果展示
“ul li:odd”選擇列表ul中奇數項，用css()方法，設置背影
判斷class為tips，調用show()方法顯示，調用hide()方法隱藏
<html>
<head>
<title>基本過濾選擇器</title>
<script type="text/javascript" src="jquery-1.10.1.js"></script>
<style type="text/css">
#id1{
background: blue;
}
#div{
width: 500px;
margin: 0px auto;
}
</style>
</head>
<body>
<div id="div">
<h2 id="id1">用戶交互設計學習參考書</h2>
<ul>
<li>JavaScript DOM編程</li>
<li>鋒利的JQuery</li>
<li>JQuery入門與提高</li>
<li>JavaScript高級編程</li>
<li>JQuery權威指南</li>
<li>JQuery實戰</li>
</ul>
</div>
<script type="text/javascript">
$("#id1").click(function(){
$lis = $("ul li:odd");
$lis.css("background","#ffe773");
});
</script>
</body>
</html><script type="text/javascript">
$tips = $(".tips");
$tips.hide();
$("p").click(function(){
if ($tips.is(":hidden")) {
$tips.show();
}else{
$tips.hide();
}
});
</script>JavaScript與CSS交互
Style屬性
document.getElementById("title").style.color="#f00f00";常用事件
onclick單擊
onmouseover鼠標移到某元素之上
onmouseout鼠標移開
onmousedown鼠標被按下visibility
- visible可見的
- hidden不可見的
JavaScript改變樣式
- 使用style屬性
- 使用className屬性
結語
jQuery基礎與JavaScript與CSS交互-第五章