点击消失

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

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

    $(this).hide();

  });

});

</script>

</head>

<body>

<p>如果你点我，我就会消失。</p>

<p>继续点我!</p>

<p>接着点我!</p>

　　隐藏属性

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有 <p> 元素

$("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隐藏所有 id="test" 的元素

　　选择器，选中元素

$(document).ready(function(){

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

    $("p").hide();

  });

});

　　鼠标移动显示

$(document).ready(function(){

  $("#p1").mouseleave(function(){

    alert('您的鼠标移到了 id="p1" 的元素上!');

  });

});

　　jq隐藏显示元素

<script>

$(document).ready(function(){

  $("#hide").click(function(){

    $("p").hide();

  });

  $("#show").click(function(){

    $("p").show();

  });

});

</script>

</head>

<body>

<p>如果你点击“隐藏” 按钮，我将会消失。</p>

<button id="hide">隐藏</button>

<button id="show">显示</button>

　　隐藏时间

$("p").hide(1000);

　　通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。

$("p").toggle();

　通过 jQuery，您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法：

fadeIn()    变化出现

fadeOut()   变化消失

fadeToggle()

fadeTo()   变化到

　　单机下滑出现    slideToggle{上下切换}

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

  $("#flip").click(function(){

    $("#panel").slideDown("slow");

  });

});

</script>

<style type="text/css">

#panel,#flip

{

	padding:5px;

	text-align:center;

	background-color:#e5eecc;

	border:solid 1px #c3c3c3;

}

#panel

{

	padding:50px;

	display:none;

}

</style>

</head>

<body>

<div id="flip">点我滑下面板</div>

<div id="panel">Hello world!</div>

　animate方法移动

$(document).ready(function(){

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

    $("div").animate({left:'250px'});

  });

});

　　animate实现下拉式出现与消失

$(document).ready(function(){

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

    $("div").animate({

      height:'toggle'

    });

  });

});

　　简单的动画变换

$(document).ready(function(){

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

    var div=$("div");

    div.animate({height:'300px',opacity:'0.4'},"slow");

    div.animate({width:'300px',opacity:'0.8'},"slow");

    div.animate({height:'100px',opacity:'0.4'},"slow");

    div.animate({width:'100px',opacity:'0.8'},"slow");

  });

});

　　暂停与开始滑动

$(document).ready(function(){

  $("#flip").click(function(){

    $("#panel").slideDown(5000);

  });

  $("#stop").click(function(){

    $("#panel").stop();

  });

});

　　单机改变文本

$(document).ready(function(){

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

    $("#test1").text("Hello world!");

  });

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

    $("#test2").html("<b>Hello world!</b>");

  });

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

    $("#test3").val("RUNOOB");

  });

});

　　单击添加到前面

<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">

</script>

<script>

$(document).ready(function(){

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

		$("p").prepend("<b>在开头追加文本</b>。");

	});

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

		$("ol").prepend("<li>在开头添加列表项</li>");

	});

});

</script>

</head>

<body>

<p>这是一个段落。</p>

<p>这是另外一个段落。</p>

<ol>

<li>列表 1</li>

<li>列表 2</li>

<li>列表 3</li>

</ol>

<button id="btn1">添加文本</button>

<button id="btn2">添加列表项</button>

</body>

　点击增加文本的方式

function appendText(){

	var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本

	var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本

	var txt3=document.createElement("p");

	txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM

	$("body").append(txt1,txt2,txt3);        // 追加新元素

}

　　插入位置

$(document).ready(function(){

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

    $("img").before("<b>之前</b>");

  });

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

    $("img").after("<i>之后</i>");

  });

});

　　remove移出元素

$("#div1").remove();

　　empty清空子元素

$("#div1").empty();

　　jQuery 提供多个处理尺寸的重要方法：

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerHeight()

　　

jq-杂记的更多相关文章

  1. jq选择器基础

    Jquery $代表选择器 使用jq必须要导入jq文件 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js&qu ...

  2. JQ实现判断iPhone、Android设备

    最近做了一版微信宣传页,通过JQ来判断设备,并进行下载 微信内置浏览器对下载链接进行了屏蔽,所以先进行判断,如果是微信内置浏览器,则跳转应用宝链接,如果不是,则判断是iPhone/Adroid/PC ...

  3. [Erlang 0118] Erlang 杂记 V

       我在知乎回答问题不多,这个问题: "对你职业生涯帮助最大的习惯是什么?它是如何帮助你的?",我还是主动回答了一下.    做笔记 一开始笔记软件做的不好的时候就发邮件给自己, ...

  4. jq.validate隐藏元素忽略验证

    jq.validate隐藏元素忽略验证 现在有这样一个需求,当触发某类事件时候,需要在页面中显示input框,但是当不需要加载页面中的元素时候,进行隐藏.在这个需求的前提下,程序中对于input中的输 ...

  5. jq.validate 自定义验证两个日期

    jq.validate 自定义验证两个日期 首先定义有一个表单,date1和date2是属于表单的元素,若date1大于date2,返回false:若date1<date2,返回true.使用j ...

  6. jq方法中 $(window).load() 与 $(document).ready() 的区别

    通过自学进入了前端的行列,只知道在js中,一开头就写一个: window.onload = function(){ //doing sth} 然后所有的乱七八糟的代码全塞里面,大概知道window.o ...

  7. jq 根据值的正负变色

    效果图这样: 意思就是根据最后的百分值变色,值为负变绿色,值为正变红色. 所以只要取到那个标签里的值了,就能根据正负的判断决定颜色. 我的html部分这样: /*不过他们都说我的dom结构不太合理,同 ...

  8. jq 个性的隔行变色

      效果图大致这样: 我的html格式部分这样:/*不过他们都说我的dom结构不太合理,同意.BUT,我就是不想写表格而写成的这样的,所以后面jq部分也要迁就了*/ <div class=&qu ...

  9. 关于JQ toggle 的注意事项

    1.9.1以后的版本,好像不支持 jq 的 toggle function的用法啦.

  10. js与jq对数组的操作

    一.数组处理 1.数组的创建  var arrayObj = new Array(); //创建一个数组  var arrayObj = new Array([size]); //创建一个数组并指定长 ...

随机推荐

  1. OpenWrt挂载移动硬盘实现脱机下载

    一.编译选项选好好usb存储驱动,参考http://www.cnblogs.com/smbx-ztbz/p/4418245.html 并且选上kmod-usb-hid,用于usbhub. 二.编译选项 ...

  2. 恢复word中审阅选项卡

    碰到在Word中,使用自定义功能区添加审阅选项卡,仍然不显示审阅选项卡 二个办法: 1.检查COM加载项,找出并从此禁用,如:iWebOffice2009.ocx 2.创建自定选项卡“审阅(自定义)” ...

  3. 【AMQ】之JMS概念

    1.JMS(Java Message Service)Java消息服务,是Java20几种技术其中之一 2.JMS规范定义了Java中访问消息中间件的接口,但是没有给实现,这个实现就是由第三方使用者来 ...

  4. 【Java安装】配置环境变量

    添加环境变量: JAVA_HOME D:\Program Files\Java\jdk1.8.0_131 classpath: .;%JAVA_HOME%\lib;%JAVA_HOME%\lib\to ...

  5. 【Web前端】div层调整zindex属性无效原因分析及解决方法

    在做的过程中,发现了一个很简单却又很多人应该碰到的问题,设置Z-INDEX属性无效.在CSS中,只能通过代码改变层级,这个属性就是z- index,要让z-index起作用有个小小前提,就是元素的po ...

  6. Consul之：key/value存储

    key/value作用 动态修改配置文件 支持服务协同 建立leader选举 提供服务发现 集成健康检查 除了提供服务发现和综合健康检查,Consul还提供了一个易于使用的键/值存储.这可以用来保存动 ...

  7. hasClass() removeClass() addClass()

    //检查第元素是否包含 "intro" 类 $("button").click(function(){ alert($("p:first") ...

  8. 如何在eclipse 里面调试java.lang包的代码

    1.  在Eclipse中,Window->Preferences->Java->Compiler,确保以下选项都勾选上 2. 在Eclipse中,Window->Prefer ...

  9. Oracle 官方文档地址

    官方文档地址: https://docs.oracle.com/cd/E11882_01/index.htm

  10. git之win安装git和环境配置及常用命令总结

    12.windowns安装git和环境变量配置 11.git之常见命令总结 ===== 12.windowns安装git和环境变量配置 ; 转自 https://wuzhuti.cn/2385.htm ...