JQuery02

Posted 2021-01-15 yuyang123

学习了JQuery的核心函数

做了一个简单的练习

1、获取一个函数

2、接收一个字符串选择器

3、接收字符片段

4、接收一个DOM元素（document objcet model）文档对象模型

案例代码

$(function () {
            //1、接收一个函数
            // alert("hello nj")
            //    2、接收一个字符串选择器
            var $box1 = $(‘.box1‘);
            var $box2 = $(‘#box2‘);
            console.log($box1);
            console.log($box2);
            //  3、接收一个字符片段
            var $p =$("<p>我是一个P标签</p>")
            console.log($p);
            //append方法追加到box1后面
            $box1.append($p);
            //    4、接收一个DOM元素
            var span = document.getElementsByTagName("span")[0];
            console.log(span);
            //把DOM元素包装成一个对象返回给JQ
            var $span = $(span);
            console.log($span);


<div class="box1"></div>
<div id="box2"></div>
<span>我是span标签</span>
<p class="test">这是一个标签</p>

　　

静态方法和实例对象调用方法的两种形式

//静态方法和实例化调用
    //    1、定义一个类
        function AClass() {
            
        }

    //    2、静态方法
        AClass.staticMethod = function () {
            alert("staticMethod静态方法")
        }
        //直接使用类名调用静态方法
        AClass.staticMethod();

    //    2.1、实例化方法
        AClass.prototype.instractMethod =function () {

            document.write("实例化方法执行了")
        }

       // 3、通过实例化创建对象来调用非静态方法
       // 对象调用
       var a = new AClass();
        a.instractMethod();

　　

伪数组

 $(function () {
        //输出div的长度
        var $div = $("div");
        console.log($div);

        //满足条件，0-length-1就满足数组条件
        var arr = [1,2,3];
        console.log(arr);
    });

 

each和map循环

 var arr = [1,2,5,8,9,10,20];
        //伪数组
        var obj = {0:1,1:2,3:5,7:9,9:10,length:5};
    //    使用JS原生方式遍历数组
    //    第一个参数是value的下标索引
        arr.forEach(function (value,index) {
            console.log(index,value);
        });
        //遍历伪数组，条件满足0-length-1 原生不能遍历伪数组
        obj.forEach(function (value,index) {
            console.log(index,value);
        })

    //    使用JQuery遍历
            $.each(arr,function (value,index) {
                console.log(index,value);
            })

    //        遍历伪数组,使用JQ能够遍历伪数组，
        //    一般建议使用JQ
        /**
         * JQ语法格式
         * $.each(数组名,function(index(索引),value(值))函数名称)
         */
            $.each(obj,function (index,value) {
                console.log(index,value);
            })


//map 遍历数组的内容
         // arr.map(function (value, index, array) {
         //     console.log(index,value);
         // })
        //    map遍历伪数组
        /**
         * 原生JS的map和each都不能遍历伪数组
         */
            // obj.map(function (value, index, array) {
            //     console.log(index,value);
            // })

            //分隔符
            // var str = "----------------------------"
            // console.log("*********"+str+"**********");

        /**
         * 使用JQ方式的map进行遍历
         */

        // $.map(arr,function (value,index) {
        //     console.log(index,value);
        // })

        //JQ的map能遍历伪数组
        // $.map(obj,function (value,index) {
        //     console.log(index,value);
        // })


        /**
         * each与map遍历之间的区别
         *
         * each静态返回值遍历谁就是返回值
         * map默认返回一个空数组
         *
         * each不支持使用回调函数
         * map支持回调函数，并且可以对回调函数加以处理，返回组成一个新的数组
         *
         */
       var result1 =  $.map(arr,function (value,index) {
            console.log(index,value);
            return index+value;
        })

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

        console.log(result1);
        console.log(result2);

　

函数方法的几种判断方法

 var arr = [1,3,5,7,9];
        //伪数组
        var Array = {0:1,1:2,3:5,7:9,9:10,length:5};
        //定义一个对象
        var obj ={"name":"张三","age":25};
        //函数
        var f = function(){};
         //window对象
        var wind = window;

        /**
         * 判断是否为一个window对象
         * 返回结果为true/false
         */
       // var win = $.isWindow(wind);
       //  console.log("判定结果为:"+win);

        /**
         * 判断是否为一个数组
         * $.idArray();
         * 返回结果为true/false
         */
        // var array = $.isArray(arr);
        // console.log("判定结果为:"+array);

        /**
         *去掉空格
         * $,trim();
         */
        // var str = "       hello       "
        // var tim = $.trim(str);
        // console.log("----"+str+"----");
        // console.log("----"+tim+"----");

        /**
         * 判断是否为一个函数
         * $.idFunction()
         */

        var fun = $.isFunction(f);
        console.log("判定结果为:"+fun);

　　

JQuery的ready的暂停加载holdReady（）方法的使用

<script src="../js/jquery-1.10.2.js"></script>
    <script>

        /**
         * 暂停ready立即执行
         * JQ等DOM元素加载后立即执行 不等图片也加载完毕
         * 使用holdRaedy暂停理解执行
         * true为关闭，false开启
         */
        $.holdReady(true);
       $(document).ready(function () {
           alert("hahaha");
       })
    </script>
</head>
<body>
<button>点击返回readly</button>
<script>
         var but = document.getElementsByTagName("button")[0];
//         加载点击事件函数
        but.onclick =function () {
            // alert("执行redly")
        //开启暂停执行
            $.holdReady(false);
        }



</script>
</body>

　　

选择器

 $(function () {
            //    编写JQ代码

            /**
             * empty
             * 匹配所有不包含子元素和文本的标签
             * @type {jQuery|htmlElement}
             */
            var emp = $("div:empty");
            // console.log(emp);


            /**
             *parent
             * 找到有文本和子元素得知道元素
             */
            var pare = $(‘div:parent‘);
            // console.log(pare);

            /**
             * contains(text)
             * 匹配查找文本,查找指定内容的元素
             */
            var con = $(‘div:contains("是div")‘)
            // console.log(con);

            /**
             * has(selector)
             * 查找包含指定子元素的标签
             */
            var ha = $(‘div:has("span")‘)
            // console.log(ha);


        });

　　属性和属性节点

 $(function () {
             /**
              * 属性和属性节点
              * 1、什么是属性
              * 对象身上保存的变量
              *2、如何操作属性
              * 实例化对象
              * 对象.属性=参数
              * 对象[‘属性‘]=参数
              *3、属性节点
              * 编写HTML时，HTML添加的属性就是属性节点
              * 浏览器打开找到span这个DOM元素，展开就是属性
              * 3.1操作节点
              * DOM.setAttributes（‘dom属性‘,‘参数‘）；
              * DOM.getAttributes（）；
              *4、属性和属性节点的区别是什么
              * 任何元素都有属性，但是只有DOM才有属性节点
              */
          //    定义一个方法
             function Person() {
                 
             }

          //   实例化方法
             var p = new Person();
             // p.name="小薇";
             p[‘name‘]=‘鲜磊‘;
             //调用方法格式，对象.属性
             // console.log(p.name);
             // console.log(p[‘name‘]);

             var  span = document.getElementsByTagName("span")[0];
             //设置name的参数
             span.setAttribute("name","lnj");
             //获取name的值
             console.log(span.getAttribute(‘name‘));
         });

　　属性方法

 $(function () {
            //    编写JQ代码
             /**
              * attr(name|pro|key,val|fn)
              * 作用：可以设置属性的值
              * 可以传递一个参数,也可以传递两个参数
              * 如果是传递一个参数，代表获得节点的值
              * 如果传递两个参数，代表设置属性的值
              *
              * 注意点：
              * 获得：无论多少元素，只会返回第一个元素节点的值
              * 设置：找到多少元素就会设置多少元素
              * 设置：如果没有设置节点不存在，系统自动增加节点
              *
              */

             //返回第一个元素节点的值
             var span = $(‘span‘).attr("class");
             // console.log(span);
             //设置找到的所有元素节点的
             // var sqpn = $(‘span‘).attr(‘class‘,‘box‘)
             //增加一个元素节点
             // $("span").attr("name","abc");


         //    删除removeAttr(name)
         //    清楚所设置的节点元素
         //     $("span").removeAttr("class name")

             /**
              *  prop(n|p|k,v|f)1.6+
              *  使用方法和attr同样
              *
              *  注意点：
              *  prop可以操作扩展节点，还可以操作属性节点
              *  如果同时设置两个prop，后者会覆盖前者
              */
             $("span").prop("demo","nj1");
             //
             // $("span").prop("class","box")
             // $("span").prop("name","nj1")

         //    删除
         //
         //     $(‘span‘).removeProp("demo");

             //判断是否勾选
             console.log($("input").prop("checked"));//返回结果为true/false
             console.log($("input").attr("checked"));//返回结果为输入checked/undefined
         });

　　

attr与prop练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo4-节点练习</title>
    <script src="../js/jquery-1.10.2.js"></script>
    <script>
        $(function () {

        //1、获取button元素
       var but =  document.getElementsByTagName("button")[0];
        but.onclick = function () {
            //2、获取输入框的值
           var input =  document.getElementsByTagName("input")[0];
           var text = input.value;
            //attr获取DOM元素节点
            $("img").attr("src",text);
        }
        })


    </script>
</head>
<body>
<input type="text">
<button>点击切换图片</button>
<br>
<img src="https://www.baidu.com/img/bd_logo1.png?qua=high&where=super" >
</body>
</html>

　　

学习JQ会发现很多有趣的东西，希望在学习朋友和伙伴加油