jQuery基础

最近在做项目的过程中，前端的部分做起来很吃力，很大一部分原因就是jQuery部分知识不够熟练，会的太少

所以我决定从头再学一遍。。。

这一篇随笔先用于写jQuery的基础，我会在下一篇写jQuery'的应用，比如调用ajax，遍历表格等等

首先，什么是jQuery？[・_・?]

jQuery 是一个javascript库，jQuery极大地简化了javascript编程

要使用jQuery，我们必须要向页面引用jQuery库，一般写法：

<script type= "text/javascript" src="你要引的jquery文件名"><script>
<script>
     jQuery初始化方法{
        你要写的jQuery代码
    });
</script>    

jQuery有三种初始化方法：

第一种：
$(document).ready(function(){
    xxxxxxxxxxxxxxxxxx;
});

第二种：
$(function(){
    xxxxxxxxxxxxxxxxxx;
});

第三种：
jQuery(function($){
    xxxxxxxxxxxxxxxxxx;
});

这三种方法效果是一样的，选任意一种使用都可以，但是千万不能忘记写。

jQuery选择器

jQuery代码简便的很大原因就是可以直接选中你想要操作的对象，太方便了有没有！φ(>ω<*) 

jQuery的选择器有三种，元素选择器、属性选择器和CSS选择器

下面举几个栗子：

元素选择器栗子：

$("p")  选取所有<p>标签元素
$("p.skr")  选取所有class为"skr"的<p>标签元素
$("p#skrskr")  选取所有id为"skrskr"<p>标签元素
$("p:first") 第一个<p>标签元素
$("p:last") 最后一个<p>标签元素
$("tr:even") 所有奇数<tr>元素
$("tr:odd")所有偶数<tr>元素


$(this) 选中当前元素
$(ul li:first) 每个<ul> 第一个<li>元素
$("[href$='.jpg']") 所有以jsp结尾的href属性

属性选择器栗子：

$("[href]") 选取所有带href属性的元素
$("[href = 'xxx']") 选取所有带href属性且值为xxx的元素
$("[href != 'xxx']") 选取所有带href属性且值不为xxx的元素
$("[href$='.jpg']") 选取所有带href值以jsp结尾的元素

CSS选择器栗子：

$("p").css("background-color","red");

jQuery事件

既然已经选中了这些标签，接下来当然就是对他们搞事情啦~

以点击按钮事件为例：

<script type="text/javascript" src = "jquery.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            alert("啊啊啊啊啊啊啊啊啊啊啊啊!")
        });
    });
</script>  

<button>xxx</button>
          

在实际开发中，由于有很多重复的标签，所以用class或者id多一点（因为我们可以给指定标签赋奇怪的名字以免重复）

接下来列举一些基础的事件触发方法：

change（） 触发、或将函数绑定到指定元素的onchange 事件（改变）
click（） 触发、或将函数绑定到指定元素的cllick 事件（点击）
dblclick（） 触发、或将函数绑定到指定元素的declick 事件（双击）
keydown（）按下按键
keyup（）按钮被松开时
该事件适用于任何带有url的元素（改变事件）
mousedown（）按下鼠标按钮时
mouseenter（）当鼠标指针进入（穿过）元素时，改变
mouseleave（）当鼠标指针离开元素时，改变
mousemove（）获得鼠标指针在页面中位置
mouseout（）当鼠标从元素上移开时，改变
mouseover（）当鼠标指针位于元素上方时，改变
mouseup（）当松开鼠标按钮时
submit（）提交表单
toggle（）方法将切换所有元素
unload（）当用户点击链接离开本页时，只应用于window对象

 其中 toggle() 和 slideToggle都可以实现一个元素的隐藏/实现，用法相同。

 但是区别是：toggle：动态效果为从右至左。横向动作。

　　　　　　slideToggle：动态效果从下至上。竖向动作。

除此之外还有 bind() 方法，bind() 方法为被选中元素添加一个或者多个事件处理程序，并规定事件发生时运行的函数

用法：$(selector).bind( event ,data,function );

栗子：

//先定义一个按钮和一个p
<p>xxxxxxxxxxxx</p>
<button>点我</button>

//绑定一个方法：
$("button").bind("click",function(){
   $("p").slideToggle(); 
});

//绑定多个方法：
$("button").bind({
    click : function(){$("p").slideToggle();},
    mouseover : function(){$("p").css();},
    dblclick : function(){$("p").attr();},
    ...................
});

jQuery效果：

主要是hide(),show(),toggle().下面还是举几个栗子

假装有个<img id="hide">
下面用于控制这个图片的显示或是淡出
$("#hide").hide()
$("#hide").show()
我们也可以向 hide() 和 show()添加参数，来控制它如何显示，淡出：
$（selector）.hide（speed，callback）；
$（selector）.show（speed，callback）；
可选的speed参数规定隐藏/显示的速度，可以取："slow","fast"或毫秒
可选的callback参数是隐藏或显示完成后所执行的函数名称

toggle（）：
toggle（）方法来切换hide（）和show（）方法（状态）
显示被隐藏元素，并隐藏已经显示的元素
$("button").click(function(){
                $("p").toggle();
            });

语法：
$（selector）.toggle（speed，callback）；
可选的speed参数规定隐藏/显示的速度，可以取"slow","fast"或毫秒
可选的callback参数是toggle（）方法完成后所执行的函数名称

还有fadeIn（），fadeOut（）让元素逐渐消失，用法与上面类似

jQuery HTML

（1）获取内容和属性：

text() --> 设置或返回所选元素文本内容

html() --> 设置或返回所选元素内容(包括html标记)

val() --> 设置或返回所选元素的值

栗子：

$("#btn1").click(function(){
   alert("text:"+$("#text").text());
 });
$("#btn2").click(function(){
   alert("html:"+$("#text").html());
 });
$("#btn1").click(function(){
   alert("value:"+$("#text").val());
 });

在开发时，时常会用到选中元素的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较为常用，所以只有这两个的栗子

function afterText(){
       var txt1 = "<p>Text</p>";   以html创建新元素
       var txt2 = $("<p></p>").text("Text.");    以jQuery创建新元素
       var txt3 = document.createElement("p");    以DOM创建新元素
       txt3.innerHTML"Text.";
       $("p").after(txt1,txt2,txt3);    p之后插入新元素
}

 jQuery还支持链式调用，写法类似lamada表达式：

$('a').attr('target', '_blank')
      .append(' <i class="uk-icon-external-link"></i>')
      .click(function () {});

除此之外还有each()方法用于循环，$.ajax{}用于异步传值，select动态选取等等
这部分真的是一言难尽，所以就决定写在下一篇随笔了！
以上就是个人总结的jQuery基础部分，希望能带给你帮助~