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

时间：2021-03-04 23:07:05 阅读：39 评论：0 收藏：0 [点我收藏+]

事件

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

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

技术分享图片

事件代码

 <!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;

技术分享图片

 $(‘#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下来，然后对应修改看效果)

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

原文：https://www.cnblogs.com/doudoutj/p/14483402.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

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

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