jQUery的基本操作总结

什么是jquery？

就是一个用js的插件库解决了原生dom的操作的兼容性和代码量

使用前需要引入它的插件

以下例子以

jquery-1.12.4.js 这个版本为例

一：jquery入口函数的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        // 1.第一种写法
        $(document).ready(function () {
            // alert("hello lnj");
        });

        // 2.第二种写法
        jQuery(document).ready(function () {
            // alert("hello lnj");
        });

        // 3.第三种写法(推荐)
        $(function () {
            // alert("hello lnj");
        });

        // 4.第四种写法
        jQuery(function () {
            alert("hello lnj");
        });
    </script>
</head>
<body>

</body>
</html>

二：jquery冲突问题

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
      // 1.释放$的使用权
      // 注意点: 释放操作必须在编写其它jQuery代码之前编写
      //         释放之后就不能再使用$,改为使用jQuery
      // jQuery原理.noConflict();
      // 2.自定义一个访问符号
      var nj = jQuery.noConflict();
      nj(function() {
        alert("hello lnj");
      });
    </script>
  </head>
  <body></body>
</html>

三：jquery核心函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        // $();/jQuery原理();就代表调用jQuery的核心函数

        // 1.接收一个函数
        $(function () {
            alert("hello lnj");
            // 2.接收一个字符串
            // 2.1接收一个字符串选择器
            // 返回一个jQuery对象, 对象中保存了找到的DOM元素
            var $box1 = $(".box1");
            var $box2 = $("#box2");
            console.log($box1);
            console.log($box2);
            // 2.2接收一个字符串代码片段
            // 返回一个jQuery对象, 对象中保存了创建的DOM元素
            var $p = $("<p>我是段落</p>");
            console.log($p);
            $box1.append($p);
            // 3.接收一个DOM元素
            // 会被包装成一个jQuery对象返回给我们
            var span = document.getElementsByTagName("span")[0];
            console.log(span);
            var $span = $(span);
            console.log($span);
        });
    </script>
</head>
<body>
<div class="box1"></div>
<div id="box2"></div>
<span>我是span</span>
</body>
</html>

四：jquery对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
      $(function() {
        /*
         * 1.什么是jQuery对象
         * jQuery对象是一个伪数组
         *
         * 2.什么是伪数组?
         * 有0到length-1的属性, 并且有length属性,其实就是一个对象
         */
        var $div = $("div");
        console.log($div);
        console.log($div[0].innerText);

        var arr = [1, 3, 5];
        console.log(arr);
      });
    </script>
  </head>
  <body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
  </body>
</html>

五：静态方法和实例方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script>
      // 1.定义一个类
      function AClass() {}
      // 2.给这个类添加一个静态方法
      // 直接添加给类的就是静态方法
      AClass.staticMethod = function() {
        alert("staticMethod");
      };
      // 静态方法通过类名调用
      AClass.staticMethod();

      // 3.给这个类添加一个实例方法
      AClass.prototype.instanceMethod = function() {
        alert("instanceMethod");
      };
      // 实例方法通过类的实例调用
      // 创建一个实例(创建一个对象)
      var a = new AClass();
      // 通过实例调用实例方法
      a.instanceMethod();
      a.staticMethod(); //报错，静态方法不能通过实例方法调用
    </script>
  </head>
  <body></body>
</html>

jQUery的基本操作总结

相关推荐