jQuery 01 入门

来源:互联网 发布:手机java软件免费下载 编辑:程序博客网 时间:2024/06/05 21:53
<script src = 'js/jquery.js' type = 'text/javascript'></script>

在jquery中,$就是jquery的简写形式

<script type="text/javascript">
     $(document).ready(function(){
          alert("Hello world!");
     });

$(function(){// dom元素加载完毕
          $('#btn').click(function(){ //获取id为btn的元素,给它添加onclick事件
              var items =  $("input[name='check']:checked");
               //获取name为check的一组元素,然后选取它们中选中(checked)的。
                  alert( "选中的个数为:"+items.length  )
          })
     })
</script>

链式操作
<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
     $(".level1 > a").click(function(){
          $(this).addClass("current")   //给当前元素添加"current"样式
          .next().show()                //下一个元素显示
          .parent().siblings().children("a").removeClass("current")        //父元素的兄弟元素的子元素<a>移除"current"样式
          .next().hide();                //它们的下一个元素隐藏
          return false;
     });
});
</script>

jQuery对象与DOM对象
DOM 文档对象模型,可以通过JavaScript中的getElementsByTagNamegetElementById获得元素。这样获得的元素就是DOM对象。
jQuery对象就是通过jQuery包装DOM对象后产生的对象。

jQuery对象是一个类似数组的对象,可以通过[index]方法获得相应的DOM对象。

对于DOM对象,只需要用$(),就可以转化为jQuery对象

<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
     var $cr = $("#cr");  //jQuery对象
     var cr = $cr.get(0); //DOM对象,获取 $cr[0]
     $cr.click(function(){
          if(cr.checked){ //DOM方式判断
               alert("感谢你的支持!你可以继续操作!");
          }
     })
});
</script>

<script type="text/javascript">
//等待dom元素加载完毕.
$(document).ready(function(){
     var $cr = $("#cr");  //jQuery对象
     $cr.click(function(){
          if($cr.is(":checked")){ //jQuery方式判断
               alert("感谢你的支持!你可以继续操作!");
          }
     })
});
</script>


原创粉丝点击