什么时候适合用jQuery
DOM操作较多、简单的AJAX、需要兼容多款浏览器
什么时候不用jQuery
页面交互极为简单、页面对流量有严苛要求、上级要求
jQuery做什么
选择网页元素、改变结果集、元素的操作：取值和赋值、移动、复制、删除和创建
工具方法、事件操作、特殊效果、AJAX、
网站推荐
youmightnotneedjquery
jquery中文文档
jQuery版本选择
1.XXX版本 支持IE6、7、8
2.XXX 3.XXX不兼容IE6、7、8 但体积小 速度快
jQuery所有的API只有这两种写法，使用美元符号定义 jQuery
$.each()
$('ul').addClass()
启动jQuery的几种写法
window.onload(等到页面上所有的内容都加载完毕之后，不推荐)
$( document ).ready( handler )//等DOM加载完毕后再执行函数
$( handler )//当script放入header内时需要 采用这种写法，等DOM加载完毕后再执行函数 . script放入body底部时不需要这种方法
例如
$(function(){
})
jQuery对象与DOM对象的不同
$('#container li')称为jQuery元素 可认为是对DOM元素的一次封装
jQuery对象只能用jQuery对象的方法
DOM对象只能使用DOM对象的方法
jQuery对象可以通过中括号加下标的方式[index]，如$('#container li')[2]转化成DOM对象 还有get(index)方式
如果想获取jQuery对象中的某一项，但不想通过中括号加下标转化成DOM对象的方式，可以$('#container li').eq(2)
使用$(DOM对象)就可以将DOM对象转化为jQuery对象
jQuery选择器
jQuery DOM操作
创建元素
把DOM字符串传入$方法即可返回一个jQuery对象
var obj = $('<div class="test"><p><span>Done</span></p></div>');
在对象中前后添加元素
- .append(content[,content]) / .append(function(index,html))
在对象.中的尾部插入内容可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象
如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值
- .appendTo(target)
把对象a插入到目标元素b尾部 a.appendTo(b)- 目标元素可以是selector, DOM对象, HTML string, 元素集合, jQuery对象;
总之，b.append(a) === a.appendTo(b)
- .prepend(content[,content]) / .prepend(function(index,html))
向对象.头部追加内容$( ".inner" ).prepend( "<p>Test</p>" ); - .prependTo(target)
把对象插入到目标元素头部
$( "<p>Test</p>" ).prependTo( ".inner" );
在对象的同级前后添加元素
- .before([content][,content]) / .before(function)
在对象.前面(不是头部，而是外面，和对象并列同级)插入内容 - .insertBefore(target)
把对象插入到target之前 - .after([content][,content]) / .after(function（index）)
在对象后面(不是尾部，而是外面，和对象并列同级)插入内容 - .insertAfter(target)
对象插入到target之后（同样不是尾部，是同级）
删除元素
- .remove([selector])
删除被选元素（及其子元素） - .empty()
清空被选择元素内所有子元素，但这个元素本身仍然存在 - .detach()
和.remove()一样删除被选元素, 但 .detach()会保存删除的数据。
当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用。
包裹元素
- .wrap(wrappingElement) / .wrap(function(index))
为每个对象包裹一层HTML结构
如$( ".inner" ).wrap( "<div class='new'></div>" ); - .wrapAll(wrappingElement)
把所有匹配对象包裹在同一个HTML结构中 - .wrapInner(wrappingElement) / .wrapInner(function(index))
如$( ".inner" ).wrapInner( "<div class='new'></div>");
意思是$( ".inner" )内部的内容 分别由( "<div class='new'></div>")包裹 - .unwrap()
把DOM元素的parent移除
html([string])
读写两用的方法，用于获取/修改元素的innerHTML
$('div').html() #没有参数，获取元素的innerHTML
$('div').html('123') #有参数，参数内容即为修改后的元素innerHTML
text()
和html方法类似，操作的是DOM的innerText值
事件
.on( events [,selector ] [,data ], handler(eventObject) )
增加事件处理函数
- events：事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"，一个或多个
- selector：选择器，用于过滤出被选中的元素中能触发事件的后代元素。
- data：传递给事件处理函数的event.data
- handler(eventObject)：事件被触发时的执行函数。若该函数只是要执行return false，该参数位置可以直接简写成 false
// 普通事件绑定，最简单的用法
$('div').on('click', function(e){
console.log(this); //点击的元素
console.log(e); // 事件，e.target 事件的对象
});
// 事件委托或者事件代理，想让div 下面所有的span绑定事件，可以把事件绑定到div上
$('div').on('click', 'span', function(e){
console.log(this);
console.log(e);
});
// 可以在绑定的时候给事件处理程序传递一些参数
$('div').on('click', {name: 'Byron', age: 24}, function(e){
console.log(e.data);
});
命名空间的作用：解绑事件时做一个区分
#click.hello事件解绑，但是click事件不受影响
$('.box>ul').on('click',3,function(e){
console.log(e.data)
})
$('.box>ul').on('click.hello','li',function(){
console.log(this)
var str = $(this).text()
$('#wrap').text(str)
})
$('.box>ul').off('click.hello')
事件代理的意义：1.给未创建的后代元素绑定事件 2.当需要监视很多元素的时候，代理事件的开销更小
.off( events [, selector ] [, handler ] )
移除一个事件处理函数
.trigger( eventType [, extraParameters ] )
用语句代替用户的操作，触发事件
$('#foo').trigger('click');
事件的简写方法
$('.box>ul').on('click',3,function(e){
console.log(e.data)
})
与下面的写法都是可以的
$('.box>ul').click(3,function(e){
console.log(e.data)
})
属性相关
.val([value])
读写双用的方法，用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值
$('input').val() //没有参数的时候返回input的value值
$('input').val('newValue'); //当传递了一个参数的时候，将参数值设为input的value值
$('input')[0].value = "hello" 用原生DOM的方式设置值
.attr(attributeName)
获取元素特定属性的值
<input type="text" value="hello">
<script>
console.log($('input').attr("type")) //text
</script>
.attr(attributeName,value)
/ .attr(attributesJson)
/ .attr( attributeName, function(index, attr) )
为元素属性赋值
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );
$( "#greatphoto" ).attr({
alt: "Beijing Brush Seller",
title: "photo by Kelly Clark"
}); #以Json格式批量设置属性
$( "#greatphoto" ).attr( "title", function( i, val ) {
return val + " - photo by Kelly Clark";
});//这里用id选择符举例是不是function永远最多迭代一次？用类选择符是不是更好些？
.removeAttr(attributeName)
为匹配的元素集合中的每个元素中移除一个属性
CSS相关
.css(propertyName) / .css(propertyNames)
.css()获取到的是浏览器计算后的属性
获取元素style特定property的值
var color = $( this ).css( "background-color" );
var styleProps = $( this ).css([
"width",
"height",
"color",
"background-color"
]);
.css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( propertiesJson )
设置元素style特定property的值
$( "div.example" ).css( "width", function( index ) {
return index * 50;
});
$( this ).css( "width", "+=200" );//在原来的基础上宽度增加200
$( this ).css( "background-color", "yellow" );
$( this ).css({ //Json格式批量设置
"background-color": "yellow",
"font-weight": "bolder"
});
.addClass(className) / .addClass(function(index,currentClass))
为元素添加一个或多个class，不是覆盖原class，是追加，也不会检查重复
removeClass([className]) / ,removeClass(function(index,class))
移除元素单个/多个/所有class
$( "p" ).addClass( "myClass yourClass" ); //为元素添加多个class
$( "p" ).removeClass( "myClass yourClass" );//移除元素多个class
.hasClass(className)
检查元素是否包含某个class，返回true/false
$( "#mydiv" ).hasClass( "foo" )
.toggleClass(className)
toggle是切换的意思，方法用于切换class
当触发事件时，先去判断有没有该class,有的话去掉，没有的话加上
jQuery 动画
基础
- .hide([duration ] [,easing ] [,complete ])
隐藏元素，没有参数的时候等同于直接设置display:none属性
- duration：动画持续多久
- easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"
- complete：在动画完成时执行的函数,先完成动画，后执行函数
- .show( [duration ] [, easing ] [, complete ] )
用于显示元素，用法和hide类似 - .toggle( [duration ] [, easing ] [, complete ] )
toggle是切换的意思，用来切换元素的隐藏、显示，类似于toggleClass
事件处理套件也有一个名为.toggle()方法。哪一个被调用取决于传递的参数的设置
渐变
- .fadeIn( [duration ] [, easing ] [, complete ] )
通过淡入的方式显示匹配元素 - .fadeOut( [duration ] [, easing ] [, complete ] )
通过淡出的方式隐藏匹配元素 - .fadeTo( duration, opacity [, easing ] [, complete ] )
调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果 - .fadeToggle( [duration ] [, easing ] [, complete ] )
滑动
- .slideDown( [duration ] [, easing ] [, complete ] )
用滑动动画显示一个匹配元素 - .slideUp( [duration ] [, easing ] [, complete ] )
用滑动动画隐藏一个匹配元素 - .slideToggle( [duration ] [, easing ] [, complete ] )
用滑动动画显示或隐藏一个匹配元素
slideDown&slideUp例子
自定义动画
- .animate( properties [, duration ] [, easing ] [, complete ] )
properties是一个CSS属性和值的对象,动画将根据这组对象移动。
##可以把一串连续变化的属性定义成数组，遍历数组
$('#btn3').click(function(){
var action = [
{width:'80px',height:'80px',left:0,top:0},
{width:'150px',height:'150px',left:0,top:0},
{left:'200px'},
{top:'200px'},
{left:'0'},
{top:'0'},
{width:'80px',height:'80px',left:0,top:0}
]
action.forEach(function(action,idx){
$('.box2').animate(action)
})
})
#jQuery也可以使用链式语法
action.forEach(function(action,idx){
$('.box2').animate({width:'80px',height:'80px',left:0,top:0})
.animates({width:'150px',height:'150px',left:0,top:0}）
.animate({left:'200px'})
.animate({left:'0'})
.animate({top:'0'})
})
- .animate( properties, options )
options是一组包含动画选项的值的集合。 常用的选项:
- duration (default: 400)：一个字符串或者数字决定动画将运行多久。默认值: "normal"， 三种预定速度的字符串("slow", "normal", 或 "fast"或表示动画时长的毫秒数值(如：1000) ）
- easing (default: swing)：一个字符串，表示过渡使用哪种缓动函数。jQuery自身提供"linear" 和 "swing"，其他效果可以使用jQuery Easing Plugin插件
- complete：在动画完成时执行的函数
- .stop( [clearQueue ] [, jumpToEnd ] )
停止元素当前正在运行的动画。
- clearQueue
一个布尔值，指示是否取消以列队动画。默认 false - jumpToEnd
指示是否当前动画立即完成，默认false.
- .finish( [queue ] )
停止当前正在运行的动画，删除所有排队的动画
