扫一扫,加我们为好友有惊喜哦~
-->

核心课程
开班动态
专题服务

您当前所在位置:首页 > 中心动态 >>
常州软件培训——JQuery入门语法及案例

1、JQuery:JavaScript
侵入式设计!
JQuery:非侵入式设计!

JavaScript中:
<p onclick="this.style.display='none'">好好学习,天天复习!~</p>

2、JQuery语法
$(选择器).事件(function(){});

<p>
  好好学习,天天向上哦!~
</p>

<p>
  床前明月光!~
</p>

<script type="text/javascript">
//当文档加载结束时
$(document).ready(function(){
   //当p标签被点击时
   $("p").click(function(){
      //$("p").hide("slow");//让p标签隐藏
   //$(this)代表当前事件发生的标签
   $(this).hide("slow");
   });
});
</script>

3、常见的函数
A、hide()  $(selector).hide(speed,callback)
   callback:回调函数

<p id="p1">
  好好学习,天天向上哦!~
</p>

<p id="p2">
  床前明月光!~
</p>

<p id="p3">
  疑似底霜!~
</p>

<input type="button" value="显示" id="bt">

B、val():获取或改变value值  attr():获取或改变属性值
<p>
  好好学习,天天向上哦!~
</p>

<p>
  床前明月光!~
</p>

<p>
  疑似底霜!~
</p>

<input type="button" value="隐藏" id="bt">

<script type="text/javascript">
//当文档加载结束时
$(document).ready(function(){
  $("#bt").click(function(){
  //var v = $(this).val();//获取按钮的value值
  var v = $(this).attr("value");
  if(v == "隐藏"){
   $("p").hide("slow",function(){
   //改变按钮文字
   //$("#bt").val("显示");
   $("#bt").attr("value","显示");
   });
  }else if(v == "显示"){
     $("p").show("slow",function(){
     $("#bt").val("隐藏");
  });
 
  }
  });
});
</script>

C、first、last、even、odd
<p>
  好好学习,天天向上哦!~
</p>

<p>
  床前明月光!~
</p>

<p>
  疑似底霜!~
</p>

<p>
  举头望明月!~
</p>

<p>
  低头思故乡!~
</p>

<input type="button" value="隐藏" id="bt">
<script type="text/javascript">
//当文档加载结束时
$(document).ready(function(){
  $("#bt").click(function(){
  $("p:first").hide("slow");
  $("p:last").hide("slow");
  $("p:even").css("background-color","orange");
  $("p:odd").css("background-color","gray");
  });
});
</script>

D、:checkbox  :checked  size() html()
<p>
你喜欢的明星:周星驰<input type="checkbox" name="star" value="1">
           刘德华<input type="checkbox" name="star" value="2">
           梁朝伟<input type="checkbox" name="star" value="3">
           周润发<input type="checkbox" name="star" value="4">
           <span id="msg"></span>
</p>

<input type="button" value="全选" id="bt1">
<input type="button" value="提交" id="bt2">

<script type="text/javascript">
//当文档加载结束时
$(document).ready(function(){
  //空值全选和反选
  $("#bt1").click(function(){
  var v = $(this).val();//按钮上的文字
  if(v == "全选"){
    $(":checkbox").attr("checked","checked");
    $(this).val("反选");
  }else if(v == "反选"){
       $(":checkbox").attr("checked",false);
    $(this).val("全选");
  }
  });
 
  //空值提交检验是否至少选了一个
  $("#bt2").click(function(){
     var c = $(":checkbox:checked").size();//被选中的checkbox的个数
  if(c == 0){
   $("#msg").html("请至少选择一项");//改变id=msg元素中的文字
   $("#msg").css("color","#FF0033");
  }else{
      $("#msg").html("");//改变id=msg元素中的文字
  }
  });
});
</script>

E、find:从父元素中寻找子元素、each:将符合条件的元素进行循环
<p id="stars">
你喜欢的明星:周星驰<input type="checkbox" name="star" value="周星驰">
           刘德华<input type="checkbox" name="star" value="刘德华">
           梁朝伟<input type="checkbox" name="star" value="梁朝伟">
           周润发<input type="checkbox" name="star" value="周润发">
          
           <span id="msg"></span>
</p>
您选择了如下的明星:<input type="text" id="selstars">
<p>
<input type="button" value="全选" id="bt1">

</p>

<p id="fruits">
你喜欢的水果:苹果<input type="checkbox" name="fruit" value="1">
           橘子<input type="checkbox" name="fruit" value="2">
           鸭梨<input type="checkbox" name="fruit" value="3">
           葡萄<input type="checkbox" name="fruit" value="4">
</p>
<input type="button" value="全选" id="bt2">

<script type="text/javascript">
//当文档加载结束时
$(document).ready(function(){
  //空值全选和反选
  $("#bt1").click(function(){
  var v = $(this).val();//按钮上的文字
  if(v == "全选"){
    //从id=stars的标签中寻找所有的checkbox
    $("#stars").find(":checkbox").attr("checked","checked");
    $(this).val("反选");
  }else if(v == "反选"){
      $("#stars").find(":checkbox").attr("checked",false);
    $(this).val("全选");
  }
  });
 
  $("#bt2").click(function(){
  var v = $(this).val();//按钮上的文字
  if(v == "全选"){
    //从id=stars的标签中寻找所有的checkbox
    $("#fruits").find(":checkbox").attr("checked","checked");
    $(this).val("反选");
  }else if(v == "反选"){
      $("#fruits").find(":checkbox").attr("checked",false);
    $(this).val("全选");
  }
  });
 
  //为id=stars的元素中所有的复选框绑定click事件
  $("#stars").find(":checkbox").click(function(){
   var selStars = "";
      //将所有选中的复选框的值合并放到文本框中 each:将符合条件的元素进行循环
   $("#stars").find(":checkbox:checked").each(function(){
       selStars = selStars + $(this).val() + " ";
   });
  
   //将值显示到文本框
   $("#selstars").val(selStars);
  });

 
});
</script>


F、jquery防止冲突

作业:熟悉JQuery中的事件和效果!


精彩文章推荐
struts2基本代码验证[2012-11-2]
sqlserver中的DML作业[2012-8-21]
什么是线程——软件开发课程[2012-7-11]
表格练习案例——常州电脑培训[2012-6-28]
东方博宜软件班——什么是好的程序员[2012-6-12]
常州计算机培训学校---计算机基础知识汇总[2011-10-21]
常州软件培训——Ajax请求服务器[2011-9-30]
常州软件培训——Ajax入门介绍[2011-9-30]


返回顶部