zoukankan      html  css  js  c++  java
  • jQuery学习之一jQuery常用的函数用法

    1、hide()函数 隐藏

    View Code
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     6     <script type="text/javascript">
     7         $(document).ready(function () {
     8             $("p").click(function () {
     9                 $(this).hide();
    10             });
    11         });  
    12     </script>
    13 </head>
    14 <body>
    15 <p>If you click on me, I will disappear.</p>
    16 </body>
    17 </html>

    2、slideToggle()通过调整高度,在所有匹配元素是否可见之间进行切换。

    View Code
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     6     <script type="text/javascript">
     7         $(document).ready(function () {
     8             $(".flip").click(function () {
     9                 $(".panel").slideToggle("slow");
    10             });
    11         });
    12     </script>
    13     <style type="text/css">
    14         div.panel, p.flip
    15         {
    16             margin: 0px;
    17             padding: 5px;
    18             text-align: center;
    19             background: #e5eecc;
    20             border: solid 1px #c3c3c3;
    21         }
    22         div.panel
    23         {
    24             height: 120px;
    25             display: none;
    26         }
    27     </style>
    28 </head>
    29 <body>
    30     <div class="panel">
    31         <p>
    32             W3School - 领先的 Web 技术教程站点</p>
    33         <p>
    34             在 W3School,你可以找到你所需要的所有网站建设教程。</p>
    35     </div>
    36     <p class="flip">
    37         请点击这里</p>
    38 </body>
    39 </html>

    3、html() 设置每个匹配元素的html内容,此属性不可用于html文档,Dom特性部分。

    View Code
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     6     <script type="text/javascript">
     7         $(document).ready(function () {
     8             $("button").click(function () {
     9                 $("p").html("w3c school"); 
    10             });
    11         });
    12     </script>
    13 </head>
    14 <body>
    15     <h2>
    16         This is a heading</h2>
    17     <p>
    18         This is a paragraph.</p>
    19     <p>
    20         This is another paragraph.</p>
    21     <button type="button">
    22         请点击这里</button>
    23 </body>
    24 </html>

    4、animate()  用于生成自定义动画的函数

    View Code
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title></title>
     5     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     6     <script type="text/javascript">
     7         $(document).ready(function () {
     8             $("#start").click(function () {
     9                 $("#box").animate({ height: 300 }, "slow");
    10                 $("#box").animate({  300 }, "slow");
    11                 $("#box").animate({ height: 100 }, "slow");
    12                 $("#box").animate({  100 }, "slow");
    13             });
    14         });
    15     </script>
    16 </head>
    17 <body>
    18     <p>
    19         <a href="#" id="start">Start Animation</a></p>
    20     <div id="box" style="background: #98bf21; height: 100px;  100px; position: relative">
    21     </div>
    22 </body>
    23 </html>

    5、append() 将内容追加到每个匹配元素的内部,此操作类似于对所有指定的元素执行appendChild,并将这些操作添加到文档中。

    $(selector).prepend(content)   向被选元素的(内部)HTML “预置”(Prepend)内容

    View Code
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title>向html中追加内容</title>
     5     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     6     <script type="text/javascript">
     7         $(document).ready(function () {
     8             $("button").click(function () {
     9                 $("p").append("<b>W3School</b>.");
    10             });
    11         });
    12     </script>
    13 </head>
    14 <body>
    15     <h2>
    16         This is a heading</h2>
    17     <p>
    18         This is a paragraph.</p>
    19     <p>
    20         This is another paragraph.</p>
    21     <button type="button">
    22         请点击这里</button>
    23 </body>
    24 </html>

    6、after() 在每个匹配元素之后插入内容,before() 函数在所有匹配的元素之前插入 HTML 内容。

    View Code
     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4     <title>向html元素之后追加内容</title>
     5     <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
     6     <script type="text/javascript">
     7         $(document).ready(function () {
     8             $("button").click(function () {
     9                 $("p").after(" W3School"); 
    10             });
    11         });
    12     </script>
    13 </head>
    14 <body>
    15     <h2>
    16         This is a heading</h2>
    17     <p>
    18         This is a paragraph.</p>
    19     <p>
    20         This is another paragraph.</p>
    21     <button type="button">
    22         请点击这里</button>
    23 </body>
    24 </html>
  • 相关阅读:
    关于多态的一些问题
    003 关于shell基础,大数据的前期准备
    002 在大数据中基础的llinux基本命令
    013 MapReduce八股文的wordcount应用
    接口里语句的修饰问题
    Apache Rewrite url重定向功能的简单配置
    学习笔记 --- 缓存、动态页面静态化、网站优化
    使用PHP连接、操纵Memcached的原理和教程
    Apache中关于页面缓存的设置
    缓存(之一) 使用Apache Httpd实现http缓存
  • 原文地址:https://www.cnblogs.com/caishuhua226/p/2480399.html
Copyright © 2011-2022 走看看