返回jquery进......登陆

jquery进行DOM对象读写操作,及处理事件

小毛2019-06-16 10:43:57151

这章内容总结:

对DOM对象进行读写操作,并通过监听事件,实现人机交互。

操作的形式总结为:object.method(参数,参数...)

jquery还支持链式操作,也即:obj.method().method().....

<!DOCTYPE html>
<html>
<head>

    <meta charset="utf-8">
    <script src="jquery-3.3.1.js"></script>
    <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        li{width:200px;height:100px;background: lightblue;margin:20px auto;border-radius: 10px;}
        .border{
            border:1px solid darkslategrey;
        }

    </style>
</head>
<body>
  <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
  </ul>

</body>
<script>
    //ready事件,简写为$(function(){});
    $(function () {

        //click事件改变li标签内容
        $('li').click(function(){
            $('li').text("");
            $(this).text("我被单击,双击加边框");
        });

        //事件切换(鼠标进出li区块)改变li区块颜色
        $('li').hover(
            function () {
                $(this).css('background','green');
            },
            function () {
                $(this).css('background','lightblue');
            }
        );

        //双击新增class,显示边框
        $('li').dblclick(function () {
            $(this).addClass('border');

        })
    });
</script>
</html>

效果图

QQ截图20190616103201.jpgQQ截图20190616103418.jpg



最新手记推荐

• 用composer安装thinkphp框架的步骤• 省市区接口说明• 用thinkphp,后台新增栏目• 管理员添加编辑删除• 管理员添加编辑删除

全部回复(0)我要回复

暂无评论~
  • 取消回复发送
  • PHP中文网