jquery事件

一．什么是 jQuery jQuery是一个 Java Script库，它通过封装原生的 JavaScript 函数得到一整套定义好的方法。它的作者是John Resig，于2006年创建的一个开源项目，随着越来越多开发者的加入，jQuery已经集成了JavaScript、 CSS 、DOM和Ajax于一体的强大功能。它可以用最少的代码，完成更多复杂而困难的功能，从而得到了开发者的青睐。 JQuery的优点:小巧、方便、功能强大。插件丰富、开源、免费。 二.Jquery的功能和优势 jQuery 作为 JavaScript 封装的库，他的目的就是为了简化开发者使用 JavaScript。主要功能有以下几点： 1.像 CSS 那样访问和操作 DOM 2.修改 CSS 控制页面外观 3.简化 JavaScript 代码操作 4.事件处理更加容易 5.各种动画效果使用方便 6.让 Ajax 技术更加完美 7.基于 jQuery 大量插件 8.自行扩展功能插件 jQuery 最大的优势，就是特别的方便。比如模仿 CSS 获取 DOM，比原生的 JavaScript要方便太多。并且在多个 CSS 设置上的集中处理非常舒服，而最常用的 CSS 功能又封装到单独的方法，感觉非常有心。最重要的是 jQuery 的代码兼容性非常好，你不需要总是头疼着考虑不同 浏览器 的兼容问题。 好！以上都是网摘！

初识jQuery jQuery简介 什么是jQuery？ jQuery是一个优秀的JavaScript库，是一个凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档，操作DOM，执行动画和开发Ajax的操作。jQuery封装了很多预定义的对象和函数。其理念：write less,do more. 常见的javascript库? Prototype:是最早成型的JS库之一，对于JS的内置对象做了大量的扩展。 Do jo：提供了很多奇特JS库没有提供的功能。例如：离线存储的API，生成图标的组件等等。 YUI：是由Yahoo公司开发的一套完备的，扩展性良好的富交互网页程序工作集。 Ext JS：原本是对YUI的一个扩展，主要用于创建前端用户界面。 Moo Tools：是一套轻量、简洁、模拟化和面向对象的JS框架。 jQuery：同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使用它。 jQuery的特性 jQuery能做以下事情： HTML元素选取 HTML元素操作 CSS操作 HTML事件函数 JavaScript特效和动画 HTML DOM遍历和修改 AJAX Utilities jQuery的使用方式 1、下载后引入 < script src = "jquery-3.3.1/jquery-3.3.1.min.js" >

1、鼠标事件的主要事件应该是mouseup, mousedown, mousewheel, mousemove, mouseover, moveout。 　　<1>其中mouseup和mousedown组成了单击(click)，双击(dblclick)事件，或许还有拖拽事件，不过我还没有涉及到。表单事件上的foucs,blur事件应该也与之相关。 　　在一类事件里面我们主要关注点击的是鼠标哪个键e.whick/e.button 　　<2>mousewheel是鼠标滚轮事件，与浏览器默认的滚动条事件相关，关注的是滚轮方向是向上还是向下event.wheelDelta/e.detail 　　<3> mousemove是鼠标移动事件，不常用。 　　　　关注的是鼠标位置和鼠标移动方向movementX和 movementY 　　<4>mouseover, moveout是鼠标移入移出事件，在js的冒泡模式中很大的副作用，需要自定义成hover事件，或者使用jq。关注触发的元素target/srcElement和绑定事件的元素currentTarget，以及目标元素toElement/fromElement/ relatedTarget。 2、 事件监听器在js和jq的不同表现 　　Jq兼容了js在不同浏览器的写法，也对一些js的副作用做了改进（mouseenter, mouseleave,

jQuery plugin: Treeview 这个插件能够把无序列表转换成可展开与收缩的Tree。 jQuery plugin: Treeview jQuery jstree jsTree 是一个基于jQuery的Tree控件。支持XML，JSON，Html三种数据源。提供创建，重命名，移动，删除，拖\放节点操作。可以自己自定义创建，删除，嵌套，重命名，选择节点的规则。在这些操作上可以添加多种监听事件。 jstree jQuery UI Widgets FileTreePanel FileTreePanel扩展至Ext.tree.TreePanel附带基本的文件/文件夹管理功能。其它还包括文件上传，重命名，删除，新建与移动。 FileTreePanel ExtJs jQuery File Tree jQuery File Tree是一个可配置的Ajax文件浏览器jQuery插件。可以通过CSS定制外观，指定文件树展开图标，可以自己定义展开／收缩事件、速度，配置加载信息等。 jQuery File Tree通过Ajax来获取文件信息。 jQuery File Tree jQuery dhtmlxTree dhtmlxTree是一个功能丰富的Tree Menu控件。提供丰富的操作API，AJAX支持和drag-n-drop功能。 dhtmlxTree dTree

绑定事件和关闭事件 1. on绑定事件 off关闭事件 //创建一个div添加到body。 $ ( "<div></div>" ) . appendTo ( "body" ) . css ( { width : 50 , height : 50 , backgroundColor : "red" } ) . on ( "click" , clickHandler ) ; //绑定事件 // div.addEventListener("click",clickHandler); function clickHandler ( e ) { // this 事件侦听的元素 DOM // this.removeEventListener("click",clickHandler); $ ( this ) . off ( "click" , clickHandler ) ; //关闭事件 } 2. 事件命名空间 匿名函数不使用函数名清除，都是匿名函数。会将当前jQuery对象所有的click清除，这个时候就需要用到。事件命名空间 $ ( "<div></div>" ) . appendTo ( "body" ) . css ( { width : 50 , height : 50 , backgroundColor : "red" } ) . on ( "click.a" ,

jQuery - 中文輸入法與KeyDown/KeyPress事件 JavaScrip t数组采用 从0开始 ， eq(1)取得的是集合中的第二个元素； CSS 则是 从1开始 ，css选择符$('div:nth-chind(1)')取得的是作为其父元素第一个子元素的所有div 替换logo图片： $("#blogLogo").attr("src","logo.png"); button替换成image类型： 代码： $("#btnZzk").hide(); $(".div_my_zzk").append($("<input />").attr("type","image").attr("src","spacer.gif").click(function(){ zzk_go(); } 原来： <DIV class=div_my_zzk> <INPUT type=text id=q onKeyDown="return zzk_go_enter(event);" class=input_my_zzk >  <INPUT id=btnZzk class=btn_my_zzk onclick=zzk_go() value=找找看 type=button> </DIV> 效果： <DIV class=div_my_zzk> <INPUT type=text id=q onkeydown=

event.stopPropagation(); 在jQuery中提供了stopPropagation()方法来停止事件冒泡。终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。调用该方法后，该节点上处理该事件的处理程序将被调用，事件不再被分派到其他节点。 在事件的处理中，可以阻止冒泡但是允许默认事件的发生。 <scripttype="text/javascript"> $(function(){ $("#hr_three").click(function(event){ event.stopPropagation(); }); }); <script> View Code return false; 在事件的处理中，可以阻止默认事件和冒泡事件。 <scripttype="text/javascript"> $(function(){ $("#hr_three").click(function(event){ event.stopPropagation(); }); }); <script> View Code event.preventDefault(); 它的作用是：事件处理过程中，不阻击事件冒泡，但阻击默认行为。 例如，如果 type 属性是 "submit"，在事件传播的任意阶段可以调用任意的事件句柄，通过调用该方法，可以阻止提交表单。 　 注意，如果 Event

目录 原生js部分 关于JQ部分 原生js部分 参考文章 js性能优化的小知识 javascript性能优化技巧 JavaScript性能优化之小知识总结 DOM编程 建议将对象进行缓存处理，特别是DOM访问是比较消耗资源的 使用DocumentFragment优化多次append 一旦需要更新DOM,请考虑使用文档碎片来构建DOM结构，然后再将其添加到现存的文档中。 for (var i = 0; i < 1000; i++) { var el = document.createElement('p'); el.innerHTML = i; document.body.appendChild(el); } //可以替换为： var frag = document.createDocumentFragment(); for (var i = 0; i < 1000; i++) { var el = document.createElement('p'); el.innerHTML = i; frag.appendChild(el); } document.body.appendChild(frag); 使用一次innerHTML赋值代替构建dom元素 对于大的DOM更改，使用innerHTML要比使用标准的DOM方法创建同样的DOM结构快得多。 var frag =

1.内部插入 append(content|fn) 追加当前元素的内容之后 appendTo(content) 与append前后位置颠倒 prepend(content|fn) 追加到当前元素的内容之前 prependTo(content) $ ( ".block" ) . append ( $ ( ".small" ) ) ; $(".block").append(function (index,html) { //参数是当前索引和父元素的子元素（即当前元素的html ) console. log ( index, html ) ; //0 "<div class=" child ">1</div>" return $ ( ".small" ) } ) $ ( ".small" ) . appendTo ( $ ( ".block" ) ) ; prepend与append区别 prepend是加到父元素中子元素内容之前 append是加到父元素中子元素内容之后 //在jquery里面创建dom var doms=$ ( "<div></div>" ) ; doms. addClass ( "two" ) ; //var doms=$ ( "<div class='two'></div>" ) $ ( ".block" ) . append ( doms ) 2.外部插入

jQuery初学者笔记 一 Mirror王宇阳 by jQuery语法 jQuery语法是通过选取HTML元素，并对选取的元素进行操作 基础语法： 所有jQuery语句用“$”符号开始 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <p>点击消失</p> <p>点击消失</p> <script src="jq/jquery-3.4.1.min.js"></script> <script> $(document).ready(function(){ //固定的jQ开头 $("p").click(function(){ // 选取p标签，并绑定clisk事件 $(this).hide(); //事件触发使用hide()方法（隐藏当前标签属性） }) }) </script> </body> </html> jQuery函数位于一个document ready函数中，我们需要在js中加载该函数文档 // jQuery入口函数 $(document).ready(function(){ //jQuery代码 }); /*******************************/ $(function(){ //jQuery代码 }); 选择器语法: