jquery事件

jQuery为开发插件提拱了两个方法，分别是： jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象添加方法。 fn 是什么东西呢。查看jQuery代码，就不难发现。 jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//....　 //...... }; 原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。 虽然 javascript　没有明确的类的概念，但是用类来理解它，会更方便。 jQuery便是一个封装得非常好的类，比如我们用 语句　$("#btn1") 会生成一个 jQuery类的实例。 jQuery.extend(object);　为jQuery类添加添加类方法，可以理解为添加静态方法。如： $.extend({ add:function(a,b){return a+b;} }); 便为　jQuery　添加一个为 add　的　“静态方法”，之后便可以在引入 jQuery　的地方，使用这个方法了， $.add(3,4); /

jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给jQuery对象添加方法。 fn 是什么东西呢。查看jQuery代码，就不难发现。 jQuery.fn = jQuery.prototype = { init: function( selector, context ) {//....　 //...... }; 原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。 虽然 javascript　没有明确的类的概念，但是用类来理解它，会更方便。 jQuery便是一个封装得非常好的类，比如我们用 语句　$("#btn1") 会生成一个 jQuery类的实例。 jQuery.extend(object);　为jQuery类添加添加类方法，可以理解为添加静态方法。如： $.extend({ add:function(a,b){return a+b;} }); 便为　jQuery　添加一个为 add　的　“静态方法”，之后便可以在引入 jQuery　的地方，使用这个方法了， $.add(3,4); //return 7 jQuery.fn.extend

jQuery入门[1]－构造函数 jQuery入门[2]－选择器 jQuery入门[3]－事件 jQuery入门[4]－链式代码 jQuery入门[5]－AJAX jQuery入门[6]－动画 jQuery对事件的支持主要包括： bind()--为事件绑定处理程序，如： $("p").bind("mouseenter mouseleave", function(e){ $(this).toggleClass("over"); }); unbind()--注销绑定在事件上的处理程序，如：$(document).unbind('ready');，如不给参数，则清除所有事件处理程序。 $("#unbind").click(function () { $("#theone").unbind('click', aClick); }); trigger()--触发某类事件。 $("button:first").trigger('click'); triggerHandler()--触发某类事件，但不触发默认的事件处理逻辑，比如a的定向。 $("input").triggerHandler("focus"); one()－－为事件绑定只能被触发一次的处理程序。 $("div").one("click", function(){ }); ready()/click()/change()

　　 加载DOM 　　以浏览器装在文档为例，在页面加载完毕后，浏览器会通过JavaScript为DOM元素添加事件。在常规的JavaScript代码中，通常使用window.onload方法，而在jQuery中，使用的是$(document).ready()方法。$(document).ready()是事件模块中最重要的一个函数，可以极大地提高Web应用程序的响应速度。jQuery就是用$(document).ready()方法来代替传统JavaScript的window.onload方法的。通过使用该方法，可以在DOM载入就绪时就对其进行操纵并调用执行它所绑定的函数。 　　 $(document).ready()与window.onload区别 　　 （1）执行时机 　　window.onload方法是在网页中所有的元素（包括元素的所有关联文件）完全加载到浏览器后才执行，JavaScript此时才可以访问网页中的任何元素。而通过jQuery中的$(document).ready()方法注册的事件处理程序，在DOM完全就绪时就可以被调用。此时，网页的所有元素对jQuery而言都是可以访问的，但是，这不是意味着这些元素关联的文件都已经下载完毕。 　　假设有一个网站，与图片有关的HTML下载完毕，并且已经解析为DOM树了，但很有可能图片还未加载完毕

在页面加载后执行任务 $(document).ready()可以让jQuery响应网页加载事件,触发函数中的代码 代码执行的时机选择 我们已经知道,$(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方 式.当文档完全下载到浏览器中时,会触发window.onload事件,这意味着页面中的全部元素对JavaScript而言都是可访问的.而通 过$(document).ready()注册的事件处理程序,会在DOM完全就绪时就可以访问,这意味着所有元素对脚本来说是可访问的,但并不意味着关 联文件已下载完成 简单的事件 $(document).ready(function(){ $(‘#some-id’).bind(‘click’,function(){ $(‘body’).addClass(‘large’); $(this).addClass(‘selected’); //$(this)为some-id元素创建一jQuery对象 }); }); 通过bind方法,可以指定任何JavaScript事件,并为事件添加一种行为.当触发任何事件处理程序时,关键字this引用的都是携带相应行为的DOM元素,通过在事件处理程序中使用$(this)可以为相应的元素创建一个jQuery对象 显示和隐藏高级特性 $(document)

1.$(document).ready() $(document).ready()是jQuery中响应JavaScript内置的onload事件并执行任务的一种典型方式。它和onload具有类似的效果。但是也有一些差异： 当一个文档完全下载到浏览器中时，会触发window.onload事件。而使用$(document).ready()注册的事件处理程序会在html下载完成并解析为Dom树之后，代码就可以运行，但并不意味着所有关联文件都已经下载完毕。 一个页面中一般只有一个onload事件处理程序，而且只能一次保存对一个函数的引用；而$(document).ready()是可以有多个。 一般来说$(document).ready()都要优于使用onload事件处理程序。但是如果关联文件还没有加载完成，则类似图像高度、宽度的属性的调用就会有问题，因此需要在不同的时候选择合适的方法。 $(document).ready()有三种写法，分别是： > $(document).ready(function() { //this is the coding... }); >$().ready(function() { //this is the coding... }); >$(function() { //this is the coding... }); 2. 事件捕获与事件冒泡 事件捕获

DOM创建节点及节点属性 创建元素：document.createElement 设置属性：setAttribute 添加文本：innerHTML 加入文档：appendChild append()前面是被插入的对象，后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容，而后面是被插入的对象 before与after都是用来对相对选中元素外部增加相邻的兄弟节点 2个方法都是都可以接收HTML 字符串 ， DOM 元素 ， 元素数组 ，或者 jQuery对象 ，用来插入到集合中每个匹配元素的前面或者后面 2个方法都支持多个参数传递after(div1,div2,....) 可以参考右边案例代码 注意点： after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入 before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插 append() 向每个匹配的元素内部追加内容 prepend() 向每个匹配的元素内部前置内容 appendTo() 把所有匹配的元素追加到另一个指定元素的集合中 prependTo() 把所有匹配的元素前置到另一个指定的元素集合中 insertAfter 将JQuery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移

浏览器加载页面的顺序： 1、 解析HTML结构 2、 加载外部脚本和样式表文件 3、 解析并执行脚本代码 4、 构造HTML DOM模型==ready() 5、 加载图片等组件 6、 页面加载完毕==onload() ready事件是在DOM模型构造完毕时触发 load事件是在页面加载完毕后触发 function ready(fn){ if(document.addEventListener) { document.addEventListener('DOMContentLoaded', function() { //注销事件, 避免反复触发 document.removeEventListener('DOMContentLoaded',arguments.callee, false); fn(); //执行函数 }, false); }else if(document.attachEvent) { //IE document.attachEvent('onreadystatechange', function() { if(document.readyState == 'complete') { document.detachEvent('onreadystatechange', arguments.callee); fn(); //函数执行 } }); } }; ready(

jq 和 js 可以共存，不能混用 ； $('.box').css('background','red'); $(".box").css({ color: "#ff0011", background: "blue"}); $('li:eq(2)').css('background','red'); //：first选择 $('li:odd').css('background','red'); //even奇数行，odd偶数行 $('li').filter('.box').css('background','red'); filter过滤、筛选； $('li').filter('[title=hello]').css('background','red'); 方法函数化 ： window.onload = function(){}; $(function(){}); function $(){} innerHTML = 123; html(123) function html(){} onclick = function(){}; click(function(){}) function click(){} $('#div1').click(function(){ alert( $(this).html() ); }); jquery 中的 this 的写法是 $(this) ；

Attribute： $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $("img").attr({src:"test.jpg",alt:"test Image"}); 给某个元素添加属性/值，参数是map $("img").attr("src","test.jpg"); 给某个元素添加属性/值 $("img").attr("title", function() { return this.src }); 给某个元素添加属性/值 $("元素名称").html(); 获得该元素内的内容（元素，文本等） $("元素名称").html("<b>new stuff</b>"); 给某元素设置内容 $("元素名称").removeAttr("属性名称") 给某元素删除指定的属性以及该属性的值 $("元素名称").removeClass("class") 给某元素删除指定的样式 $("元素名称").text(); 获得该元素的文本 $("元素名称").text(value); 设置该元素的文本值为value $("元素名称").toggleClass(class) 当元素存在参数中的样式的时候取消,如果不存在就设置此样式 $("input元素名称").val(); 获取input元素的值 $("input元素名称").val(value);