jQuery---jQuery初体验

时间 2020-01-16 标签 jquery jquery 初体验

jQuery初体验

1. 引入jquery文件html

2. 入口函数标准jquery

jQuery优势总结 (对应的就是js的缺点)：

查找元素的方法多种多样，很是灵活
拥有隐式迭代特性，所以不须要手写for循环
彻底没有兼容性问题
实现动画很是简单，并且功能更增强大
代码简单粗暴

什么是jQuery?

jQuery的官网 http://jquery.com/ jQuery就是一个js库，使用jQuery的话，会比使用JavaScript更简单。函数

js库：把一些经常使用到的方法写到一个单独的js文件，使用的时候直接去引用这js文件就能够了。（animate.js、common.js）学习

咱们知道了，jQuery其实就是一个js文件，里面封装了一大堆的方法方便咱们的开发，其实就是一个增强版的common.js，所以咱们学习jQuery，其实就是学习jQuery这个js文件中封装的一大堆方法。动画

<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div {
      height: 200px;
      margin-bottom: 10px;
      background-color: #a43035;
      display: none;
    }
  </style>

  <!-- 1.引入jquery文件 -->
  <script src="jquery-1.12.4.js"></script>
  <script>
    //2. 入口函数的标准
    $(document).ready(function () {
      //获取对象，注册事件，把on去掉，是一个方法
      $("#btn1").click(function () {
        //隐式迭代：偷偷的遍历，jQuery会自动的遍历，不须要咱们遍历。
        $("div").show(1000);
      });
      $("#btn2").click(function () {
        $("div").text("我是内容");
      });
    });
  </script>

</head>

<body>

  <input type="button" value="btn1" id="btn1">
  <input type="button" value="设置内容" id="btn2">

  <div></div>
  <div></div>
  <div></div>


</body>

</html>