[JS] JavaScript框架(1) 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()

　　如：

?

1 2 3 4 5 6

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：触发源，触发事件目标。

?

1 2 3 4 5 6 7 8

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

 

　　阻止冒泡：

?

1 2 3 4 5 6 7 8 9 10 11 12

<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

?

1 2 3 4 5 6 7 8 9 10

<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>

　　增：

?

1 2 3 4 5 6 7

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

　　删：

?

1 2 3 4 5 6 7 8 9

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

　　

6.特效

　　语法：effect(time,func)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<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)

?

1 2 3 4 5 6 7

<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作为扩展，可实现链式编程。

?

1 2 3 4 5 6 7

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

　

9.noConflict

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

?

1 2 3 4 5 6

<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)

?

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

 

11.遍历

遍历元素

　　子元素：　　　　chilrden()　　find()

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

　　同级元素：　　　

?

1 2 3 4 5 6 7 8 9 10

<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(){}