如何使用jquery让元素显示后自动隐藏

script src="jQuery/jquery.js"/script!--请留意JQ引用位置--

网站建设哪家好，找创新互联建站！专注于网页设计、网站建设、微信开发、重庆小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了通道免费建站欢迎大家使用！

!--脚本部分开始--

script language="javascript"

$(document).ready(function(){

//第一行，鼠标移到P标签，span中的元素显示

$("img#p1").mouseover(function(){$("img#span1").show()})

//第二行，鼠标离P标签，span中的元素隐藏

$("img#p1").mouseout(function()｛$('img#span1').hide()})

})

/script

!--脚本部分结束--

!--HTML部分开始--

p id="p1"把鼠标移动到这里来/p

spanimg id="span1" src="span图片.JPG" style="display:none"/我是显示内容1/span

!--HTML部分结束--

!--解释：通过jQuery的show()、hide()函数可以实现显示和隐藏功能，通过jQuery的CSS选择器可以选择HTML标签--

jQuery 元素是否显示与隐藏的判断

判断方法：

1、使用CSS属性

var display =$('#id').css('display');

if(display == 'none'){

alert("被你发现了，我是隐藏的啦！"

);}

2、使用jquery内置选择器

假设我们页面有这么个标签,

div id="test"p仅仅是测试所用/p/div

那么,我们可以用以下语句来判断id为"test"的标签是否隐藏:

if($("#test").is(":hidden")){...} //前提是已经将jQuery的库导进来了

这样,我们就能够很简单地判断一个元素是否隐藏,并根据其状态来设置动,比如:

if($("#test").is(":hidden")){

$("#test").show();  //如果元素为隐藏,则将它显现

}else{

$("#test").hide();     //如果元素为显现,则将其隐藏

}

3、jQuery判断对象是否显示或隐藏

Js代码

// jQuery("#tanchuBg").css("display")

// jQuery("#tanchuBg").is(":visible")

// jQuery("#tanchuBg").is(":hidden")

扩展资料：

jQuery语言特点：

1、快速获取文档元素

jQuery的选择机制构建于Css的选择器，它提供了快速查询DOM文档中元素的能力，而且大大强化了JavaScript中获取页面元素的方式。

2、提供漂亮的页面动态效果

jQuery中内置了一系列的动画效果，可以开发出非常漂亮的网页，许多网站都使用jQuery的内置的效果，比如淡入淡出、元素移除等动态特效。

3、创建AJAX无刷新网页

AJAX是异步的JavaScript和ML的简称，可以开发出非常灵敏无刷新的网页，特别是开发服务器端网页时，比如PHP网站，需要往返地与服务器通信，如果不使用AJAX，每次数据更新不得不重新刷新网页，而使用AJAX特效后，可以对页面进行局部刷新，提供动态的效果。

4、提供对JavaScript语言的增强

jQuery提供了对基本JavaScript结构的增强，比如元素迭代和数组处理等操作。

5、增强的事件处理

jQuery提供了各种页面事件，它可以避免程序员在HTML中添加太事件处理代码，最重要的是，它的事件处理器消除了各种浏览器兼容性问题。

6、更改网页内容

jQuery可以修改网页中的内容，比如更改网页的文本、插入或者翻转网页图像，jQuery简化了原本使用JavaScript代码需要处理的方式。

参考资料：百度百科——jQuery

jquery怎么设置默认显示第一个元素

思路：使用hide()隐藏所有元素→使用选择器first,first-child,nth-child(1)等获取第一个元素→使用show()显示第一个元素。

实例演示如下:

1、HTML结构

div id="test"

liGlen/li

liTane/li

liJohn/li

liRalph/li

/div

2、jquery代码

$(function(){

$("#test li").hide();

$("#test li").eq(0).show();

});

3、显示效果

如何通过jquery隐藏和显示元素

………………竟然有人问这种问题………………

举例

html

head

script type="text/javascript" src="/jquery/jquery.js"/script

script type="text/javascript"

$(document).ready(function(){

$(".btn1").click(function(){

$("p").hide();

});

$(".btn2").click(function(){

$("p").show();

});

$(".btn3").click(function(){

$("p").toggle();

});

});

/script

/head

body

pThis is a paragraph./p

button class="btn3"切换/button

button class="btn1"Hide/button

button class="btn2"Show/button

/body

/html

授之以渔

jquery如何元素的值循环显示出来

首先选择需要循环显示的元素，然后用jquery的遍历函数（如each()和map()）将其显示出来即可：

$(selector).each(function(index,element));   // 为每个匹配元素规定运行的函数

$(selector).map(function(index,domElement)); // 对当前集合中的每个元素调用的函数对象

实例演示：点击按钮获取第二个div下所有p标签的值

创建Html元素

div class="box"

span点击按钮获取第二个div下所有p标签的值：/spanbr

div class="content"

  paaaa/p

  pbbbb/p

  pcccc/p

/div  

div class="content"

  p1111/p

  p2222/p

  p3333/p

/div  

div class="content"

  p555/p

  p666/p

  p77777/p

/div

input type="button" value="获取第二个div下所有p标签的值"

/div

设置css样式

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

div.boxspan{color:#999;font-style:italic;}

div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

编写jquery代码

$(function(){ 

$("input:button").click(function() {

text = $("div.content").eq(1).find("p").map(function(index,elem) {

return $(elem).text();

}).get().join(',');

alert("第二个div下p标签依次为："+text);

});

});

观察效果

网页名称：jquery让元素显示,jquery 显示
分享地址：http://myzitong.com/article/hoocsd.html