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
1156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
