jQuery 学习笔记 (jQuery对象 和Dom 区别 )

jquery  实现一个简单选中功能。
<input type="checkbox" id="cr"/> <lable for="cr"> 我已经阅读了上面制度.</lable>

通过$("#cr")获取到复选框元素，然后通过判断复选框是否被选中，来执行下一步操作。
首先，用DOM 方式来判断复选框是否被选中,代码如下:

$(document).ready(function(){
        var $cr = $("#cr");
        var  cr = $cr[0];
        $cr.click(function(){
            if(cr.checked){
              alert("感谢你的支持！你可以继续操作");
    }
  
  })
})

使用jQeury中的方法来判断选项是否被选中
$(document).ready(funciton(){
  var $cr = $("#cr");
      $cr.click(function(){ 
        if($cr.is(":checked")){ 
         alert("感谢你的支持！你可以继续操作");
         }

     })
}）

is(":checked")是jQeury中的方法，判断jQeruy对象是否被选中，返回bool

 jQeury选择器
 jQeruy 中的选择器完全继承了css的风格。利用jQuery选择器，可以非常便捷和快速地找出
 特定的DOM 元素。
 例子 
 <script type="text/javascript">
  function demo(){
   alert("javascript demo");
  }
 </script>
 <p onclick= "demo()">点击我</p>
 代码的作用是为<p>元素设置一个onclick事件，当单击此元素时，会弹出一个对话框。
 上面这样把javascript 代码和HTML代码混杂在一起的做法同样也非常不妥，因为它并没有将网页内容和行为分离。
 <p class="demo"> jQeruy Demo</p>
 <script type="text/javascript">
  $(".demo").click(function(){
     alert("jQuery demo!"); 
  })
</script>

 对css 的写法和jquery 的写法进行比较
 css 获取到元素的代码如下： 
 .demo{
    //添加样式
 }
 $(".demo") {  添加行为 }

javascript 判断元素是否存在
<div> test</div>
<script type="test/javascript">
 if(document.getElementById("tt")){
   document.getElementById("tt").style.color="red";
}
</script>

jquery 无需判断
<div test</div>
<script type="test/javascript">
  $("#tt").css("color","red");
</script>
如果jquery 需要检查网页上是否有此元素，因此不能使用这样的代码
if($("#tt")){
}
而应该根据获取到元素的长度来判断，代码如下:
if($("#tt").length>0){
 do something!
}
转为dom对象执行判断,代码如下:
if($("#tt")[0]){
 do something!
}
//或者
if($("#tt").get(0)){
  do something!
}

转载于:https://www.cnblogs.com/liuyong/archive/2011/04/08/1971803.html