jquery dom元素隐藏有哪些方式

我就说常用的两种：

hide()与show()方法交换着用

如果想隐藏后不再显示的话，直接用：remove();

其它的，还有fadeOut();

toggle()方法使一个元素交替显示与隐藏

或者通过css(）方法设置隐藏所对应的样式

或者是通过addClass()与removeClass()影响显示与隐藏的样式。

比如你的元素id是test_id,那么你可以

$('[id!=testid]')click(function(){

$('#test_id')hide();

})

还有一种方法是直接给document绑定事件：

$(document)bind("click", function (e) {

if($(etarget)closest("#test_id")size() <= 0)

$("#test_id")hide();

});

jQuery 获取 input 文本框中的值方法始终是相同的，与是否隐藏无关，隐藏与不隐藏都能获取到值；

<div id="thisdiv" style="display: none">

<input type="text" class="demo" id="demo" value="123213e2q">

</div>

<script>

var value = $('#demo')val(); // 直接根据 input 的id 获取值

var value = $('demo')val(); // 根据input 的class 类获取值，此方法需保证只有一个input 使用该class 类，否则始终返回第一个使用该class 类的input 的值

var value = $('#thisdiv input')val(); //

var value = $('#thisdiv demo')val(); // 根据父元素定位input 获取值

以上的方法都能获取到 input 中的值，与div 是否隐藏没关系

</script>

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();     //如果元素为显现,则将其隐藏

}

3jQuery判断元素是否显示 是否隐藏

代码如下:

var node=$('#id');

第一种写法

代码如下:

if(nodeis(':hidden')){//如果node是隐藏的则显示node元素，否则隐藏

nodeshow();　

}else{

nodehide();

}

第二种写法

代码如下:

if(!nodeis(':visible')){//如果node是隐藏的则显示node元素，否则隐藏

nodeshow();　

}else{

nodehide();

}

if(nodeis(':visible')){//如果node是显示的则隐藏node元素，否则显示

nodehide();

}else{

nodeshow();

}

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

Js代码

代码如下:

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

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

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

Js代码

代码如下:

$(element)is(":visible") // Checks for display:[none|block], ignores visible:[true|false] 

Js代码

 代码如下:

$('element:hidden') 

$('element:visible') 

Js代码

代码如下:

$("item")each(function() 

{ 

    if ($(this)css("visibility") == "hidden") 

    { 

        // handle non visible state 

    } 

    else 

    { 

        // handle visible state 

    } 

}) 

Js代码

代码如下:

ar isVisible = $('#myDiv')is(':visible'); 

var isHidden = $('#myDiv')is(':hidden'); 

Js代码

代码如下:

if( $(this)css("display") == 'none' ){ 

 

    / your code here/ 

} 

else{ 

 

    /  alternate logic   / 

} 

var tableTest; function initTable(){ tableTest = $('#tableTest')dataTable({ "bJQueryUI": true, "sPaginationType": "full_numbers", "aaData": [ ['101', 'aaa', '91,1', '2012-10-10', 'X'], ['102', 'bbb', '92,5', '2012-3-19', 'X'], ['103', 'ccc', '89,5', '2013-3-21', 'X'], ['105', 'eee', '95', '2011-11-11', 'C'], ['104', 'ddd', '91', '2013-2-22', 'X'] ], 'aaSorting':[ [1,'asc'],[2,'asc'] ], 'aoColumns':[ {'sTitle':'ID', 'sWidth':'20%','sClass':'center'}, {'sTitle':'Name', 'sWidth':'20%','sClass':'center'}, {'sTitle':'Score','sWidth':'20%','sClass':'center'}, {'sTitle':'Date', 'sWidth':'20%','sClass':'center'}, {'sTitle':'downLoad', 'sWidth':'20%',"bVisible": false,"bSearchable": false, 'sClass':'center', "mRender": function ( data, type, full ) { return '<input type="text" class="userName" value="'+data+'"/>'; }} ] }); $('#tableTest')find('userName')each(function(){ consolelog($(this)val()); }); }       有两个bVisible和bSearchable，如果设置bVisible：false，那么这列数据是不可访问的，bSearchAble：false是可以访问的，我感觉这边做的不是很好哎，就比方说我们一般都喜欢对表添加一列隐藏列，里面记录每行的id，方便数据访问，但是貌似这招这样不行。我想能不能用mReader来做，就比方上面代码，设置type='hidden'，试验发现不行，看来我是明显天真了。但是想到mReader:function(data,type,full)其中的full就是这一列的所有信息，试验了一下，的却访问隐藏的那一列，那么通过这种变相的方法就可以访问隐藏的数据了。      总结一下，可以通过mReader:function(data,type,full)中的full参数获取一行所有信息（包括隐藏列），获取到的是一列字符串，然后通过spilt转换位数组，然后选取第几个。

点击a链接，隐藏a的父级元素div

$(function(){

$('tb_click_close')click(function(){

$(this)parent()hide();

})

})

这里主要用到 parent()这个方法，即取当前对象的父级元素，要父级的父级就$(this)parent()parent() 以此类推

("#父窗口元素ID" window parent document); 对应javascript版本为window parent document getElementByIdx_x("父窗口元素ID") 取父窗口的元素方法 $(selector window parent document); 那么你取父窗口的父窗口的元素就可以用 $(selector window parent parent document); 类似的 取其它窗口的方法大同小异 $(selector window top document); $(selector window opener document); $(selector window top frames[ ] document); 子窗口创建及父窗口与子窗口之间通信 Javascriptd出子窗口 可以通过多种方式实现 下面介绍几种方法 ( ) 通过window对象的open()方法 open()方法将会产生一个新的window窗口对象 其用法为 window open(URL windowName parameters); URL: 描述要打开的窗口的URL地址 如何为空则不打开任何网页 windowName:描述被打开的窗口的民称 可以使用 _top _blank 等内建名称 这里的名称跟<a href=" " target=" ">里的target属性是一样的 parameters:描述被打开的窗口的参数值 或者说是样貌 其包括窗口的各个属性值 及要传入的参数值 例如 打开一个 x 的干净的窗口 open( _blank width= height= menubar=no toolbar=no location=no directories=no status=no scrollbars=yes resizable=yes ) 也可以这样写 var newWindow = open( _blank );

参数说明如下 top=# 窗口顶部离开屏幕顶部的像素数 left=# 窗口左端离开屏幕左端的像素数 width=# 窗口的宽度 height=# 窗口的高度 menubar= 窗口有没有菜单 取值yes或no toolbar= 窗口有没有工具条 取值yes或no location= 窗口有没有地址栏 取值yes或no directories= 窗口有没有连接区 取值yes或no scrollbars= 窗口有没有滚动条 取值yes或no status= 窗口有没有状态栏 取值yes或no resizable= 窗口给不给调整大小 取值yes或no

( ) 在javascript中除了通过open()方法建立window对象实现d出窗口外 还可以通过建立对话框的方式d出窗口 如 alert(""); //d出信息提示对话框 confirm(""); //d出信息确认对话框 prompt(""); //具有交互性质的对话框 但是 上述实现的d出窗口具有的功能较为单一 只能完成较为简单的功能 对于需要在对话框中显示多个数据信息 甚至是HTML控件就无能为力了

( ) 使用模态对话框实现复杂的对话框需求 在javascript的内建方法中还有一类方法可以实现通过对话框显示HTML内容 也就是说可以通过创建对话框的方式来完成创建窗口对象所能完成的功能 包括创建模态对话框和非模态对话框两种

实现方法为 //创建模态你对话框 window showModalDialog(sURL vArguments sFeatures) //创建非模态对话框 window showModelessDialog(sURL vArguments sFeatures)

其区别在于 用showModelessDialog()打开窗口时 不必用window close()去关闭它 当以非模态方式［IE ］打开时 打开对话框 的 窗口仍可以进行其他的 *** 作 即对话框不总是最上面的焦点 当打开它的窗口URL改变时 它自动关闭 而模态［IE ］方式的对话框始终有焦点（焦点不可移 走 直到它关闭） 模态对话框和打开它的窗口相联系 因此我们打开另外的窗口时 他们的链接关系依然保存 并且隐藏在活动窗口的下面 showModeDialog()则不然

参数说明 sURL 必选参数 类型 字符串 用来指定对话框要显示的文档的URL vArguments 可选参数 类型 变体 用来向对话框传递参数 传递的参数类型不限 包括数组等 对话框通过window dialogArguments来取得传递进来的参数 sFeatures 选参数 类型 字符串 用来描述对话框的外观等信息 可以使用以下的一个或几个 用分号“;”隔开 dialogHeight 对话框高度 不小于 px IE 中dialogHeight和dialogWidth 默认的单位是em 而IE 中是px 为方便其见 在定义modal方式的对话框时 用px做单位 dialogWidth: 对话框宽度 dialogLeft: 距离桌面左的距离 dialogTop: 离桌面上的距离 center: 窗口是否居中 默认yes 但仍可以指定高度和宽度 取值范围{yes | no | | } help: 是否显示帮助按钮 默认yes 取值范围 {yes | no | | } resizable: 是否可被改变大小 默认no 取值范围 {yes | no | | } ［IE +］ status: 是否显示状态栏 默认为yes[ Modeless]或no[Modal] 取值范围{yes | no | | } ［IE +］ scroll:指明对话框是否显示滚动条 默认为yes 取值范围{ yes | no | | | on | off } 还有几个属性是用在HTA中的 在一般的网页中一般不使用 dialogHide:在打印或者打印预览时对话框是否隐藏 默认为no 取值范围{ yes | no | | | on | off } edge:指明对话框的边框样式 默认为raised 取值范围{ sunken | raised } unadorned:默认为no 取值范围{ yes | no | | | on | off }

lishixinzhi/Article/program/Java/JSP/201311/20651

以上就是关于jquery dom元素隐藏有哪些方式全部的内容，包括:jquery dom元素隐藏有哪些方式、jq点击非此元素的以为其他元素隐藏该元素、jquery 如何获取隐藏div中Input中的文本框值等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！