标签：
一、节点替换
$(‘br‘).replaceWhith(‘<hr/>‘) 表示选取页面的所有br元素替换成<hr />
$(‘<hr />‘).replaceAll(‘br‘); 这是表示动态创建一个<hr />元素，然后用该元素替换页面上所有的br元素
2）节点包裹
$(‘p‘).wrap(‘<font color=red ></font>‘); 把每一个选中的P元素，外部都包裹一个font标签
$(‘p‘).wrapAll(‘<font color=red ></font>‘); 在所有选中元素外部包裹一个font标签
$(‘p‘).wrapInner(‘<font color=red ></font>‘); 把每一个选中的P元素，里面都包裹一个font标签
3）同时选中多个radio，然后设置值，radio的value如果与被设置的值相同，那么这个radio就会被选中
$(‘:radio‘).val([‘值1，值2...‘]); 哪怕只有一个值，也得用数组
$(‘:radio‘).val([‘男‘,‘女‘]); //在同一组radio里面只能选中一个，数组里的最后一个值的那个会被选中
4）操作类样式
$(function () { // 练习：聚焦控件的高亮显示。颜色定义为class样式。 $(“body *”)，选择器*表示所有类型的控件。获得焦点的元素背景色为黄色. $(‘body *‘).focus(function () {//首先选中页面上有的元素，为每一个元素注册一个获得焦点的事件（focus） $(this).addClass(‘bgYellow‘).siblings().removeClass(‘bgYellow‘);//当获得焦点时为该元素添加一个类样式，其所有兄弟元素都移除这个类样式 }); //练习：搜索框效果。焦点放入控件，如果文本框中的值是“请输入关键词”， //那么将文本清空，并且颜色设置为黑色。如果焦点离开控件，如果文本框中是空值， //那么将文本框填充为“请输入关键词”，颜色设置为灰色（Gray）。颜色定义为class样式。 $(‘#beat‘).focus(function () { if ($(this).val() == ‘请输入关键字‘) { $(this).val(‘‘).removeClass(‘bggray‘); } }).blur(function () { if ($(this).val().length == 0) { $(this).val(‘请输入关键字‘).addClass(‘bggray‘); } }); });
===========================================
二、绑定事件
$(‘#btn‘).bind(‘click‘,function(){alert(‘被点击了‘)});
第一个参数是事件的类型，如click、focus...等
第二个参数是该事件触发要执行的逻辑代码
取消事件
$(‘#btn‘).unbind(‘click‘);
参数是取消的事件类型，如果不传就是取消所有的事件
三、事件冒泡
$(function () { $(‘#dv1‘).click(function (even) { alert(‘dv1‘); //even.stopPropagation(); }); $(‘#dv2‘).click(function () { alert(‘dv2‘); }); $(‘#dv3‘).click(function (even) { alert(‘dv3‘); //终止时间冒泡 even.stopPropagation(); }); });
Dom元素.StopPropagation(); 取消事件冒泡
阻止事件的执行
$(‘a‘).click(function(eve){
eve.preventDefault（）;
});
javascript方法
window.event.returnValue = false;
2)注册事件时传递参数
在jquery中在注册事件的时候可以传递参数过来，然后在事件处理程序中可以通过事件对象event来访问参数，event.data
$(‘#a1‘).click({ ‘name‘: ‘mdr‘, ‘age‘: 20 }, function (even) {
alert(even.data.name);
});
3）注册只能触发一次的事件
$(function(){ $(‘#btn‘).one(‘click‘,function(){ }); });
4)模仿tip
$(‘:text‘).mouseover(function () { //判断页面上是否存在这个层，如果存在就移除 if ($(‘#dv1‘).length > 0) { $(‘#dv1‘).remove(); } //获得当前元素的距左边的距离，X var left = $(this).offset().left; //获得当前元素的距上边的距离，Y var top = $(this).offset().top + $(this).height(); //当鼠标进入当前元素的时候动态创建一个层 var div = $(‘<div id="dv1" style="border:1px solid pink;width:100px;height:20px;background-color:pink;position:absolute;left:‘ + left + ‘px;top:‘ + top + ‘px;">nb</div>‘); //把层加到页面中 $(‘body‘).append(div); });
5）jquery中的一些动画效果
show()、hide()方法会显示、隐藏元素。用toggle(speed)方法在显示、隐藏之间切换
$(":button[value=show]").click(function() { $("div").show(); });
$(":button[value=hide]").click(function() { $("div").hide(); });
如果show、hide方法不带参数则是立即显示、立即隐藏，如果指定速度参数则会用指定时间进行动态显示、隐藏，单位为毫秒，也可以使用三个内置的速度：fast（200毫秒）、normal（400毫秒）、slow（600毫秒），jQuery动画函数中需要速度的地方一般也可以使用这个三个值。
滑动效果
slideDown()、slideUp()、slideToggle()
淡入淡出（透明）
fadeIn()、fadeOut()、fadeToggle()、fadeTo()
自定义动画
animate({样式},speed)
部分样式不支持：backgroundColor、color、borderStyle、……
使用animate设置对象位置的时候要确保position的值为absolute或relative.
停止动画正在执行动画的元素.stop()(*)
动画队列：.animate().animate().animate()….;
$(‘#dvAnimate’).animate({ width: ‘+=100px’, height: ‘+=100px’, left: ‘300px’, top: ‘100px’, borderWidth: ‘20px’ }, 2000)，在2000毫秒内，width增加100px
实现分组效果
$(function () { $(‘#hidden‘).click(function () { $(‘#dv1‘).hide(3000); }); $(‘#dv1 ul‘).css({ ‘list-style-type‘: ‘none‘, ‘margin‘: ‘0‘, ‘padding‘: ‘0‘}); $(‘#dv1 ul > li‘).css({ ‘margin‘: ‘1px‘, ‘padding‘: ‘1px‘, ‘background-color‘: ‘pink‘}).click(function () { $(‘li‘,$(this)).toggle(‘speed‘); }); $(‘#dv1 ul > li li‘).css({ ‘background-color‘: ‘cyan‘, ‘margin‘: ‘1px‘, ‘padding‘: ‘1px‘ }).hide(); });
标签：
原文地址：http://www.cnblogs.com/hetong/p/4796196.html
