1.動畫效果
//使元素顯示和隱藏
/*
show()用來顯示包裝集裏的元素，而hide()用來隱藏包裝集的元素。
jquery通過將style屬性的display值改爲none來使元素隱藏，如果包裝集裏一個元素隱藏，它將保持隱藏狀態，但依然被返回jquery鏈。
*/
//HTML片段
<div style="display:none;" class="fun" >This will start hideen</div>
<div >sdhkad</div>
//實現可摺疊的表
<body>
<fieldest>
<lengend> Collfhj list </lengend>
<ul>
<li> item 1 </li>
</ul>
.....
</body>
$(function(){
$('li:has(ul)').click(function(event){//1.2
if(this == event.target){
if($(this).children().is(':hideen')){//3
$(this).css('list-style-image','url(minus.gif)').children().show();
}
else {
$(this).css('list-style-image','url(plus.gif)').children().hide();
}
}
return false;//4
}).css('cursor','pointer').click();//5.6
$('li:not(:has(ul))').css({//7
cursor:'default',
'list-style-image':'none'
});
});
/*
我們通過應用jquery容器選擇器li:has(ul),選擇擁有子列表的所有列表項，然後附加處理程序click作爲開頭，把一串命令應用到已匹配的元素上
這個click處理程序檢查並確保event的target（目標）元素與this相匹配。當且僅當以點擊的項與建立監聽器的項相一致時，匹配結果爲true
如果我們確定父項已被點擊，就傳入:hidden篩選器調用簡單的is()命令以便確定子項處於隱藏或是顯示狀態。子項如果隱藏就調用show()
使它們顯示：如果顯示，就調用hide()使他們隱藏。在這兩種情況下，我們分別將父項的記號改爲減號或加號，然後返回false作爲監聽器的值
以便防止不需要的事件傳播。
*/
//切換元素的顯示狀態,上面是如此的頻繁的操作，因此使用jquery定義名爲toggle()的命令，操作簡便
$(function(){
$('li:has(ul)').click(function(event){
if(this == event.target){
$(this).children().toggle();
$(this).css('list-style-image',($(this).children().is(':hedden'))? 'url(plus.gif)' : 'url(minus.gif)');
}
return false;
});
});
//動畫效果使函數顯示和隱藏
$(function(){
$('li')
.css('point','default')
.css('list-style-image','none');
$('li:has(ul)')
.click(function(event){
if(this == event.target){
$(this).css('list-style-image',($(this).children().is(':hedden'))? 'url(plus.gif)' : 'url(minus.gif)');
}
return false;
}).css({cursor:'pointer'
,'list-style-image' : 'url(plus.gif)'})
.children().hide();
});..........
//jquery事件模型
//1.利用jquery事件模型，憑藉bind()命令可以在dom元素上建立事件處理程序
$('img').bind('click',function(event){alert('hi there')});
//案列
<html>
<head>
<title> dom level</title>
<script type="text/javascript" src="../script/jquery-1.2.1.js">
</script>
<script type="text/javascript">
$(function(){
$('#vstar').bind('click',function(event){
say('where one');
}).bind('click',function(event){
say('where two');
}).bind('click',function(event){
say('where there ');
});
});
</script>
</head>
<body>
<img id="vstar" src="vstar.jsp" οnclick="say('Vroom vroom');"/> //對<img>元素進行設置
<div id="console" ></div>
</body>
</html>
//指派命名空間
$('#thing1').bind('click.editMode',someListener);
//刪除事件
unbind(event);
//監聽事件
$('#outer1').bind('mouseover',report).bind('mouseout',report);
function report(event){
$('#console').append('<div>'+event.type+'</div>');
}
//其他事件,切換事件。這個可以用於事件的切換。
<html>
<head>
<title> dom level</title>
<script type="text/javascript" src="../script/jquery-1.2.1.js">
</script>
<script type="text/javascript">
$(function(){
$('#vstar').toggle(//因爲toggle()命令處理所有的切換，所有我們不必費力地跟蹤當前點擊是奇數次還是偶數次。
function(event){//奇數監聽器使圖像變灰
$(event.target).css('optcity',0.4);
},
function(event){//偶數監聽器使用圖像還原爲完全的不透明度
$(event.target).css('optcity',1.0);
}
);
});
//3.在元素上方懸停鼠標指針
/*
通知我們"某個時候鼠標指針進入或離開某區域"的事件。
*/
$('#outer2').hover(report,report);//不必對鼠標指針從子元素上通過而做出反應的情況下。
//讓更多事件工作起來--
<div>
<label>
<input type='checkbox' name='appetizers' value="imperial"/>enkj
</label>
<span price="3">
<input type="text" name="imperial.quanttity" disabled = "disabled" value="1"/>
$<span></span>
<div >
<label>
<input type="radio" name="imperial.option" value="pork" checked="checked"/>
pork</label>
<input type="radio"...../>
//<div>元素的選擇器
$('fielddset div div ').hide();//最初我們可以用css控制，就不用JavaScript加載了。
/*
現在把注意力移動到啓用由元素展示的可用性行爲。首先把開胃菜關聯的單選框按鈕選項的顯示與否，與開胃菜的選中與否關聯起來
爲了對開胃菜複選框狀態的變化做出反應，也就是觸發包含子選項的<div>元素可變性的變化，我們在複選框上建立click事件的監聽器
，通過監聽器可以根據複選框的狀態來跳整子選項的可見性。
*/
$(':checkbox').click(function(){
var checked = this.checked;
$('div',$(this).parents('div:first')).css('display',checked ? 'block':'none');
$('input[type=text]',$(this).parents('div:first')).attr('disabled',!checked).css('color',checked ? 'black' :'#fofofo')
.val(1).change().each(function(){if (checked) this.focus()});
});
/*
現在把注意力轉移到文本框中change()處理程序。當文本框的值改變時，我們想要重新計算和顯示開胃菜的價錢。
*/
$('span[price] input[type=text]').change(function(){
$('- span:first',this).text(
$(this).val() *
$(this).parents("span[price]:first").attr('price')
) ;//再找到文本框之後(利用選擇器，意思是：在擁有price特性的<span>元素內查找text類型的所有<input>元素)
});
//完整代碼
<html>
<head>
<title> dsnhfsdfnkdl</title>
<link rel="styleSheets" type="text/css" href="bamboo.css">
//引入JavaScript
<script type="text/javascript">
$('span[price] input[type=text]').change();
</script>
3.標誌
//jquery標誌
//1.檢測用戶代理
$.browser//
//瀏覽器檢測
$(function(){
$('#testButton').click(function(){
var select=$('#testSubject')[0];
select.add(new Option('Twoxfbsk '),
$.browser.mise ? 2 : select.options[2]//爲第二個餐宿採取瀏覽器檢測
);
});
});
//2.確定方框
$.boxNodel//所以有些網頁在不同的網頁顯示框不一樣。
//如果頁面用w3c標誌的方框模型，被設置爲true；如果頁面使用ie瀏覽器的方框模型，被設置爲false。
//3.檢測要用的正確的浮動樣式
$.styleFloat
