点击消失

  1. <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
  2. </script>
  3. <script>
  4. $(document).ready(function(){
  5.   $("p").click(function(){
  6.     $(this).hide();
  7.   });
  8. });
  9. </script>
  10. </head>
  11. <body>
  12. <p>如果你点我，我就会消失。</p>
  13. <p>继续点我!</p>
  14. <p>接着点我!</p>

　　隐藏属性

  1. $(this).hide() - 隐藏当前元素
  2. $("p").hide() - 隐藏所有 <p> 元素
  3. $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
  4. $("#test").hide() - 隐藏所有 id="test" 的元素

　　选择器，选中元素

  1. $(document).ready(function(){
  2.   $("button").click(function(){
  3.     $("p").hide();
  4.   });
  5. });

　　鼠标移动显示

  1. $(document).ready(function(){
  2.   $("#p1").mouseleave(function(){
  3.     alert('您的鼠标移到了 id="p1" 的元素上!');
  4.   });
  5. });

　　jq隐藏显示元素

  1. <script>
  2. $(document).ready(function(){
  3.   $("#hide").click(function(){
  4.     $("p").hide();
  5.   });
  6.   $("#show").click(function(){
  7.     $("p").show();
  8.   });
  9. });
  10. </script>
  11. </head>
  12. <body>
  13. <p>如果你点击“隐藏” 按钮，我将会消失。</p>
  14. <button id="hide">隐藏</button>
  15. <button id="show">显示</button>

　　隐藏时间

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

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

  1. $("p").toggle();

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

jQuery 拥有下面四种 fade 方法：

  1. fadeIn()    变化出现
  2. fadeOut()   变化消失
  3. fadeToggle()
  4. fadeTo()   变化到

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

  1. <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
  2. </script>
  3. <script>
  4. $(document).ready(function(){
  5.   $("#flip").click(function(){
  6.     $("#panel").slideDown("slow");
  7.   });
  8. });
  9. </script>
  10.  
  11. <style type="text/css">
  12. #panel,#flip
  13. {
  14. 	padding:5px;
  15. 	text-align:center;
  16. 	background-color:#e5eecc;
  17. 	border:solid 1px #c3c3c3;
  18. }
  19. #panel
  20. {
  21. 	padding:50px;
  22. 	display:none;
  23. }
  24. </style>
  25. </head>
  26. <body>
  27. <div id="flip">点我滑下面板</div>
  28. <div id="panel">Hello world!</div>

　animate方法移动

  1. $(document).ready(function(){
  2.   $("button").click(function(){
  3.     $("div").animate({left:'250px'});
  4.   });
  5. });

　　animate实现下拉式出现与消失

  1. $(document).ready(function(){
  2.   $("button").click(function(){
  3.     $("div").animate({
  4.       height:'toggle'
  5.     });
  6.   });
  7. });

　　简单的动画变换

  1. $(document).ready(function(){
  2.   $("button").click(function(){
  3.     var div=$("div");
  4.     div.animate({height:'300px',opacity:'0.4'},"slow");
  5.     div.animate({width:'300px',opacity:'0.8'},"slow");
  6.     div.animate({height:'100px',opacity:'0.4'},"slow");
  7.     div.animate({width:'100px',opacity:'0.8'},"slow");
  8.   });
  9. });

　　暂停与开始滑动

  1. $(document).ready(function(){
  2.   $("#flip").click(function(){
  3.     $("#panel").slideDown(5000);
  4.   });
  5.   $("#stop").click(function(){
  6.     $("#panel").stop();
  7.   });
  8. });

　　单机改变文本

  1. $(document).ready(function(){
  2.   $("#btn1").click(function(){
  3.     $("#test1").text("Hello world!");
  4.   });
  5.   $("#btn2").click(function(){
  6.     $("#test2").html("<b>Hello world!</b>");
  7.   });
  8.   $("#btn3").click(function(){
  9.     $("#test3").val("RUNOOB");
  10.   });
  11. });

　　单击添加到前面

  1. <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
  2. </script>
  3. <script>
  4. $(document).ready(function(){
  5. 	$("#btn1").click(function(){
  6. 		$("p").prepend("<b>在开头追加文本</b>。");
  7. 	});
  8. 	$("#btn2").click(function(){
  9. 		$("ol").prepend("<li>在开头添加列表项</li>");
  10. 	});
  11. });
  12. </script>
  13. </head>
  14. <body>
  15.  
  16. <p>这是一个段落。</p>
  17. <p>这是另外一个段落。</p>
  18. <ol>
  19. <li>列表 1</li>
  20. <li>列表 2</li>
  21. <li>列表 3</li>
  22. </ol>
  23. <button id="btn1">添加文本</button>
  24. <button id="btn2">添加列表项</button>
  25.  
  26. </body>

　点击增加文本的方式

  1. function appendText(){
  2. 	var txt1="<p>文本。</p>";              // 使用 HTML 标签创建文本
  3. 	var txt2=$("<p></p>").text("文本。");  // 使用 jQuery 创建文本
  4. 	var txt3=document.createElement("p");
  5. 	txt3.innerHTML="文本。";               // 使用 DOM 创建文本 text with DOM
  6. 	$("body").append(txt1,txt2,txt3);        // 追加新元素
  7. }

　　插入位置

  1. $(document).ready(function(){
  2.   $("#btn1").click(function(){
  3.     $("img").before("<b>之前</b>");
  4.   });
  5.  
  6.   $("#btn2").click(function(){
  7.     $("img").after("<i>之后</i>");
  8.   });
  9. });

　　remove移出元素

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

　　empty清空子元素

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

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

  1. width()
  2. height()
  3. innerWidth()
  4. innerHeight()
  5. outerWidth()
  6. 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. 响应json去除参数值为空的参数-springboot配置

    1.添加jackson相关依赖 <!--jackson 开始--><dependency> <groupId>com.fasterxml.jackson.core& ...

  2. @media 响应式布局

    能根据宽 高 屏幕等一些标签的变化来应用不同的样式叫响应式,如: <!DOCTYPE html> <html lang="en"> <head> ...

  3. 关于Nginx配置性能优化

    基本的 (优化过的)配置 将修改的唯一文件是nginx.conf,其中包含Nginx不同模块的所有设置.在服务器的/etc/nginx目录中找到nginx.conf. 首先,我们将谈论一些全局设置,然 ...

  4. ALGO-151_蓝桥杯_算法训练_6-2递归求二进制表示位数

    记: 进制转换 AC代码: #include <stdio.h> #define K 2 int main(void) { ; scanf("%d",&n); ...

  5. HTTP之Cookie

    cookie是什么 浏览器存储在本地电脑上的一小段文本文件,cookie的存在主要是为了解决http协议无状态的问题,例如通过cookie来判断用户的登录状态,是否是某一个用户等. cookie的结构 ...

  6. java设计模式-State模式

    1.背景: MM的状态是非常不固定的,说不定刚才还非常高兴,没准一会就生气了.就跟六月的天似的,说变就变. 封装一下MM的状态:smile,cry,say:MM的状态决定了这些方法该怎么执行.   2 ...

  7. 新版appium 支持name定位的方法(没试 记录再此)

    查找路径:appium-desktop\resources\app\node_modules\appium\node_modules\appium-android-driver\build\lib 修 ...

  8. Java-Runoob-高级教程-实例-方法：06. Java 实例 – 方法覆盖

    ylbtech-Java-Runoob-高级教程-实例-方法:06. Java 实例 – 方法覆盖 1.返回顶部 1. Java 实例 - 方法覆盖  Java 实例 前面章节中我们已经学习了 Jav ...

  9. 廖雪峰Java1-4数组操作-2数组排序

    冒泡排序法 将第一个值和后面的值,挨个比较,如果手里的值比序列的值小,就交换数据,拿新的数字继续比较,直到最后. 再将第二个值和后面的值,挨个比较. 循环往复,排序完成. int[] ns = {28 ...

  10. 找出N个无序数中第K大的数

    使用类似快速排序,执行一次快速排序后,每次只选择一部分继续执行快速排序,直到找到第K个大元素为止,此时这个元素在数组位置后面的元素即所求 时间复杂度: 1.若随机选取枢纽,线性期望时间O(N) 2.若 ...