JavaScript|jQuery基础语法

算法与编程之美

发布于 2020-07-28 14:31:42

7860

发布于 2020-07-28 14:31:42

文章被收录于专栏：算法与编程之美

jQuery 是一个 JavaScript 库，它极大地简化了 JavaScript 编程。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。

1.安装jQuery

2.jQuery语法

基础语法： $(selector).action()

美元符号定义 jQuery

选择符（selector）"查询"和"查找" HTML 元素

jQuery 的 action() 执行对元素的操作

如：

$("#test").html() 意思是指：获取ID为test的元素内的html代码。其中html()是jQuery里的方法

这段代码等同于用DOM实现代码：

document.getElementById(" test ").innerHTML;

3.jQuery 入口函数

$(document).ready(function(){

    // 执行代码

});

或者

$(function(){

    // 执行代码

});

4.实例

（1）当点击botton时，所有p标签隐藏

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<script>

            $(document).ready(function(){

                $("button").click(function(){

                    $("p").hide();

                });

            });

        </script>

</head>

<body>

<h2>这是一个标题</h2>

        <p>这是一个段落。</p>

        <p>这是另一个段落。</p>

        <button>点我</button>





</body>

</html>

（2）双击鼠标左键，当前点击的p标签隐藏

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<script>

            $(document).ready(function(){

                $("p").dblclick(function(){

                     $(this).hide();

                 });

});        

</script>

</head>

<body>

<p>双击鼠标左键的，我就消失。</p>

<p>双击我消失！</p>

<p>双击我也消失！</p>



</body>

</html>

（3）使用 hide() 和 show() 方法来隐藏和显示 HTML 元素

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

<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>

</body>

</html>

END

编辑 | 王文星

责编 | 来人间凑数

本文参与腾讯云自媒体同步曝光计划，分享自微信公众号。

原始发表：2020-07-27，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery