首页 > 软件开发 > JQUERY >

jquery点击事件基础用法

来源:互联网 2023-03-17 00:46:33 495

制作网站时,经常会调用jquery命令,在调用jquery时一定要先把jquery引入到代码中。lAM办公区 - 实用经验教程分享!

工具/原料

  • dreamweaver

方法/步骤

  • 1

    打开dreamweaver软件,新建html文件,如图所示lAM办公区 - 实用经验教程分享!

    jquery点击事件基础用法lAM办公区 - 实用经验教程分享!

  • 2

    在body中建立两张图片,由div包含图片,如图所示lAM办公区 - 实用经验教程分享!

    jquery点击事件基础用法lAM办公区 - 实用经验教程分享!

  • 3

    然后在head中建立style标签,添加对div和图片的修饰,ctrl s保存文件,然后打开浏览器预览,效果如图所示lAM办公区 - 实用经验教程分享!

    jquery点击事件基础用法lAM办公区 - 实用经验教程分享!

    jquery点击事件基础用法lAM办公区 - 实用经验教程分享!

  • 4

    在head中引入jquery文件,如图所示lAM办公区 - 实用经验教程分享!

    jquery点击事件基础用法lAM办公区 - 实用经验教程分享!

  • 5

    然后在body最下面写将要执行的操作,在script中建立点击事件lAM办公区 - 实用经验教程分享!

    lAM办公区 - 实用经验教程分享!

    $().click(function(){});$() 括号内填写将要添加效果的对象,如图所示lAM办公区 - 实用经验教程分享!

    jquery点击事件基础用法lAM办公区 - 实用经验教程分享!

  • 6

    div由引号包含,表示对div实行操作,鼠标点击div时,当前的对象在3秒内向右移动500px;添加marginLeft时,第二个单词要大写,如图所示lAM办公区 - 实用经验教程分享!

    jquery点击事件基础用法lAM办公区 - 实用经验教程分享!

    jquery点击事件基础用法lAM办公区 - 实用经验教程分享!

  • 6相关内容未经许可获取自百度经验
  • 7

    鼠标点击div后,div向右移动500px,div移动到500px后,如果想要将其再自动返回原始位置,就需要再添加返回的命令,如图所示,div执行完第一个操作后,继续执行第二个操作,返回原始位置lAM办公区 - 实用经验教程分享!

    jquery点击事件基础用法lAM办公区 - 实用经验教程分享!

  • 8

    两次的执行操作都是针对同一个对象,可以添加在一起写,如图所示lAM办公区 - 实用经验教程分享!

    jquery点击事件基础用法lAM办公区 - 实用经验教程分享!

  • 注意事项

    • 如果此经验对您有帮助,请为我投票加关注,谢谢大家的支持^_^

    以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!lAM办公区 - 实用经验教程分享!


    标签: JQUERY网页设计DREAMWEAVER

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码