zoukankan      html  css  js  c++  java
  • .Net培训个人总结笔记27

    学习交流,欢迎转载。转载请注明文章来源:http://www.cnblogs.com/lgjspace/archive/2011/10/13/2218270.html

    细节:

    1 <script type = "text/javascript" src = "../Scripts/jquery-1.4.1.js">
    2 $(document).ready(function () {
    3 alert("弹出窗口");
    4 });
    5 </script>

    上述这种把代码写到引用 JQuery 文件的标签里的方式,代码不会被运行;要像下面这种方式来加入代码才能正常运行(即在另一个非引用 JQuery 文件的<script></script>标签对中加入代码。):

    1 <script type = "text/javascript" src = "../Scripts/jquery-1.4.1.js"></script>
    2 <script type = "text/javascript">
    3 $(document).ready(function () {
    4 alert("弹出窗口");
    5 });
    6 </script>

    区别:
    window.onload 等 Dom 的事件只能注册一次(没有 C# 中的“+=”机制),若注册多次则前面注册的所有事件都被冲掉,只保留最后一次注册的事件,而$(document).ready() 可以注册多次,即一个事件可以注册多个事件响应函数。

    技巧:
    “$(document).ready()”可以简写为“$()”。

    区别:

     1 $(document).load(function () {      //这不会被触发
    2 alert("$(document).load()");
    3 });
    4
    5 $(window).load(function () { //这才会被触发
    6 alert("$(window).load()");
    7 });
    8
    9 $(document).ready(function () { //这也会被触发,而且比 $(window).load() 的触发时机要早。
    10 alert("$(document).ready()");
    11 });

    细节:

    1 $.each(arr, function (key, value) { alert(key + " = " + value) });  //匿名函数中若同时传进 key 和 value 两个参数,则 key 代表的是数组 arr 的 key,value 代表的是数组 arr 的 value。
    2 $.each(arr, function (item) { alert(item); }); //匿名函数中若只传一个参数 item,则该参数 item 代表的是数组 arr 的 key。
    3 $.each(arr, function () { alert(this); }); //匿名函数中也可以不传进任何参数,匿名函数里面用到的 this 代表调用此匿名函数的数组(在此即为 arr)的 value(而不是 key)。

    细节:
    注意要把 JS 的对象和 Dom 的对象区分开来,Dom 的对象在 JQuery 中要转换为 JQuery 对象才能被 JQuery 使用(如“var div = document.getElementById("div");”中的 div),而 JS 的对象(如 js 中的 Array 等)则没有这限制,因为 JQuery 本身就是对 JS 的封装。
    下面是 Dom 对象和 JQuery 对象的相互转换事例:

    1 $(function () {
    2 var div1 = document.getElementById("div1"); //获取一个 Dom 对象
    3 $(div1).html("你好呀<font color = 'red' >朋友</font>"); //把 Dom 对象转换为 JQuery 对象
    4 var div2 = $(div1)[0]; //把 JQuery 对象重新转换回 Dom 对象,其中“$(div1)[0]”也可以写成“$(div1).get(0)”
    5 alert(div2.innerHTML);
    6 });

    注意:

    1 $("#achievement tr:gt(0):lt(3)").css("fontSize", "30");     //lt(3) 是从执行 gt(0) 后得出的新序列中的序号,要是写成 lt(4) 的话渲染的个数就会多出 1 个变成 5 个了。

    细节技巧:

    1 $("#achievement tr:not(:first):not(:last):even").css("background", "Yellow");

    这句表示 id 为 #achievement 的 table 表格中,除了第一个和除了最后一个之外的所有的 tr 元素的背景色都变成黄色。
    这证明了过滤器也可以嵌套使用。

    思路拓展:

     1 <head>
    2 <title>相对选择器</title>
    3 <script type = "text/javascript" src = "../Scripts/jquery-1.4.1.js"></script>
    4 <script type = "text/javascript">
    5 $(function () {
    6 $("#div1 ul").click(function () {
    7 ////方法一:
    8 //$("li").css("background", "Transparent");//先把所有的 li 都变成背景色透明,以清除掉之前的背景效果。
    9 //$("li", $(this)).css("background", "Red");//再把当前的 ul 下的所有 li 的背景变成红色。
    10
    11 //方法二:
    12 $("li", $(this)).css("backgroundColor", "Red").first().parent().siblings("ul").children("li").css("backgroundColor", "Transparent");//先把当前的 ul 下的 li 的背景都变成红色,然后再取其中的第一个 li(这里是为了让后面能“点出”parent() 方法,因为 parent() 方法针对的是某个元素,而不是元素集,而 first() 前面选择出的是一个元素集。)的父级 ul 的兄弟 ul 的子代的所有 li 元素集,把该元素集的背景变成透明。
    13 });
    14 });
    15 </script>
    16 </head>
    17 <body>
    18 <div>
    19 <div id = "div1">
    20 <ul>
    21 <li>ul1_li1</li>
    22 <li>ul1_li2</li>
    23 <li>ul1_li3</li>
    24 <li>ul1_li4</li>
    25 <li>ul1_li5</li>
    26 <li>ul1_li6</li>
    27 </ul>
    28 <ul>
    29 <li>ul2_li1</li>
    30 <li>ul2_li2</li>
    31 <li>ul2_li3</li>
    32 <li>ul2_li4</li>
    33 <li>ul2_li5</li>
    34 <li>ul2_li6</li>
    35 </ul>
    36 <ul>
    37 <li>ul3_li1</li>
    38 <li>ul3_li2</li>
    39 <li>ul3_li3</li>
    40 <li>ul3_li4</li>
    41 <li>ul3_li5</li>
    42 <li>ul3_li6</li>
    43 </ul>
    44 </div>
    45 </div>
    46 </body>

    拓展:
    还可以这样写:$("input[type=button][value=<<]"),这表示选取 input 标签中类型为 button 的而且 value 为“<<”的元素。
    但不可以这样写:$("input[type=button,value=<<]"),也不能这样写:$("input[type=button value=<<]"),这两种都不能实现预想的选择效果。

    总结积累:
    经本人亲自测试可用的检测是否是数字格式的字符串的正则表达式(可匹配带小数点的任何实数):

    1 var reg = /^[0-9]+(\.[0-9]+)?$/;
  • 相关阅读:
    poj 2337 欧拉回路输出最小字典序路径 ***
    hdu 4831
    hdu 4832 dp ***
    hdu 4833 离散化+dp ****
    hdu 4006 优先队列 2011大连赛区网络赛F **
    hdu 4005 双联通 2011大连赛区网络赛E *****
    hdu 4004 二分 2011大连赛区网络赛D
    hdu 4003 树形dp+分组背包 2011大连赛区网络赛C
    hdu 4002 欧拉函数 2011大连赛区网络赛B
    跨域经验总结
  • 原文地址:https://www.cnblogs.com/lgjspace/p/2218270.html
Copyright © 2011-2022 走看看