一、DOM对象和jQuery 对象互换
1、jQuery对象
就是通过jQuery包装DOM对象后产生的对象。jQuery对象是jQuery独有的,其可以使用jQuery里的方法。比如:
$("#test").html() 意思是指:获取ID为test的元素内的html代码。其中html()是jQuery里的方法这段代码等同于用DOM实现代码:document.getElementById("id").innerHTML;
- 虽然jQuery对象是包装DOM对象后产生的,但是jQuery无法使用DOM对象的任何方法,同理DOM对象也不能使用jQuery里的方法. 乱使用会报错。比如:$("#test").innerHTML、document.getElementById("id").html()之类的写法都是错误的
- 还有一个要注意的是:用#id作为选择符取得的是jQuery对象与document.getElementById("id")得到的DOM对象,这两者并不等价
2、jQuery对象转成DOM对象
两种转换方式将一个jQuery对象转换成DOM对象: [index]和.get(index);
(1) jQuery对象是一个数据对象,可以通过[index]的方法,来得到相应的DOM对象。
(2) jQuery本身提供,通过.get(index)方法,得到相应的DOM对象
3、DOM对象转成jQuery对象:
对于已经是一个DOM对象,只需要用$()把DOM对象包装起来,就可以获得一个jQuery对象了。$(DOM对象),转换后,就可以任意使用jQuery的方法了
var $v=$("#v"); //jQuery对象 var v=$v.get(0); //DOM对象 alert(v.checked) //检测这个checkbox是否被选中
- 需要再强调注意的是:DOM对象才能使用DOM中的方法,jQuery对象是不可以用DOM中的方法。
- 只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的,调用方法时要注意
- 由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项,一般可通过索引取出。 如:
$("#msg")[0],$("div").eq(1)[0],$("div").get()[1],$("td")[5]
这些都是dom对象,可以使用dom中的方法,但不能再使用Jquery的方法
二、多个库之间的冲突
1.jQuery在其他库之前导入,可直接使用jQuery,无需调用jQuery.noConflict()函数
<script type="text/javascript" src="./jquery-1.4.2.js"></script> <script type="text/javascript" src="./prototype-1.6.1.js"></script>
2.jQuery在其他库之后导入,有两种方法:
“$”的所有权就归Base 库所有,创建一个“$$”符给jQuery 使用。
var $$ = jQuery; //创建一个$$的jQuery 对象 $(function () { //这是Base 的$ alert($('#box').ge(0)); //这是Base 的$ alert($$('#box').width()); //这是jQuery 的$$ });
jQuery 提供了一个方法——noConflict:
jQuery.noConflict(); //将$符所有权剔除 var $$ = jQuery; //自定义一个快捷给jQuery $(function () { alert($('#box').ge(0)); alert($$('#box').width()); });
jQuery.noConflict(); //将变量$的控制权移交给prototype.js jQuery(function(){ //使用jQuery jQuery("p").click(function(){ alert(jQuery(this).text()); }); }); $("pp").style.display='none'; //使用prototype $j = jQuery.noConflict(); //自定义一个快捷给jQuery,将变量$的控制权移交给prototype.js $j(function(){ //使用jQuery,利用自定义快捷$j $j("p").click(function(){ alert($j(this).text()); }); }); $("pp").style.display='none'; //使用prototype
jQuery.noConflict(); //将变量$的控制权移交给prototype.js (function($){ //定义匿名函数并设置形参为$ $(function(){ //匿名函数内部$均为jQuery $("p").click(function(){alert($(this).text());}); }); })(jQuery); $(“pp”).style.display='none'; //使用prototype jQuery.noConflict(); //将变量$的控制权移交给prototype.js jQuery(function($){ //使用jQuery加载页面函数 $(function(){ //内部继续使用$均为jQuery $("p").click(function(){alert($(this).text());}); }); }); $("pp").style.display='none'; //使用prototype
三、元素样式操作
1、遍历
在CSS 获取上,我们也可以获取多个CSS 样式,而获取到的是一个对象数组,如果用传统方式进行解析需要使用for in 遍历。
var box = $('div').css(['color', 'height', 'width']); //得到多个CSS 样式的数组对象 for (var i in box) { //逐个遍历出来 alert(i + ':' + box[i]); }
jQuery 提供了一个遍历工具专门来处理这种对象数组,$.each()方法,这个方法可以轻松的遍历对象数组。
$.each(box, function (attr, value) { //遍历JavaScript 原生态的对象数组 alert(attr + ':' + value); });
使用$.each()可以遍历原生的JavaScript 对象数组,如果是jQuery 对象的数组怎么使用.each()方法呢?
$('div').each(function (index, element) { //index 为索引,element 为元素DOM alert(index + ':' + element); });
2、传递参数
如果想设置某个元素的CSS 样式的值,但这个值需要计算我们可以传递一个匿名函数。
$('div').css('width', function (index, value) { //index 为索引,value为css值 return (parseInt(value) - 500) + 'px'; });
3、切换样式
.toggleClass()方法的第二个参数可以传入一个布尔值
- true 表示执行切换到class 类
- false表示执行回默认class 类(默认的是空class),运用这个特性,我们可以设置切换的频率
var count = 0; $('div').click(function () { //每点击两次切换一次red $(this).toggleClass('red', count++ % 3 == 0); });
默认的CSS 类切换只能是无样式和指定样式之间的切换,如果想实现样式1 和样式2之间的切换还必须自己写一些逻辑。
$('div').click(function () { $(this).toggleClass('red size'); //一开始切换到样式2 if ($(this).hasClass('red')) { //判断样式2 存在后 $(this).removeClass('blue'); //删除样式1 } else { $(this).toggleClass('blue'); //添加样式1,这里也可以addClass } });
上面的方法较为繁琐,.toggleClass()方法提供了传递匿名函数的方式,来设置你所需要切换的规则。
$('div').click(function () { $(this).toggleClass( function () { //传递匿名函数,返回要切换的样式 return $(this).hasClass('red') ? 'blue' : 'red size'; }); });
上面虽然一句话实现了这个功能,但还是有一些小缺陷,因为原来的class 类没有被删除,只不过被替代了而已。所以,需要改写一下。
$('div').click(function () { $(this).toggleClass(function () { if ($(this).hasClass('red')) { // 更加局部化 $(this).removeClass('red'); return 'green'; } else { $(this).removeClass('green'); return 'red'; } }); });
对于.toggleClass()传入匿名函数的方法,还可以传递index 索引、class 类两个参数以及频率布尔值,可以得到当前的索引、class 类名和频率布尔值。
var count = 0; $('div').click(function () { $(this).toggleClass(function(index, className, switchBool) { alert(index + ':' + className + ':' + switchBool); //得到当前值 return $(this).hasClass('red') ? 'blue' : 'red size'; },count++ % 3 == 0); //增加第二个频率参数 });
四、基础事件
1、绑定事件
bind(type, [data], fn)
- type 表示一个或多个类型的事件名字符串
- [data]是可选的,作为event.data 属性值传递一个额外的数据,这个数据是一个字符串、一个数字、一个数组或一个对象
- fn 表示绑定到指定元素的处理函数
//1. 使用点击事件 $('input').bind('click', function () { //1.1 点击按钮后执行匿名函数 alert('点击!'); }); //普通处理函数 $('input').bind('click', fn); //1.2 执行普通函数式无须圆括号 function fn() { alert('点击!'); } //2. 可以同时绑定多个事件 $('input').bind('mouseout mouseover', function () { //移入和移出分别执行一次 $('div').html(function (index, value) { return value + '1'; }); }); //3. 通过对象键值对绑定多个参数 $('input').bind({ //传递一个对象 'mouseout' : function () { //事件名的引号可以省略 alert('移出'); }, 'mouseover' : function () { alert('移入'); } }); //4. 使用unbind 删除绑定的事件 $('input').unbind(); //删除所有当前元素的事件 //5. 使用unbind 参数删除指定类型事件 $('input').unbind('click'); //删除当前元素的click 事件 //6. 使用unbind 参数删除指定处理函数的事件 function fn1() { alert('点击1');} function fn2() {alert('点击2');} $('input').bind('click', fn1); $('input').bind('click', fn2); $('input').unbind('click', fn1); //只删除fn1 处理函数的事件
2. 简写事件
为了使开发者更加方便的绑定事件,jQuery 封装了常用的事件以便节约更多的代码。我们称它为简写事件
说明:
- .mouseover()和.mouseout()表示鼠标移入和移出的时候触发,.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发,.mouseenter()和.mouseleave()这组穿过子元素不会触发,而.mouseover()和.mouseout()则会触发
- .keydown()、.keyup()返回的是键码,而.keypress()返回的是字符编码
- .focus()和.blur()分别表示光标激活和丢失,事件触发时机是当前元素。而.focusin()和.focusout()也表示光标激活和丢失,但事件触发时机可以是子元素。
3、复合事件
jQuery 提供了许多最常用的事件效果,组合一些功能实现了一些复合事件,比如切换功
能、智能加载等。
3.1 hover
//背景移入移出切换效果 $('div').hover(function () { $(this).css('background', 'black'); //mouseenter 效果 }, function () { $(this).css('background', 'red'); //mouseleave 效果,可省略 });
3.2 .toggle()这个方法比较特殊,这个方法有两层含义,第一层含义就是已经被1.8 版废用、1.9 版删除掉的用法,也就是点击切换复合事件的用法。第二层函数将会在动画那章讲解到。既然废弃掉了,就不应该使用。被删除的原因是:以减少混乱和提高潜在的模块化程度。
但你又非常想用这个方法,并且不想自己编写类似的功能,可以下载jquery-migrate.js文件,来向下兼容已被删除掉的方法。
我们也可以自己实现这个功能。
var flag = 1; //计数器 $('div').click(function () { if (flag == 1) { //第一次点击 $(this).css('background', 'black'); flag = 2; } else if (flag == 2) { //第二次点击 $(this).css('background', 'blue'); flag = 3 } else if (flag == 3) { //第三次点击 $(this).css('background', 'red'); flag = 1 } });
五、事件对象
5.1 事件对象
JavaScript 在事件处理函数中默认传递了event 对象,也就是事件对象。但由于浏览器的兼容性,开发者总是会做兼容方面的处理。jQuery 在封装的时候,解决了这些问题,并且还创建了一些非常好用的属性和方法。
//通过处理函数传递事件对象 $('input').bind('click', function (e) { //接受事件对象参数 alert(e); });
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
//通过event.type 属性获取触发事件名 $('input').click(function (e) { alert(e.type); }); //通过event.target 获取绑定的DOM 元素 $('input').click(function (e) { alert(e.target); }); //通过event.data 获取额外数据,可以是数字、字符串、数组、对象 $('input').bind('click', 123, function () { //传递data 数据 alert(e.data); //获取数字数据 }); // 注意:如果字符串就传递:'123'、如果是数组就传递:[123,'abc'],如果是对象就传递: {user : 'Lee', age : 100}。数组的调用方式是:e.data[1],对象的调用方式是:e.data.user。 //event.data 获取额外数据,对于封装的简写事件也可以使用 $('input').click({user : 'Lee', age : 100},function (e) { alert(e.data.user); }); 注意:键值对的键可以加上引号,也可以不加;在调用的时候也可以使用数组的方式: alert(e.data['user']); //获取移入到div 之前的那个DOM 元素 $('div').mouseover(function (e) { alert(e.relatedTarget); }); //获取移出div 之后到达最近的那个DOM 元素 $('div').mouseout(function (e) { alert(e.relatedTarget); }); //获取绑定的那个DOM 元素,相当于this,区别与event.target $('div').click(function (e) { alert(e.currentTarget); });
说明: event.target 得到的是触发元素的DOM,event.currentTarget 得到的是监听元素的DOM。而this也是得到监听元素的DOM。
- 触发元素: 点击哪个就是哪个
- 监听元素: 绑定哪个就是哪个
5.2 冒泡和默认行为
- 阻止冒泡:event.stopPropagation(); 这个方法设置到需要触发的事件上时,所有上层的冒泡行为都将被取消。
- 阻止默认行为:event.preventDefault() ;比如:右击文本框输入区域,会弹出系统菜单、点击超链接会跳转到指定页面、点击提交按钮会提交数据。
//禁止提交表单跳转 $('form').submit(function (e) { e.preventDefault(); });
- 同时阻止默认行为且禁止冒泡行为 return false
六、高级事件+事件委托
1、事件委托
在下面两种情况下推荐使用事件委托的绑定方式,否则推荐使用普通绑定
- 在DOM 中很多元素绑定相同事件时——绑定父元素,即多个子元素绑定到一个父元素
- 在DOM 中尚不存在即将生成的元素绑定事件时——动态绑定
<div style="width:200px;height:200px;background:green;" id="box"> <input type="button" class="button" value="按钮" /> </div>
<javascripy> $('#box').on('click', '.button', function () { $(this).clone().appendTo('#box'); //动态绑定,生成的新button同样绑定给父元素box,具有点击行为 }); </javascripy>
2. on、off和one
jQuery1.7 以后推出了.on()和.off()方法彻底摒弃了.bind()、.unbind()、.delegate()和.undelegate()
//替代.bind()方式 $('.button').on('click', function () { alert('替代.bind()'); }); //替代.bind()方式,并使用额外数据和事件对象 $('.button').on('click', {user : 'Lee'}, function (e) { alert('替代.bind()' + e.data.user); }); //替代.bind()方式,并绑定多个事件 $('.button').on('mouseover mouseout', function () { alert('替代.bind()移入移出!'); }); //替代.bind()方式,以对象模式绑定多个事件 $('.button').on({ mouseover : function () { alert('替代.bind()移入!'); }, mouseout : function () { alert('替代.bind()移出!'); } }); //替代.bind()方式,阻止默认行为并取消冒泡 $('form').on('submit', function () { return false; }); //或 $('form').on('submit', false); //替代.bind()方式,阻止默认 $('form').on('submit', function e.preventDefault(); }); //替代.bind()方式,取消冒泡 $('form').on('submit', function e.stopPropagation(); }); //替代.unbind()方式,移除事 $('.button').off('click'); $('.button').off('click', fn); $('.button').off('click.abc'); //替代.live()和.delegate(),事件委托 $('#box').on('click', '.button', function () { $(this).clone().appendTo('#box'); }); //替代.die()和.undelegate(),取消事件委托 $('#box').off('click', '.button');
不管是.bind()还是.on(),绑定事件后都不是自动移除事件的,需要通过.unbind()和.off()来手工移除。jQuery 提供了.one()方法,绑定元素执行完毕后自动移除事件,可以方法仅触发一次的事件。
//类似于.bind()只触发一次 $('.button').one('click', function () { alert('one 仅触发一次!'); }); //类似于.delegate()只触发一次 $('#box).one('click', 'click', function () { alert('one 仅触发一次!'); });
六、命名空间
有时想对事件进行移除。但对于同名同元素绑定的事件移除往往比较麻烦,这个时候,可以使用事件的命名空间解决。
$('input').bind('click.abc', function () { alert('abc'); }); $('input').bind('click.xyz', function () { alert('xyz'); }); $('input').unbind('click.abc'); //移除click 实践中命名空间为abc 的