JQuery

jquery 的基本选择器

可以打开网页f12 ,在控制台下测试

<header class="header" id="page-header">

可以使用class 名例如：$('.page-header')
可以使用id 例如：$('#header')
也可以直接使用header标签， $('header')
查询标签下的长度可以用length和size()
$('img').length 或者 $('img').size()
为img 添加类名,使用addClass('img-circle')
$(img).addClass('img-circle')

过滤

为第一个元素添加Class,标签下加:first表示第一个元素，:last表示最后一个元素，odd表示奇数项目，even表述偶数
$('img:first').addClass('img-circle')

奇数 $('img:odd').addClass('img-circle')
偶数 $('img:even').addClass('img-circle')
使用eq 可以指定元素
$('img:eq(1)').addClass('img-circle')
选择小于3 的元素使用lt
$('img:lt(3)').addClass('img-circle')
选择大于5的元素使用gt
$('img:gt(5)').addClass('img-circle')

使用属性选择元素

<li class="col-xs-3" data-album="single atlas">
       <img src="../images/atlas.jpg" alt="atlas">
       <h6>Atlas</h6>
 </li>

$('[data-album]') 可以找出具有data-album属性的元素
$('li[data-album]') 可以找出在li下具有data-album属性的元素
$('li[data-album=single]>img').addClass('img-circle') 表示属性data-album=single下img元素添加类，>z直接的子元素
$(li[data-album!=single]>img).addClass('img-thumbnail')
用*= 或者~= 做关键字匹配，也就是只要包含关键字就可以查询了，*=和~=的区别在于关键字是否有空格
$(li[data-album~=single]>img).addClass('img-thumbnail')

选择表单元素

找出页面的所有input 元素 $(':input')
找出页面的所有button 元素 $(':button')
如果只想选择提交按钮 $(':submit')
选择密码框 $(':password')
选择文件框 $(':file')
$(':checked')
如此类推,当然还有:fouse,:enable,:disabled

1.6 子元素选择器

:first 跟 first-child有点不同，first 找到第一个结果，而first-child 是第一个子元素,有多个结果
$('img:first-child')

同时也可以使用:nth-child()
$('ul li:nth-child(1)').addClass('shadow')
nth-child跟eq()有点不同，nth-child() 是从1开始的，而eq()是从0开始的
也可用奇数，偶数
$('ul li:nth-child(odd)').addClass('shadow')
$('ul li:nth-child(even)').addClass('shadow')
还有可以用倍数去确定元素，例如查找4和8
$('ul li:nth-child(4n)').addClass('shadow')
当然还可以从后面往前找
$(ul li:nth-last-child(4n)).addClass('shadow')

1.8 内容过滤

contains 包含指定类容,注意大小写，因为包含指定的内容是字符串，所以要用引号
$('li:contains("Viva")')

1.9

使用eq()
$('li img').eq(1).addClass('img-circle')
$('li img').first().addClass('img-circle')

1.10 兄弟元素，子元素，父元素，下一个兄弟元素

<li id="christmas" class="col-xs-3" data-album="single">
     <img src="../images/christmas_lights.jpg" alt="christmas_lights">
     <h6>Christmas Lights</h6>
</li>

查找子元素 $('#christmas').children()
只关注子元素中的某个元素 $('#christmas').children('h6')
父元素 $('#christmas').parent()
下一个元素 $('#christmas').next()
前一个元素 $('#christmas').prev()
所有的兄弟元素 $('#christmas').siblings()
该元素以后的所有元素 $('#christmas').nextAll()
改元素以前的所有元素 $('#christmas').prevAll()

属性 /attributes

添加属性 $('#parachutes img').attr('alt','parachutes')
查看属性 $('#parachutes img').attr('alt')
去除属性 $('#parachutes img').removeAttr('alt')

添加`(addClass())`、移除(`removeClass()`)，切换 class toggleClass()

<div id="atlas">
         <img src="../images/atlas.jpg" class="">
 </div>

添加 class $('#atlas > img').addClass('img-circle')
移除 class $('#atlas > img').removeClass('img-circle')
判断是否含有该class $('#atlas > img').hasClass('img-circle') 有则返回true
切换 class toggleClass()

$('#atlas >img').click(function() {
    $(this).toggleClass('img-circle');
})

offset

$('.album').offset() 返回的是一个对象，结果是该类相对于文档的top的位置等的偏移量
可以使用$('.album').offset( {top:380,left:20} ) 进行修改

位置

position 是相对于父元素的位置，跟offset不太一样

DOM 包装 wrap()

为选中元素包装 $('.album img').wrap('<div class="thumbnail"> </div>')
在当前对象里面包装 $('.album').wrapInner('<div class="thumbnail"> </div>')
为选中元素包装所有 $('.album ').wrapAll('<div class="thumbnail"> </div>')
去掉包装 unwrap() $('.album').unwrap()

追加 append(),prepend(),appendTo(),prependTo()

在选中元素之前添加 $('.album').prepend('<h6>coldplay</h6>')
在选中元素之后添加 $('.album').append('<h6>coldplay</h6>')
将内容追加到元素之后 $('<h6>coldplay</h6>').appendTo(‘.album’)
将内容追加到元素之前 $('<h6>coldplay</h6>').prependTo(‘.album’)

外部追加 before ，after 添加的内容和选中的元素是兄弟关系

$('.album h6').before('<h5>coldplay</h5>')
$('<h5>coldplay</h5>').insertBefore('.album h6')

移除

清空h6元素里面的东西，文本等 $('.album h6').empty()
移除元素，就是包括标签 $('.album img').remove()

替换 replaceALL，replacewith

$('.album h6').replaceWith('<h5>coldPlay</h5>')
$('<h5>coldPlay</h5>').replaceAll('.album h6')

克隆 clone

$('.album').clone().appendTo('.jumbotron')