jQuery 知识点大纲

一、jQuery的元素操作

1.1 jQuery获取元素的高和宽

height ： $(selector).height(); //带参数设置，不带参数获取,参数是number类型

width ： $(selector).width(200); //带参数设置，不带参数获取

innerHeight //只能获取：内边距+内容的高度

innerWidth //同上.........宽度

outerHeight

outerWidth //获取：左右内边距+内容+左右边框

1.2 jQuery元素坐标操作

offset() 获取或设置元素相对于文档位置的方法

返回一个object，包含left和top属性，值是相对于document的位置。

如果传入一个参数，则是对元素重新设置相对于document的位置。

传入参数必须包括：left和top属性。比如： {left：100，top：150}

例如：$(selector).offset({left:100, top: 150});

position() 获取相对于其最近的定位的父元素的位置。

只能获取，不能设置。相对与其最近的定位元素返回一个object，包含left和top属性

例如： $(selector).position();

元素的滚动

scrollLeft() 获取或者设置元素水平方向滚动的位置scrollTop() 获取或者设置窗口垂直方向的滚动的位置

例如： $(selector).scrollLeft(100);

scroll() 事件触发或者绑定滚动事件

scroll(hander) 绑定滚动事件scroll() 触发滚动事件 $(selector).scroll(function(){ //当选择的元素发生滚动的时候触发 });

---

二、jQuery事件绑定机制

2.1 简单事件绑定方法

.click(hander) .click() //绑定事件 或者触发 click事件.blur() //失去焦点事件，同上

.hover(mousein, mouseleave) //鼠标移入，移出

mouseout： 当鼠标离开元素及它的子元素的时都会触发。

mouseleave: 当鼠标离开自己时才会触发，子元素不触发。

.dbclick() 双击

change 改变,比如：文本框发送改变，下来列表发生改变等...focus 获得焦点keyup, keydown, keypress : 键盘 键被按下。

mousedown, mouseover

其他参考：http://www.w3school.com.cn/jquery/jquery_ref_events.asp

2.2 绑定事件的方式 bind方式（不推荐，1.7以后的jQuery版本被on取代）

语法格式：.bind( eventType [, eventData ], handler )参数说明 第一个参数：事件类型第二个参数：传递给事件响应方法的数据对象，可以省略。事件响应方法中获取数据方式： e.data第三个参数：事件响应方法第二个参数可以省略。 例如： $("p").bind("click", function(e){ //事件响应方法 });

2.3 delegate方式（推荐，性能高，支持动态创建的元素）

语法格式：$(selector).delegate( selector, eventType, handler )语法说明： 第一个参数:selector， 子选择器第二个参数：事件类型第三个参数：事件响应方法 例如： $(".parentBox").delegate("p", "click", function(){ //为 .parentBox下面的所有的p标签绑定事件 });

优势：效率较高

2.4 on方式（最现代的方式，兼容zepto，强烈建议使用的方式）

jQuery1.7版本后，jQuery用on统一了所有的事件处理的方法语法格式：$(selector).on( events [, selector ] [, data ], handler )参数介绍： 第一个参数：events，事件名第二个参数：selector,类似delegate第三个参数: 传递给事件响应方法的参数第四个参数：handler，事件处理方法 例如： //绑定一个方法 $( "#dataTable tbody tr" ).on( "click", function() { console.log( $( this ).text() ); }); //给子元素绑定事件 $( "#dataTable tbody" ).on( "click", "tr", function() { console.log( $( this ).text() ); }); //绑定多个事件的方式 $( "div.test" ).on({ click: function() { $( this ).toggleClass( "active" ); }, mouseenter: function() { $( this ).addClass( "inside" ); }, mouseleave: function() { $( this ).removeClass( "inside" ); } });

2.5 one绑定一次事件的方式

.one( events [, data ], handler ) 例如： $( "p" ).one( "click", function() { alert( $( this ).text() ); });

2.6 解绑事件

unbind解绑 bind方式绑定的事件( 在jQuery1.7以上被 on和off代替)

$(selector).unbind(); //解绑所有的事件$(selector).unbind("click"); //解绑指定的事件

undelegate解绑delegate事件

$( "p" ).undelegate(); //解绑所有的delegate事件$( "p" ).undelegate( "click" ); //解绑所有的click事件 例如： var foo = function () { // Code to handle some kind of event }; // ... Now foo will be called when paragraphs are clicked ... $( "body" ).delegate( "p", "click", foo ); // ... foo will no longer be called. $( "body" ).undelegate( "p", "click", foo ); off解绑on方式绑定的事件 $( "p" ).off();$( "p" ).off( "click", "**" ); // 解绑所有的click事件，两个*表示所有$( "body" ).off( "click", "p", foo ); 案例1： var foo = function() { // Code to handle some kind of event }; // ... Now foo will be called when paragraphs are clicked ... $( "body" ).on( "click", "p", foo ); // ... Foo will no longer be called. $( "body" ).off( "click", "p", foo ); 案例2：（了解）解绑命名空间的方式： var validate = function() { // Code to validate form entries }; // Delegate events under the ".validator" namespace $( "form" ).on( "click.validator", "button", validate ); $( "form" ).on( "keypress.validator", "input[type='text']", validate ); // Remove event handlers in the ".validator" namespace $( "form" ).off( ".validator" );

2.7 触发事件

简单事件触发 $(selector).click(); //触发 click事件trigger方法触发事件 $( "#foo" ).trigger( "click" );triggerHandler触发 事件响应方法，不触发浏览器行为 $( "input" ).triggerHandler( "focus" );

2.8 event对象的简介

event.data //传递的额外事件响应方法的额外参数

event.currentTarget //在事件响应方法中等同于this，当前Dom对象

event.target //事件触发源，不一定===this

event.pageX //The mouse position relative to the left edge of the document

event.pageY

event.stopPropagation()//阻止事件冒泡

e.preventDefault(); //阻止默认行为

event.type //事件类型：click，dbclick...

event.which //鼠标的按键类型：左1 中2 右3

jQuery其他补充

链式编程： end()补充

补充五角星 评论案例第一步：鼠标移入，当前五角星和前面的五角星变实体。后面的变空心五角星第二步：鼠标点击的时候，为当前元素添加clicked类，其他的移除clicked类第三步：当鼠标移开整个评分控件的时候，把clicked的之前的五角星显示实心

隐式迭代

map函数

$.map(arry,function(object,index){}) 返回一个新的数组$("li").map(function(index, element){}) 注意参数的顺序是反的 var newArr = $.map($("li"), function(i, e) { return $(e).text() + i;//每一项返回的结果组成新数组 }); var newArr = $("li").map(function(elem, index){ console.log("elem:" + elem); console.log("index:" + index); retrun index; }); each函数 $.each(array, function(index, object){})$("li").each(index, element )参数的顺序是一致的。 例如： $( "li" ).each(function() { $( this ).addClass( "foo" ); }); $( "li" ).each(function( index ) { console.log( index + ": " + $( this ).text() ); }); $( "div" ).each(function( index, element ) {});

+noConflict 全局对象污染冲突

转载于:https://www.cnblogs.com/yiwangdeyidianyuan/p/5850806.html