Jquery基础
这几天在忙着期末考试，其实也没有花多少时间来复习，不挂科就好。昨天考试完后玩了几把LOL就停网睡觉了，今天天气很好，把前几天看的视频整理一下，顺便熟悉一下Jquery的写法。这个真的是软肋啊，也只是刚刚接触，考虑一下是不是要买《锋利的Jquery》这本书了，经典之作啊。下面开始吧：
废话我也不多说了，顺便带一下Jquery的介绍，Jquery是Javascript下的一个类库，集成了很多的功能函数和功能模块，写代码更快捷方便，他的理念是：write less,do more。有木有发现和我的博客标题很像，其实就是借鉴这个。Jquery的函数很多，不容易记忆，但是捷径还是有的，通过学会Jquery的设计思想来记忆，选择器、链式操作、方法函数化、原生与JQ的关系等等思想。官方网站：www.jquery.com和程序接口网址www.api.jquery.com.还可以下载中文版的文档离线看。
1.jquery和javascript的不同写法。jquery里的美元符号相当于原生js的window.onload和获取元素等等功能。要想使用jquery类库当然需要引入他的链接，链接是一个远程文件。
1 <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 2 <script> 3 $(function(){ 4 $('div').click( 5 function(){ 6 //alert(this.innerHTML); js的写法 7 //alert($(this).html()); jq的写法 8 //alert(this.html()); 错误，不能弹出窗口 一下这两种方式把js和jq结合起来了，写法错误。他们不能混用 9 //alert($(this).innerHTML); undefined 错误 10 } 11 ) 12 }) 13 </script> 14 </head> 15 <body> 16 <div>paxster</div> 17 </body>
2.选取元素----选取元素的方式：类CSS方法，例如$('#div1') $('.div1')-----纯jq方法,例如$('li:first') 选取li的第一个元素 $('ul li:last-child')选取最后一个li。因为没有使用window.onload，所以要把script标签放在div结构的后面，等div加载完成以后开始执行jq。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script> </head> <body> <div>paxster</div> <div>boychik</div> <script> $('div').css('background','blue'); </script> </body>
3.Jquery过滤器----顾名思义，从众多的元素中选取想要的元素，但是用原生的方法非常麻烦，只能通过
1 <script> 2 $(function(){ 3 4 $('div').has('p').css('background','red'); 5 //只有第一个div拥有p标签，所以选择了第一个div，并改变样式，has过滤器 6 }); 7 </script> 8 </head> 9 <body> 10 <div>11111<p></p></div> 11 <div>22222<span></span></div>
4.链式操作----一句语句可以执行多个操作，但是这个语句看起来有点别扭，太长了不易于阅读理解。
1 $('div').find('h3').eq(2).css('background','red').end().eq(4).css('background','green').end().end().css('border','1px red solid'); 2 //eq(2)代表第三个h3 end()可以返回上一层继续执行操作，返回到$('div').find('h3')这一层
5.方法函数化----这里的click就相当于原生的onclick方法，jquery里还有很多的类似的方法都是这种写法。
1 $(function(){ 2 3 $('#div1').click(function(){ 4 5 alert( $(this).html() ); 6 7 }); 8 9 });
6.查找相邻元素----查找div下面的p元素，这个p元素紧挨着div元素
1 $(function(){ 2 3 $('div').next('p').css('background','red'); 4 5 });
7.创建元素----使用append方法添加元素
第一种写法：
1 <script> 2 $(function(){ 3 $('ul').append('<li>hello</li>'); 4 }); 5 </script> 6 </head> 7 <body> 8 <ul> 9 </ul> 10 </body>
第二种写法
1 $(function(){ 2 var oLi = $('<li>'); 3 oLi.html('hello'); 4 5 $('ul').append(oLi); 6 });
第三种写法-----clone()克隆元素
1 $(function(){//clone : 复制节点 2 $('div').clone().appendTo($('p'));//在p元素的后面添加div 3 });
8.工具函数-----Jquery提供的函数，原生的js也可以用
1 window.onload = function(){ 2 var aLi = document.getElementsByTagName('li'); 3 $.each(aLi,function(index,elements){ 4 elements.innerHTML = index; 5 }); 6 };
trim函数
1 window.onload = function(){ 2 var oDiv = document.getElementById('div1'); 3 alert('('+$.trim(oDiv.className)+')');//弹出div的类名trim用来删除两边的空格 4 };
构造函数和原型下的写法
1 $.each = function(){ //构造函数下面的方法：$.each() 2 }; 3 4 $.prototype.each = function(){ //原型下面的方法 : $('div').each() 5 };
9.Jquery的取值和赋值
1 $(function(){ 2 //alert( $('h1').html() ); //取值 3 $('h1').html('hello'); //赋值 4 });
注意：取值和赋值的不同之处
1 <script> 2 $(function(){ 3 alert( $('h1').html() ); //取值 : 一组中的第一个 4 $('h1').html('hello'); //赋值 : 一组中的所有元素 5 }); 6 </script> 7 </head> 8 <body> 9 <h1>hi_1</h1> 10 <h1>hi_2</h1> 11 <h1>hi_3</h1> 12 <h1>hi_4</h1> 13 <h1>hi_5</h1> 14 </body>
10.Jquery的事件-----mouseover，one，toggle，hide，show等函数
one()
1 $(function(){ 2 /*$('div').bind('click mouseover',function(){ //第一个参数是执行什么事件--可以是多个事件叠加，第二个参数执行函数 3 alert(123); 4 });*/ 5 $('div').one('click',function(ev){ //只执行一次 6 alert(ev.pageX); //pageX获取鼠标坐标 7 return false; //即可以阻止冒泡，和默认事件 8 }); 9 });
toggle
1 $(function(){ 2 $('input').toggle(function(){ //执行多次，执行完以后循环 3 $('div').hide(); 4 },function(){ 5 $('div').show(); 6 }); 7 });
11.元素的移形换位
1 $(function(){ 2 //$('div').insertAfter($('p'));//把div插入到p后面 3 $('p').after($('div')); //p在div的后面 4 //$('div').insertAfter($('p')).css('background','red'); 5 //$('p').after($('div')).css('background','red'); //操作元素不同了 6 });
12.Jquery插件
slideup和slidedown
1 $(function(){ 2 3 $('input').toggle(function(){ 4 5 //$('div').fadeOut(); 6 $('div').slideUp(4000); 7 8 },function(){ 9 10 //$('div').fadeIn(); 11 $('div').slideDown(); 12 13 }); 14 15 });
hover()，stop()函数
1 $(function(){ 2 3 $('div').hover(function(){ 4 5 $(this).stop().animate({ 6 7 width : 300, 8 height : '300px' 9 10 }); 11 12 },function(){ 13 14 15 $(this).stop().animate({ 16 17 width : 200, 18 height : '200px' 19 20 }); 21 22 }); 23 24 });
JQuery拖拽---但是要引入Jquery UI库，导入库之后，可以直接使用写好的拖拽事件
1 $(function(){ 2 3 $('div').draggable(); 4 5 });
Jquery选项卡
1 $(function(){ 2 3 $('#div1').find('input').click(function(){ 4 5 $('#div1').find('input').attr('class',''); 6 $('#div1').find('div').fadeOut(); 7 8 $(this).attr('class','active'); 9 $('#div1').find('div').eq($(this).index()).fadeIn(); 10 11 }); 12 13 });
13.自己写Jquery插件
第一步：
1 (function($){ 2 3 4 $.fn.paxsterTab = function(){ 5 6 var This = this; //传入this，防止this冲突 7 8 $(this).find('input').click(function(){ 9 10 $(This).find('input').attr('class',''); 11 $(This).find('div').css('display','none'); 12 13 $(this).attr('class','active'); 14 $(This).find('div').eq($(this).index()).css('display','block'); 15 16 }); 17 }; 18 19 20 })(jQuery);
第二步：把库直接引入
1 <script> 2 3 $(function(){ 4 5 $('#div1').paxsterTab(); 6 7 }); 8 9 </script>
这篇文章算是一个简单的Jquery入门，需要学习的东西很多，最有效的方法就是实战，所以现在可以看看书，文档，积累知识。
