JavaScript基础（四）jQuery（一）

本文参考了w3schoolhttp://www.w3school.com.cn/jquery/

什么是jQuery

• jQuery是一个非常强大、非常非常好用的JavaScript库
• 可以极大地简化JavaScript编程

---

如何使用jQuery

• 在jQuery.com网站下载并添加到项目中去，在js中引入
• 可以直接从谷歌或微软提供的文件中从网络获取，直接添加网络中的路径
• 这样有一个好处是很多用户都已经加载过jQuery核心库了，不需要重新加载
• ！！！！注意！！！！
• 国内的网络大部分上不了谷歌，但是校园网可以，校园网开发者需要考虑到其他开发者无法下载
• 建议从微软上加载核心库

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script><script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>

---

基本语法

• $(selector).action()
  
  • $代表jQuery，如果和已有的其他库的重复，可以用jQuery的onconfilct()来更改
  • selector代表要选的元素
    
    • this代表本元素（注意：没有引号）
    • “p”代表所有段落
    • “.demo”代表所有class=“demo”的元素
    • “#demo”代表所有id=“demo”的元素
    • 当然也可以叠加使用
  • action代表操作

---

选择器

接上一条的selector

• 元素选择器
  
  • selector代表要选的元素
    
    • $(this)代表本元素（注意：没有引号）
    • $(“p”)代表所有段落
    • $(“.demo”)代表所有class=“demo”的元素
    • $(“#demo”)代表所有id=“demo”的元素
    • 当然也可以叠加使用
• 属性选择器
  
  • $(“[href]”)所有带有属性href的元素
  • $(“[href=’apple.jpg’]”)所有带有href属性而且href的值为apple.jpg的元素
  • $(“[href!=’apple.jpg’]”)所有带有href属性而且href的值 不是 apple.jpg的元素
  • ("[href=’.jpg’]”)所有带有href属性而且href的后缀为.jpg的元素
• css选择器
  
  • $(this).css(“backgroung-color”, “red”)

---

事件

jQuery有很强的事件处理能力

$(document).ready(function(){    //文档加载时粗体就隐藏    $(b).hide();    //点击id=“button1”时段落隐藏    $(#button1).click(function(){        $(p).hide();    });    //双击id=“button2”时斜体隐藏    $(#button2).dblclick(function(){        $(i).hide();    });    //input获得焦点时段落隐藏    $(input).focus(function(){        $(p).hide();    });    //鼠标悬停在button3上段落隐藏    $(#button3).mouseover(function(){        $(p).hide();    });});

---

效果

隐藏、显示

可以用于设置“刷新”、“进入”、“删除”等的效果

$(selector).hide(speed, callback);     //隐藏$(selector).show(speed, callback);     //显示$(selector).toggle(speed, callback);   //切换（原状态隐藏则显示，原状态显示则隐藏）

• speed为变换速度，可以为一下几个值
  
  • 不写：一瞬间完成
  • “fast”：快速完成（引号不能省）
  • “slow”：缓慢完成
  • 1000：1000毫秒完成
• callback：执行完隐藏或显示后执行的函数

---

淡入淡出

可以用于设置“刷新”、“进入”、“删除”等的效果

$(selector).fadeIn(speed,callback);            //淡入$(selector).fadeOut(speed, callback);      //淡出$(selector).fadeToggle(speed, callback);   //切换（原状态隐藏则淡入，原状态显示则淡出）$(selector).fadeTo(speed,opacity,callback);    //淡出到某一透明度或淡入到某一透明度

• opacity为透明度，0-1之间

---

滑动

可以用于“显示更多”和“收起”按钮的设置

$(selector).slideDown(speed, callback);        //滑下展开$(selector).slideUp(speed, callback);      //滑上收起$(selector).slideToggle(speed, callback);  //切换（原状态隐藏则滑下展开，原状态显示则滑上收起）

---

动画

可以对css参数进行调整形成动画

$(selector).animate({params},speed,callback);

• {params}为参数列表
  
  • 例如{left:’250px’}是距左端250px
  • • 例如{left:’+=250px’}是距现在位置的左端250px（反复点击会反复右移）
  • 但是在标记属性名的时候必须用Camel标记法
  • 必须使用 paddingLeft 而不是 padding-left
• 动画队列
  
  • 可以反复调用animate函数，会按顺序执行

---

停止动画

停止指定动画

$(selector).stop(stopAll,goToEnd);

• stopAll
  
  • false（默认）不清空之后的动画队列
  • true 清空之后的队列
• goToEnd：
  
  • false（默认）本动画停在此位置
  • true本动画停在最终应该结束的位置

---

链接

多个动作指令可以跟在一个对象后面，依次进行

$("#p1").css("color","red").slideUp(2000).slideDown(2000);