点击消失

<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. DataFlow编程模型与Spark Structured streaming

    流式(streaming)和批量( batch):流式数据,实际上更准确的说法应该是unbounded data(processing),也就是无边界的连续的数据的处理:对应的批量计算,更准确的说法是 ...

  2. NP完全性理论与近似算法

    转自:http://www.cnblogs.com/chinazhangjie/archive/2010/12/06/1898070.html 一.图灵机 根据有限状态控制器的当前状态及每个读写头读到 ...

  3. 找进程的窗口Handle

    Process[] ProcessList = Process.GetProcessesByName("mspaint");//画图板 IntPtr test = ProcessL ...

  4. pytest学习笔记

    From: https://blog.csdn.net/gaowg11/article/details/54910974 由于对测试框架了解比较少,所以最近看了下pytest测试框架,对学习心得做个记 ...

  5. S型顺序遍历二叉树(c++实现)

    //1.s型顺序访问二叉树,默认先左后右:利用两个栈来实现:如果先右后左的话,改变一下入栈的顺序就行 //2.注意s1 s2插入栈的顺序是不同的 void S_LevelOrderPrint(Tree ...

  6. 即用了 测试脚本里面的 类的值，又继承了 unittest类 使用他的断言方法 (接口自动化 数据分离 变量相互调用 看这里)

  7. Linux CentOS 下关闭防火墙

    永久关闭(重启后生效) 开启: chkconfig iptables on 关闭: chkconfig iptables off 临时关闭(重启后失效) 开启: service iptables st ...

  8. MyBatis #{} 和 ${} 引用值的用法

    1.#{} 引用值的用法 UserMapper配置文件: <select id="queryOne" resultType="cn.tedu.mybatis.bea ...

  9. C语言怎么简单测试为大小端模式

    作者:Slience_J 原文地址:https://blog.csdn.net/slience_j/article/details/52048267 1.什么是大小端模式? 大端模式,是指数据的高字节 ...

  10. 1125 Chain the Ropes （25 分）

    1125 Chain the Ropes (25 分) Given some segments of rope, you are supposed to chain them into one rop ...