认识jQuery

jQuery是[美]John Resig 在2006年创建的一个开源项目，之后吸引了很多人加入其中，并逐渐发展成为集JavaScript、CSS、DOM和Ajax于一体的框架体系，它代码高效、兼容性强，主张“以更少的代码，实现更多的功能（write less,do more）”

基本功能

1.访问和操作DOM元素
2.控制页面样式
3.处理页面事件
4.使用插件
5.与Ajax结合

搭建jQuery开发环境

去官网下载jQuery库文件➔引入jQuery文件库

🔻第一个jQuery程序

注意:与上面两种写法类似的原生写法：
window.onload=function(){ ...... }

那么jQuery写法和原生写法是否有差异呢，当然有：

原生写法必须在页面全部加载完之后，包括图片的下载，才能执行；而jQuery写法在页面框架下载完之后就执行，效率更高
原生写法无论写多少个，都只会输出最后一个，而jQuery写法重复写多个，每次输出的结果都不一样

代码风格

1.使用"$"

从上面的例子不难看出，jQuery程序中会经常出现"$"，通常用于选择元素、作为功能函数的前缀等，可以说是jQuery的标志
2.事件操作链接式书写
以下面的例子说明：

🔻单击主题标记，改变自身的背景色并显示各个链接

简单应用

访问DOM对象

还是举例说明：

🔻让id="divTmp"的标记显示id="divOut"的内容

从上述例子中可以看出，上面操作元素的方式使用的是与DOM对象对应的"jQuery对象"，而且jQuery对象访问的方式要比传统的DOM对象方式使用的代码简洁许多

控制DOM对象

再通过一个例子来看看使用jQuery后代码的简洁性

🔻将提交后的表单数据显示在页面的一个div中（这里分别使用传统方式和jQuery方式实现方便比较）

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo1-4(1)操作DOM对象</title>
    <style>
      .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}
      .textCss{border:solid 1px #ccc}
      .divButton{padding-top:5px}
      .divButton .buttonCss{border:solid 1px #535353;width:60px}
    </style>
    <script>
      function buttonClick(){
        var name = document.getElementById("name").value;
        var sex = (radio1.checked)?"男":"女";
        var mg = (marriage.checked)?"已婚":"未婚";
        document.getElementById("divTip").style.display = "block";
        document.getElementById("divTip").innerHTML = name+"<br>"+sex+"<br>"+mg;
      }
    </script>
  </head>
  <body>
    <div class="divFrame">
      <div class="divTitle">请完善以下信息</div>
      <div class="divContent">
        姓名：<input id="name" type="text" class="txetCss"><br>
        性别：<input id="radio1" type="radio" name="man" value="男">男
             <input id="radio2" type="radio" name="woman" value="女">女<br>
        婚否：<input id="marriage" type="checkbox">
        <div class="divButton">
          <input id="button1" type="button" value="提交" class="buttonCss" onclick="buttonClick()">
        </div>
      </div>
    </div>
    <div id="divTip" class="divTip"></div>
  </body>
</html>

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo1-4(2)操作jQuery对象</title>
    <style>
      .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}
      .textCss{border:solid 1px #ccc}
      .divButton{padding-top:5px}
      .divButton .buttonCss{border:solid 1px #535353;width:60px}
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.4.2/jquery.min.js"> 
    </script>
    <script>
      $(function(){
        $("#button1").click(function(){
          var name = $("#name").val();
          var sex = $("#radio1").is (":checked")?"男":"女";
          var mg = $("#marriage").is (":checked")?"已婚":"未婚";
          $("#divTip").css("display","block").html(name+"<br>"+sex+"<br>"+mg);
        })
      })
    </script>
  </head>
  <body>
    <div class="divFrame">
      <div class="divTitle">请完善以下信息</div>
      <div class="divContent">
        姓名：<input id="name" type="text" class="txetCss"><br>
        性别：<input id="radio1" type="radio" name="man" value="男">男
             <input id="radio2" type="radio" name="woman" value="女">女<br>
        婚否：<input id="marriage" type="checkbox">
        <div class="divButton">
          <input id="button1" type="button" value="提交" class="buttonCss" onclick="buttonClick()">
        </div>
      </div>
    </div>
    <div id="divTip" class="divTip"></div>
  </body>
</html>

控制页面CSS

🔻点击页面的一个div，改变背景色和文本内容，再次点击恢复

posted on 2021-09-21 10:02 KK的备忘录阅读(36) 评论(0) 收藏举报

刷新页面返回顶部