jQuery基础

最近在做项目的过程中，前端的部分做起来很吃力，很大一部分原因就是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基础部分，希望能带给你帮助~