你的位置:首页 > Java教程

[Java教程][JS] JavaScript框架 jQuery


  jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。

 

  官网API:

    http://api.jquery.com

 

  下载:

    NuGet:Install-Package jQuery

  

  知识点:主要功能、版本、基本语法、事件,操作元素,特效,AJAX,扩展$,释放$,遍历,ready/onload区别

  先顶后看

 

 

 

1.主要功能

  html选取,操作,css操作,事件,特效,遍历,ajax

 

2.版本

  1.x:IE6+(本人测试,部分方法还是不支持IE8及以下)    

  2.X:IE9+

 

3.基本语法

  $(selector).action()

  如:

    function func() {      $(this).hide();       //所有div隐藏    }    $('div').click(func);          $('div').bind('click', func);  //unbind    $('div').on('click', func);   //off  bind本质用的就是on

 

4.事件

  jquery和js的事件对象不一样。(包装了一下js对象,originalEvent属性就是js event对象)

  事件对象:

    type:事件名,如:click

    target:触发源,实际点击目标。

    currentTarget:触发源,触发事件目标。

  <div>    <p>Text</p>  </div>  <script>    $('div').first().click(function (e) {      console.log(e);    })  </script>

 

  阻止冒泡:

  <div>text</div>  <div>text</div>  <script>    function func(e) {      console.log(e);           //打印事件      e.stopImmediatePropagation();    //阻止所有冒泡      e.stopPropagation();        //阻止父级冒泡      //todo    }    $('div')[1].onclick = func;       //js事件    $('div').first().click(func);      //jquery事件  </script>

  

5.操作元素

  查、改:text,html,val,attr,css

  <p><a>p1</a></p>  <p><a>p2</a></p>  <input type="text" value="v1" />  <input type="text" value="v2" />  <script>    var ps = $('p');      //所有p元素jquery对象    ps.eq(0).text();      //innerText    ps.eq(1).html();      //innerHTML    $('input').val();      //value  </script>

  增:

  <p> text </p>  <script>    $('p').prepend('prepend');     //向前插入    $('p').append('append');      //向后插入    $('p').before('before');      //向前插入,且换行    $('p').after('after');       //向后插入,且换行  </script>

  删:

  <div>    <p> text </p>  </div>  <span>通过该位置及样式区别</span>  <script>    $('div').css({ height: '200px', background: '#0094ff' });      //设置div样式    $('div').remove();                         //删除元素及子元素    $('div').empty();                          //删除子元素  </script>

  

6.特效

  语法:effect(time,func)

  <button>显示</button>  <button>隐藏</button>  <button>切换</button>  <div>  </div>  <script>    $('div').css({ height: '100px', background: 'red' });    $('button').eq(0).click(function () {      $('div').show(1000);            //显示      $('div').fadeIn(1000);           //淡入      $('div').slideUp(1000);           //滑动入    })    $('button').eq(1).click(function () {      $('div').hide(1000);      $('div').fadeOut(1000);      $('div').slideDown(1000);    })    $('button').eq(2).click(function () {      $('div').toggle(1000);      $('div').fadeToggle(1000);      $('div').slideToggle(1000);    })  </script>

  

7.AJAX

  语法:$.method(url,data,func)

  <script>    $.get('handle.ashx',{ time: new Date().toLocaleString() }, function (data) {      alert(data);    }).error(function (e) {      //todo  出现异常执行    })  </script>

 

  语法:$(selector).load(url,func)      //加载文件

  语法:$.getScript(url,func)        //加载script,本质是$.get( url, undefined, func, "script" );

 

8.扩展jQuery

  通过$.fn作为扩展,可实现链式编程。

  <div>text</div>  <script>    $.fn.func = function () {      alert(this);        //this为jQuery对象    }    $('div').func();  </script>

 

9.noConflict

  该方法会释放 $ 标识符的控制

  <div>text</div>  <script>    var my$ = $.noConflict();    //释放$    my$('div').hide(1000);    //$('div').hide(1000);     //无效  </script>

  

10.css

  语法:    $(selector).css(name,value)      $(selector).css(obj)

  常用操作:  $(selector).addClass(className)    $(selector).removeClass(className)  $(selector).toggleClass(className)

    $('div').css('width', '200px').css('background', 'blue');    $('div').css({width:'200px',background:'blue'});

 

11.遍历

遍历元素

  子元素:    chilrden()  find()

  父元素:    parent()  parents()  parentUntil(selector)

  同级元素:   

  <script>    var d = $('div');    d.siblings();              //同级所有其他元素    d.next();                //同级下一个元素    d.nextAll();              //同级下面所有元素    d.nextUntil(selector);         //同级下面到selector间的所有元素    d.prev();                //同级上一个元素    d.prevAll();              //同级上面所有元素    d.prevUntil(selector);         //同级上面到selector间的所有元素  </script>

  过滤:    first()  last()  eq(index)  filter(selector)  not(selector)    

    eq(index):        取jQuery对象数组中的第几个对象,从0开始

    filter(selector):      取jQuery对象数组中符合selector的对象,not(selector)相反。

 

遍历集合

 

    map

 

      遍历数组,返回新的数组

 

      语法:$.map([],function(v,i){})

 

 

 

    each

 

      遍历数组

 

      语法:$.each([],function(v,i){})

 

 

12.DOM对象jQuery对象互转: 

  DOM对象  =>  jQuery对象:    $(DOM对象)

  如:      var ele = document.getElementById('id');  $(ele);   

  常用操作:    $('<a href="#">a标签<a>');    //直接将html标签转成DOM对象

 

  jQuery对象  =>  DOM对象:    jQuery对象[0]

  如:      $(ele)[0];

 

 

13.ready,onload

  ready在前,onload在后。

DOM树节点完成:

  $(function(){}) === $(document).ready(function(){})

load完成:

  window.onload = function(){}