• 学习第十三天@jQuery


    问题:

    asp.net MVC中控件值的保存可以使用默认的方式让系统自动保存

    只要控件的ID/Name名与数据库中的字段名一致即可!此时不需要手动保存。

    否则,要通过FormCollection collection

    来重新获取它值,如下:

    FormCollection collection

    purchaseapply.PaymentTypeId = int.Parse(collection["PaymentTypeId"]);

    问题:

    如何获取<select></select>的text值

    var checkText=$("#select_id").find("option:selected").text(); //获取Select选择的Text

    问题:

    显示message的时候发现导致布局很难看,显示在一边?

    <div id="poststuff" class="metabox-holder has-right-sidebar">

    <div id="side-info-column" class="inner-sidebar">

    <div class="meta-box-sortables ui-sortable">

    <div class="message" style="color:red"></div>

    </div>

    </div>

    </div>

    问题:

    如何清空select的option值?

    使用jquery如何操作select(下拉框)呢?主要讲下怎么动态添加option  动态选择option,假如我们的select 控件的 id 属性为 sel
    jquery 清空option         $("#sel").empty();

    也可以使用:

    $("#sel").html(“”);

    问题:

    怎么引入jquery?

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

    简便方法:

    把文件Scripts/jquery-1.4.1.js用鼠标拖入html文件的代码编辑区。

    问题:

    jquery中的ready函数与window.onload谁先执行

    关于$(document).ready():
    jquery中的$(document).ready(),那$(document).ready()到底是什么作用呢?是不是可以用window.onload = function(){ ... }来实现呢?
    这里,我们要明确二者之间的区别。
    我们使用window.onload = function(){ ... },是希望在页面被载入时执行function中的处理,但是这些JS代码只有在页面上的全部内容加载完成(包括头部的banner广告,所有图片)的时候才会执行。将window.onload放在最上边的原因就是当你第一次运行codes的时候,HTML'document'还没有加载完成。
    而$(document).ready()却不需要载入得这么“完全”。$(document).ready()是在DOM结构载入完后执行的,而 window.onload是得在所有文件都加载完后执行的,注意区别,一个是DOM加载完,一个是所有文件加载完。因此,ready肯定在onload 之前发生,页面加载大或者多的图片而使onload执行延后,使用jquery的ready可缓解此问题。
    我们应该紧记,jquery的ready是指在页面的DOM模型加载完后执行指定的函数。之所以经常用$(document).ready()来取代 window.onload,就是因为它是在dom模型加载完成后就执行,而window.onload是在dom元素加载完全后才执行。
    B.关于document.onload和window.onload:
    document.onload和window.onload没有本质的区别,都是指页面载入完成后执行指定函数。

    做一个比较吧:

          window .onload =function (){alert ("welcome");}
          $(document).ready(
            function (){
               alert ("thanks for visiting!");
            }
          );

    运行后你会发现 $(document).ready()先执行。

    问题:

    event.preventDefault()Returns: undefined

    Description: If this method is called, the default action of the event will not be triggered.

    · version added: 1.0event.preventDefault()

    For example, clicked anchors will not take the browser to a new URL. We can useevent.isDefaultPrevented()to determine if this method has been called by an event handler that was triggered by this event.

    Example:
    Cancel the default action (navigation) of the click.
    <!DOCTYPE html>
    <html>
    <head>
       <script src="http://code.jquery.com/jquery-latest.js"></script>
    </head>
    <body>
      
    <a href="http://jquery.com">default click action is prevented</a>
    <div id="log"></div>

    <script>
    $("a").click(function(event) {
       event.preventDefault();
       $('<div/>')
         .append('default ' + event.type + ' prevented')
         .appendTo('#log');
    });
    </script>

    </body>
    </html>

    问题:

    我们另一种常常做的事情,便是增加(或者删除)一个css样式。

    首先我们在<head>标签内增加一些样式:

    1.  <style>  
    2.      a.test { font-weight: bold; }  
    3.   </style> 

    然后在代码内使用addClass方法

    1.  $("a").addClass("test"); 

    所有超链接会被加粗。

    要删除此样式,只需要使用 remove class方法。 (允许添加多个样式到html)

    1.  $("a").removeClass("test"); 

    问题:

    特效

    jQuery提供了一组特效,使用这些特效可以让你的网站脱颖而出,你只需要将上面的测试文件添加如下代码就可以进行测试:

    1.  $("a").click(function(event){  
    2.     event.preventDefault();  
    3.     $(this).hide("slow");  
    4.   }); 

    问题:

    函数回调?

    回调函数

    回调函数是指父方法运行通过后传递参数并且进行调用的函数。回调函数的特殊之处在父函数可以在回调函数运行之前运行。另一个重要的点是要知道如何正确的传递回调。这也是我常常忘记的正确语法。

    无参数回调

    你可以使用下面的代码来设定回调参数。

    1.  $.get('myhtmlpage.html', myCallBack); 

    注意 第二个参数只包含回调函数的名字(不是字符串并且不包含括号对). Javascript的函数可以像参数一样传递,并且在后面的代码执行。

    包含参数的回调

    你可能会这样问,"如果包含参数,你会怎么做?"。

    错误的方式

    错误的调用方式(不会被执行)

    1.  $.get('myhtmlpage.html', myCallBack(param1, param2)); 

    这种方式并不会被调用,因为它调用了

    1.  myCallBack(param1, param2) 

    它的执行结果会被作为第二个参数传递给$get()函数

    正确的方式

    上面的方式问题在于 myCallBack在作为函数传递之前先被进行了评估。Javascrip和的jQuery 将函数扩展为函数指针,例如IE的设定Timeout函数。

    下面的方法,创建了一个匿名函数并且注册了回调函数。注意这里使用了function(){}匿名函数只做了一件事情,使用两个参数param1,param2调用myCallBack方法。

    1.  $.get('myhtmlpage.html', function(){  
    2.   myCallBack(param1, param2);  
    3.  }); 

    param1和param2是$get()方法获取页面完成后提供的参数。

    问题:

    如何做一个弹出层?

    做web程序经常要使用弹出层, 比如单击文字或按钮显示一段提示文字等. 假设有如下需求:

    clip_image001

    ◆ 单击图中的"显示提示文字"按钮, 在按钮的下方显示一个弹出层.

    ◆ 单击任何空白区域或者弹出层,弹出层消失.

    用原始javascript我们也完全可以完成这个工作. 有以下几点注意事项:

    1. 弹出层的位置需要动态计算. 因为触发弹出事件的对象可能出现在页面的任何位置, 比如截图中的位置.

    2. 为document绑定单击是关闭弹出层的函数, 要使用多播委托, 否则可能冲掉其他人在document绑定的函数.

    3. 为document绑定了关闭函数后, 需要在显示函数中取消事件冒泡, 否则弹出层将显示后立刻关闭.

    用jQuery, 我们可以轻松地实现此实例:

    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>jQuery - Start Animation</title>  

    5.

    6.     <script type="text/javascript" src="../scripts/jquery-1.3.2-vsdoc2.js" ></script>  

    7.

    8.     <script type="text/javascript">  

    9.         $(document).ready(function()  

    10.         {  

    11. //动画速度

    12. varspeed = 500;  

    13.

    14. //绑定事件处理

    15.             $("#btnShow").click(function(event)  

    16.             {  

    17. //取消事件冒泡

    18.                 event.stopPropagation();  

    19. //设置弹出层位置

    20. varoffset = $(event.target).offset();  

    21.                 $("#divPop").css({ top: offset.top + $(event.target).height() + "px", left: offset.left });  

    22. //动画显示

    23.                 $("#divPop").show(speed);  

    24.

    25.             });  

    26. //单击空白区域隐藏弹出层

    27.             $(document).click(function(event) { $("#divPop").hide(speed) });  

    28. //单击弹出层则自身隐藏

    29.             $("#divPop").click(function(event) { $("#divPop").hide(speed) });  

    30.         });  

    31.     </script>  

    32.

    33. </head>  

    34. <body>  

    35.     <div>  

    36.         <br /><br /><br />  

    37.         <button id="btnShow">显示提示文字</button>  

    38.     </div>  

    39.

    40.     <!-- 弹出层 -->  

    41.     <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000; position: absolute; display:none;  

    42.         300px; height: 100px;">  

    43.         <div style="text-align: center;" >弹出层</div>  

    44.     </div>  

    45. </body>  

    46. </html>  

    47.

    问题:

    jQuery的动画函数主要分为三类:

    1. 基本动画函数: 既有透明度渐变, 又有滑动效果. 是最常用的动画效果函数.

    2. 滑动动画函数: 仅使用滑动渐变效果.

    3. 淡入淡出动画函数: 仅使用透明度渐变效果.

    问题:

    下面是jQuery的基本动画函数:

    基本动画函数 Basics

    名称

    说明

    举例

    show( )

    显示隐藏的匹配元素。

    这个就是 'show( speed, [callback] )' 无动画的版本。如果选择的元素是可见的,这个方法将不会改变任何东西。无论这个元素是通过hide()方法隐藏的还是在CSS里设置了display:none;,这个方法都将有效。

    显示所有段落:
    $("p").show()

    show( speed, [callback])

    以优雅的动画显示所有匹配的元素,并在显示完成后可选地触发一个回调函数。

    可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中,padding和margin也会有动画,效果更流畅。

    用缓慢的动画将隐藏的段落显示出来,历时600毫秒:
    $("p").show(600);

    hide( )

    隐藏显示的元素

    这个就是 'hide( speed, [callback] )' 的无动画版。如果选择的元素是隐藏的,这个方法将不会改变任何东西。

    隐藏所有段落:
    $("p").hide()

    hide( speed, [callback] )

    以优雅的动画隐藏所有匹配的元素,并在显示完成后可选地触发一个回调函数。

    可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中,padding和margin也会有动画,效果更流畅。

    用600毫秒的时间将段落缓慢的隐藏:
    $("p").hide("slow");

    toggle( )

    切换元素的可见状态。

    如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

    切换所有段落的可见状态:
    $("p").toggle()

    toggle( switch )

    根据switch参数切换元素的可见状态(ture为可见,false为隐藏)。

    如果switch设为true,则调用show()方法来显示匹配的元素,如果switch设为false则调用hide()来隐藏元素。

    切换所有段落的可见状态:
    var flip = 0;
    $("button").click(function () {
    $("p").toggle( flip++ % 2 == 0 );
    });

    toggle( speed, [callback] )

    以优雅的动画切换所有匹配的元素,并在显示完成后可选地触发一个回调函数。

    可以根据指定的速度动态地改变每个匹配元素的高度、宽度和不透明度。在jQuery 1.3中,padding和margin也会有动画,效果更流畅。

    用200毫秒将段落迅速切换显示状态,之后弹出一个对话框:
    $("p").toggle("fast",function(){
    alert("Animation Done.");
    });

    问题:

    淡入淡出函数 Fading

    名称

    说明

    举例

    fadeIn( speed, [callback] )

    通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。

    这个动画只调整元素的不透明度,也就是说所有匹配的元素的高度和宽度不会发生变化。

    用600毫秒缓慢的将段落淡入:
    $("p").fadeIn("slow");

    fadeOut( speed, [callback] )

    通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。

    用600毫秒缓慢的将段落淡出:
    $("p").fadeOut("slow");

    fadeTo(speed, opacity, [callback])

    把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数。

    用600毫秒缓慢的将段落的透明度调整到0.66,大约2/3的可见度:
    $("p").fadeTo("slow", 0.66);$("p").fadeTo("slow", 0.66);

    问题:

    需要特别讲解的是fadeTo函数. 这个函数能让对象渐变到指定的透明度上. opacity参数取值从0-1, 比如0.6表示透明度为60%.

    和fadeIn与fadeOut不同的是, fadeTo函数只改变对象的透明度, 即使透明度为0对象仍然占位. 而fadeIn和fadeOut最后一定会改变对象的display属性, fadeOut后对象将从页面上消失(不占位), 但是fadeTo仅仅是让其透明(占位).

    问题:

    自定义动画函数 Custom

    名称

    说明

    举例

    animate( params, [duration], [easing], [callback] )

    用于创建自定义动画的函数。

    这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.

    而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。

    在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。

    jQuery 1.3中,如果duration设为0则直接完成动画。而在以前版本中则会执行默认动画。

    点击按钮后div元素的几个不同属性一同变化:
    // 在一个动画中同时应用三种类型的效果
    $("#go").click(function(){
    $("#block").animate({
    "90%",
    height: "100%",
    fontSize: "10em",
    borderWidth: 10
    }, 1000 );
    });

    animate( params, options )

    用于创建自定义动画的函数。

    这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.

    而每个属性的值表示这个样式属性到多少时动画结束。如果是一个数值,样式属性就会从当前的值渐变到指定的值。如果使用的是“hide”、“show”或“toggle”这样的字符串值,则会为该属性调用默认的动画形式。

    在 jQuery 1.2 中,你可以使用 em 和 % 单位。另外,在 jQuery 1.2 中,你可以通过在属性值前面指定 "+=" 或 "-=" 来让元素做相对运动。

    第一个按钮按了之后展示了不在队列中的动画。在div扩展到90%的同时也在增加字体,一旦字体改变完毕后,边框的动画才开始:

    $("#go1").click(function(){ $("#block1").animate( { "90%"}, { queue: false, duration: 5000 } ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); }); $("#go2").click(function(){ $("#block2").animate( { "90%"}, 1000 ) .animate( { fontSize: '10em' } , 1000 ) .animate( { borderWidth: 5 }, 1000); });

    stop( [clearQueue], [gotoEnd] )

    停止所有在指定元素上正在运行的动画。

    如果队列中有等待执行的动画(并且clearQueue没有设为true),他们将被马上执行

    clearQueue(Boolean):如果设置成true,则清空队列。可以立即结束动画。

    gotoEnd (Boolean):让当前正在执行的动画立即完成,并且重设show和hide的原始样式,调用回调函数等。

    点击Go之后开始动画,点Stop之后会在当前位置停下来:

    // 开始动画
    $("#go").click(function(){
    $(".block").animate({left: '+200px'}, 5000);
    });

    // 当点击按钮后停止动画
    $("#stop").click(function(){
    $(".block").stop();
    });

    问题:

    自定义坠落动画:

    这个示例让一个图层从屏幕最上方掉落到最下方, 并且消失.

    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>jQuery Animation - fadeTo </title>  
    5.   
    6.      <script type="text/javascript" src="../scripts/jquery-1.3.2.js"></script>  
    7.   
    8.      <script type="text/javascript">  
    9.          $(document).ready(function()  
    10.         {  
    11.             $("#divPop")  
    12.             .animate(  
    13.             {  
    14.                 "opacity": "hide",  
    15.                 "top": $(window).height() - $("#divPop").height() - $("#divPop").position().top  
    16.             },  
    17.             600,  
    18.             function() { $("#divPop").hide(); }  
    19.             );  
    20.         });  
    21.     </script>  
    22.  
    23. </head>  
    24. <body>         
    25.     <div id="divPop" style="background-color: #f0f0f0; border: solid 1px #000000;   
    26.          300px; height: 100px; position:absolute;">  
    27.         <div style="text-align: center;">弹出层</div>  
    28.     </div>  
    29. </body>  
    30. </html> 

    问题:

    全局控制属性

    最后讲一下和动画相关的属性:

    名称:jQuery.fx.off

    返回值:Boolean

    说明:

    关闭页面上所有的动画。

    讲解:

    把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。有些情况下可能需要这样,比如:

    * 你在配置比较低的电脑上使用jQuery。

    * 你的一些用户由于动画效果而遇到了 可访问性问题

    当把这个属性设成false之后,可以重新开启所有动画。

    比如下面的代码会执行一个禁用的动画:

    1.  jQuery.fx.off = true
    2.  $("#divPop").show(1000); 

    虽然使用了动画效果的show函数, 但是因为关闭了所有动画, 所以div会立刻显示出来而没有渐变效果.

    问题:

    在C#里我们使用new关键字创建对象, 在javascript中也可以使用new关键字:

    1.  var objectA = new Object(); 

    但是实际上"new"可以省略:

    1.  var objectA = Object(); 

    但是我建议为了保持语法一直, 总是带着new关键字声明一个对象.

    问题:

    创建属性并赋值

    在javascript中属性不需要声明, 在赋值时即自动创建:

    1.  objectA.name = "my name"; 

    访问属性

    一般我们使用"."来分层次的访问对象的属性:

    1.  alert(objectA.name); 

    问题:

    嵌套属性

    对象的属性同样可以是任何javascript对象:

    1.  var objectB = objectA;  
    2.  objectB.other = objectA;  
    3.  //此时下面三个值相当, 并且改变其中任何一个值其余两个值都改变  
    4.  objectA.name;  
    5.  objectB.name;  
    6.  objectB.other.name; 

    使用索引

    如果objectA上有一个属性名称为"school.college", 那么我们没法通过"."访问,因为"objectA.school.college"语句是指寻找objectA的school属性对象的college属性.

    这种情况我们需要通过索引设置和访问属性:

    1.  objectA["school.college"] = "BITI";  
    2.  alert(objectA["school.college"]); 

    下面几个语句是等效的:

    1.  objectA["school.college"] = "BITI";  
    2.   var key = "school.college" 
    3.  alert(objectA["school.college"]);  
    4.  alert(objectA["school" + "." + "college"]);          
    5.  alert(objectA[key]); 
     
    问题:

    JSON 格式语法

    JSON是指Javascript Object Notation, 即Javascript对象表示法.

    我们可以用下面的语句声明一个对象,同时创建属性:

    1.  //JSON  
    2.          var objectA = {  
    3.              name: "myName",  
    4.              age: 19,  
    5.              school:  
    6.              {  
    7.                  college: "大学",  
    8.                  "high school": "高中"   
    9.              },  
    10.             like:["睡觉","C#","还是睡觉"]  
    11.         } 

    JSON的语法格式是使用"{"和"}"表示一个对象, 使用"属性名称:值"的格式来创建属性, 多个属性用","隔开.

    上例中school属性又是一个对象. like属性是一个数组. 使用JSON格式的字符串创建完对象后, 就可以用"."或者索引的形式访问属性:

    1.  objectA.school["high school"];  
    2.  objectA.like[1]; 
     
     
    问题:

    静态方法与实例方法

    静态方法是指不需要声明类的实例就可以使用的方法.

    实例方法是指必须要先使用"new"关键字声明一个类的实例, 然后才可以通过此实例访问的方法.

    1.  function staticClass() { }; //声明一个类  
    2.     staticClass.staticMethod = function() { alert("static method") }; //创建一个静态方法  
    3.     staticClass.prototype.instanceMethod = function() { "instance method" }; //创建一个实例方法 

    上面首先声明了一个类staticClass, 接着为其添加了一个静态方法staticMethod 和一个动态方法instanceMethod. 区别就在于添加动态方法要使用prototype原型属性.

    对于静态方法可以直接调用:

    1.  staticClass.staticMethod(); 

    但是动态方法不能直接调用:

    1.  staticClass.instanceMethod(); //语句错误, 无法运行. 

    需要首先实例化后才能调用:

    1.  var instance = new staticClass();//首先实例化  
    2.  instance.instanceMethod(); //在实例上可以调用实例方法  
     
    问题:

    全局对象是window属性

    通常我们在

    然而我们还应该知道, 实际上全局变量objectA是创建在window对象上, 可以通过window对象访问到:

    1.  window.objectA 
    问题:

    函数究竟是什么

    我们都知道如何创建一个全局函数以及如何调用:

    1.  function myMethod()  
    2.  {  
    3.  alert("Hello!");  
    4.  }   
    5.  myMethod();  

    其实同全局对象一样, 使用function关键字创建的方法(也可以创建类)的名称, 实际上是为window对象创建了myMethod属性, 并且值是一个匿名方法, 上面的语句等同于:

    1.  window.myMethod = function()  
    2.  {  
    3.  alert("Hello!");  
    4.  } 

    无论使用哪种方式声明, 实际保存时都是使用函数名创建window对象的属性. 并且值只有函数体没有函数名称.

    所以,下面三种声明方式是等效的:

    1.  function myMethod()  
    2.  {  
    3.  alert("Hello!");  
    4.  }  
    5.  window.myMethod = function()  
    6.  {  
    7.  alert("Hello!");  
    8.  }  
    9.  myMethod = function()  
    10. {  
    11. alert("Hello!");  
    12. } 
    问题:
     
     
  • 相关阅读:
    Python基础(三) 基本数据类型②:列表
    Python基础(一) Python3环境搭建
    Python基础(二) 基本数据类型①:整数型、布尔型、字符串
    win7下花生壳无法访问的问题
    Java中使用Hhibernate遇到一个错误:No Dialect mapping for JDBC type:1
    ASP.NET MVC2 实验总结
    js 格式化时间
    web service
    初学。。ASP.NET
    在.NET中使用XML的基本方法
  • 原文地址:https://www.cnblogs.com/xiaxiazl/p/2352063.html
Copyright © 2020-2023  润新知