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. EEPROM介绍

    EEPROM( Electrically Erasable Programmable Read Only Memory )全称是电气可擦除可编程只读存储器,是非易失存储器,可以访问到每个字节,容量比较 ...

  2. raid 0 1 5 10 总结的知识点

    raid 0 1 5 10 raid 发的别名条带 raid 0 读取性能最高需要磁盘2*N个(N>0)代表所有raid级别中的最高存储性能,其实原理就是把连续的数据分散到多个磁盘上存取,这样, ...

  3. SQLite – DISTINCT 关键字

    SQLite – DISTINCT关键字 使用SQLite DISTINCT关键字与SELECT语句来消除所有重复的记录和获取唯一的记录. 可能存在一种情况,当你有多个表中重复的记录. 获取这些记录, ...

  4. （转）Spring提供的CharacterEncoding和OpenSessionInView功能

    http://blog.csdn.net/yerenyuan_pku/article/details/52902282 前面我们以一种更加优雅的方式集成了Spring4.2.5+Hibernate4. ...

  5. 浅析HashSet add() 方法存储自定义类型对象的过程

    一.自定义一个Student类 package date0504; public class Student { private String id; Student(String id){ this ...

  6. springboot设置接口超时

    springboot 设置接口超时 1.配置文件 application.properties中加了,意思是设置超时时间为20000ms即20s, spring.mvc.async.request-t ...

  7. 筛选法 || POJ 3292 Semi-prime H-numbers

    5,9,13,……叫H-prime 一个数能且仅能由两个H-prime相乘得到,则为H-semi-prime 问1-n中的H-semi-prime有多少个 *解法:vis初始化为0代表H-prime, ...

  8. android 图片

    1,setCompoundDrawables(Drawable left, Drawable top,Drawable right, Drawable bottom) 设置图片出现在textView, ...

  9. 2018 CCPC 女生赛 hdoj6287 口算训练

    题目地址:http://acm.hdu.edu.cn/showproblem.php?pid=6287 Summarize: 1.分解质因数: 2.二分查找函数lower_bound与upper_bo ...

  10. 【java面试宝典】一年工作经验者适用

    时光转瞬即逝,一年时间已经过去,自己准备跳槽了,请了几天假,面试了几家公司之后,拿到了一份offer,有了一点儿小小的心得,记录下来分享给搞Java的朋友,面试主要是几个部分内容. 很多公司会要求笔试 ...