重温jQuery基础03

重温jQuery基础03

开发工具与关键技术：VS、MVC
撰写时间：2019/6/6

一、页面载入 ：ready(fn): 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。
(1)简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。
通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。
(2)注意： 可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。
(3)参数说明： 1、fn 要在DOM就绪时执行的函数 2、在DOM加载完成时运行的代码，
(4)使用
$(document).ready() 的简写，同时内部的 jQuery 代码依然使用 $ 作为别名，而不管全局的 $ 为何。

二、jQuery鼠标事件
jQuery鼠标事件列表

click单击事件	dbclick双击事件
mousedown 鼠标按下事件	mouseup鼠标弹起事件
mouseenter 鼠标进入事件	mouseleave 鼠标离开事件

(1)jQuery鼠标事件之click与dbclick事件 click([[data], fn])

        参数说明：fn 在每一个匹配元素的click事件中绑定的处理函数。

        data:click([Data], fn) 可传入data供函数fn处理。

        fn:在每一个匹配元素的click事件中绑定的处理函数。

        dblclick([[data],fn]) 参数说明同上

（2）jQuery鼠标事件之hover事件 hover([over,]out)

        一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。

        当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。

        参数说明：over,out：

            over:鼠标移到元素上要触发的函数

            out:鼠标移出元素要触发的函数

            out当鼠标移到元素上或移出元素时触发执行的事件函数

    //$(".divContent").hover(

    //   function () {//hover的第一个函数：鼠标移入的时候触发事件

    //       $(this).addClass("changeColor");//添加一个类
    // 
      },

    //   function () {//hover的第二个函数：鼠标移出的时候触发事件

    //       $(this).removeClass("changeColor");//移除类

    //   
  });

（3）jQuery鼠标事件之focusin事件 与 focusout事件

    //jQuery表单事件之focus与blur[blɚ] 事件

    //focusin事件跟focus事件区别在于，他可以在父元素上检测子元素获取焦点的情况。

    //focusout事件跟blur事件区别在于，他可以在父元素上检测子元素失去焦点的情况

    //注意查看 下面事件所选取的元素 思考focusin与focus的区别

    //分别取消注释查看focusin与focus的区别

    //父元素div上检测子元素input

    //$("#demo").focusin(function() {

    //   $(this).addClass("changeColor");

    //});

    //$("#demo").focusout(function() {

    //   $(this).removeClass("changeColor");
    //});

    //演示下面的focus的效果时，请注释上面的内容

    //检测元素本身input

    $("#txtdemo").focus(function() {

        $(this).addClass("setBorder");

    });

    $("#txtdemo").blur(function () {
        $(this).removeClass("setBorder");
    });

三、jQuery表单事件

（1）jQuery表单事件之change事件

元素，和元素的值都是可以发生改变的，开发者可以通过change事件去监听这些改变的动作

input元素：监听value值的变化，当有改变时，失去焦点后触发change事件。对于radio单选按钮和复选框，当用户用鼠标做出选择时，该事件立即触发。

select元素：对于下拉选择框，当用户用鼠标作出选择时，该事件立即触发

textarea元素：多行文本输入框，当有改变时，失去焦点后触发change事件

//input标签的change事件

    //$("#target1").change(function

(e) {事件对象看最下面：

    //   //e为事件对象 事件对象是用来记录一些事件发生时的相关信息的对象。事件对象只有事件发生时才会产生，并且只能是事件处理函数内部访问，在所有事件处理函数运行结束后，事件对象就被销毁

    //   console.log(e);

    //   $("#result").html(e.target.value);

    //});

    select标签的change事件

    //$("#target2").change(function(e) {

    //   console.log(e);

    //   $("#result").html(e.target.value);

    //});

    textarea标签的change事件

    //$("#target3").change(function(e) {

    //   console.log(e);

    //   $("#result").html(e.target.value);

    //});

（2）jQuery表单事件之select事件

    /*

        当textarea 或文本类型的 input 元素中的文本被选择时，会发生 select 事件。

           这个函数会调用执行绑定到select事件的所有函数，包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。



        select事件只能用于<input>元素与<textarea>元素

      */

    //input 元素中的文本被选择时触发

    //$("input").select(function() {

    //   alert("input标签的文本被选中事件");

    //});

    textarea元素中的文本被选择时触发

    //$("textarea").select(function() {

    //   alert("textarea标签的文本被选中事件");

    //});

（3） jQuery表单事件之submit事件

提交表单是一个最常见的业务需求，比如用户注册，一些信息的输入都是需要表单的提交。同样的有时候开发者需要在表单提交的时候过滤一些的数据、做一些必要的操作（例如：验证表单输入的正确性，如果错误就阻止提交，从新输入）此时可以通过submit事件，监听下提交表单的这个动作。使用上非常简单，与基本事件参数处理保持一致

这里需要特别注意：

    form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为

    <form onsubmit="return  false;"></form>， jQuery中可以直接在函数中最后结尾return false即可//如果你要阻止表单提交:

    /*jQuery 代码:

        $("form").submit(  function () {

            return false;

        } );

//禁止浏览器的默认提交行为

    $("#btnSubmit").submit(function () {

        return false;

    });

Form表单提交方式，

(一) HTML 标签的 action 属性

        （1）定义和用法

            必需的 action 属性规定当提交表单时，向何处发送表单数据。

        （2）语法


       <form  action="URL">

            属性值:   URL

                      向何处发送表单数据。

            可能的值：

                    绝对 URL - 指向其他站点（比如 src="www.example.com/example.htm"）

                    相对 URL - 指向站点内的文件（比如src="example.htm"）

            举例：

            绝对 URL  action="www.example.com/example.htm"

            相对URL  (1)   url: "{controller}/{action}/{id}",

                          /控制器的名称/函数名?变量1=值1&变量=值2

                          例子：

                         action="/jQueryEvent/ChapterTwoFormData"，

                      (2)  函数名称

                          例子：

                         action="ChapterTwoFormData"，

以上的复习内容同样是来自于老师的上课的资料。