(一)jQuery选择器之id选择器: $(“#id” )
<script type="text/javascript">
//通过原生方法处理
var div = document.getElementById('ccg');
div.style.border = "3px solid blue";
</script>
<script type="text/javascript">
//通过jQuery直接传入id
//id的唯一,只选择到了第一个匹配的id为imooc的div节点
$('#ccg').css("border", "3px solid red");
</script>
(二)jQuery选择器之类选择器: $( “.class” )
$(“.ccg”).css()方法内部带了一个隐式的循环处理,所以使用jQuery选择节点,不仅仅只是选择上的简单,同时还增加很多关联的便利操作
<script type="text/javascript">
//通过原生方法处理
//样式是可以多选的,所以得到的是一个合集
//需要通过循环给合集中每一个元素修改样式
var divs = document.getElementsByClassName('ccg');
for (var i = 0; i < divs.length; i++) {
divs[i].style.border = "3px solid blue";
}
</script>
<script type="text/javascript">
//通过jQuery直接传入class
//class选择器可以选择多个元素
$('.ccg').css("border", "3px solid red");
</script>
(三)jQuery选择器之元素选择器: $( “element” )
<script type="text/javascript">
//通过原生方法处理
//获取到所有的节点标记名为div的元素
//给每一个div加上蓝色的边框
var divs = document.getElementsByTagName('p');
for (var i = 0; i < divs.length; i++) {
divs[i].style.border = "3px solid blue";
}
</script>
<script type="text/javascript">
//通过jQuery直接传入标签名p
//标签是可以多个的,所以得到的同样也是一个合集
$('p').css("border", "3px solid red");
</script>
(四)jQuery选择器之全选择器(* 选择器):$( ” * ” )
|(五)jQuery选择器之层级选择器
(六)注意使用原生JS的浏览器兼容性:id、class、tag都可以通过原生的方法获取到对应的节点,但是我们还需要考虑一个兼容性的问题,我这里顺便提及一下,比如:
①IE会将注释节点实现为元素,所以在IE中调getElementsByTagName里面会包含注释节点,这个通常是不应该的
②getElementById的参数在IE8及较低的版本不区分大小写
③IE7及较低的版本中,表单元素中,如果表单A的name属性名用了另一个元素B的ID名并且A在B之前,那么getElementById会选中A
④IE8及较低的版本,浏览器不支持getElementsByClassName