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. easybcd 支持 windows 10 和 ubuntu 14.04 双系统启动

    家里计算机系统 windows 10 全新安装. 原本是双系统的,还有一个ubuntu. windows 10 安装以后,恢复ubuntu就是问题了. (事后经验:请不要立刻安装bcd修改工具) 最初 ...

  2. CentOS 7上修改主机名

                                       如何在CentOS 7上修改主机名                                           在Cent ...

  3. MyBatis基本运行环境

    MyBatis基本运行环境 1. 创建项目 2.拷贝jar加入到项目中build path jar包 3.创建数据库的表及数据添加 USE [mybatis] CREATE TABLE [dbo].[ ...

  4. Java之字符，字符串替换

    /** 4. 字符串的替换操作 1. String replace(char oldChar,char newChar) //将新字符替换旧字符 3. String replaceFirst(Stri ...

  5. 框架—Mybatis入门

    1:Mybatis介绍 MyBatis是一款一流的支持自定义SQL.存储过程和高级映射的一个数据持久层的框架. MyBatis几乎消除了所有的JDBC代码,也基本不需要手工去设置参数和获取检索结果. ...

  6. 我的MySql掉队了

    本来今天高高兴兴,突然: raise MigrationSchemaMissing("Unable to create the django_migrations table (%s)&qu ...

  7. 快速安装zabbix

    环境:CentOS 7.x 数据库mysql已事先安装 1.配置epel源 wget -O /etc/yum.repos.d/epel.repo http://mirrors.aliyun.com/r ...

  8. 上传文件到Ubuntu阿里云服务器（windows到Linux的文件上传）

    上传文件到Ubuntu阿里云服务器(windows到Linux的文件上传) 最近在阿里云上面租了一个轻量级服务器玩玩,学习学习怎么在服务器部署网站.然后嘞,在想要将本地文件上传到服务器的时候,自己研究 ...

  9. matlab ()的用法

    经常见到标识符+(),用法比如阵列Y().函数f()..... 时机到了,会总结一下.

  10. python_面向对象笔记

    继承 什么是继承? 继承是一种新建类的方式,新建的类称为子类或派生类父类又称为基类.超类 子类可以“遗传”父类的属性,从而可以减少代码冗余 如何寻找继承关系?先抽象,再继承,继承描述的就是一种父子关系 ...