JAVA--JQuery

最新推荐文章于 2024-04-23 15:19:32 发布

牧码人Sentinel

最新推荐文章于 2024-04-23 15:19:32 发布

阅读量858

点赞数

分类专栏： JAVA 代码

本文链接：https://blog.csdn.net/caoshiminYQS/article/details/86547468

版权

JAVA 同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

代码

15 篇文章 0 订阅

订阅专栏

Web代码：

测试1（helloJQ）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery</title>
    <Script src="js/jquery-3.2.1.min.js" type="text/javascript">



    </Script>
</head>
<body>

    <button id="btn">没点我呢</button>

</body>
<Script type="text/javascript">

    // JQuery
    $('#btn').click(function () {
        // 设置元素的文本
//        $(this).text("点了我")
        // 获得元素的文本
        var text = $(this).text();
        console.log(text);
    })

    // $: 声明我要用jq的语法了
    // ('div'): 单引号里面是选择器
                // 这里就是个标签选择器,选中所有div

</Script>
</html>

测试2(文档加载后执行)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <Script src="js/jquery-3.2.1.min.js" type="text/javascript">

        $(document).ready(function () {
            // 当文档加载完成后执行

            // $(document)也属于选择器
            // 我们刚刚已经看了
            // $(this)
            // 这时我们就知道了,可以使用jq的选择器
            // 找到某个对象了
        })

        $(function () {
            // 也是文档加载完成后执行
        })
    </Script>
</head>
<body>

</body>
</html>

测试3（双击事件与进入进出）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 20px;
        }
    </style>
    <Script src="js/jquery-3.2.1.min.js"></Script>
    <Script type="text/javascript">

        $(function () {
            $('#btn').dblclick(function () {
                console.log("我被双击了");
            });
//            $('div').mouseenter(function () {
//                console.log("我进来了啊");
//            })
//            $('div').mouseleave(function () {
//                console.log("我出去了啊");
//            })
            // 链式调用
            $('div').mouseenter(function () {
                console.log("我进来了啊");
            }).mouseleave(function () {
                console.log("我出去了啊");
            })
//            $('div').mouseenter(function () {
//                console.log("我进来了啊");
//                $(this).mouseleave(function () {
//                    console.log("我出去了啊");
//                })
//            })

        });

    </Script>
</head>
<body>
    <button id="btn">点我啊</button>
    <div></div>
    <div></div>
</body>
</html>

测试4（enter与Over的区别）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>区别</title>
    <style type="text/css">
        div{
            width: 300px;
            height: 300px;
            margin: 20px;
            display: inline-block;
            color: white;
            font-size: 40px;
        }
        .left{
            background-color: red;
        }
        .right{
            background-color: green;
        }
        span{
            width: 100px;
            height: 100px;
            margin-top: 100px;
            background-color: white;
            margin-left: 100px;
            border: solid 3px blue;
            display: inline-block;
            font-size: 40px;
            color: black;
        }
    </style>
    <Script src="js/jquery-3.2.1.min.js"></Script>

</head>
<body>
    <div class="left">
        <span id="left">

        </span>
    </div>
    <div class="right">
        <span id="right">

        </span>
    </div>
</body>
<Script type="text/javascript">
    var left = 0;
    var right = 0;
    $('.left').mouseenter(function () {
        // 左侧的用来显示enter与leave
        $('#left').text(++left)
    }).mouseleave(function () {

    })
    $('.right').mouseover(function () {
        // 右侧的用来显示over与out
        $('#right').text(++right)
    }).mouseout(function () {

    })
</Script>
</html>

测试5（JQ动画）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <link rel="stylesheet" href="css/myDiv.css">
    <Script src="js/jquery-3.2.1.min.js"></Script>
</head>
<body>
    <div></div>
</body>
<Script type="text/javascript">

        $('div').click(function () {
            // 第一个参数:怎么动?通过更改css样式来实现动画
            // 第二个参数:多长时间完成:毫秒值
            // 第三个参数:动画完成后要干什么?是一个回调函数
            iter($(this));
        });

        function iter(thiss) {

            thiss.animate({
                    "marginLeft": "1000px",
//                        "marginTop":"200px"
                }, 100,
                function () {
                    // 当动画执行完毕,会执行这个回调函数
//                            alert("动画执行完毕了")
                    thiss.animate({"marginTop": "500px"},
                        100,
                        function () {
                            thiss.animate({"marginLeft": "0"},
                                100,
                                function () {
                                    thiss.animate({"marginTop": "0"},
                                        100,
                                        function () {
                                            iter(thiss)
                                        })
                                })
                        })
                })
        }

</Script>
</html>

测试6（动画队列）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动画队列</title>
    <link rel="stylesheet" href="css/myDiv.css">
    <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
    <div>

    </div>
</body>
<script type="text/javascript">
    $('div').click(function () {
        $(this).animate({"marginLeft":"200px"},
            800).animate({"marginTop":"200px"},
            800).animate({"marginLeft":"0px"},
            800).animate({"marginTop":"0px"},
            800)
    })

</script>
</html>

测试7（操作元素属性）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>操作元素属性</title>
    <style type="text/css">
        .bigRed{
            font-size: 70px;
            color: red;
        }
    </style>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
    <div>浊酒一杯家万里,燕然未勒归无计,羌管悠悠霜满地,人不寐,将军白发征夫泪</div>
</body>
<script type="text/javascript">
    console.log($('div').attr({"class": "bigRed"}).attr("class"));


</script>
</html>

测试8（操作CSS式样）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
    <div></div>
</body>
<script type="text/javascript">
    $('div').css({"width":"200px","height":"200px","backgroundColor":"red"})

</script>
</html>

测试9（添加和删除元素）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加和删除元素</title>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
    <div>
        <p></p>
    </div>
    <div>
        <p></p>
    </div>
    <span>
        <p></p>
    </span>
</body>
<script type="text/javascript">
//    $('div').append('添加的内容')
//        .before('before添加的内容')
//        .after('after添加的内容')
//        .append($('<p>'))
//        .after($('<div>'))
    // $('<p>'):生成一个p标签

    // 删除谁,就要先找到谁

    $('p').remove()
</script>
</html>

测试10（ajax异步获取）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
    <button id="btn">点击获取第一名的信息</button>
    <h1 id="nickname"></h1>
    <h1 id="score"></h1>
</body>
<script type="text/javascript">
    function btnClicked() {
        $.getJSON("http://192.168.20.221:8080/day16/first",function (jsonData) {
//            console.log(jsonData);
            var nickname = jsonData['nickname'];
            var score = jsonData['score'];
            $('#nickname').text("昵称: "+nickname)
            $('#score').text("分数: "+score)
        })
    }
    $('#btn').click(btnClicked)


</script>
</html>

测试11（获取一个Json数组）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取一个JSON数组</title>
    <script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
    <button id="btn">
        点我我获取前十名信息
    </button>
    <table border="1">

    </table>
</body>
<script type="text/javascript">

    $('#btn').click(function () {
        $.get("http://192.168.20.221:8080/day16/ten",function (data,status) {
                                                    //第一个参数:获得的数据
                                                    //第二个参数:访问是否成功
            if (status == "success"){
//                console.log(data);
//                console.log(data[0]['score']);
                // 使用parseJSON方法
                // 将data数据解析成JS中的json对象
                var jsonData = $.parseJSON(data);
//                console.log(jsonData[0]['nickname']);
                if (jsonData != null){
                    $('tr').remove()
                    $('table').append(
                        $('<tr>').append(
                            $('<td>').text("昵称")
                                ).append(
                            $('<td>').text("分数"))
                    )
                    //  第一个参数index:当前的元素角标
                    //  第二个参数data:当前的元素
                    $.each(jsonData,function (index,obj) {
//                        console.log(index);
//                        console.log(data);
                        $('table').append(
                            $('<tr>').append(
                                $('<td>').text(obj['nickname'])
                            ).append(
                                $('<td>').text(obj['score'])
                            )
                        )
                    })
                }
            }
        })
    })


</script>
</html>

牧码人Sentinel

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JAVA--JQuery

Web代码：测试1（helloJQ）：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;JQuery&lt;/title&gt; &lt;Script src="js/jqu
复制链接

扫一扫