最近在做项目的过程中，前端的部分做起来很吃力，很大一部分原因就是jQuery部分知识不够熟练，会的太少
所以我决定从头再学一遍。。。
这一篇随笔先用于写jQuery的基础，我会在下一篇写jQuery'的应用，比如调用ajax，遍历表格等等
首先，什么是jQuery？[・_・?]
jQuery 是一个javascript库，jQuery极大地简化了javascript编程
要使用jQuery，我们必须要向页面引用jQuery库，一般写法：
1 <script type= "text/javascript" src="你要引的jquery文件名"><script> 2 <script> 3 jQuery初始化方法{ 4 你要写的jQuery代码 5 }); 6 </script>
jQuery有三种初始化方法：
1 第一种： 2 $(document).ready(function(){ 3 xxxxxxxxxxxxxxxxxx; 4 }); 5 6 第二种： 7 $(function(){ 8 xxxxxxxxxxxxxxxxxx; 9 }); 10 11 第三种： 12 jQuery(function($){ 13 xxxxxxxxxxxxxxxxxx; 14 });
这三种方法效果是一样的，选任意一种使用都可以，但是千万不能忘记写。
jQuery选择器
jQuery代码简便的很大原因就是可以直接选中你想要操作的对象，太方便了有没有！φ(>ω<*)
jQuery的选择器有三种，元素选择器、属性选择器和CSS选择器
下面举几个栗子：
元素选择器栗子：
1 $("p") 选取所有<p>标签元素 2 $("p.skr") 选取所有class为"skr"的<p>标签元素 3 $("p#skrskr") 选取所有id为"skrskr"<p>标签元素 4 $("p:first") 第一个<p>标签元素 5 $("p:last") 最后一个<p>标签元素 6 $("tr:even") 所有奇数<tr>元素 7 $("tr:odd")所有偶数<tr>元素 8 9 10 $(this) 选中当前元素 11 $(ul li:first) 每个<ul> 第一个<li>元素 12 $("[href$='.jpg']") 所有以jsp结尾的href属性
属性选择器栗子：
1 $("[href]") 选取所有带href属性的元素 2 $("[href = 'xxx']") 选取所有带href属性且值为xxx的元素 3 $("[href != 'xxx']") 选取所有带href属性且值不为xxx的元素 4 $("[href$='.jpg']") 选取所有带href值以jsp结尾的元素
CSS选择器栗子：
$("p").css("background-color","red");
jQuery事件
既然已经选中了这些标签，接下来当然就是对他们搞事情啦~
以点击按钮事件为例：
1 <script type="text/javascript" src = "jquery.js"></script> 2 <script> 3 $(document).ready(function(){ 4 $("button").click(function(){ 5 alert("啊啊啊啊啊啊啊啊啊啊啊啊!") 6 }); 7 }); 8 </script> 9 10 <button>xxx</button> 11
在实际开发中，由于有很多重复的标签，所以用class或者id多一点（因为我们可以给指定标签赋奇怪的名字以免重复）
接下来列举一些基础的事件触发方法：
1 change（） 触发、或将函数绑定到指定元素的onchange 事件（改变） 2 click（） 触发、或将函数绑定到指定元素的cllick 事件（点击） 3 dblclick（） 触发、或将函数绑定到指定元素的declick 事件（双击） 4 keydown（）按下按键 5 keyup（）按钮被松开时 6 该事件适用于任何带有url的元素（改变事件） 7 mousedown（）按下鼠标按钮时 8 mouseenter（）当鼠标指针进入（穿过）元素时，改变 9 mouseleave（）当鼠标指针离开元素时，改变 10 mousemove（）获得鼠标指针在页面中位置 11 mouseout（）当鼠标从元素上移开时，改变 12 mouseover（）当鼠标指针位于元素上方时，改变 13 mouseup（）当松开鼠标按钮时 14 submit（）提交表单 15 toggle（）方法将切换所有元素 16 unload（）当用户点击链接离开本页时，只应用于window对象
其中 toggle() 和 slideToggle都可以实现一个元素的隐藏/实现，用法相同。
但是区别是：toggle：动态效果为从右至左。横向动作。
slideToggle：动态效果从下至上。竖向动作。
除此之外还有 bind() 方法，bind() 方法为被选中元素添加一个或者多个事件处理程序，并规定事件发生时运行的函数
用法：$(selector).bind( event ,data,function );
栗子：
1 //先定义一个按钮和一个p 2 <p>xxxxxxxxxxxx</p> 3 <button>点我</button> 4 5 //绑定一个方法： 6 $("button").bind("click",function(){ 7 $("p").slideToggle(); 8 }); 9 10 //绑定多个方法： 11 $("button").bind({ 12 click : function(){$("p").slideToggle();}, 13 mouseover : function(){$("p").css();}, 14 dblclick : function(){$("p").attr();}, 15 ................... 16 });
jQuery效果：
主要是hide(),show(),toggle().下面还是举几个栗子
1 假装有个<img id="hide"> 2 下面用于控制这个图片的显示或是淡出 3 $("#hide").hide() 4 $("#hide").show() 5 我们也可以向 hide() 和 show()添加参数，来控制它如何显示，淡出： 6 $（selector）.hide（speed，callback）； 7 $（selector）.show（speed，callback）； 8 可选的speed参数规定隐藏/显示的速度，可以取："slow","fast"或毫秒 9 可选的callback参数是隐藏或显示完成后所执行的函数名称 10 11 toggle（）： 12 toggle（）方法来切换hide（）和show（）方法（状态） 13 显示被隐藏元素，并隐藏已经显示的元素 14 $("button").click(function(){ 15 $("p").toggle(); 16 }); 17 18 语法： 19 $（selector）.toggle（speed，callback）； 20 可选的speed参数规定隐藏/显示的速度，可以取"slow","fast"或毫秒 21 可选的callback参数是toggle（）方法完成后所执行的函数名称 22 23 还有fadeIn（），fadeOut（）让元素逐渐消失，用法与上面类似
jQuery HTML
（1）获取内容和属性：
text() --> 设置或返回所选元素文本内容
html() --> 设置或返回所选元素内容(包括html标记)
val() --> 设置或返回所选元素的值
栗子：
1 $("#btn1").click(function(){ 2 alert("text:"+$("#text").text()); 3 }); 4 $("#btn2").click(function(){ 5 alert("html:"+$("#text").html()); 6 }); 7 $("#btn1").click(function(){ 8 alert("value:"+$("#text").val()); 9 });
在开发时，时常会用到选中元素的val()进行判断，在进行下一步操作
（2）获取属性 - attr()
attr()用于获取标签的属性值或是给标签的属性赋值
栗子：
$("#btn1").click(function(){
alert("text:"+$("#text").text(“aaaa”));
});
$("#btn2").click(function(){
alert("html:"+$("#text").html(“aaaa”));
});
$("#btn1").click(function(){
alert("value:"+$("#text").val(“aaaa”));
});
$("#btn1").click(function(){
$("#text").attr("id","xxx"));
//使用attr给属性赋值时要考虑标签是否有想要添加的属性（html5中很多属性失效了，造成报错）
});
（3）添加元素
append（） - 在被选元素的结尾插入内容
$（"p"）.append（"aaaaaaaaaa"）；
prepend（） - 在被选元素开头插入内容
$（"p"）.prepend（"aaaaaaaaaa"）；
after（） - 在被选元素之后插入内容 $（"img"）.after（"aaaaaaaa"）； before（） - 在被选元素之后插入内容 $（"img"）.before（"aaaaaaaa"）；
after和before较为常用，所以只有这两个的栗子
1 function afterText(){ 2 var txt1 = "<p>Text</p>"; 以html创建新元素 3 var txt2 = $("<p></p>").text("Text."); 以jQuery创建新元素 4 var txt3 = document.createElement("p"); 以DOM创建新元素 5 txt3.innerHTML"Text."; 6 $("p").after(txt1,txt2,txt3); p之后插入新元素 7 }
jQuery还支持链式调用，写法类似lamada表达式：
1 $('a').attr('target', '_blank') 2 .append(' <i class="uk-icon-external-link"></i>') 3 .click(function () {});
除此之外还有each()方法用于循环，$.ajax{}用于异步传值，select动态选取等等
这部分真的是一言难尽，所以就决定写在下一篇随笔了！
以上就是个人总结的jQuery基础部分，希望能带给你帮助~
