jQuery

jQuery是一个库，里面有大量的JavaScript代码

  1. 下载jQuery包

  2. 使用在线链接，参考https://www.jq22.com/cdn/,里面有很多的在线链接，可以选择引入

  1. <body>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>  //导入在线文档
        <script src="resourse/jquery-3.6.0.min.js"></script>                //导入本地文档
    </body>

公式：$(选择器).action()

选择的方式和css的选择器相同

  1. <script src="resourse/jquery-3.6.0.min.js"></script> <!--//导入本地文档-->
    ​
    <a href="#" id="text_id">点击</a>
    <p class='p'>这是一个p元素</p>
    ​
    <script>
        $('#text_id').click(function(){
        alert('点击成功');
    })
    </script>

选择器参考：jQuery中文文档工具站：https://jquery.cuishifeng.cn/

鼠标事件,键盘事件，其他事件

  1. $(function(){})   //当网页元素加载完毕，响应事件
    ​
    //获得鼠标指针在页面中的位置：
    $(function(){
        $('#divmove').mousemove(function(e){
            $('#move').text('x:'+e.pageX+'y:'+e.pageY);
        })
    })

文本操作：

  1. //获取DOM结点的值
    $('#list li[id=c]').text(); 
    //修改结点的值
    $('#list li[id=c]').text('c++');
    //获取结点的结构
    $('#list li[id=c]').html(); 
    //修改结点的结构
    $('#list li[id=c]').html("<a href='#'>点击</a>");

css操作：

  1. $('ol').css({'color':'blue','background':'lightpink'});  //使用键值对形式设置css样式
    $('ol li[id=python]').hide();   //隐藏
    $('ol li[id=python]').show();   //显示


版权声明：本文为lerrysee原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/lerrysee/p/16489735.html