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'));

});