第55天学习打卡(javascript 事件 节点文本操作 css操作 )

事件

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

公式:$(选择器).事件(事件函数)

第55天学习打卡(javascript 事件 节点文本操作 css操作 )

事件代码

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
     <script src="lib/jquery-3.5.1.js"></script>
     <style>
         #divMove{
             width:500px;
             height: 500px;
             border: 1px solid red;
        }
     </style>
 </head>
 <body>
 ​
 <!--要求:获取鼠标当前的一个坐标-->
 mouse : <span id="mouseMove"></span>
 <div id="divMove">
 在这里移动鼠标试试
 </div>
 ​
 ​
 <script>
     //当网页元素加载完毕之后,响应事件
     $(function () {
         $('#divMove').mousemove(function (e) {
             $('#mouseMove').text('x:'+e.pageX + 'y:'+e.pageY)
 ​
        })
 ​
    });
 </script>
 </body>
 </html>

操作DOM

节点文本操作

 $('#test-ul li[name=python]').text();//获得值
 $('#test-ul li[name=python]').text('设置值');//设置值
 $('#test-ul').html();//获得值
 $('#test-ul').html('<strong>123</strong>');//设置值

css操作

 $('#test-ul li[name=python]').css("color","red");

元素的显示和隐藏:本质display :none;

第55天学习打卡(javascript 事件 节点文本操作 css操作 )

 $('#test-ul li[name=python]').hide();//隐藏
 $('#test-ul li[name=python]').show();//显示
 ​

娱乐测试:

  $('#test-ul li[name=python]').hide();
 jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
  $('#test-ul li[name=python]').show();
 jQuery.fn.init [li, prevObject: jQuery.fn.init(1)]
 $(window).width()
 226
 $(window).height()
 1058
 $(document).width()
 226
 $(document).height()
 1058
 ​
 ​
 $('#test-ul li[name=python]').toggle();//如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

未来ajax();

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

快捷键ctrl+alt +L自动对齐

小技巧

网站推荐:Ant Design Vue.js docsify Layer弹窗组件 Element-ui

1如何巩固JS(看jQuery, 看游戏源码!)

2.巩固HTML CSS(扒网站,全部down下来,然后对应修改看效果)

 

上一篇:【Python笔记】基础语法(一)


下一篇:【2022年无线通信和与物联网专场】中国工程院张平院士-AI使能6G演进与应用