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')
网友评论