第一篇 jQuery

1-1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
  window.onload = function(){};
  //$(document).ready(function() {}); == $(function(){});
  $(document).ready(function() {
    alert("welcome to jquery");
  });
  //区别...
  //1.执行时间不同--$(document).ready()在页面框架下载完毕后执行；window.onload必须在页面全部加载完毕后执行
  //2.执行数量不同
  //3.$(document).ready()简写


</script>
</head>

<body>
</body>
</html>

 

1-2  链式写法，两个功能实现通"."符号连接

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件的链式方法</title>
<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>

<style type="text/css">
 .divFrame{ width:260px; border:solid 1px #666; font-size:10pt;}
 .divTitle{ background-color:#eee; padding:5px;}
 .divContent{ padding:5px; display:none;}
 .divCurrColor{ background-color:red;}
</style>

<script>
  var jici =0;
  $(document).ready(function() {
    $(".divTitle").click(function(){
        //链式的写法...
        $(this).addClass("divCurrColor").next(".divContent").css("display","block");
        /*
        if(jici ==0)
        {
            $(".divContent").css("display","block");
            jici =1;
        }
        else
        {
            $(".divContent").css("display","none");
            jici =0;
            }
            */    
        });
  });
  
</script>

</head>

<body>

  <div class="divFrame">
    <div class="divTitle">Title</div>
    <div class="divContent">
      <a href="#">111</a>
      <a href="#">222</a>
      <a href="#">333</a>
    </div>
  </div>

</body>
</html>

 

1-3 控制DOM对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>

<style type="text/css">
  .divFrame{ width:260px; border:solid 1px #666; font-size:10pt;}
  .divTitle{ background-color:#eee; padding:5px;}
  .divContent{ padding:8px; font-size:9pt;}
  .divTip{ width:244px; border:solid 1px #666; padding:8px; font-size:9pt; margin-top:5px; display:none;}
  .txtCss{ border:solid 1px #ccc;}
  .divBtn{ padding-top:5px;}
  .divBtn .btnCss{ border:solid 1px #535353; width:60px;}
</style>

<script>
   //use javascript
  function test(){
      var name = document.getElementById('Text1').value;
      var sex = (Radio1.checked)?"男":"女";
      var marry = (Checkbox1.checked)? "已婚":"未婚";
      
      document.getElementById('divTip').style.display ="block";
      document.getElementById('divTip').innerHTML = name+"<br />"+sex+"<br />"+marry;
      };
</script>

<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script> $(document).ready(function() {
     $("#Button1").click(function () {
     var name = $("#Text1").val();
     var sex =$("#Radio1").is(":checked")?"男":"女";
     var marry =$("#Checkbox1").is(":checked")?"已婚":"未婚";
     $("#divTip").css("display","block").html(name+"<br />"+sex+"<br />"+marry);
     });
 });
</script>

<body>
 <div class="divFrame">
   <div class="divTitle">请输入如下信息</div>
   <div class="divContent">
     姓名:<input id="Text1" type="text" class="txtCss" /><br />
     性别：<input id="Radio1" name="rdoSex" type="radio" value="男" />男
     <input id="Radio2" name="rdoSex" type="radio" value="女" />女<br />
     婚否<input id="Checkbox1" type="checkbox" />
     <div class="divBtn"><input id="Button1" type="button" value="提交" class="btnCss"  /></div>
   </div>
 </div>
 <div id="divTip" class="divTip"></div>
</body>
</html>

 

1-4 控制CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
  .divDefault{ width:260px; font-size:10pt; padding:5px;}
  .divClick{ width:260px; border:solid 1px #666; font-size:10pt; background-color:#eee; padding:5px;}
</style>

<script type="text/javascript" src="js/jquery-1.12.3.min.js"></script>
<script>
// toggleClass  addClass
  $(function(){
      $(".divDefault").click(function(){
          $(this).toggleClass("divClick").html("点击后的样式");
          });
      })
</script>
</head>
<body>
  <div class="divDefault">点击前的样式</div>
</body>
</html>

 

posted @ 2017-04-26 09:47  youguess  阅读(127)  评论(0)  编辑  收藏  举报