「jQuery」基础知识 核心函数jquery对象的理解对静态方法each,map进行练习

jQuery核心函数

  1. 接受一个函数

  2. 接受一个字符串

    1. 接受一个字符串选择器

      返回一个jquery对象对象中保存了dom元素

    2. 接受一个字符串代码片段

  3. 接收一个dom元素

    会被包装成一个jQuery在返回

「jQuery」基础知识 核心函数jquery对象的理解对静态方法each,map进行练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq核心函数-乔越博客</title>
    <!-- 引入jquery库 -->
    <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
    <script>
        //$()就代表调用jQuery核心函数
        //1. 接受一个函数
        $(function(){
            alert('hello');
            // 2.接受一个字符串
            //2.1 接受一个字符串选择器
            //返回一个jquery对象对象中保存了dom元素 
            var $div1 = $('.box1');
            var $div2 = $('#box2');
            console.log($div1);
            console.log($div2);
            //2.2接受一个字符串代码片段
            var $p = $("<p>我是段落</p>");
            console.log($p);
            $div1.append($p);

            // 3.接收一个dom元素
            //会被包装成一个jQuery在返回
            var span = document.getElementsByTagName('span')[0];

            $span = $(span);
            console.log($span)
        })
    </script>
</head>
<body>
    <div class="box1"></div>
    <div id="box2"></div>
    <span>我是一个span</span>
</body>
</html>

jQuery对象

什么是jquery对象

jquery是一个伪数组

什么是伪数组

有0到length-1的属性,并且有length属性

「jQuery」基础知识 核心函数jquery对象的理解对静态方法each,map进行练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq对象-乔越博客</title>
    <!-- 引入jquery库 -->
    <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
    <script>
        // 入口函数
        $(function(){
            /*
            1.什么是jquery对象
                jquery是一个伪数组
            2.什么是伪数组
                有0到length-1的属性,并且有length属性
            */
            // 获取全部的div元素
            var $div = $('div');
            console.log($div);

            var arr = [1,2,4,67,3];
            console.log(arr)
        })

    </script>

</head>
<body>
    <div>div1</div>
    <div>div2</div>
    <div>div3</div>
    <div>div4</div>
</body>
</html>

实例方法和静态方法

原生js中的静态方法和实例方法

//    1.定义一个类
       function AClass(){

       }
    //    2.给这个类添加一个静态方法
    // 直接添加给类的静态方法
    AClass.staticMethod = function(){
        alert('staticMethod');
    }
    //静态方法的调用
    AClass.staticMethod();
    //  3.给这个类添加一个实例方法
    AClass.prototype.instanceMethod = function(){
        alert('instanceMethod');
    }
    //实例方法通过类的实例调用
    //创建一个实例(创建一个对象)
    var a = new AClass();
    //通过实例的调用方法
    a.instanceMethod();

原生each遍历和jQuery的区别

  1. 原生forEach 第一个参数为 元素 第二个参数为 索引 并且不可以遍历伪元素
  2. jQuery each 第一个参数为 索引 第二个参数为 元素 并且可以 遍历伪元素
        var arr = [1,3,4,5,67,7]
        // 第一个参数 元素
        // 第二个参数 索引
        //注意:原生foreach方法只能遍历数组,不能遍历伪数组
        arr.forEach(function(v,i){
            console.log(i,v)
        })
        // 伪数组
        var wei = {0:1,1:3,2:5}
        // 遍历
        // wei.forEach(function(v,i){
        //     console.log(i,v)
        //     // 报错
        // })

        // 1.利用 jQuery的each静态方法遍历数组
        // 第一个参数 索引
        // 第二个参数 元素
        $.each(arr,function(index,value){
            console.log(index,value)
        })
        console.log("-----------")
        // 注意点:jQuery each可以遍历伪数组
        $.each(wei,function(index,value){
            console.log(index,value)
        })

jQuery中map方法和原生map方法的区别

                // 数组
         var arr = [1,3,4,5,67,7]
         // 伪数组
        var wei = {0:1,1:3,2:5}
        // 1.用原生js的map遍历
        arr.map(function(value,index,array){
            // 参数为 元素 索引 数组
            console.log(index,value,array);
        })
        // map也是不可以遍历伪数组
        // wei.map(function(value,index,array){
        //     // 参数为 元素 索引 数组
        //     console.log(index,value,array);
        // })

        // jQuery调 map
        // 参数 数组 回掉函数(元素 索引)
        // jQuery可以遍历伪数组
        $.map(arr,function(value,index){
            console.log(index,value)
        })
        // 伪数组 可以遍历
        $.map(wei,function(value,index){
            console.log(index,value)
        })

        //jQuery中的map和each
        // 返回值 each返回数组遍历那个数组就返回谁
        // map 返回空数组 可以进行加工返回新的数组

       var ea =  $.each(arr,function(index,value){
            console.log(index,value)
        })
        console.log(ea)

其他静态方法

trim方法

去除字符串两端的空格

var str = "   stali   ";
// 这样打印是有空格的
console.log("---"+str+"---")
// 去掉空格
var res = $.trim(str);
// 没有空格了
console.log("---"+res+"---")

isWindow方法

$.isWindow() 函数用于判断指定参数是否是一个window窗口。

$.isWindow( object )

isArray方法

$.isArray()函数用于判断指定参数是否是一个数组。

$.isArray( object )

isFunction方法

$.isFunction()函数用于判断指定参数是否是一个函数。

**注意:**jQuery 1.3之后的版本,例如在 Internet Explorer 中,由浏览器提供的函数alert(),以及 DOM 元素方法(比如 getAttribute())将不被认为是函数。

$.isFunction( object )

holdReady方法

$.holdReady() 函数用于暂停或恢复.ready() 事件的执行。

注意:

  1. 该方法必须在文档靠前部分被调用,例如,在头部加载完 jQuery 脚本之后,立刻调用该方法。如果在 ready 事件已经被调用后再调用该方法,将不会起作用。
  2. 首先调用.holdReady(true)[调用后ready事件将被锁定]。当准备好执行ready事件时,调用.holdReady(true)[调用后ready事件将被锁定]。当准备好执行ready事件时,调用.holdReady(false)。
  3. 可以对 ready 事件添加多个锁定,每个锁定对应一次$.holdReady(false)[解锁]调用。ready 事件将在所有的锁定都被解除,并且页面也已经准备好的情况下被触发。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乔越博客</title>
    <!-- 引入jquery库 -->
    <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
    <script>
        // 抑制执行
        $.holdReady(true);
        $(document).ready(function(){
            alert('开始')
        });
    </script>
</head>
<body>
<button>ready事件</button>
<script>
    var ban = document.getElementsByTagName('button')[0];
    ban.onclick = function(){
        // 执行
        $.holdReady(false);
    }
</script>
</body>
</html>

资源下载

上一篇

「jQuery」内容选择器,属性和属性节点的练习操作css样式和文本样式