jquery事件

offset方法与position方法 offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。 //获取元素距离document的位置,返回值为对象：{left:100, top:100} $(selector).offset(); //获取相对于其最近的有定位的父元素的位置。 $(selector).position(); jQuery事件 简单事件绑定>>bind事件绑定>>delegate事件绑定>>on事件绑定 简单事件注册 : click(handler) 单击事件 mouseenter(handler) 鼠标进入事件 mouseleave(handler) 鼠标离开事件 缺点：不能同时注册多个事件 bind方式注册事件 : //第一个参数：事件类型 //第二个参数：事件处理程序 $("p").bind("click mouseenter", function(){ //事件响应方法 }); 缺点：不支持动态事件绑定 delegate注册委托事件 // 第一个参数：selector，要绑定事件的元素 // 第二个参数：事件类型 // 第三个参数：事件处理函数 $(".parentBox").delegate("p", "click", function(){ //为 .parentBox下面的所有的p标签绑定事件 }

这篇续着上篇的写吧。 4：jquery样式操作 5：jquery属性操作 6：绑定click事件 7：jquery特殊效果 8：jquery链式调用 9：jquery动画 10：尺寸相关、滚动事件 11：jquery事件 12：主动触发与自定义事件 13：事件委托 14：事件冒泡 15：jquery元素节点操作 16：滚轮事件与函数节流 17：json 18：ajax与jsonp 19：本地储存 20：jqueryUI 目录四 jquery样式操作 jquery用法思想二 同一个函数完成取值和赋值 操作行间样式 // 获取div的样式 $( "div" ).css( "width" ); $( "div" ).css( "color" ); //设置div的样式 $( "div" ).css( "width" , "30px" ); $( "div" ).css( "height" , "30px" ); $( "div" ).css({fontSize: "30px" , color : "red" }); 特别注意 选择器获取的多个元素，获取信息获取的是第一个，比如：$(“div”).css(“width”)，获取的是第一个div的width。 操作样式类名 $( "#div1" ).addClass( "divClass2" ) /

jQuery特殊属性操作 val方法 val方法用于设置和获取表单元素的值，例如input、textarea的值 //设置值 $ ( "#name" ). val ( “张三” ); //获取值 $ ( "#name" ). val (); 【案例：京东搜索.html】 html方法与text方法 html方法相当于innerHTML text方法相当于innerText //设置内容 $ ( “div” ). html ( “ < span > 这是一段内容 < /span>”); //获取内容 $ ( “div” ). html () ​ //设置内容 $ ( “div” ). text ( “ < span > 这是一段内容 < /span>”); //获取内容 $ ( “div” ). text () 区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。 width方法与height方法 设置或者获取高度 //带参数表示设置高度 $ ( “img” ). height ( 200 ); //不带参数获取高度 $ ( “img” ). height (); ​ 获取网页的可视区宽高 //获取可视区宽度 $ ( window ). width (); //获取可视区高度 $ ( window ). height ();

1. jQuery特殊属性操作 1.1. val方法 val方法用于设置和获取表单元素的值，例如input、textarea的值 //设置值 $("#name").val(“张三”); //获取值 $("#name").val(); 1.2. html方法与text方法 html方法相当于innerHTML text方法相当于innerText //设置内容 $(“div”).html(“<span>这是一段内容</span>”); //获取内容 $(“div”).html() //设置内容 $(“div”).text(“<span>这是一段内容</span>”); //获取内容 $(“div”).text() 区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。 1.3. width方法与height方法 设置或者获取高度 //带参数表示设置高度 $(“img”).height(200); //不带参数获取高度 $(“img”).height(); 获取网页的可视区宽高 //获取可视区宽度 $(window).width(); //获取可视区高度 $(window).height(); 1.4. scrollTop与scrollLeft 设置或者获取垂直滚动条的位置 //获取页面被卷曲的高度 $(window).scrollTop()

1、jQuery特殊属性操作 val方法 val方法用于设置和获取表单元素的值，例如input、textarea的值 //设置值 $("#name").val(“张三”); //获取值 $("#name").val(); html方法与text方法 html方法相当于innerHTML text方法相当于innerText //设置内容 $(“div”).html(“<span>这是一段内容</span>”); //获取内容 $(“div”).html() //设置内容 $(“div”).text(“<span>这是一段内容</span>”); //获取内容 $(“div”).text() 区别：html方法会识别html标签，text方法会那内容直接当成字符串，并不会识别html标签。 width方法与height方法 设置或者获取高度 //带参数表示设置高度 $(“img”).height(200); //不带参数获取高度 $(“img”).height(); 补充：获取的样式值 width()---width // 数字 innerWidth()---padding + width outerWidth()---padding + width + border outerWidth(true)---padding + width + border + margin

自定义一个jQuery二级菜单插件 自定义jQuery插件需要了解： 命名规范:jQuery.插件名-版本.js 以工具(全局)函数形式加到jQuery中: $.extend({函数名:function(){功能代码}}); 使用时：$.函数名(); 以成员(局部)函数形式加到jQuery中: $.fn.extend({函数名:function(){功能代码}}); 使用时:$("选择元素").函数名(); 以成员形式应返回jQuery对象，便于链式操作。 1.创建关联文件 创建 插件名.js 文件 创建 页面名.css 文件 然后 引入html 中 <!-- 引入创建的名为myPlugin-menu的css --> <link rel="stylesheet" type="text/css" href="../css/myPlugin-menu.css"/> <!-- 引入jQuery库，必须在前面，后面的插件文件基于jQuery --> <script src="../js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> <!-- 引入创建的名为jquery-myPluginmenu-1.0.js --> <script src="../js/jquery-myPluginmenu-1.0

Bind()方法： 给元素绑定事件 形式： .bind(eventType[,eventData],handler(eventObject)) eventType,string类型，一个或多个DOM事件的名称，比如：click、submit eventData，Object，将会传递给handler函数的数据，也就是eventObject的data属性中，如果要调用那么使用eventObject.data Handler，function，当事件被触发时执行的函数 .bind(eventType[,eventData][,preventBubble]) eventType,string,一个或多个DOM事件的名称，比如：click、submit eventData，Object，将会传递给handler函数的数据，也就是eventObject的data属性中，如果要调用那么使用eventObject.data preventBubble,boolean,默认为true，当设置为false的时候将阻止浏览器默认事件发生，并且阻止事件冒泡。. .bind(events) Events,object,使用json的形式，为当前元素定义多个事件，例如： { click: function () { $( this ).addClass( "active" ); }, mouseenter:

1 、选择器 + 遍历 $(‘div’).each(function (i){ i 就是索引值 this 表示获取遍历每一个 dom 对象 }); 2 、选择器 + 遍历 $(‘div’).each(function (index,domEle){ index 就是索引值 domEle 表示获取遍历每一个 dom 对象 }); 3 、更适用的遍历方法 1 ）先获取某个集合对象 2 ）遍历集合对象的每一个元素 var d=$(“div”); $.each(d,function (index,domEle){ d 是要遍历的集合 i ndex 就是索引值 domEle 表示获取遍历每一个 dom 对 }); 案例： <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8” /> <title> 属性选择器学习 </title> <script language=”

最近写了很多的js，虽然效果都实现了，但是总感觉自己写的js在性能上还能有很大的提升。本文我计划总结一些网上找的和我本人的一些建议，来提升你的jQuery和javascript代码。好的代码会带来速度的提升。快速渲染和响应意味着更好的用户体验。谨以此文来提醒自己。 其次在脑子里牢牢记住jQuery就是javascript。这意味着我们应该采取相同的编码惯例,风格指南和最佳实践。 当你准备使用jQuery,我强烈建议你遵循下面这些指南: 缓存变量 DOM遍历是昂贵的，所以尽量将会重用的元素缓存。 // 糟糕 h = $('#element').height(); $('#element').css('height',h-20); // 建议 $element = $('#element'); h = $element.height(); $element.css('height',h-20); 避免全局变量 jQuery与javascript一样，一般来说,最好确保你的变量在函数作用域内。 // 糟糕 $element = $('#element'); h = $element.height(); $element.css('height',h-20); // 建议 var $element = $('#element'); var h = $element.height();

login.jsp <%@ page language= "java" contentType= "text/html; charset=utf-8" pageEncoding= "utf-8" %> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> < html > < head > < meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" > < title > Insert title here </ title > </ head > < script type = "text/javascript" src = "js/jquery-3.3.1.min.js" > </ script > < body > < script type = "text/javascript" > $(document).ready( function () { $( "#id" ).blur( function () { if ($( "#id" ).val()== "" || $( "#id" ).val()== null ){ alert(