//选择 id为 one 的元素 |
$( '#one' ).css( "background" , "#bfa" ); |
//选择 class 为 mini 的所有元素 |
$( '.mini' ).css( "background" , "#bfa" ); |
//选择 元素名是 div 的所有元素 |
$( 'div' ).css( "background" , "#bfa" ); |
//选择 所有的元素 |
$( '*' ).css( "background" , "#bfa" ); |
//选择 所有的span元素和id为two的div元素 |
$( 'span,#two' ).css( "background" , "#bfa" ); |
//选择 body内的所有div元素. |
$( 'body div' ).css( "background" , "#bbffaa" ); |
//在body内的选择 元素名是div 的子元素. |
$( 'body > div' ).css( "background" , "#bbffaa" ); |
//选择 所有class为one 的下一个div元素. |
$( '.one + div' ).css( "background" , "#bbffaa" ); |
//选择 id为two的元素后面的所有div兄弟元素. |
$( '#two ~ div' ).css( "background" , "#bbffaa" ); |
//选择第一个div元素. |
$( 'div:first' ).css( "background" , "#bfa" ); |
//选择最后一个div元素. |
$( 'div:last' ).css( "background" , "#bfa" ); |
//选择class不为one的 所有div元素. |
$( 'div:not(.one)' ).css( "background" , "#bfa" ); |
//选择 索引值为偶数 的div元素。 |
$( 'div:even' ).css( "background" , "#bfa" ); |
//选择 索引值为奇数 的div元素。 |
$( 'div:odd' ).css( "background" , "#bfa" ); |
//选择 索引等于 3 的元素 |
$( 'div:eq(3)' ).css( "background" , "#bfa" ); |
//选择 索引大于 3 的元素、 |
$( 'div:gt(3)' ).css( "background" , "#bfa" ); |
//选择 索引小于 3 的元素 |
$( 'div:lt(3)' ).css( "background" , "#bfa" ); |
//选择 所有的标题元素.比如h1, h2, h3等等... |
$( ':header' ).css( "background" , "#bfa" ); |
//选择 当前正在执行动画的所有元素. |
$( ':animated' ).css( "background" , "#bfa" ); |
//选取含有文本"di"的div元素. |
$( 'div:contains(di)' ).css( "background" , "#bbffaa" ); |
//选取不包含子元素(或者文本元素)的div空元素. |
$( 'div:empty' ).css( "background" , "#bbffaa" ); |
//选取含有class为mini元素 的div元素. |
$( 'div:has(.mini)' ).css( "background" , "#bbffaa" ); |
//选取含有子元素(或者文本元素)的div元素. |
$( 'div:parent' ).css( "background" , "#bbffaa" ); |
//选取含有 属性title 的div元素. |
$( 'div[title]' ).css( "background" , "#bbffaa" ); |
//选取 属性title值等于 test 的div元素. |
$( 'div[title=test]' ).css( "background" , "#bbffaa" ); |
//选取 属性title值不等于 test 的div元素. |
$( 'div[title!=test]' ).css( "background" , "#bbffaa" ); |
//选取 属性title值 以 te 开始 的div元素 |
$( 'div[title^=te]' ).css( "background" , "#bbffaa" ); |
//选取 属性title值 以 est 结束 的div元素 |
$( "div[title$=est]" ).css( "background" , "#bbffaa" ); |
//选取 属性title值 含有 es 的div元素. |
$( "div[title*=es]" ).css( "background" , "#bbffaa" ); |
//组合属性选择器,首先选取有属性id的div元素,然后在结果中 选取属性title值 含有 es 的元素 |
$( "div[id][title*=es]" ).css( "background" , "#bbffaa" ); |
//选取每个父元素下的第2个子元素 |
$( 'div.one :nth-child(2)' ).css( "background" , "#bbffaa" ); |
//选取每个父元素下的第一个子元素 |
$( 'div.one :first-child' ).css( "background" , "#bbffaa" ); |
//选取每个父元素下的最后一个子元素 |
$( 'div.one :last-child' ).css( "background" , "#bbffaa" ); |
//如果父元素下的仅仅只有一个子元素,那么选中这个子元素 |
$( 'div.one :only-child' ).css( "background" , "#bbffaa" ); |
//给id为mover的元素添加动画. |
function animateIt() { |
$( "#mover" ).slideToggle( "slow" , animateIt); |
} |
animateIt(); |
//选取所有不可见的元素.包括<input type="hidden"/>. |
alert( "不可见的元素有:" + $( 'body :hidden' ).length + "个!\n" + |
"其中不可见的div元素有:" + $( 'div:hidden' ).length + "个!\n" + |
"其中文本隐藏域有:" + $( 'input:hidden' ).length + "个!" ); |
$( 'div:hidden' ).show(3000).css( "background" , "#bbffaa" ); |
//选取所有可见的元素. |
$( 'div:visible' ).css( "background" , "#FF6500" ); |
//重置表单元素 |
setTimeout( function () { |
countChecked(); |
$( "select" ).change(); |
}, 0) |
//对表单内 可用input 赋值操作. |
$( "#form1 input:enabled" ).val( "这里变化了!" ); |
return false ; |
//对表单内 不可用input 赋值操作 |
$( "#form1 input:disabled" ).val( "这里变化了!" ); |
return false ; |
//使用:checked选择器,来操作多选框. |
$( ":checkbox" ).click(countChecked); |
function countChecked() { |
var n = $( "input:checked" ).length; |
$( "div" ).eq(0).html( "<strong>有" + n + " 个被选中!</strong>" ); |
} |
countChecked(); //进入页面就调用. |
//使用:selected选择器,来操作下拉列表. |
$( "select" ).change( function () { |
var str = "" ; |
$( "select :selected" ).each( function () { |
str += $( this ).text() + "," ; |
}); |
$( "div" ).eq(1).html( "<strong>你选中的是:" + str + "</strong>" ); |
}).trigger( 'change' ); |
// trigger('change') 在这里的意思是: |
// select加载后,马上执行onchange. |
// 也可以用.change()代替. |