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!
}