jQuery语法及常用案例

一、介绍：

 1.jQuery 是一个 JavaScript 库，jQuery 极大地简化了 JavaScript 编程，jQuery 很容易学习。

2.目前网络上有大量开源的 JS 代码库, 但是 jQuery 是目前最流行的 JS 代码库，而且提供了大量的扩展。

 

二、案例：

1.jQuery使用append()方法

<!---------------------------通过$("id").append()追加简单的元素-------------------------->
<!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>
        //ready()函数用于在当前文档结构载入完毕后自动执行,,该函数的作用相当于window.onload事件
        $(document).ready(function () {
            //函数一:点击btn1触发
            $("#btn1").click(function () {
                $("p").append(" <b>插入文本并换行</b><br />");
            });
            //函数2:点击btn2触发
            $("#btn2").click(function () {
                //注意这里用的是标签，所以不用加#，若用id需加#
                $("ol").append("<li>插入项</li>");
            });
        });
    </script>
</head>
<body>

<p><b>这是一个段落。</b></p>
<ol>
    <li>有序列表项 1</li>
    <li>有序列表项 2</li>
    <li>有序列表项 3</li>
</ol>
<button id="btn1">插入文本</button>
<button id="btn2">插入列表项</button>
</body>
</html>



<!---------------------------通过$("id").append()追加列表-------------------------->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>追加列表数据</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <style type="text/css">
            tr{
                text-align: center;
            }
        </style>
         <script>
            //ready()函数用于在当前文档结构载入完毕后自动执行,,该函数的作用相当于window.onload事件
            $(document).ready(function () {
                //函数一:点击btn1触发
                $("#btn1").click(function () {
                    var bb=`<td>试用套餐</td>
                    <td>500次</td>
                    <td>2次/秒</td>
                    <td>1月</td>
                    <td>000元</td>`;
                     console.log(bb);
                    $("#chen11").append(bb);
                });
            });
    </script>
    </head>
    <body>
        <p id="dalan" align="center" style="font-size: 32px;">产品价格</p>
        <button id="btn1" align="center">点击按钮</button>
        <table align="center" border="" cellspacing="0" cellpadding="40" rules="rows" width="1200px">
            <tr bgcolor="#d5ebeb">
                <th>套餐名称</th>
                <th>查询次数</th>
                <th>调用频率</th>
                <th>有效时间</th>
                <th>价格</th>
            </tr>
            <tr id="chen11" >
            </tr>
        </table>
    </body>
</html>



<!---------------------------通过$("id").append()遍历追加列表数据-------------------------->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>追加列表数据</title>
        <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
        <style type="text/css">
            tr{
                text-align: center;
            }
        </style>
         <script>
            //ready()函数用于在当前文档结构载入完毕后自动执行,,该函数的作用相当于window.onload事件
            $(document).ready(function () {
                //函数一:点击btn1触发
                $("#btn1").click(function () {
                    var list = [['3次/秒', '试用套餐', '2月', 100, '500元'], ['3次/秒', '试用套餐', '2月', 100, '500元'], ['3次/秒', '试用套餐', '2月', 100, '895元'], ['3次/秒', '试用套餐', '2月', 100, '500元'], ['3次/秒', '试用套餐', '2月', 100, '500元'], ['3次/秒', '试用套餐', '2月', 100, '500元'], ['3次/秒', '试用套餐', '2月', 100, '500元'], ['3次/秒', '试用套餐', '2月', 100, '999元'], ['3次/秒', '试用套餐', '2月', 100, '5001元'], ['3次/秒', '试用套餐', '2月', 100, '500元']]
                    
                    //遍历数据
                    for(var key in list){
                        var str1 = "<tr>";
                        str1 += "<td>" + list[key][0] + "</td>";
                        str1 += "<td>" + list[key][1] + "</td>";
                        str1 += "<td>" + list[key][2] + "</td>";
                        str1 += "<td>" + list[key][3] + "</td>";
                        str1 += "<td>" + list[key][4] + "</td>";
                        str1 += "</tr>"    
                        console.log(str1);
                        ////追加行
                        $("#chen11").append(str1);
                    };
                    console.log(list);
                    
                });
            });
    </script>
    </head>
    <body>
        <p id="dalan" align="center" style="font-size: 32px;">产品价格</p>
        <button id="btn1" align="center">点击按钮</button>
        <table align="center" border="" cellspacing="0" cellpadding="40" rules="rows" width="1200px">
            <tr bgcolor="#d5ebeb">
                <th>套餐名称</th>
                <th>查询次数</th>
                <th>调用频率</th>
                <th>有效时间</th>
                <th>价格</th>
            </tr>
             </thead>
                <tbody id="chen11">
                <!--存放响应数据-->
                
                </tbody>

            </table>
        </table>
    </body>
</html>
View Code

 

2.jQuery获取内容和属性

<!--------------------------------------------获取属性---------------------------------------->
<!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 () {
            //获取文本text
            $("#btn1").click(function () {
                alert("Text: " + $("#test").text());
            });
            //获取html
            $("#btn2").click(function () {
                alert("HTML: " + $("#test").html());
            });
            
            //获取value
            $("#btn3").click(function(){
                alert("值为: " + $("#test11").val());
            });
            
            //获取href
            $("#btn4").click(function(){
                alert($("#runoob").attr("href"));
                //也可以使用标签
                //alert($("a").attr("href"));
            });
        });
        
    </script>
</head>

<body>
<p id="test" name="test123456">这是段落中的 <b>粗体</b> 文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button>
<button id="btn3">显示 input的value</button>
<button id="btn4">显示 链接</button>
<input type="text" id="test11" value="菜鸟教程">

<a href="http://www.runoob.com" id="runoob">菜鸟链接</a>
</body>
</html>



<!--------------------------------------------通过attr设置属性---------------------------------------->
<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("button").click(function () {
                $("img").attr("width", "180");
            });
        });
    </script>
</head>
<body>
<img src="/i/eg_smile.gif"/>
<br/>
<button>设置图像的 width 属性</button>
</body>
</html>
View Code

 

3.jQuery设置元素

<!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 () {
            $("#btn1").click(function () {
                $("#test1").text("Hello world!");
            });
            $("#btn2").click(function () {
                //设置html代码,标题h1颜色颜色字体
                $("#test2").html("<h1 style=color:#00F><b>Hello world!</b><h1>");
            });
            $("#btn3").click(function () {
                $("#test3").val("RUNOOB");
            });
        });
    </script>
</head>

<body>
<p id="test1">这是一个段落。</p>
<p id="test2">这是另外一个段落。</p>
<p>输入框: <input type="text" id="test3" value="菜鸟教程"></p>
<button id="btn1">设置文本text</button>
<button id="btn2">设置 HTML</button>
<button id="btn3">设置值value</button>
</body>
</html>
View Code

 

4.jQuery设置css

<!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 () {
                //通过js控制css
                $("h1,h2,p").addClass("blue");
                //通过js控制css(导入css样式)
                $("div").addClass("important");
            });
        });
    </script>
    <style type="text/css">
        .important {
            font-weight: bold;
            font-size: xx-large;
        }
        .blue {
            color: blue;
        }
    </style>
</head>

<body>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>为元素添加 class</button>
</body>
</html>
View Code

 

 5.jQuery事件

事件处理指的是当 HTML 中发生某些事件时所调用的方法，术语由事件“触发”（或“激发”）经常会被使用，，通常会把 jQuery 代码放到 <head>部分的事件处理方法中

<!---------------------通过实践隐藏元素---------------------->
<html>
<head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            //提交自动触发
            $("button").click(function () {
                //hide()方法隐藏所有 <p> 元素
                $("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">提交</button>
</body>
</html>


<!------------鼠标离开段落提示---------------------------------->
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#p1").mouseleave(function () {
                alert("再见，您的鼠标离开了该段落。");
            });
        });
    </script>
</head>

<body>
<p id="p1">这是一个段落。</p>
</body>
</html>
View Code

 

 

 

 

 

相关链接：

https://blog.csdn.net/zeroheitao/article/details/108930553 .................jQuery常用方法

https://www.w3school.com.cn/jquery/jquery_events.asp .....................jQuery教程

posted on 2022-06-02 14:32  chen_2987  阅读(53)  评论(0)    收藏  举报

导航