jquery使用全解

发布于 2015-04-26 13:59:56 | 141 次阅读 | 评论: 0 | 来源: 网友投递

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

链式编程。...方法多，属性无法得到对象进行链式。vs10自动完成、书籍锋利的jQuery

vsdoc有智能提示开发时候用，开发完之后，换成min压缩版的。

经验：打开网站文件夹。可以把vs网站上的解决方案另存到和网站文件夹同一个文件夹中，直接打开.sln就能打开同一文件夹中的网站。

Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。文档流。body可能很小哦可以就包含一个层..，不能把document当成body。

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {//$(document).ready(function(){ ... })
            alert(‘000‘);
        })//最先执行，DOM元素创建完成之后就会执行，不管js css 图片加载的事情。
        window.onload = function () { alert("111"); } //不会执行！！！！onload只能注册一次。 在前面js介绍中讲述了追加方法；
        window.onload = function () { alert("222"); } //js css 图片加载完成才执行
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    ddd
    </div>
    </form>
</body>
</html>

$(function(){}),onload执行区别

常用方法

1,修改（行内）样式 style="‘background‘:‘red;....‘"2，类样式 .m{}

//兄弟元素
$("#d1").siblings().css("background-color", "red"); //获取兄弟节点sibling()之后也是jquery对象.链式
$("#d1").siblings("input").css("background-color", "green"); // input选择器,也可以是id

//后面兄弟元素
$("#d1").next().css("background-color", "green"); //获取第一个兄弟节点。紧挨着的兄弟节点
$("#d1").nextAll("input").css("background-color", "green"); //获取之后的符合input选择器的所有兄弟节点
$("#d1").nextAll("#i2").css("background-color", "gray");

//前面兄弟节点
$("#d2").prev("div").css("background-color", "gray"); //第一个
$("#d2").prevAll().css("background-color", "gray"); //所有
$("#d2").prevAll("div").css("background-color", "gray"); //所有符合div selector

//子元素
$("#d1").children("#z1,#z2").attr("value", "内容");
//父元素
$("#z1").parent().css("background", "gray");

兄弟前后一多元素$,父子元素对应jquery方法

<script type="text/javascript">
$(function () {
    $("#d1").css("background", "red"); //red也有双引号 修改样式
    alert($("#d1").css("background")); //获取样式
    $("d2").css("background", $("#d1").css("background"));
    $("#i1").val("2222"); //写val()
    var v = $("#i1").val(); //读val()
    alert(v);

    $("#d2").text("p标签的内容text而不是val"); //向div p但不能向input写文本 text()屏蔽了ie firefox的不同
    var t = $("#d2").text(); //读文本
    alert(t);

    //$("#i1").text("p标签的内容text而不是val")//不能给input用text()写。
    $("#d3").html("p标签的内容text而不是val"); //写文本


    $("#d4").html("<input type=‘text‘/>"); //html()可以向div写内容，也可以写节点

    $("#d4")[0].innerText = "包装集【0】转化成dom对象"; //jquery中，js对象点不出js对用的属性等成员.
    $("#d4")[0].innerHTML = "包装集【0】转化成dom对象";
});
window.onload = function () {
    var d = document.getElementById("d4");
    d.innerText = "0000"; //innerText属性在Firefox不能用，点不出来
    d.innerHTML = "11111";

    var i = document.getElementById("i1");
    i.value = "111111111"; //给input文本框写值

    var $div = $("d"); //将一个dom对象转换成一个jquery对象$(dom)
    $div.text("111"); ////js中，jquery对象能点出js对用的属性等成员.
    $div.html("1111");
    
};

</script>

Jquery[css() val() text() html()] js[innerText innerHTML value] 及jquery和dom对象转化。div p和input的读写值

<style type="text/css">
.m
{
    background-color: Red;
}
.n
{
    width: 400px;
}
.l
{
    filter: gray;
}
</style>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
    //            //css()和attr()
    //            $("#d2").attr("style", "background:green;width:100px;height:200px");
    //            $("#d2").attr({ "style": "background:green;width:100px;height:200px" });



    //            //css() attr()为style多个值赋值，用到json
    //            $(‘#d2‘).css({ ‘background-color‘: ‘red‘, width: 100, height: 200 }); //赋值
    //            //获取那个属性，带上对应key
    //            alert($("#d2").css(‘background-color‘));
    //            $("#d2").attr({ "style": "background:green;width:100px;height:200px" });


    //            //css()不能自定义个属性，生成style=”“，不能加进去的
    //            //$("#d2").css(‘abcc‘, ‘asdfd‘); //错误
    //            //attr()是能加进去的
    //            $("#d2").attr(‘abcc‘, ‘asdfd‘);


    //            //css()方法中backgroundColor一般第2个首字母大写，和style属性background-color不一样
    //            //但是验证background-color是行的，backgroundcolor不行。看jquery源码有正则处理

    //            $(‘#d2‘).css(‘backgroundColor‘, ‘red‘);
    //            $(‘#d2‘).css(‘background-color‘, ‘red‘);

    //            //div没有bgcolor属性，body中有
    //            // $(‘#d2‘).css(‘bgcolor‘, ‘red‘); //这种是错误的 style="bgcolor:red;...."
    //            $(‘#d2‘).css(‘bgcolor‘, ‘red‘);


    //改变类样式，  没有点.....只写类样式的名字
    $("#d2").attr("class", "m"); //
    //追加类样式
    $("#d2").addClass("n"); // class="m n"
    //删除类样式
    $("#d2").removeClass("n");
    //切换（存在样式，去掉，没有样式添加） 点击再点的时候
    $("#btnMis").click(function () {
        $("body").toggleClass("m"); //ie反应慢  在google检验
        if ($("body").hasClass("m")) {
            $("#btnMis").val("关灯")
        }
        else {
            $("#btnMis").val("开灯")
        }
    })


})

</script>

css() attr()区别 json数据。add/remove/has/toggle/Class()

选择器

//$("p.intro") 选取所有 class="intro" 的 <p> 元素

//$("p#demo") 选取 id="demo" 的第一个 <p> 元素。

//相对定位,在$对象中查找 $()选择之后都编程jquery对象

//选择器的组合都在“”内完成。而相对定位$("选择器组合"，$对象)

<script type="text/javascript">
$(function () {
    //相对定位,在$对象中查找  $()选择之后都编程jquery对象

    //基本
    //类，id 元素标签(节点名 p div input)
    $(".i5").val("111");
    $("#i1").css("background-color", "red");
    $("input").attr("value", "11111111111111"); //注意不是表单选择器,：input虽然功能结果一样
    $(":input").attr("value", "11111111111111");


    //层次 后代（空格 >）和兄弟（+ ~） 

    //子 子后代..."选择器 空格 选择器"
    $("form p").css("background", "red"); //空格  所有符和第2个选择器的元素    后代 子 子后代...
    $("#f p").css("background", "red");

    //>直接后代> "选择器 ＞ 选择器" >两边有木有空格都行
    //只在后代中找符合第二个选择器的元素,不能在子子后代..中找
    $("#f>p").text("tttttt"); //p中不能包含p html

    //兄弟
    //+之后的紧挨的第一个元素，如果紧挨的第一个元素 不符合选择器，就不会找到
    $("#i1 + #i3").val("mmm"); //这样就会找不到 紧挨着的符合选择器
    $("#i1 + #i2").val("mmm"); //这样行

    //兄弟
    //~之后的所有符合选择器的元素   从后面兄弟节点中找，后面兄弟节点子节点的元素即使符合，也选不中 
    $("#i1 ~ p").css("background", "red");


    //，复合选择器   CSS中也有复合选择器
    $("#i1,.i5,div").css("background", "blue")


    // $(":input:not(:first)").attr("value", "222");
})
</script>
</head>
<body>
    <input type="text" name="name" value=" " />
    <form action="/" method="post" id="f">
    <input type="text" name="name" value=" " id="i1" />
    <input type="text" name="name" value=" " id="i2" />
    <input type="text" name="name" value=" " id="i3" />
    <input type="button" name="name" value=" " id="i4" />
    <input type="button" name="name" value=" " class="i5" />
    <p id="p1" class="p">
        ppp1p1ppp1p1pppp1p1p1p1pp块元素占用一行
    </p>
    <div>
        <p>
            子子后代</p>
    </div>
    <p id="p2" class="p">
        p2pp2ppp2ppp2pppp2pp2pppp块元素占用一行
    </p>
    <input type="text" name="name" value=" " />
    </form>
</body>

Basic基本 Heirarchy 层次

//属性过滤器，多属性【】【】   开始^= 结尾$= 不等!=  含有*=
//代替后面的表单选择器
$("input[type=‘text‘]").val("阿斯达");
$("input[type=‘text‘][name=‘n2‘]").val("11111");
$("input[id=‘i1‘]").css("background", "green");
$("input[name^=‘n‘]").val("22222");
$("input[name$=‘2‘]").val("22222");
$("input[id!=‘i2‘]").val("22222");
$("input[name*=‘b‘]").val("22222"); //含有这个字母的都

Attribute属性过滤器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <style type="text/css">
        
    </style>
    <script type="text/javascript">
        $(function () {

            //表单选择器
            //:input 包括 <input> <checkbox><textarea> <select> <option><button>所有的表单元素  $("input")只获取<input>标签
            $(":input").css("background", "red");


            //$(":text") 和属性选择器$("input[type=text]")等价
            //：password  ：radio  ：checkbox   ：submit  ：image ：reset ：file ：hidden ：button
            // :diabled  :checked :selected   表单可以和限制条件一块使用。

            // 禁用的
            $("input[type=‘text‘]:disabled").css("background", "red");
            //选中 单选radio多选checkbox  为checked="checked"   下拉列表 的选象option selected="selected"
            $("input[type=checkbox]:checked").css("background", "red"); //浏览器不好观察
            $("input[type=checkbox]:checked").removeAttr("checked");
            $(":text:disabled[name!=i2]").css("background", "red");
            $("select option").css("background", "red");

            //单选 多选框包装集 需要each（function(){ this是这个包装集中每个DOM对象 }）  $对象.each  this表示DOM
            var i = "";
            $(":checkbox:checked").each(function () {
                i += $(this).val();
            })
            alert(i);



            alert($("input[type=checkbox]:checked:eq(1)").val());
            alert($(":checkbox:eq(1)").attr("checked")); //alert的true不是checked
            alert($(":checkbox:eq(1)").val());

            //给radio和check赋值val中val(["",""])
            //选中  2中方法
            $(":radio:eq(1)").attr("checked", "true");
            $(":radio:eq(1)").attr("checked", "checked"); //checked true都可以，一般用true，比如没选中 就fasle了对应的
            $(":radio:eq(1)").val(["mm"]); //可以给radio和checkbox的value用val([""])的方法赋值原来就存在的值，表示选中
            $(":checkbox[value=‘m‘]").val([‘m‘]);



        })
    </script>
</head>
<body>
    <input type="text" name="name" value=" " />
    <form action="/" method="post" id="f">
    <input type="text" name="n1" value=" " id="i1" />
    <input type="text" name="n2" value=" " id="i2" />
    <input type="text" name="n3" value=" " id="i3" />
    <input type="text" name="3nbbb" value=" " id="Text1" />
    <input type="button" name="n4" value=" " id="i4" />
    <input type="button" name="n5" value=" " class="i5" />
    <p id="p1" class="p">
        ppp1p1ppp1p1pppp1p1p1p1pp块元素占用一行
    </p>
    <div>
        <p>
            子子后代</p>
    </div>
    <p id="p2" class="p">
        p2pp2ppp2ppp2pppp2pp2pppp块元素占用一行
    </p>
    <input type="text" name="i1" value=" " disabled="disabled" />
    <input type="text" name="i2" value=" " disabled="disabled" />
    <input type="radio" name="r1" value="dd" />radio1单选
    <input type="radio" name="r1" value="mm" />radio2单选
    <input type="checkbox" name="c1" value="1 " checked="checked" />checkbox1多选
    <input type="checkbox" name="c1" value="2" checked="checked" />checkbox2多选
    <input type="checkbox" name="c1" value="3 " checked="checked" />checkbox3多选
    <input type="checkbox" name="c1" value="4 " />checkbox4多选
    <input type="checkbox" name="c1" value="m" />checkbox4多选
    <select>
        <option value="1">下拉1</option>
        <option value="2">下拉2</option>
    </select>
    </form>
</body>
</html>

Form：type ：disable checked一块表单过滤器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <title></title>
    <script type="text/javascript">
        //$("tr:first")               选择所有tr元素的第一个 
        //$("tr:last")                选择所有tr元素的最后一个                  
        //$("tr:even")               选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始） 
        //$("tr:odd")                选择所有的tr元素的第1，3，5... ...个元素 
        //$("td:eq(2)")             选择所有的td元素中序号为2的那个td元素 
        //$("td:gt(4)")             选择td元素中序号大于4的所有td元素 
        //$("td:ll(4)")              选择td元素中序号小于4的所有的td元素 
        //$(":header")
        //$("div:animated")
        $(function () {
            $(":text:first").css("background", "red");
            $(":text:last").css("background", "green");
            $(":text:not(:first)").val("11");
            $(":text:odd").css("width", "50px")
            $(":text:lt(1)").css("height","30px");
            $(":text:gt(7)").css("height", "30px");
            $(":text:eq(1)").css("height", "60px");

        })
        
    </script>
</head>
<body>
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
    <input type="text" name="name" value="" />
</body>
</html>

Basic Filter基本过滤器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--   $("div:contains(‘John‘)") 选择所有div中含有John文本的元素  
        $("div:has(p)")        选择所有含有p标签的div元素 
        $("td:empty")           选择所有的为空（也不包括文本节点）的td元素的数组
        $("td:parent")          选择所有的以td为父节点的元素数组 -->
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //            $("div:contains(‘李可‘)").css("background", "red");
            //            $("div:has(‘p‘)").css("background", "green");
            //               $(":text:empty").val(‘dasda‘);
            $("div:parent").css("background", "red");
        })
    </script>
</head>
<body>
    <div>
        李可是大牛
    </div>
    <div>
        李是可大牛
    </div>
    <div>
        大牛的可李
    </div>
    <div>
        <p>
            ppppp</p>
    </div>
    <div>
        <input type="text" name="name" value=" " />
    </div>
    <div>
    </div>
    <div>
        <br />
    </div>
    <div>
        2222
    </div>
    <input type="text" name="name" value=" " />
</body>
</html>

ContentFilter内从过滤器 has 标签 contains文本以标签为福标签的节点所有空标签

可视过滤器：hidden ：visible当成基本过滤器就好了

//后代过滤器不常用

append ..remove appendto 权限 bind() 注意一下。

$.each(json,function(){this表示json的一个键值对的值！！！ })

事件冒泡

从外到里

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //           mouseout 和mouseover都会有事件冒泡从外到里的事件冒泡
            var i = 0;
            //              $("#d1").mouseover(function () {
            //              i++;
            //              //$("#d1").text(i);// 大div 会把包含的小div去掉
            //              $("#d2").text(i);
            //              })
            //            $("#d1").mouseout(function () {
            //                i++;
            //                //$("#d1").text(i);// 大div 会把包含的小div去掉
            //                $("#d2").text(i);
            //            })


            //            mouseenter和mouseleave没有
            $("#d1").mouseenter(function () {
                i++;
                //$("#d1").text(i);// 大div 会把包含的小div去掉
                $("#d2").text(i);
            })
            $("#d1").mouseleave(function () {
                i++;
                //$("#d1").text(i);// 大div 会把包含的小div去掉
                $("#d2").text(i);
            })
        })
    </script>
</head>
<body>
    <div id="d1" style="width: 300px; height: 300px; border: 1px solid">
        <div id="d2" style="width: 100px; height: 100px; border: 1px solid">
        </div>
    </div>
</body>
</html>

Jquery中特别事件mouseover mouseout的外到里的事件冒泡

从里到外

技术分享

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.event
        $(function () {
            $("#d1").click(function () {
                alert("11");
            })
            $("#d2").click(function () {
                alert("22");
            })
            //            $("#d3").click(function () {
            //                alert("33"); //当内元素和外元素具有同样的事件，点击内元素，外元素也会执行 这就是从里到外的事件冒泡
            //            })


            //阻止外元素的事件执行
            $("#d3").click(function (e) {
                alert("33");
                //window.event.cancelBubble = true;//第一种方法。用js中的方法
                //return false;//第二种方法
                e.stopPropagation(); //第三种方法
            })
            //e事件的对象==鼠标 键盘的相关信息 比如鼠标的position 

        })
    </script>
</head>
<body>
    <div id="d1" style="width: 300px; height: 300px; border: 1px solid">
        <div id="d2" style="width: 200px; height: 200px; border: 1px solid">
            <div id="d3" style="width: 100px; height: 100px; border: 1px solid">
            </div>
        </div>
    </div>
</body>
</html>

具有相同事件。里元素会触发外元素的同一事件。以及取消从里到外冒泡事件的3中方法

阻断默认行为

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //            $("a").click(function () {
            //                alert("11");

            //            });
            $("a").click(function (e) {
                alert("11");
                //                return false; //中断，不再往下执行a标签的连接地址
                e.preventDefault();
            });

            $(":submit").click(function (e) {
                alert("不要action");
                //                return false;
                e.preventDefault();
            });
        })
    </script>
</head>
<body>
    <a href="http://www.cnblogs.com/leee/">a标签当按钮</a>
    <form action="http://www.cnblogs.com/leee/" method="post">
    <input type="submit" name="name" value="提交" />
    </form>
</body>
</html>

阻断a标签 submit的默认行为2种方法e.preventDefault return false

获取当前对象

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //            $("#d1,#d2,#d3").click(function () {

            //                //this是dom对象。用$转化成jquery对象。重点是执行谁的事件 this就是谁。监听事件的对象
            //                alert($(this).html());

            //            })
            //            $("#d1,#d2,#d3").click(function (e) {
            //                //e.target是触发事件的对象，由于引起冒泡的这个事件是由#d3触发的。所以只会弹出#d3的html
            //                alert($(e.target).html());
            //            })
            //e.target和this只在事件冒泡中有这点区分。其他的都一样


            //获取当前触发事件的对象
            //1 js：window.event.srcElement   但这个在Firefox中不支持，jquery用e.target解决了兼容
            //2，e.target 3，this
            $(":button").click(function () {
                //                alert(this.value);
                //                alert($(this).val());
                //                alert($(this).attr("value"));

                //                alert(event.srcElement.value);

            });
            $(":button").click(function (e) {
                alert(e.target.value);
            });
        })
    </script>
</head>
<body>
    <div id="d1" style="width: 300px; height: 300px; border: 1px solid">
        <div id="d2" style="width: 200px; height: 200px; border: 1px solid">
            <div id="d3" style="width: 100px; height: 100px; border: 1px solid">
            </div>
        </div>
    </div>
    <input type="button" name="name" value="点击" />
</body>
</html>

window.event.srcElement和e.target和this的获取。以及this和e.target在冒泡中的细小区分

事件：鼠标事件click dbclick mousedown mouseup mouseover mouseout mouseenter mouseleaver hover 键盘事件表单事件事件处理关联事件文档加载事件浏览器事件这里只说一下常用方法

e事件参数：一个层随鼠标位置移动

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        div
        {
            position: absolute;
        }
    </style>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript">        </script>
    <script type="text/javascript">
        //        $(function () {//$(document).ready(function(){ ... })
        //            //            alert($(document).text());
        //            //            alert($(document).text());
        //            alert($(‘window‘).html());
        //        })

        //             $(function () {//可以不用当document ready加载完成时候
        $(document).mousemove(function (e) {  //相当这个页面，在没加载好的document上，鼠标移动e事件就出现
            //document一开始（想想成html一开始出现就开始加载）

            $("div").css("top", e.pageY + "px").css("left", e.pageX + "px"); //pageX小写开始
            //            $("div").attr({"style":"top:"+e.pageY + "px"+";left:"+e.pageX + "px"})//也可以这种写法


            //            var v;
            //            alert(v.s)//调试浏览器f12的console报错
            //            $("div").attr("top", e.pageY + "px").attr("left", e.pageX + "px");//错误，把top left 错当成元素的一个属性值

        })
        //             })
        
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        ddd
    </div>
    </form>
</body>
</html>

不用$(function(){}),直接写$(document).mousemove() 复习“”attr() css() json""的用法

移动到小图片，显示大图

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style type="text/css">
      /*  .imgimport
        {
            width: 400px !important;
            height: 400px !important;
        }*/
        #tc
        {
            position: absolute;
            width: 450px;
            height: 450px;
            border: 1px,solid,red;
        }
    </style>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            //            $("img").each(function () {

            $("img").hover(function (e) {//事件用错，用成mousemove
                //动态创建div
                var divT = $("<div id=‘tc‘ ></div>"); //样式麻烦，动态生成的div也可以加样式表
                $("body").append(divT);//将这个div一定先添加到body中。因为position：absolute的元素也是从body分离出的。

                $bigpic = $("<img id=‘pp‘ src=" + $(this).attr(‘src‘) + "></img>");
                divT.append($bigpic);//先创造，后添加，一个等次一个等次的append。添加完 最后上样式。也可以添加完直接上样式

                $bigpic.css("width", "400px").css("height", "400px");
                //设置大图位置
                divT.css("top", e.pageY + "px").css("left", e.pageX + "px");


            }, function () {//鼠标离开，删除div
                var tc = $("#tc")
               // var p = $("#pp");
                tc.remove();
               // p.remove();
                //                $bigpic.remove();

            })
            //            })

        })
        
    </script>
    <title></title>
</head>
<body>
    <div>
        <img src="pic/图片1.jpg" width="100px" height="100px" />
        <img src="pic/图片2.jpg" width="100px" height="100px" />
    </div>
</body>
</html>

图片自己找

效果

技术分享

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        #d1
        {
            background-color: red;
            width: 200px;
            height: 200px;
        }
    </style>
    <!--<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>-->
    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(":button[value=show]").click(function () {//忘掉function()
                //                $("#d1").show();
                //                $("#d1").show("slow"); //fast200 normal 400  slow 600ms
                $("#d1").show(5000, function () {

                    var args = arguments; //overflow:hidden scroll visible防止div内的东西（文本）溢出div时做的事。下面有举例

                    alert("The paragraph is now hidden " + arguments); //f12浏览器有opacity0-1透明到完全不透明的渐变
                }); //vsdoc库并没有opacity透明度的改变，min和正常库有渐变的效果
            })// width: 156.06px; height: 156.63px; overflow: hidden; display: block; opacity: 0.777916
            $(":button[value=hide]").click(function () {
                // $("#d1").hide(); //设置style=“display：none”
                $("#d1").hide(1000);
            })
            $(":button[value=toggle]").click(function () {

                $("#d1").toggle(5000); //点击执行show()和hide()
            })
            $(":button[value=slideUp]").click(function () {

                $("#d1").slideUp(5000); //向上边框隐藏
            })
            $(":button[value=slideDown]").click(function () {

                $("#d1").slideDown(5000); ////向下边框显示
            })
            $(":button[value=slideToggle]").click(function () {

                $("#d1").slideToggle(5000);
            })
            $(":button[value=fadeOut]").click(function () {

                //  <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript">//带中文提示在jquery库渐变效果不能显示。
                $("#d1").fadeOut("slow"); //min 和正常库具有渐变效果
            })
            $(":button[value=fadeIn]").click(function () {

                $("#d1").fadeIn(1000); //渐变显示
            })
            $(":button[value=stop]").click(function () {

                $("#d1").stop(); //渐变显示
            })
        })
    </script>
</head>
<body>
    <!--显示隐藏  带有动画效果-->
    <div id="d1">
    </div>
    <input type="button" name="name" value="show" />
    <input type="button" name="name" value="hide" />
    <input type="button" name="name" value="toggle" /><br />
    <input type="button" name="name" value="slideUp" />
    <input type="button" name="name" value="slideDown" />
    <input type="button" name="name" value="slideToggle" /><br />
    <input type="button" name="name" value="fadeOut" />
    <input type="button" name="name" value="fadeIn" />
    <input type="button" name="name" value="stop" />
</body>
</html>

toggle(show hide ) slideToggle(slideUp slideDown) fadeIn渐显示fadeOut。 opacity 0-1 overflow：hidden scroll visible

<html>
<head>
<style type="text/css">
div 
{
background-color:#00FFFF;
width:150px;
height:150px;
overflow: scroll
}
</style>
</head>

<body>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>

<div>
这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
</div>
</body>

</html>

overflow常用div的内容溢出

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        div
        {
            border: 1px solid red;
            width: 300px;
            height: 300px;
            background: red;
        }
    </style>
    <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
    <script type="text/javascript">
        $(function () {
            $("div").click(function () {
                //div中的div没有style属性行内样式，不能更改
                //$("div").animate({ "style": "width:100px;height:100px" }, "slow", function () {
                $("div").animate({ "width": "100px", "height": "100px" }, "slow", function () {
                    alert("动画执行完成");
                })

            })
        })
    </script>
</head>
<body>
    <div>
    </div>
</body>
</html>

animate(),常用。就加载做什么..鼠标.做什么。。自习想一想步骤都能写出

全反选

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        //根据选项check判断全选是否被选中
        function checkSingle() {
            var isCk = true;
            $(":checkbox[name=‘name‘]").each(function () {
                if (!$(this).attr("checked")) {//有一个选项没有选中
                    isCk = false;
                    return false; //break.循环跳出   //return true 相当continue 跳出本次循环 继续下次循环
                }
            });
            $(":checkbox[value=‘c4‘]").attr("checked", isCk);

        }

        // $("input[type=checkbox][value=c4]").click(function () {
        //alert("1");
        $(function () {
            //另外的思路，当选中的个数小于选项的个数，全选 false    =true
            $(":checkbox[value=‘c4‘]").click(function () {//this点击的谁的结果集的DOM对象
                $(":checkbox[name=‘name‘]").attr("checked", $(this).attr("checked")); //jquery中的checked 是true来表示checked="checked"
            })


            //有一个选项没有选中，全选要取消
            //选项 全部选中，全选要选中
            //给选项checkedbox注册事件
            //为全部选中，全选要选中。循环结束做准备
            $(":checkbox[name=‘name‘]").click(checkSingle); //此写方法名，不带().只是注册，不是调用


            //反选
            $(":button[value=‘反选‘]").click(function () {
                $(":checkbox[name=‘name‘]").each(function () {//this each的谁的结果集的DOM对象
                    //对选项的状态取反
                    $(this).attr("checked", !$(this).attr("checked"));
                    checkSingle();

                });
            })
        })
    
    </script>
</head>
<body>
    <input type="checkbox" name="name" value="c1" />玩耍
    <input type="checkbox" name="name" value="c2" />睡觉
    <input type="checkbox" name="name" value="c3" />读书
   
    <input type="checkbox" name="ck"" value="c4" />全选
    <input type="button" name="fx" value="反选" />
</body>
</html>

全反选，根据选项checked true判断全选checked

jQuery javascript框架

常用方法

选择器

事件冒泡

阻断默认行为

获取当前对象

e事件参数：一个层随鼠标位置移动

移动到小图片，显示大图

效果

全反选

后端技术

前端技术

数据库

热门框架

常用IDE

其他