jQuery查找、遍历和操作DOM

jQuery具有强大的操作DOM功能，包括查找遍历元素、操作CSS、变动html元素、以及获取HTML文档元素；

jQuery方法获取的是一个jQuery对象，对象的length属性表示该对象是否存在

一、查找遍历元素
1、使用选择器选中某个元素；
2、遍历某个元素；
3、取某些特定元素
$("#test").find("p"); //find方法可以直接查找出父元素下的某个子元素
$("#test").find("p").find("span"); //find方法可以叠加使用，表示查找p标签下所有span元素
$("#test").find("p").eq(0); //eq方法可以直接获取某个指定下标的该元素，下标从0开始
$("#test").find("input[type='checkbox']").each(function(i){//each方法直接遍历所有该元素,i表示当前下标
if($(this).prop("checked")){
alert($(this).val());//this表示遍历当前的元素
}
})
元素选择器很简单，元素选择器选择的元素一般为多个
二、操作CSS
1、修改原有的样式；
2、添加新的样式；
3、操作CSS；
$("#test").find("p").each(function(){//each方法直接遍历所有该元素
$(this).css({"color":"red","margin-top":"15px"});//修改多个CSS属性
$(this).css("color","red");//修改单个CSS属性
$(this).hide();//等同于display:none;
$(this).show();//等同于display:block;
})
三、变动html元素
1、获取属性；
2、设置属性；
3、变动HTML；
$("#test").find("div").each(function(){//each方法直接遍历所有该元素
alert($(this).attr("value"));//获取p元素中的value属性值，如果没有设置返回undefined
$(this).attr("value","1"));//设置p元素一个属性value值为1
alert($(this).html());//获取p元素整个HTML
$(this).html("");//清除这段HTML
$(this).empty();//清除这段HTML
$(this).append("html");//使用append方法可以在div元素内部后面添加一个段新的HTML
$(this).prepend("html");//使用prepend方法可以在div元素内部前面添加一个段新的HTML
$(this).after("html");//使用prepend方法可以在div元素外部后面添加一个段新的HTML
$(this).before("html");//使用prepend方法可以在div元素外部前面添加一个段新的HTML
})