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! }
出处:http://www.cnblogs.com/liuyong/
作者喜欢研究 Sql Server ,ASP.NET MVC , Jquery WCF 等技术,同时关心分布式架构的设计应用。转载请保留原文链接,谢谢!