1、文档加载事件

2、DOM单击双击事件

3、DOM获得焦点，失去焦点问题

4、DOM鼠标移入，移出事件

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>Jquery操作DOM节点</title>

 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>

 <script type="text/javascript">

     $(document).ready(function(){

         //alert("文档加载完毕！");//文档加载

         $("#zs").click(function (){

             $("#p1").html('<font color=red>张三被点了！</font>');//单击事件

         })

         $("#zs").dblclick(function(){

             $("#p1").html('<font color="blue">张三被双击了！</font>');    //双击事件

         })

         //焦点事件

         $("#t1").focus(function (){

             $("#t1").val("获得焦点事件！");

         })

         //失去焦点事件

         $("#t1").blur(function(){

             $("#t1").val("失去焦点事件！");

         })

         //鼠标移入事件

         $("#d1").mouseover(function(){

             $("#d1").html("鼠标移入");

         })

         //鼠标移除事件

         $("#d1").mouseout(function(){

             $("#d1").html("鼠标出去了！");

         })

     });

 </script>

 </head>

 <body>

 <input id="zs" value="张三" name="zs" type="button"></input>

 <p id="p1"></p>

 <input id="t1" type="text" name="t1" />

 <div id="d1" style="border:1px solid red; width:100px;height:100px"></div>

 </body>

 </html>

Jquery操作事件的更多相关文章

  1. Jquery的事件操作和文档操作

    对于熟悉前端开发的小伙伴,相信对于Jquery一定不陌生,相对于JavaScript的繁琐,Jquery更加的简洁,当然简洁不意味着简单,我们可以使用Jquery完成我们想要实现全部功能,这里为小白们 ...

  2. jquery css事件编程 位置 操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  4. jQuery操作dom事件

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  5. jQuery中操作事件

    JavaScript中操作事件的方式是这样的: 元素.on事件名=function(){ //事件执行的代码 } 但是jQuery有点不同,他的格式是这样的: 元素.on("事件名" ...

  6. jQuery操作标签，jQuery事件操作，jQuery动画效果，前端框架

    jQuery操作标签 jQuery代码查找标签绑定的变量名推荐使用 $xxxEle 样式类操作 addClass();// 添加指定的CSS类名. removeClass();// 移除指定的CSS类 ...

  7. 对jquery操作复选框

    摘要:jquery操作复选框.使用更简洁易懂,思路清晰,逻辑更明了,很实用 <!DOCTYPE html> <html> <head> <meta chars ...

  8. 深入学习jQuery鼠标事件

    × 目录 [1]类型 [2]写法 [3]合成事件[4]鼠标按键[5]修改键[6]坐标位置 前面的话 鼠标事件是DOM事件中最常用的事件,jQuery对鼠标事件进行了封装和扩展.本文将详细介绍jQuer ...

  9. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

随机推荐

  1. Summary of 2016 International Trusted Computing and Cloud Security Summit

    1)      Welcome Remarks 2)      The advancement of Cloud Computing and Tursted Computing national st ...

  2. git项目常用命令

    git rm --cached 文件名    //移除不上传 git add .    //添加所有文件 .gitignore   //git忽略不想上传或者不需要上传的文件 REAMDE.md  文 ...

  3. 【转】关于编写WPF UserControl时提示The name 'InitializeComponent' does not exist in the current contextr的解决！

    1.打开.csproj(工程)文件. 2.找到<Import Project="$(MSBuildBinPath)/Microsoft.CSharp.targets" /&g ...

  4. vue+Java 前后端分离，多次请求Session不一致的问题（网络上找的）

    在vue main.js中增加以下配置: import axios from 'axios'; axios.defaults.withCredentials=true; 请求时:设置 withCred ...

  5. TWaver可视化编辑器的前世今生（一）电信网管编辑器

    走到今天,TWaver,一个致力于在技术领域(Technology)的弄潮儿(Waver),已经是第十二个年头.当年网吧的小网管都是IDC机房的运维人员了,TWaver也见证了这个时代的成长变迁. 萌 ...

  6. js|jquery常用代码

    页面重定位: window.location.replace("http://www.bczs.net"); window.location.href = "http:/ ...

  7. dell服务器快速设置idrac

    前提:将服务器专用的idrac网络接口,连接到网络上 1.登录到服务器(即被监控的服务器). 2.安装客户端工具 yum  install  OpenIPMI OpenIPMI-devel OpenI ...

  8. 使用scrapy爬取suning

    # -*- coding: utf-8 -*- import scrapy from copy import deepcopy class SuSpider(scrapy.Spider): name ...

  9. 第二天,学习if,变量,注释

    zz_age = 31guss_age=int(input("input your answer:"))if guss_age == zz_age: print ("Yo ...

  10. MySQL账户管理和主从同步

    账户管理 在生产环境下操作数据库时,绝对不可以使用root账户连接,而是创建特定的账户,授予这个账户特定 的操作权限,然后连接进行操作,主要的操作就是数据的CRUD(增删改查) MySQL账户体系:根 ...