jquery笔记

jquery
script放在head中，文档前面时
window.onload=handle页面全部加在完再执行
jquery:$(handle) ,dom加载完再执行
jQuery选择器：
$('*')与css选择器一样
$()与querySelect()不一样。选择的不是一个原生dom对象
$()对象用jquery对象的api
jquery对象变为原生js对象$()[0]变为了原生对象
原生对象变成jquery对象：$(document.querySelect(id))
$(x).eq(n)第n+1个子元素

jquery.png
对于一个特定结果集，我们想获取到指定index的jQuery对象，可以使用eq方法

$('li').eq(3); // 获取结果集中的第四个jQuery对象
.next([selector]), .prev([selector])

next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。prev正好相反，获取元素之前的同辈元素

$('.test').next();
$('.test').prev('li');
.nextAll([selector]), .prevAll([selector])

nextAll获得每个匹配元素集合中每个元素所有后面的同辈元素，选择性筛选的选择器，prevAll与之相反，获取元素前面的同辈元素
siblings([selectors])

获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器

$('li.third-item').siblings('li')
.parent([selector])

取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器

$('li.item-a').parent()
.parents([selector])
index由里到外排列
获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数

$('li.item-a').parents('div')
.children([selector])

获得匹配元素集合中每个元素的子元素，选择器选择性筛选

$('ul.level-2').children()
.find([selector])

查找符合选择器的后代元素

$('ul').find('li.current');
筛选当前结果集

.first()

获取当前结果集中的第一个对象

.last()

获取当前结果集的最后一个对象
filter(selector), .filter(function(index))

筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数

$('li').filter(':even')

$('li').filter(function(index) {
return index % 3 == 2;
})
.not(selector), .not(function(index))

从匹配的元素集合中移除指定的元素，和filter相反
.is(selector), is(function(index)), is(dom/jqObj)

判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true

if ( $target.is("li") ) {
$target.css("background-color", "red");

}
.has(selector), .has(dom)

筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素

$('li').has('span')

jQuery DOM操作

创建元素

只需要把DOM字符串传入$方法即可返回一个jQuery对象

var obj = $('<div class="test"><p><span>Done</span></p></div>');
.append(content[,content]) / .append(function(index,html))

Insert content, specified by the parameter, to the end of each element in the set of matched elements.

可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象
如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值
.appendTo(target)

把对象插入到目标元素尾部，目标元素可以是selector, DOM对象, HTML string, 元素集合, jQuery对象;

Insert every element in the set of matched elements to the end of the target.

$( "h2" ).appendTo( $( ".container" ) );
$( "<p>Test</p>" ).appendTo( ".inner" );
.prepend(content[,content]) / .prepend(function(index,html))

向对象头部追加内容，用法和append类似，内容添加到最开始

Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

$( ".inner" ).prepend( "<p>Test</p>" );
.prependTo(target)

把对象插入到目标元素头部，用法和prepend类似

Insert every element in the set of matched elements to the beginning of the target.

$( "<p>Test</p>" ).prependTo( ".inner" );
.before([content][,content]) / .before(function)

在对象前面(不是头部，而是外面，和对象并列同级)插入内容，参数和append类似

Insert content, specified by the parameter, before each element in the set of matched elements.

$( ".inner" ).before( "<p>Test</p>" );
$( ".container" ).before( $( "h2" ) );
$( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).before( "<b>Hello</b>" );
$( "p" ).before( document.createTextNode( "Hello" ) );
.insertBefore(target)
与appendTo()类似
把对象插入到target之前（同样不是头部，是同级）

Insert every element in the set of matched elements before the target.

$( "h2" ).insertBefore( $( ".container" ) );
.after([content][,content]) / .after(function（index）)

和before相反，在对象后面(不是尾部，而是外面，和对象并列同级)插入内容，参数和append类似

Insert content, specified by the parameter, after each element in the set of matched elements.

$( ".inner" ).after( "<p>Test</p>" );
$( "p" ).after( document.createTextNode( "Hello" ) );
.insertAfter(target)
和insertBefore相反，把对象插入到target之后（同样不是尾部，是同级）
Insert every element in the set of matched elements after the target.
$( "<p>Test</p>" ).insertAfter( ".inner" );
$( "p" ).insertAfter( "#foo" );

删除元素

.remove([selector])

删除被选元素（及其子元素）

$("#div1").remove();
我们也可以添加一个可选的选择器参数来过滤匹配的元素

$('div').remove('.test');
.empty()

清空被选择元素内所有子元素

Remove all child nodes of the set of matched elements from the DOM.

$('body').empty();
.detach()

.detach() 方法和.remove()一样, 除了 .detach()保存所有jQuery数据和被移走的元素相关联。当需要移走一个元素，不久又将该元素插入DOM时，这种方法很有用。
包裹元素
wrap(wrappingElement) / .wrap(function(index))
为每个对象包裹一层HTML结构，可以是selector, element, HTML string, jQuery object
Wrap an HTML structure around each element in the set of matched elements.
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
包裹元素

$( ".inner" ).wrap( "<div class='new'></div>" );
看看结果

<div class="container">
<div class="new">
<div class="inner">Hello</div>
</div>
<div class="new">
<div class="inner">Goodbye</div>
</div>
</div>
.wrapAll(wrappingElement)

把所有匹配对象包裹在同一个HTML结构中

Wrap an HTML structure around all elements in the set of matched elements.

<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
包裹元素

$( ".inner" ).wrapAll( "<div class='new' />");
看看结果

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div>

.wrapInner(wrappingElement) / .wrapInner(function(index))

包裹匹配元素内容，这个不好描述，一看例子就懂

Wrap an HTML structure around the content of each element in the set of matched elements.

<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
包裹元素

$( ".inner" ).wrapInner( "<div class='new'></div>");
看卡结果

<div class="container">
<div class="inner">
<div class="new">Hello</div>
</div>
<div class="inner">
<div class="new">Goodbye</div>
</div>
</div>
.unwap()

把DOM元素的parent移除

Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

pTags = $( "p" ).unwrap();
html([string])

这是一个读写两用的方法，用于获取/修改元素的innerHTML

当没有传递参数的时候，返回元素的innerHTML
当传递了一个string参数的时候，修改元素的innerHTML为参数值
看个例子

$('div').html()

$('div').html('123')
后续这种读写两用的方法很多，原理都类似

如果结果是多个进行赋值操作的时候会给每个结果都赋值
如果结果多个，获取值的时候，返回结果集中的第一个对象的相应值
text()

和html方法类似，操作的是DOM的innerText值

属性&CSS操作

属性相关
.val([value])
这是一个读写双用的方法，用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值
$('input').val()$('input').val('newValue');

.attr()
.attr(attributeName)
获取元素特定属性的值
Get the value of an attribute for the first element in the set of matched elements.
var title = $( "em" ).attr( "title" );

.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) )
为元素属性赋值
Set one or more attributes for the set of matched elements.
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );$( "#greatphoto" ).attr({ alt: "Beijing Brush Seller", title: "photo by Kelly Clark"});$( "#greatphoto" ).attr( "title", function( i, val ) { return val + " - photo by Kelly Clark";});//这里用id选择符举例是不是function永远最多迭代一次？用类选择符是不是更好些？

.removeAttr()
为匹配的元素集合中的每个元素中移除一个属性（attribute）
.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法，并且它解决了跨浏览器的属性名不同的问题。
$('div').removeAttr('id');

.prop()/.removeProp()
这两个方法是用来操作元素的property
的，property和attibute是非常相似的概念，感兴趣的同学可以看看jQuery的attr与prop
CSS相关
.css()
设置的是行内样式。style属性
这是个和attr
非常相似的方法，用来处理元素的css
.css(propertyName) / .css(propertyNames)
获取元素style特定property的值
Get the value of style properties for the first element in the set of matched elements.
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的值
Set one or more CSS properties for the set of matched elements.
$( "div.example" ).css( "width", function( index ) { return index * 50;});$( this ).css( "width", "+=200" );$( this ).css( "background-color", "yellow" );$( this ).css({ "background-color": "yellow", "font-weight": "bolder"});

.addClass(className) / .removeClass(className)
.addClass(className) / .addClass(function(index,currentClass))
为元素添加class，不是覆盖原class，是追加，也不会检查重复
Adds the specified class(es) to each of the set of matched elements.
$( "p" ).addClass( "myClass yourClass" );$( "ul li" ).addClass(function( index ) { return "item-" + index;});

removeClass([className]) / ,removeClass(function(index,class))
移除元素单个/多个/所有class
Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
$( "p" ).removeClass( "myClass yourClass" );$( "li:last" ).removeClass(function() { return $( this ).prev().attr( "class" );});

.hasClass(className)
检查元素是否包含某个class，返回true/false
Determine whether any of the matched elements are assigned the given class.
$( "#mydiv" ).hasClass( "foo" )

.toggleClass(className)
toggle是切换的意思，方法用于切换，switch是个bool类型值，这个看例子就明白
<div class="tumble">Some text.</div>

第一次执行
$( "div.tumble" ).toggleClass( "bounce" )<div class="tumble bounce">Some text.</div>

第二次执行
$( "div.tumble" ).toggleClass( "bounce" )<div class="tumble">Some text.</div>
jquery 动画
.hide() //display不变，最后变为none
.show()
.toggle()
fadeIn()淡入
fadeOut()淡出
fadeToggle//透明度
slideDown()
slideUp()//
animate({},time,function(){
complete
})
finish()
stop()
hide().show().slide()...链式调用