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

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

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

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

  1. <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4.  
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head runat="server">
  7.     <title></title>
  8.     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
  9.     <script type="text/javascript">
  10.         $(function () {//$(document).ready(function(){ ... })
  11.             alert('000');
  12.         })//最先执行，DOM元素创建完成之后就会执行，不管js css 图片加载的事情。
  13.         window.onload = function () { alert("111"); } //不会执行！！！！onload只能注册一次。 在前面js介绍中讲述了追加方法；
  14.         window.onload = function () { alert("222"); } //js css 图片加载完成才执行
  15.  
  16.     </script>
  17. </head>
  18. <body>
  19.     <form id="form1" runat="server">
  20.     <div>
  21.     ddd
  22.     </div>
  23.     </form>
  24. </body>
  25. </html>

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

常用方法

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

2016/08/16补充

children()函数只在当前jQuery对象匹配元素的所有子元素中查找，不会查找"孙子"以及更后代的元素。

find()函数只在当前jQuery对象匹配元素的所有后代元素中查找，包含查找"孙子"以及更后代的元素。

所以find()查找的就包含children()查找的，除非特殊只在孩子元素找，不在孙子等找。

  1. //所有子元素中查找，只从孩子元素中查找，不在孙子及以后查找
  2. // 这里的selector、selector1均表示任意的选择器
  3. $("selector").children("selector1");
  4. // 等价于
  5. $("selector > selector1");
  6.  
  7. $("selector").children( );
  8. // 等价于
  9. $("selector > *");
  10.  
  11. //所有后代元素,包括孩子、孙子、重孙子、、等
  12. // 这里的是selector、selector1均表示任意的选择器
  13. $("selector").find("selector1");
  14. // 等价于
  15. $("selector selector1");
  16.  
  17. //当前对象，不是包含的子元素的第一项！
  18. first()函数用于获取当前jQuery对象所匹配的元素中的第一个元素，并返回封装该元素的jQuery对象。
  19. $( "selector" ).first( );
  20. //等价于
  21. $( "selector:first" );
  22. //等价于
  23. $( "selector:eq(0)" );
  24. //等价于
  25. $( "selector" ).eq( 0 );

children()只从孩子元素，find()孩子，孙子所有后代，first( )当前对象，不是孩子，孙子

  1.   //兄弟元素
  2.             $("#d1").siblings().css("background-color", "red"); //获取兄弟节点sibling()之后也是jquery对象.链式
  3.             $("#d1").siblings("input").css("background-color", "green"); // input选择器,也可以是id
  4.  
  5.             //后面兄弟元素
  6.             $("#d1").next().css("background-color", "green"); //获取第一个兄弟节点。紧挨着的兄弟节点
  7.             $("#d1").nextAll("input").css("background-color", "green"); //获取之后的符合input选择器的所有兄弟节点
  8.             $("#d1").nextAll("#i2").css("background-color", "gray");
  9.  
  10.             //前面兄弟节点
  11.             $("#d2").prev("div").css("background-color", "gray"); //第一个
  12.             $("#d2").prevAll().css("background-color", "gray"); //所有
  13.             $("#d2").prevAll("div").css("background-color", "gray"); //所有符合div selector
  14.  
  15.             //子元素
  16.             $("#d1").children("#z1,#z2").attr("value", "内容");
  17.             //父元素
  18.             $("#z1").parent().css("background", "gray");

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

  1.     <script type="text/javascript">
  2.         $(function () {
  3.             $("#d1").css("background", "red"); //red也有双引号 修改样式
  4.             alert($("#d1").css("background")); //获取样式
  5.             $("d2").css("background", $("#d1").css("background"));
  6.             $("#i1").val("2222"); //写val()
  7.             var v = $("#i1").val(); //读val()
  8.             alert(v);
  9.  
  10.             $("#d2").text("p标签的内容text而不是val"); //向div p但不能向input写文本 text()屏蔽了ie firefox的不同
  11.             var t = $("#d2").text(); //读文本
  12.             alert(t);
  13.  
  14.             //$("#i1").text("p标签的内容text而不是val")//不能给input用text()写。
  15.             $("#d3").html("p标签的内容text而不是val"); //写文本
  16.  
  17.             $("#d4").html("<input type='text'/>"); //html()可以向div写内容，也可以写节点
  18.  
  19.             $("#d4")[0].innerText = "包装集【0】转化成dom对象"; //jquery中，js对象点不出js对用的属性等成员.
  20.             $("#d4")[0].innerHTML = "包装集【0】转化成dom对象";
  21.         });
  22.         window.onload = function () {
  23.             var d = document.getElementById("d4");
  24.             d.innerText = "0000"; //innerText属性在Firefox不能用，点不出来
  25.             d.innerHTML = "11111";
  26.  
  27.             var i = document.getElementById("i1");
  28.             i.value = "111111111"; //给input文本框写值
  29.  
  30.             var $div = $("d"); //将一个dom对象转换成一个jquery对象$(dom)
  31.             $div.text("111"); ////js中，jquery对象能点出js对用的属性等成员.
  32.             $div.html("1111");
  33.  
  34.         };
  35.  
  36.     </script>

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

  1.     <style type="text/css">
  2.         .m
  3.         {
  4.             background-color: Red;
  5.         }
  6.         .n
  7.         {
  8.             width: 400px;
  9.         }
  10.         .l
  11.         {
  12.             filter: gray;
  13.         }
  14.     </style>
  15.     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
  16.     <script type="text/javascript">
  17.         $(function () {
  18.             //            //css()和attr()
  19.             //            $("#d2").attr("style", "background:green;width:100px;height:200px");
  20.             //            $("#d2").attr({ "style": "background:green;width:100px;height:200px" });
  21.  
  22.             //            //css() attr()为style多个值赋值，用到json
  23.             //            $('#d2').css({ 'background-color': 'red', width: 100, height: 200 }); //赋值
  24.             //            //获取那个属性，带上对应key
  25.             //            alert($("#d2").css('background-color'));
  26.             //            $("#d2").attr({ "style": "background:green;width:100px;height:200px" });
  27.  
  28.             //            //css()不能自定义个属性，生成style=”“，不能加进去的
  29.             //            //$("#d2").css('abcc', 'asdfd'); //错误
  30.             //            //attr()是能加进去的
  31.             //            $("#d2").attr('abcc', 'asdfd');
  32.  
  33.             //            //css()方法中backgroundColor一般第2个首字母大写，和style属性background-color不一样
  34.             //            //但是验证background-color是行的，backgroundcolor不行。看jquery源码有正则处理
  35.  
  36.             //            $('#d2').css('backgroundColor', 'red');
  37.             //            $('#d2').css('background-color', 'red');
  38.  
  39.             //            //div没有bgcolor属性，body中有
  40.             //            // $('#d2').css('bgcolor', 'red'); //这种是错误的 style="bgcolor:red;...."
  41.             //            $('#d2').css('bgcolor', 'red');
  42.  
  43.             //改变类样式，  没有点.....只写类样式的名字
  44.             $("#d2").attr("class", "m"); //
  45.             //追加类样式
  46.             $("#d2").addClass("n"); // class="m n"
  47.             //删除类样式
  48.             $("#d2").removeClass("n");
  49.             //切换（存在样式，去掉，没有样式添加） 点击再点的时候
  50.             $("#btnMis").click(function () {
  51.                 $("body").toggleClass("m"); //ie反应慢  在google检验
  52.                 if ($("body").hasClass("m")) {
  53.                     $("#btnMis").val("关灯")
  54.                 }
  55.                 else {
  56.                     $("#btnMis").val("开灯")
  57.                 }
  58.             })
  59.  
  60.         })
  61.  
  62.     </script>

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

  1. <head runat="server">
  2.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3.     <title></title>
  4.     <script src="Scripts/jquery-1.7.1.js"></script>
  5.     <script type="text/javascript">
  6.         $(function () {
  7.             var ele = $(" <div id='insertDiv' style='width:200px;height:200px;background-color:green'></div>")
  8.             //$('#divdemo').append(ele);   //添加（1）
  9.             ele.appendTo($('#divdemo'));//向一个div添加（2）。创建一个动态创建的元素（1）
  10.             ele.text("aaa");//向$jquery对象写一句文字
  11.             ele.html("<div id='inserted2' style='width:100px;height:100px;background-color:blue'></div>")//动态添加一个元素，直接插入html（2）
  12.         })
  13.        // $(document).ready(function () { }) = $(function () { })//这里面的function可以写一个方法名（不带括号）
  14.         //$(document).ready(fun)  =$(fun)
  15.     </script>
  16. </head>
  17. <body>
  18.     <div id="divdemo" style="width: 400px; height: 400px; background-color: red">
  19.  
  20.     </div>
  21. </body>
  22. </html>

创建元素2种方式；附加元素2中方式； $(fun)=$(document).ready(fun)等同的推理（注意fun里面只写方法名，不带括号）

选择器

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

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

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

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

  1.      <script type="text/javascript">
  2.          $(function () {
  3.              //相对定位,在$对象中查找  $()选择之后都编程jquery对象
  4.  
  5.              //基本
  6.              //类，id 元素标签(节点名 p div input)
  7.              $(".i5").val("111");
  8.              $("#i1").css("background-color", "red");
  9.              $("input").attr("value", "11111111111111"); //注意不是表单选择器,：input虽然功能结果一样
  10.              $(":input").attr("value", "11111111111111");
  11.  
  12.              //层次 后代（空格 >）和兄弟（+ ~） 
  13.  
  14.              //子 子后代..."选择器 空格 选择器"
  15.              $("form p").css("background", "red"); //空格  所有符和第2个选择器的元素    后代 子 子后代...
  16.              $("#f p").css("background", "red");
  17.  
  18.              //>直接后代> "选择器 ＞ 选择器" >两边有木有空格都行
  19.              //只在后代中找符合第二个选择器的元素,不能在子子后代..中找
  20.              $("#f>p").text("tttttt"); //p中不能包含p html
  21.  
  22.              //兄弟
  23.              //+之后的紧挨的第一个元素，如果紧挨的第一个元素 不符合选择器，就不会找到
  24.              $("#i1 + #i3").val("mmm"); //这样就会找不到 紧挨着的符合选择器
  25.              $("#i1 + #i2").val("mmm"); //这样行
  26.  
  27.              //兄弟
  28.              //~之后的所有符合选择器的元素   从后面兄弟节点中找，后面兄弟节点子节点的元素即使符合，也选不中
  29.              $("#i1 ~ p").css("background", "red");
  30.  
  31.              //，复合选择器   CSS中也有复合选择器
  32.              $("#i1,.i5,div").css("background", "blue")
  33.  
  34.              // $(":input:not(:first)").attr("value", "222");
  35.          })
  36.      </script>
  37.  </head>
  38.  <body>
  39.      <input type="text" name="name" value=" " />
  40.      <form action="/" method="post" id="f">
  41.      <input type="text" name="name" value=" " id="i1" />
  42.      <input type="text" name="name" value=" " id="i2" />
  43.      <input type="text" name="name" value=" " id="i3" />
  44.      <input type="button" name="name" value=" " id="i4" />
  45.      <input type="button" name="name" value=" " class="i5" />
  46.      <p id="p1" class="p">
  47.          ppp1p1ppp1p1pppp1p1p1p1pp块元素占用一行
  48.      </p>
  49.      <div>
  50.          <p>
  51.              子子后代</p>
  52.      </div>
  53.      <p id="p2" class="p">
  54.          p2pp2ppp2ppp2pppp2pp2pppp块元素占用一行
  55.      </p>
  56.      <input type="text" name="name" value=" " />
  57.      </form>
  58.  </body>

Basic基本 Heirarchy 层次

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

Attribute属性过滤器

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
  6.     <style type="text/css">
  7.  
  8.     </style>
  9.     <script type="text/javascript">
  10.         $(function () {
  11.  
  12.             //表单选择器
  13.             //:input 包括 <input> <checkbox><textarea> <select> <option><button>所有的表单元素  $("input")只获取<input>标签
  14.             $(":input").css("background", "red");
  15.  
  16.             //$(":text") 和属性选择器$("input[type=text]")等价
  17.             //：password  ：radio  ：checkbox   ：submit  ：image ：reset ：file ：hidden ：button
  18.             // :diabled  :checked :selected   表单可以和限制条件一块使用。
  19.  
  20.             // 禁用的
  21.             $("input[type='text']:disabled").css("background", "red");
  22.             //选中 单选radio多选checkbox  为checked="checked"   下拉列表 的选象option selected="selected"
  23.             $("input[type=checkbox]:checked").css("background", "red"); //浏览器不好观察
  24.             $("input[type=checkbox]:checked").removeAttr("checked");
  25.             $(":text:disabled[name!=i2]").css("background", "red");
  26.             $("select option").css("background", "red");
  27.  
  28.             //单选 多选框包装集 需要each（function(){ this是这个包装集中每个DOM对象 }）  $对象.each  this表示DOM
  29.             var i = "";
  30.             $(":checkbox:checked").each(function () {
  31.                 i += $(this).val();
  32.             })
  33.             alert(i);
  34.  
  35.             alert($("input[type=checkbox]:checked:eq(1)").val());
  36.             alert($(":checkbox:eq(1)").attr("checked")); //alert的true不是checked
  37.             alert($(":checkbox:eq(1)").val());
  38.  
  39.             //给radio和check赋值val中val(["",""])
  40.             //选中  2中方法
  41.             $(":radio:eq(1)").attr("checked", "true");
  42.             $(":radio:eq(1)").attr("checked", "checked"); //checked true都可以，一般用true，比如没选中 就fasle了对应的
  43.             $(":radio:eq(1)").val(["mm"]); //可以给radio和checkbox的value用val([""])的方法赋值原来就存在的值，表示选中
  44.             $(":checkbox[value='m']").val(['m']);
  45.  
  46.         })
  47.     </script>
  48. </head>
  49. <body>
  50.     <input type="text" name="name" value=" " />
  51.     <form action="/" method="post" id="f">
  52.     <input type="text" name="n1" value=" " id="i1" />
  53.     <input type="text" name="n2" value=" " id="i2" />
  54.     <input type="text" name="n3" value=" " id="i3" />
  55.     <input type="text" name="3nbbb" value=" " id="Text1" />
  56.     <input type="button" name="n4" value=" " id="i4" />
  57.     <input type="button" name="n5" value=" " class="i5" />
  58.     <p id="p1" class="p">
  59.         ppp1p1ppp1p1pppp1p1p1p1pp块元素占用一行
  60.     </p>
  61.     <div>
  62.         <p>
  63.             子子后代</p>
  64.     </div>
  65.     <p id="p2" class="p">
  66.         p2pp2ppp2ppp2pppp2pp2pppp块元素占用一行
  67.     </p>
  68.     <input type="text" name="i1" value=" " disabled="disabled" />
  69.     <input type="text" name="i2" value=" " disabled="disabled" />
  70.     <input type="radio" name="r1" value="dd" />radio1单选
  71.     <input type="radio" name="r1" value="mm" />radio2单选
  72.     <input type="checkbox" name="c1" value="1 " checked="checked" />checkbox1多选
  73.     <input type="checkbox" name="c1" value="2" checked="checked" />checkbox2多选
  74.     <input type="checkbox" name="c1" value="3 " checked="checked" />checkbox3多选
  75.     <input type="checkbox" name="c1" value="4 " />checkbox4多选
  76.     <input type="checkbox" name="c1" value="m" />checkbox4多选
  77.     <select>
  78.         <option value="1">下拉1</option>
  79.         <option value="2">下拉2</option>
  80.     </select>
  81.     </form>
  82. </body>
  83. </html>

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
  5.     <title></title>
  6.     <script type="text/javascript">
  7.         //$("tr:first")               选择所有tr元素的第一个
  8.         //$("tr:last")                选择所有tr元素的最后一个
  9.         //$("tr:even")               选择所有的tr元素的第0，2，4... ...个元素（注意：因为所选择的多个元素时为数组，所以序号是从0开始）
  10.         //$("tr:odd")                选择所有的tr元素的第1，3，5... ...个元素
  11.         //$("td:eq(2)")             选择所有的td元素中序号为2的那个td元素
  12.         //$("td:gt(4)")             选择td元素中序号大于4的所有td元素
  13.         //$("td:ll(4)")              选择td元素中序号小于4的所有的td元素
  14.         //$(":header")
  15.         //$("div:animated")
  16.         $(function () {
  17.             $(":text:first").css("background", "red");
  18.             $(":text:last").css("background", "green");
  19.             $(":text:not(:first)").val("11");
  20.             $(":text:odd").css("width", "50px")
  21.             $(":text:lt(1)").css("height","30px");
  22.             $(":text:gt(7)").css("height", "30px");
  23.             $(":text:eq(1)").css("height", "60px");
  24.  
  25.         })
  26.  
  27.     </script>
  28. </head>
  29. <body>
  30.     <input type="text" name="name" value="" />
  31.     <input type="text" name="name" value="" />
  32.     <input type="text" name="name" value="" />
  33.     <input type="text" name="name" value="" />
  34.     <input type="text" name="name" value="" />
  35.     <input type="text" name="name" value="" />
  36.     <input type="text" name="name" value="" />
  37.     <input type="text" name="name" value="" />
  38.     <input type="text" name="name" value="" />
  39.     <input type="text" name="name" value="" />
  40.     <input type="text" name="name" value="" />
  41. </body>
  42. </html>

Basic Filter基本过滤器

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <!--   $("div:contains('John')") 选择所有div中含有John文本的元素
  6.         $("div:has(p)")        选择所有含有p标签的div元素
  7.         $("td:empty")           选择所有的为空（也不包括文本节点）的td元素的数组
  8.         $("td:parent")          选择所有的以td为父节点的元素数组 -->
  9.     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
  10.     <script type="text/javascript">
  11.         $(function () {
  12.             //            $("div:contains('李可')").css("background", "red");
  13.             //            $("div:has('p')").css("background", "green");
  14.             //               $(":text:empty").val('dasda');
  15.             $("div:parent").css("background", "red");
  16.         })
  17.     </script>
  18. </head>
  19. <body>
  20.     <div>
  21.         李可是大牛
  22.     </div>
  23.     <div>
  24.         李是可大牛
  25.     </div>
  26.     <div>
  27.         大牛的可李
  28.     </div>
  29.     <div>
  30.         <p>
  31.             ppppp</p>
  32.     </div>
  33.     <div>
  34.         <input type="text" name="name" value=" " />
  35.     </div>
  36.     <div>
  37.     </div>
  38.     <div>
  39.         <br />
  40.     </div>
  41.     <div>
  42.         2222
  43.     </div>
  44.     <input type="text" name="name" value=" " />
  45. </body>
  46. </html>

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

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

//后代过滤器不常用

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

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

事件冒泡

从外到里

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <title></title>
  5.      <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
  6.      <script type="text/javascript">
  7.          $(function () {
  8.              //           mouseout 和mouseover都会有事件冒泡从外到里的事件冒泡
  9.              var i = 0;
  10.              //              $("#d1").mouseover(function () {
  11.              //              i++;
  12.              //              //$("#d1").text(i);// 大div 会把包含的小div去掉
  13.              //              $("#d2").text(i);
  14.              //              })
  15.              //            $("#d1").mouseout(function () {
  16.              //                i++;
  17.              //                //$("#d1").text(i);// 大div 会把包含的小div去掉
  18.              //                $("#d2").text(i);
  19.              //            })
  20.  
  21.              //            mouseenter和mouseleave没有
  22.              $("#d1").mouseenter(function () {
  23.                  i++;
  24.                  //$("#d1").text(i);// 大div 会把包含的小div去掉
  25.                  $("#d2").text(i);
  26.              })
  27.              $("#d1").mouseleave(function () {
  28.                  i++;
  29.                  //$("#d1").text(i);// 大div 会把包含的小div去掉
  30.                  $("#d2").text(i);
  31.              })
  32.          })
  33.      </script>
  34.  </head>
  35.  <body>
  36.      <div id="d1" style="width: 300px; height: 300px; border: 1px solid">
  37.          <div id="d2" style="width: 100px; height: 100px; border: 1px solid">
  38.          </div>
  39.      </div>
  40.  </body>
  41.  </html>

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

从里到外

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <title></title>
  5.      <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
  6.      <script type="text/javascript">
  7.          window.event
  8.          $(function () {
  9.              $("#d1").click(function () {
  10.                  alert("11");
  11.              })
  12.              $("#d2").click(function () {
  13.                  alert("22");
  14.              })
  15.              //            $("#d3").click(function () {
  16.              //                alert("33"); //当内元素和外元素具有同样的事件，点击内元素，外元素也会执行 这就是从里到外的事件冒泡
  17.              //            })
  18.  
  19.              //阻止外元素的事件执行
  20.              $("#d3").click(function (e) {
  21.                  alert("33");
  22.                  //window.event.cancelBubble = true;//第一种方法。用js中的方法
  23.                  //return false;//第二种方法
  24.                  e.stopPropagation(); //第三种方法
  25.              })
  26.              //e事件的对象==鼠标 键盘的相关信息 比如鼠标的position 
  27.  
  28.          })
  29.      </script>
  30.  </head>
  31.  <body>
  32.      <div id="d1" style="width: 300px; height: 300px; border: 1px solid">
  33.          <div id="d2" style="width: 200px; height: 200px; border: 1px solid">
  34.              <div id="d3" style="width: 100px; height: 100px; border: 1px solid">
  35.              </div>
  36.          </div>
  37.      </div>
  38.  </body>
  39.  </html>

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

阻断默认行为

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
  6.     <script type="text/javascript">
  7.         $(function () {
  8.             //            $("a").click(function () {
  9.             //                alert("11");
  10.  
  11.             //            });
  12.             $("a").click(function (e) {
  13.                 alert("11");
  14.                 //                return false; //中断，不再往下执行a标签的连接地址
  15.                 e.preventDefault();
  16.             });
  17.  
  18.             $(":submit").click(function (e) {
  19.                 alert("不要action");
  20.                 //                return false;
  21.                 e.preventDefault();
  22.             });
  23.         })
  24.     </script>
  25. </head>
  26. <body>
  27.     <a href="http://www.cnblogs.com/leee/">a标签当按钮</a>
  28.     <form action="http://www.cnblogs.com/leee/" method="post">
  29.     <input type="submit" name="name" value="提交" />
  30.     </form>
  31. </body>
  32. </html>

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

获取当前对象

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
  6.     <script type="text/javascript">
  7.         $(function () {
  8.             //            $("#d1,#d2,#d3").click(function () {
  9.  
  10.             //                //this是dom对象。用$转化成jquery对象。重点是执行谁的事件 this就是谁。监听事件的对象
  11.             //                alert($(this).html());
  12.  
  13.             //            })
  14.             //            $("#d1,#d2,#d3").click(function (e) {
  15.             //                //e.target是触发事件的对象，由于引起冒泡的这个事件是由#d3触发的。所以只会弹出#d3的html
  16.             //                alert($(e.target).html());
  17.             //            })
  18.             //e.target和this只在事件冒泡中有这点区分。其他的都一样
  19.  
  20.             //获取当前触发事件的对象
  21.             //1 js：window.event.srcElement   但这个在Firefox中不支持，jquery用e.target解决了兼容
  22.             //2，e.target 3，this
  23.             $(":button").click(function () {
  24.                 //                alert(this.value);
  25.                 //                alert($(this).val());
  26.                 //                alert($(this).attr("value"));
  27.  
  28.                 //                alert(event.srcElement.value);
  29.  
  30.             });
  31.             $(":button").click(function (e) {
  32.                 alert(e.target.value);
  33.             });
  34.         })
  35.     </script>
  36. </head>
  37. <body>
  38.     <div id="d1" style="width: 300px; height: 300px; border: 1px solid">
  39.         <div id="d2" style="width: 200px; height: 200px; border: 1px solid">
  40.             <div id="d3" style="width: 100px; height: 100px; border: 1px solid">
  41.             </div>
  42.         </div>
  43.     </div>
  44.     <input type="button" name="name" value="点击" />
  45. </body>
  46. </html>

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

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

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

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
  2.  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml">
  5. <head runat="server">
  6.     <title></title>
  7.     <style type="text/css">
  8.         div
  9.         {
  10.             position: absolute;
  11.         }
  12.     </style>
  13.     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript">        </script>
  14.     <script type="text/javascript">
  15.         //        $(function () {//$(document).ready(function(){ ... })
  16.         //            //            alert($(document).text());
  17.         //            //            alert($(document).text());
  18.         //            alert($('window').html());
  19.         //        })
  20.  
  21.         //             $(function () {//可以不用当document ready加载完成时候
  22.         $(document).mousemove(function (e) {  //相当这个页面，在没加载好的document上，鼠标移动e事件就出现
  23.             //document一开始（想想成html一开始出现就开始加载）
  24.  
  25.             $("div").css("top", e.pageY + "px").css("left", e.pageX + "px"); //pageX小写开始
  26.             //            $("div").attr({"style":"top:"+e.pageY + "px"+";left:"+e.pageX + "px"})//也可以这种写法
  27.  
  28.             //            var v;
  29.             //            alert(v.s)//调试浏览器f12的console报错
  30.             //            $("div").attr("top", e.pageY + "px").attr("left", e.pageX + "px");//错误，把top left 错当成元素的一个属性值
  31.  
  32.         })
  33.         //             })
  34.  
  35.     </script>
  36. </head>
  37. <body>
  38.     <form id="form1" runat="server">
  39.     <div>
  40.         ddd
  41.     </div>
  42.     </form>
  43. </body>
  44. </html>

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

----

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script src="jquery-1.12.3.js"></script>
  5.   <meta charset="utf-8">
  6.   <meta name="viewport" content="width=device-width">
  7.   <title>JS Bin</title>
  8.   <style>
  9.     .div1{
  10.       width:100px;
  11.       height:100px;
  12.       background:green;
  13.       border:1px solid red;
  14.       position:absolute;/*绝对定位*/
  15.   }
  16.   </style>
  17.   <script>
  18.     $(function(){
  19.    var startPositionX=0,startPositionY=0;
  20.       $(".div1").mousedown(function(ev){
  21.         //ev,$对象不需要做兼容
  22.         //$中pageX（在document）和js中cleintX(可视区域)
  23.         //js中cleintX+scrollleft+scrollright的两边=$中pageX
  24.         startPositionX=ev.pageX-$(this).offset().left;//
  25.         startPositionY=ev.pageY-$(this).offset().top;
  26.         //document注册，不管如何移动，不会脱离鼠标。.div1会冒泡到。一直在触发，里面的函数一直在走。
  27.          $(document).mousemove(function(ev){
  28.             $(".div1").css('left',ev.pageX-startPositionX).css('top',ev.pageY-startPositionY);
  29.          })
  30.          $(document).mouseup(function(ev){
  31.            $(document).off();
  32.          })
  33.          return false；//最好阻止.div1的mousedown冒泡和默认。
  34.       })
  35.     })
  36.   </script>
  37. </head>
  38. <body>
  39.   <div class="div1"></div>
  40. </body>
  41. </html>

记录开始位置，更准确

还需要对移动的范围做控制，要不会出现滚动条。

移动到小图片，显示大图

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <style type="text/css">
  5.        /*  .imgimport
  6.          {
  7.              width: 400px !important;
  8.              height: 400px !important;
  9.          }*/
  10.          #tc
  11.          {
  12.              position: absolute;
  13.              width: 450px;
  14.              height: 450px;
  15.              border: 1px,solid,red;
  16.          }
  17.      </style>
  18.      <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
  19.      <script type="text/javascript">
  20.          $(function () {
  21.              //            $("img").each(function () {
  22.  
  23.              $("img").hover(function (e) {//事件用错，用成mousemove
  24.                  //动态创建div
  25.                  var divT = $("<div id='tc' ></div>"); //样式麻烦，动态生成的div也可以加样式表
  26.                  $("body").append(divT);//将这个div一定先添加到body中。因为position：absolute的元素也是从body分离出的。
  27.  
  28.                  $bigpic = $("<img id='pp' src=" + $(this).attr('src') + "></img>");
  29.                  divT.append($bigpic);//先创造，后添加，一个等次一个等次的append。添加完 最后上样式。也可以添加完直接上样式
  30.  
  31.                  $bigpic.css("width", "400px").css("height", "400px");
  32.                  //设置大图位置
  33.                  divT.css("top", e.pageY + "px").css("left", e.pageX + "px");
  34.  
  35.              }, function () {//鼠标离开，删除div
  36.                  var tc = $("#tc")
  37.                 // var p = $("#pp");
  38.                  tc.remove();
  39.                 // p.remove();
  40.                  //                $bigpic.remove();
  41.  
  42.              })
  43.              //            })
  44.  
  45.          })
  46.  
  47.      </script>
  48.      <title></title>
  49.  </head>
  50.  <body>
  51.      <div>
  52.          <img src="pic/图片1.jpg" width="100px" height="100px" />
  53.          <img src="pic/图片2.jpg" width="100px" height="100px" />
  54.      </div>
  55.  </body>
  56.  </html>

图片自己找

效果

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.  <html xmlns="http://www.w3.org/1999/xhtml">
  3.  <head>
  4.      <title></title>
  5.      <style type="text/css">
  6.          #d1
  7.          {
  8.              background-color: red;
  9.              width: 200px;
  10.              height: 200px;
  11.          }
  12.      </style>
  13.      <!--<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
  14.      <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>-->
  15.      <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
  16.      <script type="text/javascript">
  17.          $(function () {
  18.              $(":button[value=show]").click(function () {//忘掉function()
  19.                  //                $("#d1").show();
  20.                  //                $("#d1").show("slow"); //fast200 normal 400  slow 600ms
  21.                  $("#d1").show(5000, function () {
  22.  
  23.                      var args = arguments; //overflow:hidden scroll visible防止div内的东西（文本）溢出div时做的事。下面有举例
  24.  
  25.                      alert("The paragraph is now hidden " + arguments); //f12浏览器有opacity0-1透明到完全不透明的渐变
  26.                  }); //vsdoc库并没有opacity透明度的改变，min和正常库有渐变的效果
  27.              })// width: 156.06px; height: 156.63px; overflow: hidden; display: block; opacity: 0.777916
  28.              $(":button[value=hide]").click(function () {
  29.                  // $("#d1").hide(); //设置style=“display：none”
  30.                  $("#d1").hide(1000);
  31.              })
  32.              $(":button[value=toggle]").click(function () {
  33.  
  34.                  $("#d1").toggle(5000); //点击执行show()和hide()
  35.              })
  36.              $(":button[value=slideUp]").click(function () {
  37.  
  38.                  $("#d1").slideUp(5000); //向上边框隐藏
  39.              })
  40.              $(":button[value=slideDown]").click(function () {
  41.  
  42.                  $("#d1").slideDown(5000); ////向下边框显示
  43.              })
  44.              $(":button[value=slideToggle]").click(function () {
  45.  
  46.                  $("#d1").slideToggle(5000);
  47.              })
  48.              $(":button[value=fadeOut]").click(function () {
  49.  
  50.                  //  <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript">//带中文提示在jquery库渐变效果不能显示。
  51.                  $("#d1").fadeOut("slow"); //min 和正常库具有渐变效果
  52.              })
  53.              $(":button[value=fadeIn]").click(function () {
  54.  
  55.                  $("#d1").fadeIn(1000); //渐变显示
  56.              })
  57.              $(":button[value=stop]").click(function () {
  58.  
  59.                  $("#d1").stop(); //渐变显示
  60.              })
  61.          })
  62.      </script>
  63.  </head>
  64.  <body>
  65.      <!--显示隐藏  带有动画效果-->
  66.      <div id="d1">
  67.      </div>
  68.      <input type="button" name="name" value="show" />
  69.      <input type="button" name="name" value="hide" />
  70.      <input type="button" name="name" value="toggle" /><br />
  71.      <input type="button" name="name" value="slideUp" />
  72.      <input type="button" name="name" value="slideDown" />
  73.      <input type="button" name="name" value="slideToggle" /><br />
  74.      <input type="button" name="name" value="fadeOut" />
  75.      <input type="button" name="name" value="fadeIn" />
  76.      <input type="button" name="name" value="stop" />
  77.  </body>
  78.  </html>

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

  1. <html>
  2. <head>
  3. <style type="text/css">
  4. div
  5. {
  6. background-color:#00FFFF;
  7. width:150px;
  8. height:150px;
  9. overflow: scroll
  10. }
  11. </style>
  12. </head>
  13.  
  14. <body>
  15. <p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
  16.  
  17. <div>
  18. 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。默认值是 visible。
  19. </div>
  20. </body>
  21.  
  22. </html>

overflow常用div的内容溢出

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <style type="text/css">
  6.         div
  7.         {
  8.             border: 1px solid red;
  9.             width: 300px;
  10.             height: 300px;
  11.             background: red;
  12.         }
  13.     </style>
  14.     <script type="text/javascript" src="Scripts/jquery-1.4.1-vsdoc.js"></script>
  15.     <script type="text/javascript">
  16.         $(function () {
  17.             $("div").click(function () {
  18.                 //div中的div没有style属性行内样式，不能更改
  19.                 //$("div").animate({ "style": "width:100px;height:100px" }, "slow", function () {
  20.                 $("div").animate({ "width": "100px", "height": "100px" }, "slow", function () {
  21.                     alert("动画执行完成");
  22.                 })
  23.  
  24.             })
  25.         })
  26.     </script>
  27. </head>
  28. <body>
  29.     <div>
  30.     </div>
  31. </body>
  32. </html>

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

全反选

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title></title>
  5.     <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
  6.     <script type="text/javascript">
  7.         //根据选项check判断全选是否被选中
  8.         function checkSingle() {
  9.             var isCk = true;
  10.             $(":checkbox[name='name']").each(function () {
  11.                 if (!$(this).attr("checked")) {//有一个选项没有选中
  12.                     isCk = false;
  13.                     return false; //break.循环跳出   //return true 相当continue 跳出本次循环 继续下次循环
  14.                 }
  15.             });
  16.             $(":checkbox[value='c4']").attr("checked", isCk);
  17.  
  18.         }
  19.  
  20.         // $("input[type=checkbox][value=c4]").click(function () {
  21.         //alert("1");
  22.         $(function () {
  23.             //另外的思路，当选中的个数小于选项的个数，全选 false    =true
  24.             $(":checkbox[value='c4']").click(function () {//this点击的谁的结果集的DOM对象
  25.                 $(":checkbox[name='name']").attr("checked", $(this).attr("checked")); //jquery中的checked 是true来表示checked="checked"
  26.             })
  27.  
  28.             //有一个选项没有选中，全选要取消
  29.             //选项 全部选中，全选要选中
  30.             //给选项checkedbox注册事件
  31.             //为全部选中，全选要选中。循环结束做准备
  32.             $(":checkbox[name='name']").click(checkSingle); //此写方法名，不带().只是注册，不是调用
  33.  
  34.             //反选
  35.             $(":button[value='反选']").click(function () {
  36.                 $(":checkbox[name='name']").each(function () {//this each的谁的结果集的DOM对象
  37.                     //对选项的状态取反
  38.                     $(this).attr("checked", !$(this).attr("checked"));
  39.                     checkSingle();
  40.  
  41.                 });
  42.             })
  43.         })
  44.  
  45.     </script>
  46. </head>
  47. <body>
  48.     <input type="checkbox" name="name" value="c1" />玩耍
  49.     <input type="checkbox" name="name" value="c2" />睡觉
  50.     <input type="checkbox" name="name" value="c3" />读书
  51.  
  52.     <input type="checkbox" name="ck"" value="c4" />全选
  53.     <input type="button" name="fx" value="反选" />
  54. </body>
  55. </html>

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

jQuery：总体掌握的更多相关文章

  1. jQuery源代码阅读之一——jQuery总体结构及jQuery构造函数

    一.jQuery总体架构 jQuery作为一款强大的js库,由以下模块构成: (function(window,undefined){ var jQuery=function(selector,con ...

  2. jQuery总体架构

    第一章  总体架构 1.设计理念 jQuery的理念就是“写更少的代码,做更多的事”,而且做到代码的高度兼容性. 2.总体架构 大致可以分为三个部分:构造模块,底层支持模块和功能模块. 3.使用自调用 ...

  3. jQuery构造函数init参数分析（一）

    在我的上一篇随笔里面分析了jQuery的构造函数,jQuery对象中有一个原型方法init才是是真正的构造函数,通过init的原型对象跟jQuery的原型对象保持引用关系使得init的实例可以正常调用 ...

  4. jquery 源码学习（一）

    从上边的注释看,jQuery的源码结构相当清晰.条理,不像代码那般晦涩和让人纠结   1. 总体架构 1.1 自调用匿名函数 self-invoking anonymous function 打开jQ ...

  5. 模仿下拉框datalist的jquery插件的一点小经验

    原本项目里是用h5的新属性data-list,但是这个下拉框的数据太多,而data-list似乎没有设置高度的地方,所以写了个小插件,期间也发现了一些bug,目前这个版本算是可以一用的版本,故写一下这 ...

  6. jQuery笔记（一）

    day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...

  7. jQuery-01

    day01 - jQuery 学习目标: 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 ...

  8. jQuery源码分析-01总体架构

    1. 总体架构 1.1自调用匿名函数 self-invoking anonymous function 打开jQuery源码,首先你会看到这样的代码结构: (function( window, und ...

  9. jquery 1.7.2源码解析（一）总体架构

    总体架构 jquery模块分类和依赖关系: 自调用匿名函数: /** * 自调用匿名函数,jquery加载完后立即被调用,用来加载各个模块 * 为什么使用自调用匿名函数: * 通过使用自调用匿名函数, ...

  10. jquery源码学习笔记一：总体结构

    练武不练功,到老一场空.计算机也一样. 计算机的功,就是原理.如果程序员只会使用各种函数,各种框架,而不知其原理,顶多熟练工人而已.知其然,更要知其所以然. jquery我们用得很爽,但它究竟咋实现的 ...

随机推荐

  1. JVM内存模型（一）

    主要澄清之前对JVM内存模型的一些误区: JMV内存主要分为5块:方法区(Method Area),堆区(Heap),虚拟机栈(VM stack),本地方法栈(Native Method stack) ...

  2. Dynamics CRM 2011 报表无法显示的问题总结

    一.一般打开报表会出现:该报表无法显示.(reProcessingAborted)和由于运行Microsoft SQL Server Reporting Services 的服务器上没有安装 Micr ...

  3. .Net和SqlServer的事务处理实例

    1,SqlServer存储过程的事务处理一种比较通用的出错处理的模式大概如下:Create procdure prInsertProducts( @intProductId int, @chvProd ...

  4. js实现loading简单的遮套层

    弹出个div  设置div的背景色及透明度当加载完成后remove这个div  或者 隐藏至于淡入淡出通过setTimeout 或者setInterval改变透明度试试 .test{     widt ...

  5. FPGA远程更新之限制条件

    FPGA可重配置带来了很高的灵活性,所以基于FPGA的设计/产品往往也会有后期更新/升级的需求.同时,需要更新/升级的FPGA板卡由于物理条件的限制,可能无法现场升级.比如: 1.FPGA板卡部署在异 ...

  6. wxWidgets：处理wxEVT_PAINT

    我们仍然以继承于wxFrame的MyFrame作为例子. MyFrame.h: class MyFrame : public wxFrame { ...... private: ...... void ...

  7. java实验三——求平均数，数组排序（有关java保留小数位数，由于编译器版本未到1.5导致的报错format函数第二个参数不对，要求是Object[]）

    package hello; import java.util.Arrays; public class 实验三更正版 { public static void main(String[] args) ...

  8. Mysql-binlog的移动和归档

    #!/bin/bash # To backup and archive binlogs. declare -i NUM=0 declare -i SUM=0 SUM=`/bin/ls -l mysql ...

  9. 协同过滤CF算法之入门

    数据规整 首先将评分数据从 ratings.dat 中读出到一个 DataFrame 里: >>> import pandas as pd In [2]: import pandas ...

  10. Jade模板引擎使用详解

    在 Express 中调用 jade 模板引擎 jade 变量调用 if 判断 循环 Case 选择 在模板中调用其他语言 可重用的 jade 块 (Mixins) 模板包含 (Includes) 模 ...