jQuery使用户能更方便地处理HTML(标准通用标记语言下的一个应用)、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。
官网API:
http://api.jquery.com
下载:
NuGet:Install-Package jQuery
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)相反。
12.DOM对象jQuery对象互转:
DOM对象 => jQuery对象: $(DOM对象)
如: var ele = document.getElementById(‘id‘); $(ele);
常用操作: $(‘<a href="#">a标签<a>‘); //直接将html标签转成DOM对象
jQuery对象 => DOM对象: jQuery对象[0]
如: $(ele)[0];