来源于：http://www.cnblogs.com/webcome/p/5484005.html
jq和js
可以共存，不能混用；
|
1
2
3
4
5
6
|
$('.box').css('background','red');$(".box").css({ color: "#ff0011", background: "blue"});$('li:eq(2)').css('background','red'); //：first选择$('li:odd').css('background','red'); //even奇数行，odd偶数行$('li').filter('.box').css('background','red'); filter过滤、筛选；$('li').filter('[title=hello]').css('background','red'); |
方法函数化：
|
1
2
3
4
5
6
7
8
9
|
window.onload = function(){};$(function(){});function $(){}innerHTML = 123;html(123)function html(){}onclick = function(){};click(function(){})function click(){} |
|
1
2
3
|
$('#div1').click(function(){ alert( $(this).html() );}); |
jquery中的this的写法是 $(this) ；html() 因为方法函数法的思想的存在，() 是不能省去的，运行函数；这在jquery中很常见；
js和jquery的关系：
可以互存，不能混用；
|
1
2
3
4
5
6
7
8
|
$(function(){ $('#div1').click(function(){ //alert( $(this).html() ); //jq的写法； //alert( this.innerHTML ); //js的写法；这样写也是正确的； alert( $(this).innerHTML ); //错误的；前面是jquery，后面是js，混用了，不允许； alert( this.html() ); //错误的；前面是js，后面是jquery，混用了，不允许； });}); |
链式操作：
|
1
2
3
4
5
6
7
8
9
10
11
|
$(function(){ /*var oDiv = $('#div1'); oDiv.html('hello'); oDiv.css('background','red'); oDiv.click(function(){ alert(123); });*/ $('#div1').html('hello').css('background','red').click(function(){ alert(123); });}); |
建议熟悉了，再写链式写法；
取值和赋值合体：
赋值和取值用的同一种方法，只不过是通过有没有参数来决定是取值还是赋值；
|
1
2
3
4
5
6
7
8
|
$(function(){ //oDiv.innerHTML = 'hello'; //赋值 //alert( oDiv.innerHTML ); //取值 //$('#div1').html('hello'); //赋值 //alert( $('#div1').html() ); //取值 css('width','200px') //设置width是200px； css('width') //获取width的值；}); |
取值和赋值：获取的时候只能获取一个，赋值的时候赋值到所有的；
|
1
2
3
4
|
$(function(){ //alert( $('li').html() ); //当一组元素的时候，取值是一组中的第一个；会弹出内容：aaa $('li').html('hello'); //当一组元素的时候,赋值是一组中的所有元素}); |
$()下的常用方法
attr()
|
1
2
3
4
5
|
$(function(){ //alert($('div').attr('title')); 获取title属性 $('div').attr('title','456'); //设置title $('div').attr('class','box'); //设置class}); |
filter：过滤
not： filter的反义词
|
1
2
3
4
|
$(function(){ //$('div').filter('.box').css('background','red'); //只带有box的才会被选择 $('div').not('.box').css('background','red'); //不带有box的才会选择；not和filter是反义词}); |
has和filter的区别
has是包含的意思，选择的是元素里面的东西；
而filter针对的元素自身的选择；
|
1
2
3
4
5
|
$(function(){ //$('div').has('span').css('background','red'); //$('div').has('.box').css('background','red'); //has是选择元素里面的东西，不能选择到第二个div $('div').filter('.box').css('background','red'); //filter是针对元素自身的;只会选择到第二个div}); |
next和prev：
next选择下一个兄弟节点；
prex选择上一个兄弟节点；
find 查找当前元素下所有的后代元素；
eq() 一组中的第几个；
index() 一组元素的索引；通过一组索引，来控制另外一个索引；
|
1
2
3
|
$(function(){ alert( $('#h').index() ); //索引就是当前元素在所有兄弟节点中的位置；}); |
选项卡：
原生js和jquery：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
window.onload = function(){ var oDiv = document.getElementById('div1'); var aInput = oDiv.getElementsByTagName('input'); var aCon = oDiv.getElementsByTagName('div'); for(var i=0;i<aInput.length;i++){ aInput[i].index = i; aInput[i].onclick = function(){ for(var i=0;i<aInput.length;i++){ aInput[i].className = ''; aCon[i].style.display = 'none'; } this.className = 'active'; aCon[this.index].style.display = 'block'; }; }}; |
$(function(){
$('#div1').find('input').click(function(){
$('#div1').find('input').attr('class','');
$('#div1').find('div').css('display','none');
$(this).attr('class','active');
$('#div1').find('div').eq( $(this).index() ).css('display','block');
});
});
|
1
2
3
4
5
6
7
8
9
10
|
<body><div id="div1"> <input class="active" type="button" value="1" /> <input type="button" value="2" /> <input type="button" value="3" /> <div style="display:block">111111</div> <div>222222</div> <div>333333</div></div></body> |
这里的jquery是根据js的思路来编写的；
也可以用其他的思路来做这个选项卡，用到siblings()等；
addClass和removeClass
|
1
2
3
4
|
$(function(){ $('div').addClass('box2 box4'); $('div').removeClass('box1');}); |
width() innerWidth() outerWidth() 获取元素的宽和区别：
|
1
2
3
4
5
6
|
$(function(){ alert( $('div').width() ); //width alert( $('div').innerWidth() ); //width + padding alert( $('div').outerWidth() ); //width + padding + border alert( $('div').outerWidth(true) ); //width + padding + border + margin}); |
insertBefore() insertAfter()
注意：insertBefore是剪切的功能，不是复制的功能；
|
1
2
3
4
5
6
7
8
9
|
$(function(){ //$('span').insertBefore( $('div') ); //将span调整到div的前面，jq中的insertBefore和js中的insertBefore是一样的;具备剪切的功能，而不是复制的功能； //$('div').insertAfter( $('span') ); //将div放在span的后面； //$('div').appendTo( $('span') ); //和js中的appendChildren是一样的;作用是把一个节点添加到指定节点最后的位置; //$('div').prependTo( $('span') ); //原生js中没有，作用是把一个节点添加到指定节点最开始的位置; //insertBefore和before的区别 ：后续操作变了;主要是我们写链式操作会有影响; //$('span').insertBefore( $('div') ).css('background','red'); $('div').before( $('span') ).css('background','red');}); |
remove() 删除节点
|
1
2
3
|
$(function(){ $('div').remove();}); |
on() off() 事件的写法：
off取消事件；
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
$(function(){ /*$('div').click(function(){ alert(123); });*/ /*$('div').on('click',function(){ //支持多个事件，支持系统事件和自定义事件 alert(123); });*/ /*$('div').on('click mouseover',function(){ //多个事件，中间用空格 alert(123); });*/ /*$('div').on({ 'click' : function(){ //中间用冒号 alert(123); }, 'mouseover' : function(){ alert(456); } });*/ //点击弹出123.移入弹出456 说明on还是很灵活的 $('div').on('click mouseover',function(){ alert(123); $('div').off('mouseover'); //执行后，mouseover事件会被关闭 }); }); |
scrollTop() 获取和设置滚动距离
|
1
2
3
4
5
|
$(function(){ $(document).click(function(){ alert( $(window).scrollTop() ); //获取滚动距离 });}); |
编写弹窗效果：
首先，在DOM中创建元素是非常容易的事情；
|
1
2
|
var oDiv = $('<div>div</div>'); //创建div元素和内容$('body').append( oDiv ); |
弹窗效果：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
$(function(){ $('#input1').click(function(){ //动态创建元素和内容 var oLogin = $('<div id="login"><p>用户名:<input type="text" /></p><p>密码:<input type="text" /></p><div id="close">X</div></div>'); //中间不能有空格 $('body').append( oLogin ); //插入元素 //让弹窗居中 oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 ); //设置left值 oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 ); //设置top值 $('#close').click(function(){ oLogin.remove(); //移除节点 }); //在调整窗口大小事件和滚动事件，调整弹出窗的位置； $(window).on('resize scroll',function(){ //在调整窗口大小事件和滚动事件 oLogin.css('left' , ($(window).width() - oLogin.outerWidth())/2 ); oLogin.css('top' , ($(window).height() - oLogin.outerHeight())/2 + $(window).scrollTop() ); //top值要注意加上滚动距离 }); });}); |
ev pageX which
preventDefault stopPropagation
one()
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(function(){ /*$('div').click(function(ev){ //ev : jq中直接使用，是兼容后的event对象 //ev.pageX(鼠标坐标-->相对于文档的) js中是使用clientX(相对于可视区域的) //ev.which : js中的keyCode ev.preventDefault(); //阻止默认事件 ev.stopPropagation(); //阻止冒泡的操作 return false; //阻止默认事件 + 阻止冒泡的操作 });*/ $('div').one('click',function(){ //one-->只执行事件一次 alert(123); });}); |
offset() position()
|
1
2
3
4
5
|
$(function(){ //div2.offsetLeft //alert( $('#div2').offset().left ); //获取到屏幕的左距离 offset().left offset.top() alert( $('#div2').position().left ); //到有定位的父级的left值,把当前元素转化成类似定位的形式,注意是不算margin的}); |
parent() offsetParent() 获取有定位的父级
parent() : 获取父级，不管父级是否有定位； 注意这里没有加s，不是parents，jq中还有parents()方法，见下
offsetParent() : 获取有定位的父级
|
1
2
3
4
5
6
|
$(function(){ //parent() : 获取父级 //offsetParent() : 获取有定位的父级 //$('#div2').parent().css('background','blue'); $('#div2').offsetParent().css('background','blue');}); |
val() 获取元素的value值；
size() 获取一组元素的长度；像length；
each() jq中的循环；原生for循环的加强版
|
1
2
3
4
5
6
7
8
|
$(function(){ //alert( $('input').val() ); 获取value值 //$('input').val(456); 赋值value值 alert( $('li').size() ); //4 获取一组元素的长度;像length $('li').each(function(i,elem){ //一参：下标 二参 : 每个元素 $(elem).html(i); });}); |
拖拽jquery实现：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
$(function(){ var disX = 0; var disY = 0; $('div').mousedown(function(ev){ disX = ev.pageX - $(this).offset().left; //存储距离 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(){ $(document).off(); //鼠标弹起的时候取消事件 }); return false; //阻止默认事件和冒泡 });}); |
hover() 模拟css中的hover，鼠标移入移除；
hover 鼠标移入和鼠标移除结合的方法；
hover(function(){},function(){})
Show() hide() 接受一个参数- -> 时间（ms） 长，宽，透明度都要变化
fadeIn() fadeOut() 淡出效果和淡出效果 改变透明度
fadeTo() 指定到一个范围，有两个参数，第一个是时间，第二个是透明度值
|
1
|
$('#div2').fadeTo(1000,0.5); |
slideDown() slideUp() 向下展开，向上卷起；
get()方法
|
1
2
3
4
5
6
7
8
9
10
11
|
$(function(){ //document.getElementById('div1').innerHTML //alert( $('#div1').get(0).innerHTML ); get需要标注下标；将jquery转成原生js /*for(var i=0;i<$('li').get().length;i++){ //这里通过get()转成js，这里的length相对于js的 $('li').get(i).style.background = 'red'; }*/ for(var i=0;i<$('li').length;i++){ //这里的length是JQ中的属性,也是使用正确的； $('li').get(i).style.background = 'red'; //$('li')[i].style.background = 'red'; 得到元素后，后面加一个中括号，写成下标的形式，也就自动转成原生js的形式了;这是一种偷巧的写法； }}); |
outerWidth与原生的区别：
|
1
2
3
4
|
$(function(){ //alert( $('#div1').get(0).offsetWidth ); //这里原生js，如果把div1设置为隐藏，获取的值为0; alert( $('#div1').outerWidth() ); //不管是显示和隐藏的，都可以获取到值;}); |
text() 会获取所有的内容（特例），不会获取到标签，而html会获取到标签；
|
1
2
3
4
5
|
$(function(){ //alert( $('div').html() ); //alert( $('div').text() ); //会获取所有的内容(特例) $('div').text('<h3>h3</h3>'); //在浏览器中会输出纯文本<h3>h3</h3>}); |
remove()和detach（）的区别：
//remove方法删除元素的时候会把元素的操作行为也删除掉；
//detach() : 跟remove方法一样，只不过会保留删除这个元素的操作行为
|
1
2
3
4
5
6
7
|
$(function(){ $('div').click(function(){ alert(123); }); var oDiv = $('div').detach(); //这里如果用remove()，恢复的时候，点击行为会无效 $('body').append( oDiv );}); |
$() : $(document).ready() 与window.onload=function(){}的区别：
|
1
2
3
4
5
6
|
$(function(){ //等DOM加载完就可以执行了 , 性能要好});是$(document).ready(function(){});的简写； |
window.onload = function(){}; //等图片和flash等加载完才执行;
//DOMContentLoaded
parents() closest()
//parents() : 获取当前元素的所有祖先节点，参数就是筛选功能
//closest() : 获取最近的指定的祖先节点(包括当前元素自身),必须要写筛选的参数,只能找到一个元素
|
1
2
3
4
5
|
$(function(){ //$('#div2').parents().css('background','red'); //获取到所有祖先节点 div1，body，html //$('#div2').parents('.box').css('background','red'); //获取到class为box的祖先元素 $('#div2').closest('.box').css('background','red');}); |
siblings() 获取元素的所有兄弟节点 ；
nextAll() 获取下面所有的兄弟节点；
preAll() 获取上面所有的兄弟节点；
parentsUntil() nextUntil() prevUntil()
//siblings() : 找所有的兄弟节点，参数也是筛选功能
//nextAll() : 下面所有的兄弟节点，参数也是筛选功能
//prevAll() : 上面所有的兄弟节点
//Until() : 截止
|
1
2
3
|
$(function(){ $('span').nextUntil('h2').css('background','red');}); |
clone() 克隆节点：
|
1
2
3
4
5
6
7
8
9
|
$(function(){ //$('div').appendTo( $('span') ); //剪切行为 //$('span').get(0).appendChild( $('div').get(0) ); //clone() : 可以接收一个参数 ，作用可以复制之前的操作行为 $('div').click(function(){ alert(123); }); $('div').clone(true).appendTo( $('span') ); //参数true作用可以复制之前的操作行为}); |
wrap() wrapAll() wrapInner() unwrap() 包装，包装方法
在外面包裹一下
$('span').wrapInner('<div>'); //在span外包装div
wrapAll() 整体包装：
//wrap() : 包装
//wrapAll() : 整体包装; 会影响结构
//wrapInner() : 内部包装;
//unwrap() : 删除包装 ( 删除父级 : 不能删除body )
|
1
2
3
4
|
$(function(){ //$('span').wrapInner('<div>'); div在span里面了 $('span').unwrap();}); |
add()
|
1
2
3
4
5
6
7
|
$(function(){ /*var elem = $('div'); var elem2 = elem.add('span'); elem.css('color','red'); elem2.css('background','yellow');*/ $('li').slice(1,4).css('background','red');}); |
slice()
$('li').slice(1,4).css('background','red');
第一个参数是起始位置，4是结束位置（选中的不包括结束位置）；
serialize() serializeArray() 数据串连化
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
$(function(){ //console.log($('form').serialize()); //string : a=1&b=2&c=3 console.log( $('form').serializeArray() ); [ { name : 'a' , value : '1' }, { name : 'b' , value : '2' }, { name : 'c' , value : '3' } ]});</script></head><body><form> <input type="text" name="a" value="1"> <input type="text" name="b" value="2"> <input type="text" name="c" value="3"></form> |
jquery中的animate()
//animate() :
//第一个参数 : {} 运动的值和属性
//第二个参数 : 时间(运动快慢的) 默认 : 400 毫秒
//第三个参数 : 运动形式 只有两种运动形式 ( 默认 : swing(缓冲，慢快慢) linear(匀速) ) 默认是缓冲（慢快慢）
//第四个参数 : 回调函数；运行结束后，回调函数
|
1
2
3
4
5
6
7
8
|
$(function(){ $('#div1').click(function(){ $(this).animate({width : 300 , height : 300} , 3000 , 'linear',function(){ alert(123); //回调函数，也可以用链式操作来写； }); $('#div2').animate({width : 300 , height : 300} , 3000 , 'swing'); });}); |
链式操作来写：先宽后高；和上述的回调函数效果一致；
|
1
|
$(this).animate({width : 300} , 2000).animate({height : 300} , 2000); |
Stop()方法：
|
1
2
3
4
5
6
7
|
$('#div2').click(function(){ //$('#div1').stop(); //默认 : 只会阻止当前运动（当前步骤） //$('#div1').stop(true); //阻止所有后续的运动 //$('#div1').stop(true,true); //立即停止到当前步骤指定的目标点，当前步骤的目标点 // stop不能做到，点一下-->直接到最后的目标点-->用finish() $('#div1').finish(); //立即停止到所有指定的目标点，到最后的目标点 }); |
delay()
延迟
jquery中事件委托：
delegate() undelegate()
|
1
2
3
4
5
6
7
8
9
|
$(function(){ /*$('li').on('click',function(){ this.style.background = 'red'; });*/ $('ul').delegate('li','click',function(){ //事件委托 this.style.background = 'red'; $('ul').undelegate(); //阻止事件委托 });}); |
trigger() 主动触发
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
$(function(){ /*$('#div1').on('click',function(){ alert(123); }); $('#div1').trigger('click'); //主动触发*/ $('#div1').on('show',function(){ alert(123); }); $('#div1').on('show',function(){ alert(456); }); $('#div1').trigger('show');}); |
事件细节：
|
1
2
3
4
5
6
7
|
$(function(){ $('#div1').on('click',{name:'hello'},function(ev){ //alert(ev.data.name); 这里的ev.data等于{name:'hello'}这个整体，ev.data.name就是hello //alert( ev.target ); 当前操作的事件源，全兼容的 alert( ev.type ); 当前操作事件类型 });}); |
jquery的工具方法：
我们前面的都是$().css() $().html() $().val() : 只能给JQ对象用；
而实际上，我们还存在另外一种写法： 不仅可以给jquery用，也可以给原生js用；
$.xxx() $.yyy() $.zzz() : 不仅可以给JQ用，也可以给原生JS用 : 叫做工具方法
type()
trim()
|
1
2
3
4
5
6
7
8
|
$(function(){ //var a = null; //$.type() : 也是判断类型，功能更加强大，能判断出更多的类型 //alert( typeof a ); 原生js的判断变量类型 //alert( $.type(a) ); 用$.type()判断出更多类型，功能更强大 var str = ' hello '; alert('('+$.trim(str)+')'); //$.trim()去除前后的空格}); |
inArray() 类似于 indexOf
proxy() 改变this指向；
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
$(function(){ //var arr = ['a','b','c','d']; //alert( $.inArray('b',arr) ); //b在array这个数组中的位置；若没有会返回-1；有的话就返回位置 //proxy() : 改变this指向的 function show(n1,n2){ alert(n1); alert(n2); alert(this); } //show(); //$.proxy(show , document)(); //show的this指向document //$.proxy(show , document,3,4)(); //对于传参，传参可以这样传 ////$.proxy(show , document,3)(4); //也可以这样混着传参 //jquery中为什么要这样传参呢？ //$(document).click( $.proxy(show,window)(3,4) ); //如果这样传参，刷新就直接调用函数 $(document).click( $.proxy(show,window,3,4) ); //这样传参，就是在click后才会调用函数，而不会直接调用； }); |
$.noConflict() 防止冲突
//$ , jQuery $=jQuery 一回事 $不是jQuery独有的
|
1
2
3
4
5
6
|
//noConflict() : 防止冲突的var aaa= $.noConflict();var $ = 10;aaa(function(){ aaa('body').css('background','red');}); |
parseJSON() 把字符串转换成json类型
|
1
2
|
var str = '{"name":"hello"}'; //字符串必须是严格的JSON格式alert($.parseJSON( str ).name); //把字符串转换成json |
makeArray()
|
1
2
3
4
|
window.onload = function(){ var aDiv = document.getElementsByTagName('div'); //只是集合，不是真正的数组，我们叫做类数组（类似于数组） $.makeArray(aDiv).push(); //通过 $.makeArray(aDiv) 把 类数组 转换成 真正的数组}; |
jquery中使用ajax
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<script>/*$.ajax({ url : 'xxx.php', data : 'name=hello&age=20', type : 'POST', //默认是get success : function(data){ //请求成功以后的回调函数 alert(1); }, error : function(){ //请求失败之后 alert(2); }});*/$.get('xxx.php',function(){ //ajax的get请求可用get()，第一个是地址，第二个是成功后回调});// $.get()和$().get()是有区别的；前者是ajax的get请求方法，后者是将jQuery对象转换成js原生对象$.post('xxx.php',function(){});$.getJSON('xxx.php?callback=?',function(data){ //请求json类型的数据,支持jsonp的形式：指定?callback=? data});随机({});</script> |
jQuery中的插件
扩展插件
//$.extend : 扩展工具方法下的插件形式 $.xxx() $.yyy()
//$.fn.extend : 扩展到JQ对象下的插件形式 $().xxx() $().yyy()
用插件实现去掉左空格
|
1
2
3
4
5
6
7
|
$.extend({ leftTrim : function(str){ return str.replace(/^s+/,''); //这里用正则来去掉左空格 }});var str = ' hello ';alert( '('+$.leftTrim(str)+')' ); //利用leftTrim去掉左空格 |
|
1
2
3
4
5
6
7
8
9
|
$.extend({ //用extend，json的写法，可以扩展多个 leftTrim : function(str){ return str.replace(/^s+/,''); //这里用正则来去掉左空格 }, rightTrim : function(){}, aaa : function(){ alert(1); }}); |
$.fn.extend({ //也是写成json形式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
drag : function(){ //这里扩展拖拽 //this : $('#div1') var disX = 0; var disY = 0; var This = this; //这里将this存入变量This中； this.mousedown(function(ev){ disX = ev.pageX - $(this).offset().left; disY = ev.pageY - $(this).offset().top; $(document).mousemove(function(ev){ This.css('left' , ev.pageX - disX); This.css('top' , ev.pageY - disY); }); $(document).mouseup(function(){ $(this).off(); }); return false; }); }, aaa : function(){ alert(2); }}); |
|
1
2
3
4
5
6
7
8
9
|
//$.trim()//$.leftTrim()/*var str = ' hello ';alert( '('+$.leftTrim(str)+')' );*/$(function(){ $('#div1').drag(); //这里调用上面插件的扩展});$.aaa(); // 1$().aaa(); //2 |