jQuery学习小结1-CSS操作+事件
一、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); });
//通过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 的