jquery显示隐藏信息示例页面

jquery修改input输⼊框的readOnly属性input输⼊框隐藏

html的代码

class="help-inline">* 房间总数：

style="width: 30px;" onchange="totalRooms(1)"

onkeyup="this.value=this.value.replace(/[^\d]/g,'') "

value=""

readOnly="true"/>

  间    

onclick="editCount(1)" />

js

注释的前两种不可⽤,不知道原因,最后的removeProp可⽤

input输⼊框隐藏

div隐藏、显⽰

JS隐藏和显⽰div的⽅式有两种：

需要注意的是⽤JS设置div的属性，必须在ccs中设置对应属性，否则报错。同理可以设置相同class,进⾏批量设置。1. display--隐藏后释放占⽤的页⾯空间。

style="display: none;"

document.getElementById("demo").style.display="none";//隐藏 document.getElementById("demo").style.display="";//显⽰ 2. visibility--隐藏后仍占有页⾯空间，显⽰空⽩。

style="visibility: none;"

document.getElementById("demo").style.visibility="hidden";//隐藏 document.getElementById("demo").style.visibility="visible";//显⽰ 注意：使⽤第⼆⽅式更⼈性化，但是，⽤div.style.display="none"隐藏会引起，div⾥⾯的东西休眠，⾥⾯的事件就不响应了。

jQuery隐藏和显⽰div的⽅式

1. .attr

$("#demo").attr("style","display:none;");//隐藏div $("#demo").attr("style","display:block;");//显⽰div2. .css

$("#demo").css("display","none");//隐藏div $("#demo").css("display","block");//显⽰div 3. hide()、show()

$("#demo").hide();//隐藏div $("#demo").show();//显⽰div 3. hide()、show()

$("#demo").hide();//隐藏div $("#demo").show();//显⽰div 注：1和2中的display:none可以换成visibility:hidden，display:block可以换成visibility:visible.两者的区别是前者隐藏后不占空间，⽽后者隐藏后会占空间。

javascript+html实现隐藏显⽰

1

2       

3 上传⽂件夹

4

5         

6 上传单个⽂件

7

1 function checking1() {

2 if ($("rbtAll").checked) {

3 document.getElementById('All').style.display = document.getElementById('All').style.display == 'none' ? '' : 'none';

4 if ($("rbtOne").checked != true) {

5 document.getElementById('One').style.display = document.getElementById('One').style.display == 'none' ? '' : 'none'; return false;

6

7 }

8 }

9 }

10 function checking2() {

11 if ($("rbtOne").checked) {

12 document.getElementById('One').style.display = document.getElementById('One').style.display == 'none' ? '' : 'none';

13 if ($("rbtAll").checked != true) {

14 document.getElementById('All').style.display = document.getElementById('All').style.display == 'none' ? '' : 'none'; return false;

jquery实现点击查看更多内容控制段落⽂字展开折叠效果

本⽂实例讲述了jquery实现点击查看更多内容控制段落⽂字展开折叠效果。分享给⼤家供⼤家参考。具体如下：

这⾥使⽤jQuery实现的⽂字展开折叠效果，点击⽂字后⽂字内容会完整的显⽰出来，控制段落来显⽰⽂字，不需要的时候，可以再次点击后将内容折叠起来，也就是隐藏了⼀部分内容。点击查看更多的

功能，在很多⼤⽹站都有在⽤，像⼀些电影简介、产品介绍有时候为了页⾯的布局效果，常常默认是隐藏了⼀部分，⽤户想看的时候可以点击后展开。运⾏效果如下图所⽰：

具体代码如下：

jQuery⽂本段落展开和折叠效果

Gordon developed his own stitching technique, which made the garments more durable, cost effective and less labor intensive. He employed machinists, moved the operation into a factory, set up a distribution network and sponsored a team of renowned

Since those beginnings, Billabong has expanded its product range to include boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.

希望本⽂所述对⼤家的jquery程序设计有所帮助。