Jq的常用选择器

Jq的常用选择器

$(‘div’)元素选择器 $(‘#div’)id选择器 $(‘.div’)类别选择器

css()样式  attr()属性

$(function(){

$('#boxli').css('background','red');//所有

$('#box li:odd').css('background','red');//奇数

$('#box li:even').css('background','blue');//偶数

$('#box').find('li:eq(3)').css('background','blue'); //find()查找指定元素的所有的后代元素

});

 

$(function(){

    $('#one').css('display','block');

    $('#one span').css('display','block');空格为查找子孙后代，所有的span都被选中

    $('#one>span').css('display','block'); >为查找子代，span1都被找到

    $('#one + div').css('display','block'); +为查找下一个兄弟节点，单个

    $('#one ~ div').css('display','block'); ~为查找下面所有的兄弟节点，弟弟们

    $('#one').siblings().css('display','block');siblings为所有的兄弟节点

    $('#one').children().css('display','block');#one>span 也是查找子元素

    $('.s1').parent().css('display','block');div2显示 parent查找父节点

});

 

$(function(){

    $('#box li:odd').css('background','red'); 查找li元素的奇数

    $('#box li:even').css('background','blue');查找li元素的偶数

    $('#box li:first').css('background','blue'); 查找第一个元素

    $('#box li:last').css('background','blue');查找最后一个元素

    $('#box li:eq(5)').css('background','blue');第6个li的元素 下表为0开始数

    $('#box li:gt(5)').css('background','blue');查找大于5的所有li

    $('#box li:lt(5)').css('background','red');小于5的所有li

});

 

$(function(){

    $('div:contains("a")').css('display','block');包含有a的div都被选中

    $('div:empty').css('display','block');查找为空的div节点（里面什么都没有）

    $('div:has(span)').css('display','block');查找包含有span的div标签

    $('div:parent').css('display','block');查找有子元素或有文本的div元素

});

 

$(function(){

    $('li').html('<h2>变了</h2>');//html()取得里面内容，可以设置多个值

    alert($('li').html());//只能取数组的第一个值

       //方法：取值赋值合体

    $('li').text('<h2>变了</h2>');//取得里面的文本

    alert($('li').text());//同时取得所有的值

});

 

$(function(){

    //$('li').css('color','red');

    alert($('li').css('color'));一个值的时候，是取值，两个值的时候是赋值

});

 

$(function(){

$('#one').attr('title','笑话');

$('#one').attr('class','blue');

$('div').not('.red').css('color','red');//除了xx之外

$('div').has('span').css('color','red'); 含有xx的子节点

$('div').filter('.red').css('color','red');//找到类名为red的div

    $('#one').next().css('color','red');//下一个兄弟节点 +

    $('#one').prev().css('color','red');//上一个兄弟节点 +

    alert($('#one').index());//在所有兄弟节点所在的位置

});

 

$(function(){

    $('p').css('color','red'); //查节点，选择器就是为了查找节点

    //新增节点：创建和插入 js写法

    //varoLi=document.createElement('li');

    //oUl.appendChild(oLi);

     Jq的写法

    $li1=$('<li title="葡萄">葡萄</li>');//创建节点在后面插入

    $('ul').append($li1).css('color','red');//后续操作对象不一样，选择的是全部兄弟节点

    $li2=$('<li title="西瓜">西瓜</li>');//创建节点在后面插入

    $li2.appendTo($('ul')).css('color','red');//选择的是自己

    $li3=$('<li title="哈密瓜">哈密瓜</li>');//创建节点

    $('ul').prepend($li3);//prependTo插入到前面

    $li4=$('<li title="番茄">番茄</li>');//创建节点

    $('p').after($li4);//before()

    //删除节点

    $('ul').find('li').eq(2).remove();//删除节点

    $('ul').find('li').eq(0).empty();//清空内容

    //复制节点

    $('ul li:eq(1)').clone().appendTo($('ul'));

});