jquery快速入门(一)

一、jquery加载文档

jquery加载文档(也叫入口函数)

  $(document).ready(function(){

    // 这里写 jQuery 代码...

   });

  简写方式:

  $(function(){

     // 这里写 jQuery 代码...

   });

javascript加载文档(也叫入口函数)

  window.onload = function() {

    //执行代码

  }

在这里说一下jquery的加载和javascript的加载的区别:

  jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。

  JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。

二、jquery选择器

  1.元素选择器

    如:$('p').hide();

   2.id选择器

    如:$('#test').hide();

   3.class 选择器

    如:$('.test').hide();

   4.选取所有元素

    如:$('*').hide();

   5.选取当前 HTML 元素

    如:$(this).hide();

   6.选取 class 为 intro 的 <p> 元素

    如:$('p.intro').hide();

   7.选取第一个 <p> 元素

    如:$('p:first').hide();

   8.选取第一个 <ul> 元素的第一个 <li> 元素

    如:$('ul li:first').hide();

   9.选取每个 <ul> 元素的第一个 <li> 元素

    如:$('ul li:first-child').hide();

   10.选取带有 href 属性的元素

    如:$('[href]').hide();

   11.选取所有 target 属性值等于 "_blank" 的 <a> 元素

    如:$('a[target='_blank']').hide();

   12.选取所有 target 属性值不等于 "_blank" 的 <a> 元素

    如:$('a[target!='_blank']').hide();

   13.选取所有 type="button" 的 <input> 元素 和 <button> 元素

    如:$(':button').hide();

   14.选取偶数位置的 <tr> 元素

    如:$('tr:even').hide();

    要注意的是,从零开始,第一个tr为零,所以第一个为偶数。

   15.选取奇数位置的 <tr> 元素

    如:$('tr:odd').hide();

    要注意的是,从零开始,第一个tr为零,所以第二个为奇数

三、jquery事件

 1.鼠标事件

  1.1 单击事件click() 例:  $('p').click(function(){

             alert("段落点击了");

            })

  还有如下图的写法:

jquery快速入门(一)

 1.2 双击事件dblclick() 例:$("p").dblclick(function(){

              $(this).hide();

            })

 1.3 鼠标进入元素 mouseenter() , 和离开元素 mouseleave() ,事件  例:$(document).ready(function(){

                                  $("p").mouseenter(function(){
                                    $("p").css("background-color","#0f0");
                                  });
                                  $("p").mouseleave(function(){
                                    $("p").css("background-color","#f00");
                                  });
                                 });

 1.4 鼠标悬停事件 hover() 例:

  注:hover()事件包含有 鼠标进入元素 mouseenter() , 和离开元素 mouseleave() 两个事件的功能

  $(document).ready(function(){
    $("#p1").hover(
      function(){
        $("#p1").css("background-color","#0f0");
      },
      function(){
        $("#p1").css("background-color","#ff0");
      }
    )
  });

 1.5 鼠标按下 mousedown() , 和松开 mouseup() ,事件  例:$(document).ready(function(){

                           $("#p1").mousedown(function(){

                             console.log("鼠标在该段落上按下!");

                           });

                           $("#p1").mouseup(function(){

                             console.log("鼠标在段落上松开。");

                           });

                          });

 2.键盘事件

  2.1  键被按下 keypress() ,键按下的过程 keydown() ,键被松开 keyup() ,事件

    2.1.1 keypress() 例:                   2.1.2 keydown() 和 keyup() 例:

      <p>次数: <span>0</span></p>              输入你的名字: <input type="text">

      <button>按钮</button>                  <p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p>

      i=0;                          $(document).ready(function(){
      $(document).ready(function(){                $("input").keydown(function(){
        $("p").keypress(function(){                 $("input").css("background-color","#0f0");
          $("span").text(i+=1);                 });
        });                            $("input").keyup(function(){
        $("button").click(function(){                 $("input").css("background-color","#f00");
          $("p").keypress();                  });
        });                         });
      });

  注意:keypress 事件与 keydown 事件类似。但是,keypress 事件不会触发所有的键

  (比如 ALT、CTRL、SHIFT、ESC)。需要使用 keydown() 方法来检查这些键。

  keydown:在键盘上按下某键时发生,一直按着则会不断触发(opera浏览器除外), 它返回的是键盘代码;

  keypress:在键盘上按下一个按键,并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符,

所以监听无效 ,也就是说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发

  keyup:用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.

  这里是使用keypress()方法的效果图 :

jquery快速入门(一)

  下面是使用keydown()方法的效果图:

jquery快速入门(一)

  附加:1.获取按键代码或字符的ASCII码

    $(window).keydown( function(event){

      // 通过event.which可以拿到按键代码. 如果是keypress事件中,则拿到ASCII码.

    )};

     2.传递数据给事件处理函数     

    // 只允许按下的字母键生效, 65~90是所有小写字母的键盘代码范围.
    var validKeys = { start: 65, end: 90 };
    $("#keys").keydown( validKeys, function(event){
    var keys = event.data; //拿到validKeys对象.
     return event.which >= keys.start && event.which <= keys.end;
    } );

  3.表单事件

  3.1 提交 submit() 事件,

  注意:该事件只适用于 <form> 元素。submit() 方法触发 submit 事件,或规定当发生 submit 事件时运行的函数。

  例:<form action="">

      哈哈: <input type="text" name="哈哈" value="ha"><br>

      呵呵: <input type="text" name="呵呵" value="he"><br>

      <input type="submit" value="提交">

    </form>

    $(document).ready(function(){

      $("form").submit(function(){
        alert("提交");
      });
    });

  3.2 更改、修改、替换 change() 事件

  注意:当元素的值改变时发生 change 事件(仅适用于表单字段)。change() 方法触发 change 事件,或规定当发生 change 事件时运行的函数。

  当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,change 事件会在元素失去焦点时发生。

  例:<p>点击按钮触发 change 事件</p>

    <button>输入框中触发 change 事件</button>

    <p>输入你的名字: <input value="Runoob" onchange="alert(this.value)" type="text"></p>

    $(document).ready(function(){
      $("button").click(function(){
        $("input").change();
      });
    });

  3.3 获取焦点 focus() 事件和 失去焦点 blur() 事件 例:

    <input>

    <span style="display:none;">请输入你的电话号码?</span>

    <p>点击输入框获取焦点。</p>

    $(document).ready(function(){
      $("input").focus(function(){
        $("span").css("display","inline").fadeOut(2000);
      });
    });

  说明:"display","inline"把span标签的内容关联到input,fadeOut(2000);两秒后淡出    该方法通常与  blur() 方法一起使用

  例:账号: <input type="text" name="fullname"><br>

    邮箱: <input type="text" name="email">    

    $(document).ready(function(){
      $("input").focus(function(){
        $(this).css("background-color","#0f0");
      });
      $("input").blur(function(){
        $(this).css("background-color","#f00");
      });
    });

 4.文档/窗口事件

  4.1调整浏览器窗口大小 resize() 事件 

  例:<p>窗口重置了 <span>0</span> 次大小。</p>
    <p>请改变窗口大小</p>   

    x=0;
    $(document).ready(function(){
      $(window).resize(function(){
        $("span").text(x+=1);
      });
    });

  4.2滚动 scroll() 事件

  scroll 事件适用于所有可滚动的元素和 window 对象(浏览器窗口) 

  例:<p>滚动div中的滚动条</p>
    <div style="border:1px solid black;width:200px;height:100px;overflow:scroll;">

      学习是进步的源泉,学的不仅是技术,更是梦想!学习是进步的源泉 —— 学的不仅是技术,更是梦想!
      <br><br>
      学习是进步的源泉 —— 学的不仅是技术,更是梦想!学习是进步的源泉 —— 学的不仅是技术,更是梦想!

    </div>
    <p>滚动了 <span>0</span> 次。</p>

    x=0;
    $(document).ready(function(){
      $("div").scroll(function(){
        $("span").text(x+=1);
      });
    });

上一篇:Codeforces.472F.Design Tutorial: Change the Goal(构造 线性基 高斯消元)


下一篇:bzoj2095-Bridge