zoukankan      html  css  js  c++  java
  • jQuery学习笔记

    1. 点击<p></p>之间的内容,对应的消失

    <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("p").click(function(){
        $(this).hide();
      });
    });
    </script>
    </head>
    <body>
    <p>如果您点击我,我会消失。</p>
    <p>点击我,我会消失。</p>
    <p>也要点击我哦。</p>
    </body>
    </html>

    注:$("p"),这里的p指的是标签<p>

    2. 点击按钮,<p></p>间的内容消失

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("button").click(function(){
    $("p").hide();
    });
    });
    </script>
    </head>
    
    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">Click me</button>
    </body>
    </html> 

    3. $(".test")  .表示类

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function()
    {
      $("button").click(function()
      {
      $(".test").hide();
      });
    });
    </script>
    </head>
    <body>
    
    <h2 class="test">This is a heading</h2>
    <p class="test">This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">Click me</button>
    
    </body>
    </html>

    4. $("#test")  #表示id

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
        $("#test").hide();
      });
    });
    </script>
    </head>
    
    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p id="test">This is another paragraph.</p>
    <button type="button">Click me</button>
    </body>
    
    </html>

    5.改变html的内容

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
      $("button").click(function(){
      $("p").html("W3School");
      });
    });
    </script>
    </head>
    
    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <button type="button">请点击这里</button>
    </body>
    
    </html>

    6. html追加内容

    <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("p").append(" <b>Appended text</b>.");
      });
    
      $("#btn2").click(function(){
        $("ol").append("<li>Appended item</li>");
      });
    });
    </script>
    </head>
    
    <body>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li>
    </ol>
    <button id="btn1">追加文本</button>
    <button id="btn2">追加列表项</button>
    </body>
    </html>

    7. 在html元素之后追加内容

    <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        $("img").before("<b>Before</b>");
      });
    
      $("#btn2").click(function(){
        $("img").after("<i>After</i>");
      });
    });
    </script>
    </head>
    
    <body>
    <img src="/i/eg_w3school.gif" alt="W3School Logo" />
    <br><br>
    <button id="btn1">在图片前面添加文本</button>
    <button id="btn2">在图片后面添加文本</button>
    </body>
    </html>

    8. 获取内容---text()、html()、val()

    • text() - 设置或返回所选元素的文本内容
    • html() - 设置或返回所选元素的内容(包括 HTML 标记)
    • val() - 设置或返回表单字段的值
    <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
    $(document).ready(function(){
      $("#btn1").click(function(){
        alert("Text: " + $("#test").text());
      });
      $("#btn2").click(function(){
        alert("HTML: " + $("#test").html());
      });
    });
    </script>
    </head>
    
    <body>
    <p id="test">这是段落中的<b>粗体</b>文本。</p>
    <button id="btn1">显示文本</button>
    <button id="btn2">显示 HTML</button>
    </body>
    
    </html>
    <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        alert("Value: " + $("#test").val());
      });
    });
    </script>
    </head>
    
    <body>
    <p>姓名:<input type="text" id="test" value="米老鼠"></p>
    <button>显示值</button>
    </body>
    
    </html>

    9. 获取属性--attr()

    <!DOCTYPE html>
    <html>
    <head>
    <script src="/jquery/jquery-1.11.1.min.js"></script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        alert($("#w3s").attr("href"));
      });
    });
    </script>
    </head>
    
    <body>
    <p><a href="http://www.w3school.com.cn" id="w3s">W3School.com.cn</a></p>
    <button>显示 href 值</button>
    </body>
    
    </html>
  • 相关阅读:
    基于任意深度学习+树状全库搜索的新一代推荐系统
    千人千面、个性化推荐,解读数据赋能商家背后的AI技术
    Graphics2D画图时背景颜色设置
    高校大数据实习实训平台需求
    B2B行业的支付的那些事。
    生成excel xls
    简单文件上传
    计时3秒后自动跳转到登录页
    jquery $换JQ
    用于二维数组排序
  • 原文地址:https://www.cnblogs.com/kaituorensheng/p/4591937.html
Copyright © 2011-2022 走看看