[JS] JavaScript框架，1 jQuery
jQuery使用户能更方便地处理HTML（标准通用标记语言下的一个应用）、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
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(){}