Web、移动开发之Web前端:(5)jQuery (上)

创建时间:2018/1/28 12:21:22
关键字:jQuery选择器、jQuery操作Dom、jQuery 遍历数组、jQuery事件绑定、jQuery处理事件冒泡、$(function(){})与window.onload

1、jQuery简介

网页前端技术可按功能划分为:html 提供内容,css提供美化,js提供控制。js基于dom编程就像C# 基于.NetFramwork框架及其类库编程。

而jQuery的作用则类似于SqlHelper这类更高级的封装。jQuery是一个优秀的Javascript框架,是轻量级的js库。

jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互,同时还提供了许多成熟的插件。

学习网址:http://www.php100.com/manual/jquery/

http://www.w3school.com.cn/jquery/

2、jQuery和DOM对象

2.1jQuery对象实现原理

jQuery中封装了window.$ = window.jQuery = $;

在引入了jquery之后,<script>节点内即可使用window.$或window.jQuery或$或jQuery,表示jQuery对象。

模拟jQuery对象内部实现:

        (function (window) {

            //定义匿名函数$

            var $ = function (id) {

                return document.getElementById(id);

            }

            window.$ = $;//把$赋给window对象下的$

        })(window); //传一个参数window 调用函数

 

        window.onload = function () {

window.$("d1").innerHTML = "abc";

//实现将window.document.getElementById("d1").innerHTML = "abc";简化为:$("d1").innerHTML = "abc";

        }

2.2 jQuery对象和DOM对象

jQuery对象是DOM对象的包装集。

jQuery对像和DOM对象分别使用各自的属性和方法。

如果需要使用另一种对像的属性和方法,可以转化成相应类型的对象。

 

      DOM对象转化成jQuery对象:$(DOM对象)

      jQuery对象转化成DOM对象:jQuery对象.get(index)或者jQuery对象[index]

2.2.1 DOM对象转化成jQuery对象

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script type="text/javascript">

        window.onload = function () {

//DOM对象及其属性和方法

            var div = document.getElementById("d1");

            div.innerText = "我是dom元素";

 

//把DOM对象转化成jQuery对象

var $div = $(div);

            $div.text("abc");

        }

</script>

2.2.2 jQuery对象转化成DOM对象

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>

<script type="text/javascript">

        $(function () {

//jQuery对象及jQuery提供的方法

var $div = $("#d1");

            $div.text("123123");

 

            //jQuery对象转化成dom对象

var div = $div.get(0); //  var div = $div[0];

            div.innerText = "bcd";

        })

</script>

3、$(function(){})与window.onload

$(funtion(){})是$(document).ready(function(){})的简写。

$是jQuery的简写,$或jQuery是jQuery里面的顶级对象。

3.1 执行时机

$(document).ready(function(){})在dom元素创建完毕就会触发,比window.onload要早执行。

window.onload要页面完全加载完毕才触发。比如图片,标签元素创建完毕并且完成图片的下载和加载到页面。

3.2 执行次数

$(funtion(){})可多次注册,每处注册的都会执行。window.onload只注册和执行一次。

 

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

<script type ="text/javascript">

        window.onload = function () {

            alert("window.onload,执行!");

        }

        $(document).ready(function () {

            alert("ready first!");

        })

        $(document).ready(function () {

            alert("ready again!");

        })

</script>

4、$.map(arr,fn)和$.each(arr,fn)

4.1$.map返回新的数组

$.map 对数组每个元素进行处理后,得到并返回新的数组。$.map有两个参数,arr(数组)和fn(函数)。其中fn在调用$.map方法时根据需要进行定义。

$.map方法内部对数组遍历,对遍历的每个元素,调用一次fn函数,生成新的元素。

整个方法将所有得到的新元素,组成一个数组返回。

var arr = [1, 3, 5, 7, 9];

        arr = $.map(arr, function (item) {return item * 2;});

 

//模拟$.map方法的定义

        function myMap(arr, fn) {

            var ret = [];

            varvalue;

            var length=arr.length;

            for (var i = 0; i < length; i++) {

                value = fn(arr[i]);

                if (value != null) {

                    ret[ret.length] = value;

                }

            }

            return ret;

        }

        //模拟$.map方法的调用

        var arr = [1, 3, 5, 7, 9];

        arr = myMap(arr, function (item) {return item * 2;});

4.2 $.each(arr,fn)遍历数组和字典

$.each遍历数组或字典遍历到每个元素,以该元素为参数,执行一次函数的功能。(不会返回)。

4.2.1 $.each(arr,fn)遍历数组

$.each有两个参数,arr(数组)和fn(函数)。其中fn在调用$.each方法时根据需要进行定义。

        var arr = [1, 2, 3];

        $.each(arr, function () {

            alert(this);

        });

4.2.2 $.each(dic,fn)遍历字典

$.each有两个参数,dic(字典)和fn(函数)。其中fn在调用$.each方法时根据需要进行定义。fn接收的参数可以是keyvalue或空,置空默认为包含键值对的整个对象

        var dic = { "name": "jk", "age": 18, "sex": "man" };

        //遍历字典键和值

$.each(dic, function (key,value) {

            alert (key+":"+value);

        });

//遍历字典键

        $.each(dic, function (key) {

            alert (key+":"+dic[key]);

        });

        $.each(dic, function () {

            alert(this);

        });

5、jQuery选择器

jQuery获取和包装DOM对象,除了使用$(DOM对象),还可以使用选择器。

5.1 基本和复合选择器

$(function () {

            $("#d1").css("background-color", "red"); //id选择器

            $(".bg").css("background-color", "green"); //类选择器

            $("p").css("background-color", "pink");//标签选择器

$("#d1,.bg,p").css("background-color", "pink"); //复合(即并列)选择器,同时选择多个或多种元素,用逗号分隔

        })

5.2层次选择器

$(function(){

$("#d1 p").css("background-color", "red");//包含选择器:子后代,子子后代的所有p标签元素,类似jQuery.find(selector)

$("#d1>p").css("background-color", "red");//子选择器:直接子后代,不包含孙子代以后的,类似jQuery.children(selector)

 

$("#d1 + div").css("background-color", "green");//之后紧邻的第一个同级div

$("#d1 ~ div").css("background-color", "pink");//之后所有的同级div

$("a ~ div").css("background-color", "pink");//之后所有的同级div

        })

5.3 简单选择器

$(function () {

            $("input:eq(3)").css("background-color", "red");//第3个

            $("input:lt(3)").css("background-color", "blue");//第3个之前的

            $("input:gt(3)").css("background-color", "green");//第3个之后的

            $("input:eq(1)").css("background-color", "red");

 

            $("input:even").css("background-color", "red"); //选择每个相隔的(偶数)

            $("input:first").css("background-color", "blue");//第1个

            $("input:last").css("background-color", "green");//最后1个

 

            $("input:not(:first):not(.cc):not(#pp):not(:last)").css("background-color", "blue");

        });

 

:first 选取第一个元素。$("div:first")选取第一个<div>

:last 选取最后一个元素。$("div:last")选取最后一个<div>

:not(选择器) 选取不满足“选择器”条件的元素,$("input:not(.myClass)")选取样式名不是myClass的<input>

:even、:odd,选取索引是奇数、偶数的元素:$("input:even")选取索引是奇数的<input>

:eq(索引序号)、:gt(索引序号)、:lt(索引序号) 选取索引等于、大于、小于索引序号的元素,比如$("input:lt(5)")选取索引小于5的<input>

$(":header")选取所有的h1……h6元素(*)

$("div:animated")选取正在执行动画的<div>元素。(*)

5.4属性过滤选择器表单选择器表单对象选择器

$("div[id]")选取有id属性

$("div[title=test]")选取title属性为test的元素

$("div[title!=test]")选取title属性不为test的元素

 

$(":input")匹配所有 input, textarea, select 和 button 元素

$(":text")匹配所有匹配所有的单行文本框

$(":checkbox")匹配所有复选框

 

$(":checkbox:checked")

$("select option:selected")

$("input:disabled")

$("input:enabled")

5.5简单选择器的综合应用:工资表

$(function () {

            //表头

            $("#salary tr:first").css("font-size", "28px");

            //最后一行

            $("#salary tr:last").css("color", "red");

            //前三行

            $("#salary tr:not(:first):lt(3)").css("font-size", "22px");

            //最后两行

            var index = $("#salary tr:not(:first):not(:last)").length - 3; //倒数第三行的索引

            $("#salary tr:not(:first):not(:last):gt(" + index + ")").css("color", "blue");

 

            var str = "#salary tr:not(:first):not(:last)";

            var bg;

            $(str + ":even").css("background-color", "yellow");

            $(str).mouseover(function () {

                bg = $(this).css("background-color");

                $(this).css("background-color", "red");

            });

            $(str).mouseout(function () {

                $(this).css("background-color", bg);

            });

 

           //工资求和

            //先获取要求和的tr集合

            //循环遍历每行,获取最后一个td

            //将得到的td内容转换为整数,加到sum中,循环结束后将sum付给最后一个td

            var rows = $(str);

            var sum = 0;

            for (var i = 0; i < rows.length; i++) {

                var td = $(str + ":eq("+i+")").children().get(2);

                sum += parseInt(td.innerHTML, 10);

            }

            $("#salary td:last").text("" + sum + "");

        });

6、jQuery事件处理

6.1 事件的注册

思路:$(who).when(what)

语法:$(DOM对象).事件(fn)或$(“选择器”).事件(fn)

示例:给想要的a标签注册事件文档是从html开始

        $("#mv a").click(function(){

            $("#pic").arr("src",$(this).attr("href"));

            return false;

        })

6.2 radio和checkbox控件的选中实现

        $(function () {

            $("input[value=radio]").click(function () {

                $("input[type = radio][name = sex]").val(["nan"]);

            });

            $("input[value=ckbox]").click(function () {

                $("input[type = checkbox]").val(["cf","ddd"]);

            });

        });

6.3 bind() one() 右键绑定及事件

<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>

<script type="text/javascript">

        $(function () {

            //1 bind 重复有效

            $("#sbind").click(function () {

                $("#btn").bind("click", function () {

                    alert("单一绑定!");

                })

            })

            //多个事件绑定,用json对象

            $("#bind").click(function () {

                $("#btn").bind({ "click": function () {

                    $("input[name = search]").val("多个事件绑定click成功!");

                },

                    "mouseover": function () {

                        $("input[name = search]").val("多个事件绑定mouseover成功!");

                    },

                    "mouseout": function () {

                        $("input[name = search]").val("");

                    }

                })

            })

            //2 one 绑定一次

            $("#one").click(function () {

                $("#btn").one({ "click":function () {

                        $("input[name = search]").val("绑定click一次!")

                        },

                        "mouseover": function () {

                        $("input[name = search]").val("绑定mouseover一次!");

                    },

                    "mouseout": function () {

                        $("input[name = search]").val("");

                    }

                })

            })

            //3 hover 相当于mouseover和mouseout两个事件,第三个及以后的事件无效

            $("#hover").click(function () {

                $("#btn").hover(

                function () {

                    $("input[name = search]").val("绑定hover1!")

                },

                function () {

                    $("input[name = search]").val("绑定hover2!");

                },

                function () {

                    $("input[name = search]").val("绑定hover3");

                },

                function () {

                    $("input[name = search]").val("绑定hover4...");

                }

                )

            })

            //4 toggle   click的循环,在所有点击事件中循环切换

            $("#toggle").click(function () {

                $("#btn").toggle(

                function () {

                    $("input[name = search]").val("绑定toggle1!")

                },

                function () {

                    $("input[name = search]").val("绑定toggle2!");

                    },

                function () {

                    $("input[name = search]").val("绑定toggle3");

                    },

                function () {

                     $("input[name = search]").val("绑定toggle4...");

                    }

                )

             })

             //5 unbind 解除绑定

             $("#unbind").click(function () {

                 $("#btn").unbind();

             })

            //解除指定的事件

             $("#unbindm").click(function () {

                 $("#btn").unbind("mouseover");

             })

     //6绑定右键菜单:

     $(this).find("a").contextMenu('MyMenu2',

     {

            bindings: {

                "addGroup": function (o) {

                 if (confirm("是否申请加入" + $(o).html())) {

                 $.ajax({

                        type: "post",

                        async: true,

                        dataType: "text",

                        url: "GroupAdmin/AddGroupRequest.aspx",

                        data: "FromGUID=" + myContactGuid + "&GroupGUID=" + $(o).attr("guid"),

                        success: function (data) {

                            alert("完成!");

                         },

                         error: function (XMLHttpRequest, textStatus, errorThrown) {

                            alert("请求失败!");

                        }

                  });

               }

        }

     })

</script>

6.4 mouseover、mouseout和hover()

mouseover触发事件冒泡(鼠标移到“#d1”后触发事件,移到“#d1”中的“#d11”范围内再次触发事件)

hover()实现tooltips效果:

<script type="text/javascript">

        $(function () {

            $("a").hover(function (e) {

                //动态创建tooltips的div

                var $div = $("<div id='d1'>详细内容</div>");

                //设置div的位置

  $div.css("left",e.pageX + "px").css("top",e.pageY + "px");

                $("body").append($div);

            }, function () {

                //鼠标离开,删除对象

                var $div = $("#d1");

                if ($div.length > 0) {

                    $div.remove();

                }

            })

        })

</script>

</head>

<body>

<a href="">淘宝</a><br />

<a href="">cnbeta</a><br />

<a href="">yahoo</a>

</body>

6.5 mouseenter和mouseleave  

mouseenter没有触发事件冒泡

<script type="text/javascript">

        $(function () {

            var num1 = 0;

            $("#d1").mouseover(function () {

                num1++;

                $("#d11").text(num1);

            })

            var num2 = 0;

            $("#d2").mouseenter(function () {

                num2++;

               $("#d22").text(num2);

            })

       })

</script>

6.6 mousemove(): 跟着鼠标走的图片

    $(document).mousemove(function (e) {

        var x = e.pageX;

        var y = e.pageY;

        $("#pic").css("top",y+"px").css("left",x+"px");

    });

6.7 click(): 点击表格改变样式

$("#tb tr").css("cursor", "pointer");

    $("tr").each(function () {

        $(this).click(function () {            

$(this).addClass("tb").siblings().removeClass("tb");

        });

    });

6.8取消事件冒泡

function stopBubble(e) {

// 如提供了事件对象,则是一个非IE浏览器
    if ( e && e.stopPropagation ) {
        e.stopPropagation();
    } else { 
    // 否则,使用IE的方式来取消事件冒泡
        window.event.cancelBubble = true;
    }

 

其他相关:

在事件响应函数中 return false 取消后续内容的执行,可以取消事件冒泡。

取消默认行为:e.preventDefault()可用来取消a标签的href 行为,submit的默认提交行为

                

<script type="text/javascript">

        $(function () {

            $("table,tr,td,p").click(function (e) {

               //触发事件的对象

                //alert($(e.target).html());

                //监听事件的对象

                alert($(this).html());

            })

            //    $("p").click(function (e) {

            //     alert("pppp");

                   e.stopPropagation();

//     //在事件响应函数中 return false 取消后续内容的执行,可以取消事件冒泡

            //     //return false;

            //    })

            $("#lnk").click(function (e) {

                alert("click");

                //除了a标签的href 还有submit的默认行为:表单的提交

                e.preventDefault();//该方法屏蔽了浏览器的不同

            })

            $(function () {

                $("#btn").click(function (e) {

                    //获取触发事件的对象

                   //alert(this.value);

                    //

                    //alert(event.srcElement.value);

                    alert(e.target.value);

                })

            })

        })

</script>

7、jQuery取值和赋值

获取或设置标签元素的内容用text() 和html()

获取或设置表单元素的值用val()

7.1 text()和html():获取或设置标签内容

html() 能解析标签,保留标签的html功能

text() 能转义标签存储,作为文本处理,显示为赋值的文本

$(function () {

            $("#d1").text("jQuery ");  //innerText

            $("#d1").html("<font color='red'>jQuery</font>");      //innerHTML

})

7.1.1text() 对标签转义存储

$("#text").text("<font color='red'>jQuery</font>真好用");

        alert($("#text ").text()); //<font color='red'> jQuery </font>真好用

alert($("#text").html());//<font color='red'> jQuery </font>真好用

7.1.2 html()对标签原样存储

$("#html").html("<font color='red'> jQuery </font>真好用");

alert($("#html").text()); //jQuery真好用(过滤处理不了的标签)

alert($("#html").html());//<FONT color=red> jQuery </FONT>真好用

7.2 val():获取或设置表单元素的值

$("#txt").val()//获得value

$("#btn").val("Send")//修改value

val()和parseFloat ()实现计算器

$(function () {

            $("input[name=add]").click(function () {

                var n1 = parseFloat($("input[name=num1]").val());

                var n2 = parseFloat($("input[name=num2]").val());

                var sum = n1 + n2;

                $("input[name=sum]").val(sum);

            });

        })

8、jQuery处理属性值

8.1 attr()、removeAttr()的基本使用

使用attr()方法读取或者设置元素的属性

对于JQuery没有封装的属性(所有浏览器没有差异的属性)用attr进行操作。

8.1.1 获取元素属性,通过键

alert($("#alink").attr("href"));

8.1.2 设置元素属性,通过键值对

$("#alink").attr("href", "http://www.rupeng.com");

8.1.3 移除元素的属性通过键

$(function () {

$("#btn").click(function () {

$("#alnk").removeAttr("href");//去除属性

})

})

8.2 jQuery操作属性应用

8.2.1 控制图片显示

点击超链接时,切换图片显示。(将图片src属性值修改为该超链接href的值)

$(function () {

        $("#mv a").click(function(){

            $("#pic").attr("src",$(this).attr("href"));

            return false;

        })

    })

8.2.2实现checkbox全选反选

注:调用方法写方法名括号及参数singleCheck(); 当把方法作为参数传递时,只写方法名

<script type="text/javascript">

        $(function () {

            //全选和全不选

            $("input[name=checkAll]").click(function () {

                $("input[type=checkbox][name=hobby]").attr("checked", $(this).attr("checked"));

            })

            //反选及处理全选控件

            $("input[name=fanx]").click(function () {

                $("input[name=hobby]").each(function () {

                    $(this).attr("checked", !$(this).attr("checked"));

                })

                singleCheck();

            })

//修改子控件及处理全选控件

            $("input[name=hobby]").click(singleCheck);

        })

 

        function singleCheck() {

            var isAll = true;// 假定全选

            $("input[name=hobby]").each(function () {

                //如果有子控件未选中修改isAll

                if (!$(this).attr("checked")) {

                    isAll = false;

                    return false;

                }

            });

            $("#chkAll").attr("checked",isAll);//重置全选的checkbox

        }

</script>