JQuery

89510194 2020-06-06

JQuery

参考视频:https://www.bilibili.com/video/BV1JJ41177di?p=26



一、JQuery是什么


二、引入JQuery

  • 方一:

    • 官网下载第二个

      JQuery

    • 导入项目

      JQuery

    • jsp页面

    <head>
        <meta charset="GBK">
        <title>$Title$</title>
        <%--    导入js--%>
        <script src="lib/js/jquery-3.5.1.js"></script>
    </head>

  • 方二:

    • 百度CDN JQuery

      随便选个,复制<script>标签,放到<head>标签内

      JQuery

    <head>
        <title>$Title$</title>
        <%--    CDN引入--%>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    </head>

三、公式

  • $(‘选择器‘).action()

    选择器就是css的选择器

    用单引号

  • 例子

    <%@ page contentType="text/html;charset=GBK" language="java" %>
    <html>
    <head>
        <meta charset="GBK">
        <title>$Title$</title>
        <%--    CDN引入--%>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    </head>
    <body>
    <a href="" id="test">点我</a>
    
    <script>
        $(‘#test‘).click(function () {
            alert(‘hello,JQuery‘);
        })
    </script>
    </body>
    </html>

    JQuery


四、选择器

  • 可查看工具网站

  • 基本

    <script>
        //原生js
        //标签
        document.getElementsByTagName();
        //id
        document.getElementById();
        //类
        document.getElementsByClassName();
        
        //jQuery css 中的选择器它全部都能用
        $(‘p‘).click();//标签选择器
        $(‘#id1‘).click();//id选择器
        $(‘.class1‘).click();//class选择器
    </script>

五、事件

  • 鼠标事件

    JQuery

    • 例子
    <% @page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
        <head>
            <title>Title</title>
            <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
            <style>
                #mouseMove {
                    width: 500px;
                    height: 500px;
                    border: 1px solid red;
                }
            </style>
        </head>
        <body>
            mouse: <span id="mouseXY"></span>
            <div id="mouseMove">
                在这里移动鼠标
            </div>
            <script>
                //当网页元素加载完毕之后,响应操作
                // $(‘document‘).ready(function () {
                // });
    
                // 简写
                $(function () {
                    $(‘#mouseMove‘).mousemove(function(e){
                        $(‘#mouseXY‘).text(‘x:‘+e.pageX+‘,y:‘+e.pageY)
                    })
                });
            </script>
        </body>
    </html>

    JQuery


六、操作文本

  • 节点文本操作

    <div id="programme">
        <li id="P"> Python</li>
        <li name="J">Java</li>
    </div>
    <script>
    $(‘#programme‘).text();//获取值
    $(‘#programme‘).text(‘设置值‘);//设置值
    
    $(‘#programme‘).html();//获取值
    $(‘#programme‘).html(‘<strong>123</strong>‘);//设置值
    </script>

    JQuery

    JQuery

JQuery


  • css操作

    $(‘#programme li[name=J]‘).css({"color":"red","background-color":"yellow"});

    JQuery


  • 元素的显示和隐藏

    • 本质display:none
    $(‘#programme li[name=J]‘).hide();//隐藏
        $(‘#programme li[name=J]‘).show();//显示

七、未来ajax

$(‘#xxx‘).ajax()

$.ajax({ url: "test.html", context: document.body, success: function(){
    $(this).addClass("done");
}});

相关推荐

Web全栈笔记 / 0评论 2020-06-15