JavaScript与jQuery的高级应用-优快云博客

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="Scripts/jquery-1.8.2.js"></script>
    <script type ="text/javascript">
      /*  (function selfRun(name) { //自执行函数，只有在括号内有效
            alert("自执行。。。。"+name);
        })("Hello World");
        //自执行函数不能在外部调用，因为它只执行一次,一般做初始化使用
        //方法的三种定义
        //1声明式写法
        function jj()
        { }
        //2匿名方法
        var j2 = function () { }
        //3实例化方法对象
        var j3 = new Function("alert('hello world')");*/

        /*
        $(function () {
            //根据ID获取JQ对象
            var divmsg = $("#divMsg");
            divmsg.css({ "border": "1px solid #0094ff", "height": "200px","background-color":"red"});//json方式的赋值 用一个大括号{}

            //动态添加标签
            $("<input type='button' value='动画'>").insertAfter(divmsg).click(function () {
                divmsg.slideUp(3000); //慢慢往上收
                $("#div1").fadeOut(3000);//慢慢变淡
                //Jq添加对象的方法和普通dom语法添加方法一样，方法内部的this都是触发事件的dom元素
            }); //添加在divmsg对象之后           

        });
        */
        $(function () {
            $("#btnTest").click(function () {
            //    alert($("span+input").length);//+选择器拿到的是紧挨着前面跟后面的中间不能有其它元素
                alert($("span.m").length); //$("span").size(); 基于元素的类选择器
            });

            var obj = new Object();
            obj.Cid = 1;
            obj.CName = "张三";
            obj.sayHi = function () {
                alert(this.CName);
            }
           // obj.sayHi();

            var obj2 = {
                Cid: 1,
                CName: "zhangsan",
                SayHi: function () {
                    alert(this.CName);
                }
            }
            // obj2.SayHi();

            var arr = [1, 2, 3, 4, 5];
            //map 作用1 ，遍历 数组 第一个参数是每次循环的数组，第二个是callback 方法
            $.map(arr, function (item,i) {
               // alert("Index:"+i+"Value:"+item);
            });
            //map 作用2 遍历数组返回新数组
          var newarr=$.map(arr, function (item,index) {
              return ++item;
          });
            //遍历对象的属性
          var obj3 = { id: 1, name: "jams" };
          $.map(obj3, function (value, key) {
              alert(key + ":" + value);
          });

          MyEach(obj3, function () {
              alert(key+":"+value+",this:"+this);
          });
         
        });
        function MyEach(obj, callback)
        {
            for (var key in obj3)
            {
                var value = obj3[key];
                //调用callback方法，传递两个参数的同时还为callback里的this赋值  。第一个参数是用来绑定上下文的，后面的参数是用来传参
                callback.apply(value, [key, value]);  //call,apply都是Function对象特有的方法。apply参数要放在数组内

                callback.call(value,key,value);   //call参数可以一个一个列出来
            }


        }
    </script>
</head>
<body>
    <div id="div1" style ="border:1px solid #0ff;background-color:blue;height :200px"></div>
    <div id="divMsg"></div>

    <span class ="m" >姓名：</span><label ></label><input type ="text" /><br />
    <span >姓名：</span><input type ="text" /><br />
    <span >姓名：</span><input type ="text" /><br />
    <input type ="button" value ="测试"id="btnTest" />
</body>
</html>
转载于:https://www.cnblogs.com/sumg/p/3787737.html