Jquery学习（二）—实现隐藏显示 动态效果操作 基本函数 选择器
<script type="text/javascript" src="jquery/jquery-1.8.0.js"></script>
<style type="text/css">
.div1 {
height: 10px;
display: none;
}
.panel {
display: none;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".p1").click(function() {
$(".div1").slideToggle("slow");
});
//hide() 和 show() 都可以设置两个可选参数：speed 和 callback。
//callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关
//callback 参数的知识。
//speed 参数可以设置这些值："slow", "fast", "normal" 或 milliseconds：
$("#hide").click(function() {
//1000代表隐藏时的速度
$("#p1").hide(1000,function(){
alert("隐藏完毕了");
});
});
$("#show").click(function() {
$("#p1").show(1000,function(){
alert("显示完毕了");
});
});
//jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。
//隐藏显示的元素，显示隐藏的元素
$("#toggle").click(function() {
$("#p1").toggle(1000);
});
//jQuery 滑动函数 - slideDown, slideUp, slideToggle
$("#filp").click(function() {
$(".panel").slideDown(1000);
});
$("#filp2").click(function() {
$(".panel").slideUp(1000);
});
$("#filp3").click(function() {
$(".panel").slideToggle(1000);
});
//jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()
$("#fadeTo").click(function() {
$("#testDiv").fadeTo("slow", 0.35);
});
$("#fadeOut").click(function() {
$("#testfadeOut").fadeOut(2000);
});
//jQuery 自定义动画
$("#animation1").click(function() {
$("#testDiv2").animate({
height : 300
}, "slow");
$("#testDiv2").animate({
width : 300
}, "slow");
$("#testDiv2").animate({
height : 100
}, "slow");
$("#testDiv2").animate({
width : 100
}, "slow");
});
$("#animation2").click(function(){
alert(11111);
$("#testDiv3").animate({left:"100px"},"slow");
$("#testDiv3").animate({fontSize:"3em"},"slow");
});
});
</script>
</head>
<body>
<div class="div1">
<p>SDGDFGHFDHFGHGFHFHDFHGDFHGDFGHDFHBDFHGFHD</p>
<p>SDGDFGHFDHFGHGFHFHDFHGDFHGDFGHDFHBDFHGFHD</p>
</div>
<p class="p1">点击我..</p>
<p></p>
<div id="testDiv"
style="background: yellow; width: 300px; height: 300px;">
<button id="fadeTo">Click fadeTo</button>
</div>
<p></p>
<div id="testfadeOut" style="background: yellow; width: 200px">CLICK
ME AWAY!</div>
<button id="fadeOut">Click fadeOut</button>
<p></p>
<p id="p1">
If you click on the "Hide" button, I will disappear. <br>If you
click on the "Hide" button, I will disappear.</br>
</p>
<button id="hide">hide</button>
<button id="show">show</button>
<button id="toggle">toggle</button>
<p></p>
<div class="panel">
<p>Because time is valuable, we deliver quick and easy learning.</p>
<p>At W3School, you can study everything you need to learn, in an
accessible and handy format.</p>
</div>
<button id="filp">slideDown</button>
<button id="filp2">slideUp</button>
<button id="filp3">slideToggle</button>
<p></p>
<button type="button" id="animation1">Start animation1</button>
<button type="button" id="animation2">Start animation2</button>
<div id="testDiv2"
style="background: green; width: 100px; height: 100px;"></div>
<div id="testDiv3"
style="background: #98bf21; height: 100px; width: 200px; position: relative">
HELLO</div>
<p></p>
</body>
相关推荐
结合以上知识，我们可以在实际项目中灵活控制表格行的显示与隐藏，实现动态交互效果。在进行此类操作时，注意考虑性能问题，避免一次性处理大量元素，可以分批操作或者使用事件委托来提高效率。 至于标签 "源码" 和...
综合来看，"jquery实现层的隐藏显示"这个主题涵盖了如何使用 jQuery 实现元素的动态显示和隐藏，这对于创建响应式和交互性强的网页至关重要。通过结合不同的显示效果和用户触发的事件，开发者可以创建出更加吸引人的...
通过这个示例，开发者不仅可以学习到如何使用jQuery来实现基本的显示和隐藏效果，还可以了解到如何扩展和优化这个功能，以适应更复杂的交互需求。对于初学者来说，这是一个很好的实践项目，能帮助他们更好地理解和...
在创建动态选项卡菜单时，jQuery的主要作用在于监听用户交互，如点击事件，然后根据这些事件改变页面状态，比如显示或隐藏相应的菜单内容。 CSS3是CSS的最新版本，提供了许多新的样式和动画功能。在选项卡切换中，...
"jQuery实现显示与隐藏"这个主题是jQuery基础中的基础，也是网页动态效果制作的关键技巧之一。这里我们将深入探讨如何使用jQuery来控制元素的可见性。 首先，jQuery提供了两个主要的方法来实现元素的显示与隐藏：`...
在介绍jQuery实现的动态伸缩导航菜单实例中，我们首先需要了解jQuery这个前端开发常用的...对于学习和使用jQuery的开发者来说，这是一个实用且简洁的例子，可以作为进一步探索jQuery动态效果和交互行为的基础。
"JQuery 鼠标滑过图片显示隐藏标题"这一技术正是为了实现这种交互效果而设计的。它允许用户在鼠标移动到图片上时，自动显示图片相关的文字描述，提供额外的信息，而当鼠标移开时，这些文字又会自动隐藏，保持页面的...
通过这个代码示例，我们可以学习到如何利用jQuery实现动态效果，以及如何控制元素的显示和隐藏。对于网页开发者来说，掌握这样的技能能够提升网站的交互性和用户体验，让网站更加吸引用户。同时，理解并运用这段代码...
在这个项目中，jQuery被用来控制二级导航的显示和隐藏，以及处理各种自定义内容的展示。 响应式设计是确保网站在不同屏幕尺寸（如桌面、平板、手机）上都能正常显示和使用的必备技术。这个二级导航方案采用了媒体...
总之，"jquery显示隐藏菜单实例"是网页开发中一个基础但重要的功能，它体现了jQuery在简化DOM操作和创建动态效果上的强大能力。通过学习和理解这个实例，开发者可以进一步提升网站的交互性和用户体验。
本示例"jquery滑动显示和隐藏图片效果.rar"聚焦于一个常见的交互设计元素：通过滑动操作来控制图片的显示与隐藏，这在网页动态效果中非常常见，如轮播图、滑动面板等。这一技术主要依赖于jQuery的事件处理和CSS样式...
在本讨论中，我们将深入探讨jQuery幻灯片Slide隐藏效果的核心原理、实现方法以及如何利用它来创建自己的动态幻灯片。 首先，jQuery是JavaScript的一个库，它简化了DOM操作、事件处理、动画制作等任务。在幻灯片...
jQuery结合响应式框架，如Bootstrap，可以实现跨设备的动态效果。通过检测屏幕尺寸，我们可以使用`$(window).width()`和`.height()`来调整元素的样式和行为。 八、性能优化 虽然jQuery方便，但过度使用可能导致性能...
在IT行业中，jQuery是一款非常流行...总的来说，这个资源对于学习jQuery交互设计和理解JavaScript与CSS在网页动态效果中的配合使用非常有价值。不论你是初学者还是经验丰富的开发者，都可以从中受益，提升自己的技能。
在我们的二级导航项目中，jQuery将扮演核心角色，帮助我们实现动态效果。 在HTML结构上，二级导航通常包含一个主导航条和一系列下拉菜单。主导航条中的每个项都可以展开或收起其对应的下拉菜单。为了创建这个结构，...
总的来说，jQuery提供了一套简洁、易用的API来操作DOM元素，包括菜单的显示和隐藏。通过学习和实践，你可以创建出功能丰富、交互性强的网页菜单。继续探索jQuery的其他功能，将有助于你成为一名更熟练的Web开发者。...
在本项目中，“jQuery九宫格遮罩显示文字效果.zip”是一个包含JavaScript特效的资源，主要目的是实现一种交互式的设计，即当用户鼠标悬停在九宫格布局的图片上时，会显示相应的文字信息。这个功能在网页设计中常用于...
2. **Tab页切换**：利用JQuery的选择器和`hide()`、`show()`方法，可以实现内容区域根据选项卡的切换而显示和隐藏。通过`data-*`属性或自定义属性，可以存储和恢复当前选中的tab状态。 3. **登录表单**：JQuery可以...
本实例将深入探讨如何使用jQuery来实现表格的动态修改和隐藏功能，这对于创建交互式用户界面至关重要。 首先，让我们理解jQuery的核心概念。jQuery通过封装JavaScript API，使得选择元素、操作元素、添加事件监听器...
在页面中经常会遇到需要动态显示或隐藏内容的场景，jQuery中的slideToggle()函数就是用来实现这种效果的。该函数可以在元素滑动隐藏和展开之间切换。当元素是可见的时候，调用slideToggle()函数会使它滑动隐藏；反之...