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