13518219792
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标签--
判断方法：
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
思路：使用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、显示效果
………………竟然有人问这种问题………………
举例
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的遍历函数（如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);
});
});
观察效果
