1. $(function(){
})
2. $(document).ready(function(){
})
3.$().ready(function(){
})
以上三种方法，在页面中可以同时写
二、jquery中获取元素
原生js获取方法 var xxx=docuemnt.getElementById(''); 等
JQ中获取元素的方法 $(selector);
selector这个方法和原生的js选择器一样
JQ中获取到的元素都是一个集合。 所以可以用 length判断是否获取元素成功
$(function(){console.log($('input')); //这里获取到的是两个inputconsole.log($('input')[0]); //这个获取到的是第一个inputconsole.log($('#box'));console.log($('span','#div1')); //从div1身上去获取span标签（注意顺序）console.log($('li',$('.list'))); //从div1身上去获取span标签（注意顺序）console.log($('.list li')); //从div1身上去获取span标签console.log($('.list span')); //如果是一个获取不到的元素，那它不会报错。如果要做判断的话，可以判断它的length属性 0的话就代表获取不到//var div3=$('#div2');var div2=document.getElementById("div2"); //用原生js获取到的元素不能使用jquery里的方法。如果想用的话，那就把原生js获取到的元素转成jquery的形式$(div2).css('background','red'); //把原生js的对象包装成jquery的对象});<input type="button" value="按钮" /><input type="button" value="按钮" /><div id="box">123</div><div id="div1"><span>kaivon</span></div><ul class="list"><li>kaivon1</li></ul><div id="div2">kaivon3</div>
* get(index) 把jquery对象转成原生对象
* index 是元素的索引值 （一定要写）
*
* 原生对象转jquery对象用$
* jquery转原生对象用get(index); $(function(){console.log($('#div1').html()); //kaivonconsole.log($('#div1').innerHTML); //undefinedconsole.log($('#div1').get(0).innerHTML); //kaivon})<div id="div1">kaivon</div>
三、JQ中的事件
* jquery里的事件(没有on)
* 语法
* $(元素).click(callBack); 另一种添加事件的方法
$(元素)on('click mousemove',callback);
jquery中移除事件的方法
$(元素).off() 注意：这个移除是将元素身上的所有事件都移除掉
$(function(){$('#btn').click(function(){//alert(1);console.log(this); //原生的this一样是指向触发事件的对象console.log($(this)); //指向jquery的对象});$('#box').mouseover(function(){$(this).css('background','green');//不能写成 this.css('background','green');});});<input type="button" id="btn" value="按钮" /><div id="box"></div>
四、JQ中样式设置与value值、属性值、数据
1.css
* css() 关于 样式的一些操作
* 一个参数 获取属性的值
* 参数为一个对象的话，表示设置属性，可以同时设置多个属性的值
* 两个参数 设置属性的值
* 第一个参数是属性名，第二个参数为属性名对应的值(不带单位也是可以的) 2.value
* 表单的value值
* val() 获取 表单对应的value值
* val(values) 设置表单的value值 $(function(){console.log($('#box').css('width')); //100px 获取属性的值$('#btn').click(function(){/*$('#box').css('background','green');$('#box').css('width',200);$('#box').css('height',200); */$('#box').css({width:200,height:200,background:'green'});});console.log($('#btn').val()); //按钮$('#btn').val('kaivon'); //有参数的话就是设置value值});<input type="button" id="btn" value="按钮" /><div id="box"></div>
3.attr
* attr() 关于 标签属性的操作
* 一个参数 获取元素的某个属性
* 参数的值就是属性名字
* 两个参数 设置元素的某个属性
* 第一个参数为属性名字，第二个参数为属性要设置成的值 4.date
* data() 给标签 添加数据
* 有参数的话，是添加数据（用对象的形式去表示）
* 没参数的话，是获取数据 $(function(){console.log($('p').attr('class')); //con$('p').attr('class','neirong');$('input').attr('value','kaivon'); //这种方法这样写的话与val()这个方法的效果是一样的$('input').attr('name',123); //可以添加自定义属性console.log($('input').attr('name')); //123$('p').data({'name':'kaivon','age':18});console.log($('p').data());});<p class="con">kaivonkaivon</p><input type="button" value="按钮" />
结合css. attr 例子
$(function(){$('div').attr('on','false');$('input').click(function(){if($('div').attr('on')=='false'){$('div').css({width:200,height:200,background:'green'});$('div').attr('on','true');}else{$('div').css({width:100,height:100,background:'red'});$('div').attr('on','false');}});});<input type="button" value="按钮"/><div></div>
五 、JQ中的innerHTML
* html() 取元素里的内容，与js中的innerHTML的效果是一样的
* text() 取元素里的文字，不取标签 $(function(){console.log($('div').html()); //今天<span>是个</span>好的<span>日子</span>console.log($('div').text()); //今天是个好的日子$('div').html('<span>dasdasdas</span>');console.log($('div').html()); //<span>dasdasdas</span>console.log($('div').text()); //dasdasdas})<div>今天<span>是个</span>好的<span>日子</span></div>
六、JQ中的链式操作
一个元素的连续操作
$('div').css({width:100,height:100,background:'red'}).html('<span>kaivon</span>').click(function(){$(this).css('color','blue');});
1.找父节点
parent() 找到元素的第一层父节点
parents() 找元素的所有父节点，一直找到html
$(function(){$('#div2').parents().css('background','red');})<div id="div1">div1<div id="div2">div2</div></div>
2.找最近的节点
closest(selector) 从自身开始，一步一步往外找，找到对应的那一个后便会停止 (selector不能是空)
$(function(){$('#div2').closest('.div1').css('border','1px solid #f00');$('span').click(function(){$(this).closest('li').css('background','red');});})<div class="div1"><div class="div1">div1<div id="div2">div2</div></div></div><ul><li>12121212<span>span</span></li><li>222222<span>span</span></li><li>333333<span>span</span></li><li>444444<span>span</span></li></ul>
3.获取节点
* 获取节点 （主语不一定是父级）从自身去找，而不是相对父级，
* .first() 获取主语第一个子节点
* .last() 获取主语最后一个子节点
* .slice(start,end) 截取部分子节点
* start 起始位置 （从0开始）
* end 结束位置,不包含结束位置，第二个参数不写的话，截到最后一位 $(function(){//$('li').first().css('background','red');//$('li').last().css('background','green');$('li').slice(2,4).css('background','yellow');$('li').slice(3).css('background','blue');$('ul').first().css('background','red'); //因为一个ul，$('ul').slice(1,2).css('color','yellow'); //这样是错误的，因为只有一个ul});<ul><li>red</li><li>green</li><li>blue</li><li>yellow</li><li>pink</li></ul>
* .children (selector) 获取到元素里的第一层子节点 （局限在第一层）
* 参数如果没有的话，获取到父级下的所有子节点
* 有参数的话，参数是一个选择器，找到对应选择器的节点
* .find() 获取元素里的所有节点 （不局限在第一层） $(function(){$('ul').children().css('color','red'); //获取到所有的第一层子节点$('ul').children('.blue').css('color','blue'); //获取到第一层子节点 中class为blue的子节点$('ul').find('li').css('background','pink'); //获取到所有的li节点$('ul').find('span').css('background','black'); //获取到span标签})<ul><li>red</li><li>green</li><li class="blue">blue</li><li>yellow</li><li>pink<span>black</span></li></ul>
4.创建节点以及添加节点
* 父级.append(要添加的元素) 把要添加的元素添加到父级的最后面
* 父级.prepend(要添加的元素) 把要添加的元素添加到父级的最前面
* 元素.before(要添加的元素) 把要添加的元素添加到一个指定的元素的前面
* 元素.after(要添加的元素) 把要添加的元素添加到一个指定的元素的后面 $(function(){//原生js创建节点方法// var ul=docuemnt.getElementById('#list');/* var li1=document.createElement('li');li1.innerHTML='red';*///原生js添加节点//ul.appendChild(li1);//JQ创建节点var li1=$('<li>red</li>')//JQ添加节点$('#list').append(li1);var div3=$('<div>blue</div>');var div4=$('<div>yellow</div>');$('body').append(div3); //把div3添加到html中$('#list').before(div3); //把div3放在了ul前面$('#list').after(div3); //把div3放在了ul的后面});<ul id="list"></ul>
另外一种方法
* 要添加的元素.appendTo(父级) 把要添加的元素添加到父级的最后面
* 要添加的元素.prependTo(父级) 把要添加的元素添加到父级的最前面
* 要添加的元素.insertBefore(元素) 把要添加的元素添加到一个指定的元素的前面
* 要添加的元素.insertAfter(元素) 把要添加的元素添加到一个指定的元素的后面 5.删除节点元素以及克隆节点
* remove() 删除元素
* 元素.remove();
*
* clone(blooen) 克隆元素
* 参数默认为空，表示只复制元素，不复制事件。如果参数为true，表示元素与事件都会被复制 $(function(){$('li').first().remove(); //<li>red</li>被移除$('span').click(function(){console.log(1);});var newSpan=$('span').clone(true);$('div').append(newSpan);});<ul><li>red</li><li>green</li><li>blue</li></ul><span>kaivon</span><div></div>
6.上一个兄弟节点和下一个兄弟节点
* 上一个兄弟节点
* .prev()
*
* 下一个兄弟节点
* .next() $(function(){//上移功能$('input[value="上移"]').click(function(){var curLi=$(this).parent();var prevLi=curLi.prev();//因为这个是JQ的对象，所以判断上一个节点是否存在需要用length判断if(prevLi.length){prevLi.before(curLi);}else{alert('到头了');}});//下移功能$('input[value="下移"]').click(function(){var curLi=$(this).closest('li');var nextLi=curLi.next();if(nextLi.length){nextLi.after(curLi);}else{alert('到头了');}});});<ul><li>1、<input type="button" value="上移"/><input type="button" value="下移"/></li><li>2、<input type="button" value="上移"/><input type="button" value="下移"/></li><li>3、<input type="button" value="上移"/><input type="button" value="下移"/></li><li>4、<input type="button" value="上移"/><input type="button" value="下移"/></li><li>5、<input type="button" value="上移"/><input type="button" value="下移"/></li></ul>
七、JQ中索引值
* index()
* 没有参数
* 第一个元素（获取到的这个元素，因为jquery获取到的是一组数据）在 兄弟元素中的排行
* 有参数
* 代表前面的元素在参数的标签（所有标签，不分兄弟）里排行第几 $(function(){console.log($('#div1').index()); //0console.log($('div').index()); //1console.log($('span').index()); //4console.log($('#s1').index('span')); //2console.log($('#s2').index('span')); //5console.log($('.box').index('span')); //-1 表示没有找到});<p>p</p><div>div</div><div>div</div><!--<div id="div1"></div>--><div><div id="div1"></div></div><span></span><span></span><div class="box"><span id="s1">s1</span><span></span><span></span></div><div><span id="s2">s2</span></div>
* 通过索引找到对应的元素（因为JQ中获取的对象是数组）
* eq(index) 参数为下标 JS中通过索引找到对应元素 xxx[index]
$(function(){$('#box input').click(function(){$('#box input').attr('class','');$(this).attr('class','active');$('#box div').attr('style','display:none');$('#box div').eq($(this).index()).attr('style','display: block;');})})<div id="box"><input class="active" type="button" value="按钮一" /><input type="button" value="按钮二" /><input type="button" value="按钮三" /><div style="display: block;">1111</div><div>2222</div><div>3333</div></div>
八、JQ中的循环
* each(i,elem) 循环
* i 每个元素对应的下标（索引）
* elem 每个元素，原生的元素 $(function(){$('li').each(function(i,elem){console.log(i,elem);console.log(this==elem); //true 每个元素，原生的元素if(i==2){return; //跳出循环}$(elem).html(i); //elem是一个原生的对象，需要要转成jquery的对象});});<ul><li></li><li></li><li></li><li></li><li></li></ul>
九、JQ中包装对象
* 包装对象：在外层包一层标签
* wrap() 在标签外在加一层父级
* wrapAll() 把所有的标签都拿过来，放在一起，然后在他们的外面加一个父级
* wrapInner() 在父级的里面添加一个标签，并把内容放到这个标签里面
* unwrap() 删除父级(不包含body标签) $(function(){//$('span').wrap('<div style="color: #f00;"></div>'); //在span标签外面添加一个div作为父级//$('span').wrapAll('<h2 style="color: green;"></h2>'); //把所有的span标签集中到一起，然后给添加一个h2标签的父级//$('div span').wrapInner('<a href="#"></a>'); //在特定的span标签里面添加一个a标签$('span').unwrap(); //所有的span最近的父级都删除。});<div><span>kaivon1</span></div><span>kaivon2</span><div><p><span>kaivon3</span></p></div>
实例
$(function(){$('input').click(function(){if($(this).val()=='管理员'){$('span').wrap('<a href="#"></a>');}else{$('span').unwrap();}});})<input type="radio" value="管理员" name="user" />管理员<input type="radio" value="普通用户" name="user" />普通用户<span>登录</span>
十、JQ中元素的尺寸
1.元素自身的宽高
* width() 获取元素的宽度（值不带单位）
* 有参数的话，代表设置宽度，参数不用带单位
* height() 获取元素的高度
* 有参数的话，代表设置高度，参数不用带单位
* innerWidth() width+padding
* innerHeight() height+padding
* outerWidth() width+padding+border
* outerHeight() height+padding+border 2.页面的宽高
$(document).width() 页面的宽
$(document).height() 页面的高
3.可视区的宽高
$(window).width() 可视区的宽
$(window).height() 可视区的高
4.元素相对于文档的距离
.offset().left 元素距离文档左边的距离
.offset().top 元素距离文档顶部的距离
5.元素相对于父级的距离
.position().left 元素相对于父级左边的距离
.position().top 元素相对于父级顶部的距离
但是position的值是不会把margin的值算进去。
6.元素最近的有定位的父级
.offsetParent()
#div1{width: 200px;height: 200px;background: red;position: absolute;left: 50px;top: 50px;}#div2{width: 100px;height: 100px;background: green;margin: 50px;position: absolute;left: 20px;top: 20px;}$(function(){console.log($('#div1').offset().top); //50console.log($('#div1').offset().left); //50console.log($('#div2').offset().top); //120console.log($('#div2').offset().left); //120console.log($('#div2').position().left); //20console.log($('#div2').position().top); //20//绿色块离红色块的真正距离console.log($('#div2').offset().left-$('#div1').offset().left); //70console.log($('#div2').offsetParent()); //div1})<div id="div1"><div id="div2"></div></div>
7.滚动条的距离
$(document).scrollTop() 竖向滚动条的距离
$(document).scrollLeft() 横向滚动条的距离
如有参数，就代表设置滚动条的距离
img{display: block;margin-top: 500px;}/** scroll() 滚动事件*//*$(function(){$(document).scroll(function(){var sTop=$(document).scrollTop();var viewHeight=$(window).height();$('img').each(function(i,elem){//图片离文档最上面的距离如果比可视区的距离+滚动条的距离要小，说明图片已经进入到了可视区if($(elem).offset().top<viewHeight+sTop){$(elem).attr('src',$(elem).attr('_src'));}});});});*/<img _src="img1/1.jpg"/><img _src="img1/2.jpg"/><img _src="img1/3.jpg"/><img _src="img1/4.jpg"/><img _src="img1/5.jpg"/>
十一、JQ中的事件对象
event.client 和 enent.page都是代表鼠标的位置
* clientX 不带滚动条的距离 （和js一样都是代表相对于可视区的距离）
* pageX 带滚动条的距离 （相对于文档的距离） 拖拽实例 -
div{width: 100px;height: 100px;background: red;position: absolute;left: 0;top: 0;}</style>$(function(){$('div').mousedown(function(ev){var disX=ev.pageX-$(this).offset().left; //算上了滚动条的距离var disY=ev.pageY-$(this).offset().top;$(document).mousemove(function(ev){$('div').css('left',ev.pageX-disX);$('div').css('top',ev.pageY-disY);});$(document).mouseup(function(){$(this).off();});return false;});});<body style="height: 2000px;"><div></div></body>
十二、JQ中的事件委托
语法
$(元素).on('事件'，'委托的对象'，callback)
$(function(){//点击li会改变背景色，但是新增的li就没有这个功能，可以使用事件委托/*$('li').click(function(){$(this).css('background','red');})*///把事件添加给ul，但是只有li才能触发这个事件 这个就是事件委托$('ul').on('click','li',function(){//console.log(1);//这里面的this指向第二个参数//console.log($(this));$(this).css('background','red');});//添加li$('input').click(function(){var li=$('<li>2222</li>');//li.appendTo($('ul'));$('ul').append(li);});});<input type="button" value="添加" /><ul style="border: 1px solid #f00;"><li>111</li><li>111</li><li>111</li><li>111</li><li>111</li></ul>
十三、自定义事件
//语法
//和普通的添加事件一样，用on $(元素).on('自定义事件'，callback);
//触发器 $(元素).trigger('自定义事件')； $(function(){//自定义事件的绑定器用on，写法和普通的添加事件一样$('div').on('kaivon',function(){console.log('这是一个鼠标点击的自定义事件');});//自定义事件不会自己触发$('div').click(function(){//自定义事件触发器$('div').trigger('kaivon');});<div>kaivon</div>
十四、JQ中的运动(内部的机制是靠定时器实现的)
1. 渐隐渐现（只改变元素的透明度，不改变宽高）
* 渐隐渐现
* fadeIn(duration,easing,complate) 显示
* fadeOut(duration,easing,complate) 隐藏
*
* duration
* slow 600
* normal 400
* fast 200
*
* easing
* linear,swing(默认)
*
* complate
* 运动完成后执行的回调函数 $(function(){var btn=true;$('input').click(function(){if(btn){$('div').fadeOut(500,'linear',function(){console.log('隐藏运动完成了');});//$('div').fadeOut(400); //默认是没有时间的，需要传一个时间参数}else{$('div').fadeIn(500,'linear',function(){console.log('显示运动完成了');});//$('div').fadeIn(400); //默认是没有时间的，需要传一个时间参数}btn=!btn;});})<input type="button" value="点击" /><div></div>
* fadeToggle(duration,easing,complate) 在两种效果之间进行切换(每次执行的时候系统会自动判断当前的效果)
*
* duration
* slow 600
* normal 400
* fast 200
*
* easing
* linear,swing(默认)
*
* complate
* 运动完成后执行的回调函数 $(function(){$('input').click(function(){$('div').fadeToggle(500,'linear',function(){console.log('toggle完了');});});})<input type="button" value="点击" /><div></div>
2.元素高度的张开与收缩
* slideUp(duration,easing,complate) 收缩
* slideDown(duration,easing,complate) 展开
*
* duration
* slow 600
* normal 400
* fast 200
*
* easing
* linear,swing(默认)
*
* complate
* 运动完成后执行的回调函数 这种运动方法也有一种toggle ---slideToggle()
* slide Toggle(duration,easing,complate) 在两种效果之间进行切换(每次执行的时候系统会自动判断当前的效果)
3.元素的显示与隐藏 （改变元素的宽高以及透明度）
* show(duration,easing,complate) 显示
* hide(duration,easing,complate) 隐藏
*
* duration
* slow 600
* normal 400
* fast 200
*
* easing
* linear(匀速),swing(默认，缓冲)
*
* complate
* 运动完成后执行的回调函数 这种运动方法也有一种toggle ---toggle()
* t oggle(duration,easing,complate) 在两种效果之间进行切换(每次执行的时候系统会自动判断当前的效果)
4.元素的运动
* animate(property,duration,easing,complate)
* property 要运动的属性，它是一个对象
* duration 运动的时间（默认为400）
* easing 运动的形式
* swing 缓冲
* linear 匀速
* complate 回调函数（运动完成后触发）. div{width: 200px;height: 100px;background: green;color: #fff;margin-top: 10px;}$(function(){$('input').eq(0).click(function(){$('#div1').animate({width:400},2000,'linear',function(){console.log('运动完成了');});$('#div2').animate({width:400},2000,'swing');});/** += 在原有的基础上加上一个数值* -= 在原有的基础上减去一个数值*/$('input').eq(1).click(function(){//$('#div3').animate({ width:'+=100'},500,'linear');$('#div3').animate({ width:'-=100'},500,'linear');});$('input').eq(2).click(function(){$('#div4').animate({width:'toggle',height:"toggle"},500,'linear');toggle不仅是一种方法也是数据});});<input type="button" value="点击" /><div id="div1">div1</div><div id="div2">div2</div><input type="button" value="点击" /><div id="div3">div3</div><input type="button" value="点击" /><div id="div4">div4</div>
5.延迟动画
* 设置延迟
* delay(time); $('#div1').animate({width:300},2000).delay(2000).animate({height:300},2000);
元素想运动改变宽，停止了两秒之后再改变高
6.停止动画
* 停止动画
* stop() 只停止当前的运动（属性），后面的运动还会接着走
* stop(true) 所有的运动都停了
* stop(true,true) 当前的属性会马上到达目标点，后面的运动不会走
* finish() 所有的属性都会马上到达目标点，没运动的效果 $(function(){$('input').eq(0).click(function(){$('#div1').animate({width:300},1000,'linear').animate({height:300},1000,'linear');});$('input').eq(1).click(function(){//$('#div1').stop(); //当此元素运动时候执行stop，当前运动停止，并执行接下来的运动//$('#div1').stop(true); //该元素的所有运动都被停止//$('#div1').stop(true,true); //该元素的所有运动都会停止，当前运动会跳到目标值$('#div1').finish(); //所有运动会立即到达目标值});});<input type="button" value="开始" /><input type="button" value="停止" /><div id="div1">div1</div>
7.先停止再运动（注意）
div{width: 200px;height: 200px;background: green;color: #fff;}$(function(){$('#div1').mouseover(function(){//鼠标快速的移入和移除多少次，事件就会记录多少次，直到实行完毕才会停下来。//所以用stop()的方法，每一次触发事件的时候将当前的运动停止。$('#div1').stop().animate({width:400,height:400});}).mouseout(function(){$('#div1').stop().animate({width:200,height:200});});});<div id="div1">div1</div>