JQuery

jquery 的基本选择器

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

• 可以使用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')

使用属性选择元素

       
       
Atlas
 

• $('[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 兄弟元素，子元素，父元素，下一个兄弟元素

     
     
Christmas Lights

• 查找子元素 $('#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()

• 添加 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('
  ')
• 在当前对象里面包装 $('.album').wrapInner('
  ')
• 为选中元素包装 所有 $('.album ').wrapAll('
  ')
• 去掉包装 unwrap() $('.album').unwrap()

---

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

• 在选中元素之前添加 $('.album').prepend('

  coldplay

  ')
• 在选中元素之后添加 $('.album').append('

  coldplay

  ')
• 将内容追加到元素之后 $('

  coldplay

  ').appendTo(‘.album’)
• 将内容追加到元素之前 $('

  coldplay

  ').prependTo(‘.album’)

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

$('.album h6').before('

coldplay

')
$('

coldplay

').insertBefore('.album h6')

---

移除

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

替换 replaceALL，replacewith

$('.album h6').replaceWith('

coldPlay

')
$('

coldPlay

').replaceAll('.album h6')

克隆 clone

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