jQuery 基础
创建节点
a . 用 $() 创建节点
示例
1 <script> 2 var p = $('<p>创建节点</p>'); //p元素节点 3 </script>
插入节点
A . 内部插入
a . append() 向每个匹配元素的尾部插入节点
b . appendTo() 与上一个相同
c . prepend() 向每个匹配元素的头部插入节点
d . prependTo() 与上一个相同
B . 外部插入
a . after() 向每个匹配元素的后面插入节点
b . before() 向每个匹配元素的前面插入节点
包裹节点
a . wrap() 将所有匹配元素单独包裹
示例
$('p').wrap('<div></div>'); //将所有P标签用div标签包裹
b . wrapAll() 将多个匹配元素用一个元素包裹
//HTML代码
<p>1</p> <p>2</p> <p>3</p> <script> $('p').wrapAll('<div></div>'); //将所有匹配的p标签用一个div包裹 </script> 结果 : <div> <p>1</p> <p>2</p> <p>3</p> </div>
c . wrapInner() 将所有匹配的元素的子内容用其他标签包裹
<script> $('p').wrapInner('<div></div>'); </script>
删除节点
a . remove() 删除节点
$('p').remove(); //删除所有p标签
b . empty() 清空节点的所有子节点
$('p').empty(); //删除所有p标签的内容
c . detach() 删除节点,与remove()不同的是，所有绑定的事件、附加的数据等都会保留下来。
复制节点
a . clone(bool) 克隆节点,参数默认是false,如果是true 则事件也会被复制.
$("b").clone().prependTo("p"); //将b标签克隆并追加到p标签里
替换节点
a . replaceWith()
//将p标签替换成div标签,内容保留 $('p').replaceWith(function(){ return '<div>' + $(this).text() + '</div>'; }); //将p标签替换成b标签,内容不保留 $('p').replaceWith('<b>替换了</b>');
节点属性
a . attr(key,value) 设置或返回被选元素的属性值
b . removeAttr(key) 从每一个匹配的元素中删除一个属性
操作样式
a . addClass(类名) 添加样式
$('span').addClass('red'); //将span里的字变成红色
b . removeClass(类名) 移除样式
$('span').removeClass('red');
c . toggleClass(类名) 切换样式, 添加样式和移除样式来回切换.
$('span').click(function(){
$(this).toggleClass('red'); //点击span标签时添加red类或者移除red类.
});
d . hasClass(类名) 判断是否有样式
$('span').hasClass('red'); //判断span标签是否有red类,返回BOOL值
e . css() 设置元素的样式
$('span').css({'color':'red'}); //将span设置成红色
f . height() 获取高度,padding值,边框,不会计算在内
$('div').height(); //获取div的高度
g. width() 获取宽度,padding值,边框,不会计算在内
$('div').width(); //获取div的宽度
h . innerHeight() 获取一个元素的高度,padding值也会计算在内.
$('div').innerHeight()
i . innerWidth() 获取一个元素的宽度,padding值也会计算在内.
$('div').innerWidth();
j . outerHeight(bool) 获取一个元素的高度, padding值,边框都会计算在内,如果参数是true,margin值也会计算在内
$('div').outerWidth(); // div的宽度,包括padding,border
$('div').outerWidth(true); // div的宽度,包括padding,border
k . outerWidth(bool) 获取一个元素的宽度, padding值,边框都会计算在内,如果参数是true,margin值也会计算在内
$('div').outerHeight(); // div的高度,包括padding,border
$('div').outerHeight(true);
// div的高度,包括padding,border
l . offset() 元素在文档中的位置,返回一个对象.对象有两个属性 left ,top.
var offset = $('div').offset(); alert(offset.left); alert(offset.top);
鼠标事件
a . click() 鼠标点击事件
b . dblclick() 鼠标双击事件
c . focusin() 获取焦点事件 . 当一个元素，或者其内部任何一个元素获得焦点的时候会触发这个事件。这跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
d . focusout() 失去焦点事件 . 当一个元素，或者其内部任何一个元素获得焦点的时候会触发这个事件。这跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。
e . mousedown() 鼠标按下事件
f . mouseup() 鼠标抬起事件
g. mousemove() 鼠标移动事件
$(document).mousemove(function(e){ $('div').text(e.pageX + ',' + e.pageY); //获得鼠标指针在页面中的位置： });
h . mouseover() 鼠标进入事件
i. mouseout() 鼠标离开事件
j. hover(over,out) 包含了鼠标进入/离开
键盘事件
a . keydown() 键盘按下事件
b . keyup() 键盘弹起事件
表单事件
a . focus() 获取焦点事件
b. blur() 失去焦点事件
c . change() 表单值改变事件, 上传文件.select下拉框 也可以使用.
d . select() 表单值被选中时触发事件,只能在input[type="text"] 或者 <textarea>中使用.
e . submit() 表单提交事件
浏览器事件
a . resize() 浏览器窗口大小改变触发
$(window).resize(function(){ alert(1); //窗口改变大小后,弹出1 });
b . scroll() 浏览器滚动条移动后触发
事件对象
a . event.pageX 获取鼠标相对于文档的X轴位置
b . event.pageY 获取鼠标相对于文档的Y轴位置
c . event.preventDefault() 阻止浏览器默认行为.如链接的跳转.
d . event.stopPropagation() 阻止冒泡
e . event.which 监听键盘输入和鼠标操作
绑定事件和移除事件的方法
a . bind(事件名,执行函数,[false]) 绑定事件 ,如果加上第三个参数false 会使默认的动作失效,包括执行函数里的动作。
b . unbind(事件名) 移除绑定事件
c . one() 执行一次事件,然后自动销毁.
$('div').one('click',function(){
alert('点击'); //第一次点击DIV标签 触发弹窗"点击"
});
d . on(事件名,[select],[data],funciton) 绑定事件,跟bind差不多,通过On事件增加标签元素,事件也会继承. 第三参数: 可以传一个对象
var a= {'name':'lijian'}; $('body').on('click','p',a,function(i){ //点击body里的p标签会触发 alert(a.name); });
e . off() 删除事件.
$('body').off('click','p');
命名空间
<script>
// 可以用自己名字在全局做一个对象.你写的代码都放入对象中.这样就不会冲突了
var lijian = {}
lijian.age = 13; //定义变量
lijian.say = function(){ //定义方法
alert('hello');
}
alert(lijian.age); //调用
lijian.say(); //调用
</script>
jQuery动画
基础动画
a . show() 显示
$('div').show(3000); //显示完毕需要3秒
b . hide() 隐藏
$('div').hide(3000); //隐藏完成需要3秒
c . toggle() 切换 显示 和 隐藏
<script> $('p').toggle( function(){ $('div').show(); //第一次显示 } , function(){ $('div').hide(); //下次隐藏. } ); </script>
jQuery的渐变动画
a . fadeIn() 渐变效果 ,透明度从0-1的过程.
<script> $('div').fadeIn(5000); //用500毫秒缓慢的将段落淡入(就是透明度从0-1的过程) $('div').fadeIn(5000,function(){ //淡入完成后,弹窗. alert('成功了'); }); </script>
b . fadeOut() 渐变效果 ,透明度从1-0的过程.
$('div').fadeOut(5000); //用500毫秒缓慢的将段落淡出(就是透明度从1-0的过程)
$('div').fadeOut(5000,function(){ //淡出完成后,弹窗.
alert('成功了');
});
c . fadeTo(秒数,透明度,回调函数) 渐变效果,可以指定透明的的程度.
$('div').fadeTo(5000,'0.5',function(){ //5秒时间 将div改成半透明.
alert('成功了');
});
d . fadeToggle(秒数,回调函数) 渐变来回切换
$(document).click(function(){ $('div').fadeToggle(5000); });
jQuery中的滑动动画
a . slideDown(秒数 , 回调)
$('div').slideDown(5000); //由上到下慢慢显示出div
b . slideUp(秒数 , 回调)
$('div').slideUp(5000); //由下往上慢慢隐藏
c . slideToggle() 显示和隐藏来回切换
jQuery中的自定义动画
a . animate({css},秒数,回调函数) 根据一组CSS来自定义动画. 特别注意:一般非数字的属性无法使用基本的jQuery功能动画.比如color ,background等属性.而left,top 是可以的.
$('a').click(function(){
$('div').animate({'left' : '1000px'},3000); //将div往右偏移
});
jQuery中的动画队列
重点 : 当你使用一系列的动画效果(如hide，show)，这些动画函数都会被放进一个名为"fx"的队列中，然后在以先进先出的方式执行队列 中的函数，而非动画函数，比如上面例子中的appendTo函数，则是不会进入这个队列中，并且先于动画函数的执行，也就是在"fx"先进先出，取出第一 个函数之前，它就已经执行了
queue([参数1],参数2) 操作队列.
参数1 : 队列名,可选参数.默认是"FX" .当你添加一个队列的时候,可以给队列重新设置一个队列名. 如: queue('my',function(){});
参数2 : 要加入的队列. 可以是一个回调函数或者是数组.一般有多个动画加入队列的时候用数组.看情况.都可以.
<script> //queue的第二参数为数组. var a = [ function(){$('div').animate({'left':'100px'},DQ);}, //div偏移100px function(){$('div').animate({'left':'200px'});} //div偏移200px ]; var DQ = function(){$("div").dequeue("custom");} //执行队列动画 $("div").queue("custom",a); //加入队列,队列名custom DQ(); //执行队列动画
//queue的第二参数为回调函数.
$("div").queue("custom",function(){
$('div').animate({'left':'100px'});
$('div').animate({'left':'200px'});
});
$("div").dequeue("custom"); </script>
dequeue([队列名]) 执行队列动画.默认队列名fx
stop([clearQueue],[jumpToEnd]) 停止当前正在运行的动画 .参数1 : 如果设置成true，则清空队列。可以立即结束动画。参数2:如果设置成true，则完成队列。可以立即完成动画。
$('a').hover(
function(){
$('div').stop(false,true).slideDown();
}
,
function(){
$('div').stop(false,true).slideUp();
}
);
jQuery插件编写
插件的基本模板
;(function($){ $.fn.plugin = function(option){ //设置属性(key : value) var defaults = { } //默认参数和传参合并 var option = $.extend(defaults,option); this.each(function(){ //实现功能的方法 }); } })(jQuery);
小案例
需求: 开发一个表格插件,奇数行的背景色是#38a38a,偶数行的背景色是#09f.当鼠标碰到当前行背景是也是变成橙色.鼠标移开后颜色还原.
| 姓名 | 年龄 | 身高 | 体重 |
|---|---|---|---|
| 张三 | 14 | 170 | 120 |
| 张四 | 15 | 175 | 130 |
| 谷六 | 16 | 180 | 150 |
| 易七 | 17 | 182 | 153 |
| 韩八 | 18 | 184 | 155 |
| 钱九 | 19 | 185 | 156 |
| 和十 | 20 | 186 | 160 |
| 十一 | 21 | 187 | 161 |
| 十二 | 21 | 188 | 165 |
;(function($){ //table是插件名
$.fn.table = function(option){ //用户如果想设置可以传参数,option必须是一个对象.
//默认属性
var defaults = { 'evenRowClass' : 'even', //偶数行的css 'oddRowClass' : 'odd', //奇数行的css 'currentRowClass' : 'current', //当前行的css 'eventType' : 'mouseover', //事件类型 }
//option对象和默认对象合并. var option = $.extend(defaults,option); this.each(function(){ var _this = $(this); _this.find('tr:even').addClass(option.evenRowClass); //设置偶数行的背景 _this.find('tr:odd').addClass(option.oddRowClass); //设置奇数行的背景 _this.find('tr').bind(option.eventType,function(){ //表格的每行绑定事件 $(this).addClass(option.currentRowClass) .siblings() .removeClass(option.currentRowClass); }); }); } })(jQuery)
<script>
//使用table插件,
$('table').table(); 如果要传参则 $('table').table({参1:值1,参2:值2});
</script>
效果 :
| 姓名 | 年龄 | 身高 | 体重 |
|---|---|---|---|
| 张三 | 14 | 170 | 120 |
| 张四 | 15 | 175 | 130 |
| 谷六 | 16 | 180 | 150 |
| 易七 | 17 | 182 | 153 |
| 韩八 | 18 | 184 | 155 |
| 钱九 | 19 | 185 | 156 |
| 和十 | 20 | 186 | 160 |
| 十一 | 21 | 187 | 161 |
| 十二 | 21 | 188 | 165 |
浙公网安备 33010602011771号