jQuery选择器(一)基本选择器+层次选择器

1：CSS选择器
标签选择器，ID选择器，类选择器，群组选择器，后代选择器，子选择器

<p style="color:red;font-size:30px;">CSS demo</p>

<style>
.demo{
   color:red;
   font-size:30px;
}
</style>
<p class="demo">CSS Demo</p>

jQuery选择器

<script type="text/javascript">
  function demo(){
    alert("点我")
 }
</script>
<p onclick="demo()">点我</p>


<p class="demo">点我</p>
<script type="text/javascript">
  $(".demo").click(function(){    给 class为demo的元素添加行为
       alert("jQuery demo!");
 })
</script>

CSS获取样式代码如下

.demo{  //给class为demo的元素添加样式
  ...
}

jQuery获取到元素的代码如下：

$(".demo").click(function(){ 给class为demo的元素添加行为

})

$("#ID")用来代替document.getElementById()函数
$("tagName")用来代替 document.getElementByTagName()函数，即通过标签名获取HTML元素

区别：

$("#tt").css("color","red")这里无需判断$("#tt")是否存在

if(document.getElementById("tt")){
    document.getElementById("test").style.color="red";
}

注意：$(“#tt”)获取到的永远是对象，即使页面上没有此元素，当用jQuery检查某个元素在网页上是否存在时，不能使用如下代码：

if($("#tt")){

}

而应该根据获取元素的长度来判断，代码如下：

if($("#tt").length>0)或者转化为DOM对象来判断   if($("#tt")[0])