JQuery小结

最新推荐文章于 2022-08-06 16:22:55 发布

原创最新推荐文章于 2022-08-06 16:22:55 发布 · 209 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Jquery

java web 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了jQuery的基础语法，即$(selector).action()，包括美元符号定义、选择符查询和操作执行。还阐述了事件方法，如click()等。同时讲解了获取内容和属性、添加与删除元素的方法，如text()、append()、remove()等，并提供了学习文档链接。

一、基础语法： $(selector).action()
   1.说明
      美元符号$ 定义 jQuery
      选择符（selector）"查询"和"查找" HTML 元素
      jQuery 的 action() 执行对元素的操作

    2.实例
     $(this).hide() - 隐藏当前元素
     $("p").hide() - 隐藏所有 <p> 元素   （元素选择器）
     $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素   （class选择器+元素选择器）
     $("#test").hide() - 隐藏所有 id="test" 的元素    （id选择器）

二、jQuery的事件方法
     click() 方法是当按钮点击事件被触发时会调用一个函数。
     dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：
     mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
     ......
     ......
     ......

三、所有的jQuery的函数写在所有位于一个 document ready 函数中：

$(document).ready(function(){
 
   // 开始写 jQuery 代码...
 $("#selector").action({
    ....................
    ....................
           }
    });
   $("#selector").action({
    ....................
    ....................
           }
    });
   $("#selector").action({
    ....................
    ....................
           }
    });

});

四、jQuery - 获取内容和属性
    1.获得内容 - text()、html() 以及 val()    （三个实际上是语法中的action()）
      三个简单实用的用于 DOM 操作的 jQuery 方法：
       text() - 设置或返回所选元素的文本内容
       html() - 设置或返回所选元素的内容（包括 HTML 标记）
       val() - 设置或返回表单字段的值    2.获取属性 - attr()
       jQuery attr() 方法用于获取属性值。

 <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        alert($("#runoob").attr("href"));
      });
    });
    </script>
    </head>

    <body>
    <p><a href="//www.runoob.com" id="runoob">菜鸟教程</a></p>
    <button>显示 href 属性的值</button>
    </body>
    </html>

五、jQuery - 添加元素（语法中的action()）
          append() - 在被选元素的结尾插入内容
          prepend() - 在被选元素的开头插入内容
          after() - 在被选元素之后插入内容
          before() - 在被选元素之前插入内容

六、jQuery - 删除元素
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

学习文档：
https://www.runoob.com/jquery/jquery-tutorial.html