与jQuery的感情碰撞——由浅入深学jQuery-CSDN博客

原来的时候自己看过jQuery，但是对于什么是jQuery，除了知道jQuery是一种javascript类库外，除了会用几个网页特效外，其他的我这真的是不知道啊。眼看自己就要找工作了，所以自己需要好好学习一下，系统的了解一下。学习了一天，下面把我学习到的精华写给大家，如果有什么错误，希望大家给予指正。

我们学习jQuery之前，必须好好的学习javascript，如果不会javascript的话，jQuery还是不会学的很好的。

一、下面先了解什么是javascript。javascript需要学习什么，

JavaScript是一种通用的脚本编程语言，也是一种基于对象(object)和事件驱动(event Driven)并具有安全性能的脚本语言，JavaScript代码嵌套在HTML页面中，它把静态页面变成支持用于交互并相应事件的活页面。现在很难找到一个不包含JavaScript代码的商业站点页面，在其它类型的站点页面中，也可能找到JavaScript代码。

可是我们怎么快速学习的javascript脚本语言啊，真正的IT编程人员不需要了解很深的javascript，这是一个根本所在，我在这里只是点名学习javascript需要学习的内容，不详细描述。学习javascript就是学习一种语言，但是我们都知道语言现在都是基本相同的，只是看我们对API怎么操作而已。

（1）首先将javascript中的基本概念弄懂弄通。如变量\数组等.

（2）学习一下javascript的对象，扩展，封装。

（3）浏览器DOM编程，只要将基本概念弄懂了，再学这个就不太难了，因为浏览器DOM就是各种对象的集合。

剩下的时间就是自己的努力了，只要你好好学习，多加练习，把javascript搞懂的话，你将一定是个高手。

二、认识jQuery

对于新手想知道是jQuery，其实jQuery就是javascript的库文件的，她帮助我们做了很多麻烦的东西，只要javascript学好了，jQuery一天就能够学会。

jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。

三、有步骤的学习jQuery

1、学习jQuery的选择器，什么是选择器，我们需要了解，在javascript中，我们如果想要获取html中标签的值，我们就会用到DOM中的一些东西，例如

document.getElementById("标签ID").value;

但是在jQuery中我们只是用到了一个符号就可以完成这么长的单词拼写。

$("#标签ID").val();

好好的比较一下是不是下面的很简单啊，好了，废话不说了，切入正题，选择器我们需要学习的是css选择器（标签选择器，ID选择器，类选择器，群组选择器，后代选择器，通配选择器）

由于本文主要讲解的是jQuery的选择器，jQuery的选择器完全继承了CSS的风格。所以对于CSS选择器不重复说明

（1）基本选择器

标签选择器，ID选择器，类选择器

$("input").css("backgroundColor","Red");//将标签为input的背景颜色设为红色

$("#myDiv").css("backgroundColor","Red");//将ID为myDiv的背景颜色设为红色
 $(".myclass").css("backgroundColor","Red");//将类名为myclass的背景颜色设为红色

但是这里需要说清楚的是ID选择器>类选择器>标签选择器

<script type="text/javascript"> $("#Text1").css(" backgroundColor","Red"); $(" .txt").css(" backgroundColor","Green"); $(" input").css ("backgroundColor","Black"); </script > <input id="Text1" type="text" class="txt" /> <input type="text" class="txt" />

大家如果懂得上面的规则后，就会一定知道两个标签的背景颜色

（2）层次选择器

例如：

$("body div") .css("backgroundColor","Red");//改变body中所有div标签的背景色

　　　$("body>div") .css("backgroundColor","Red");//改变body中字div标签的背景色
 　　　$(".one+div") .css("backgroundColor","Red");//改变class为.one的下一个同辈div标签的背景色  　　　$("#two~div") .css("backgroundColor","Red");//改变id为two的所有同辈div标签的背景色

（3）基本选择器

包括(:first，:last, :not(selector), :even, :odd, :eq(selector), :gt(selector), :lt(selector), :header, :animated, :focus)

例如：

$("div:first") .css("backgroundColor","Red");//改变第一个div标签的背景色

　　   $("div:not(.one)") .css("backgroundColor","Red");//改变class不为one的div标签的背景色
 　　　$("div:even") .css("backgroundColor","Red");//改变c索引值为偶数的div标签的背景色  　　　$("div:header") .css("backgroundColor","Red");//改变所有标题元素的的背景色  　　　$("div:focus") .css("backgroundColor","Red");//改变获得焦点元素的的背景色

（4）内容选择器

（:contains(text), :empty, :has(selector), :parent）

例如：

$("div:contains(di)").css("backgroundColor","Red");//改变含有文本“di”的div标签的背景色

　　　$("div:empty").css("backgroundColor","Red");//改变不包含子元素的div标签的背景色
 　　　$("div:parent").css("backgroundColor","Red");//改变包含子元素的div标签的背景色

（5）可见性选择器

　　　$("div:visible").css("backgroundColor","Red");//改变所有可见的div标签的背景色

（6）属性选择器

$("body div") .css("backgroundColor","Red");//改变body中所有div标签的背景色

　　　$("div[title=test]").css("backgroundColor","Red");//改变属性title值为test的div标签的背景色
 　　　$("div[title*=s]").css("backgroundColor","Red");//改变属性title值包含s的div标签的背景色  　　　$("div[title^=s]").css("backgroundColor","Red");//改变属性title值以s开头的div标签的背景色

（7）子元素过滤器

$("div.one :nth-child(2)").css("backgroundColor","Red");//改变每个class为one的<div>的父元素下的第二个子元素的背景色

　　　$("div.one :first-child").css("backgroundColor","Red");//改变每个class为one的<div>的父元素下的第一个子元素的背景色
 　　　$("div.one :only-child").css("backgroundColor","Red");//如果class为one的<div>的父元素下只有一个子元素，改变这个子元素的背景色

（8）表单过滤器

　　　$("#form1 input :enabled") .val("123");//改变表单内可用的<input>元素的值

（9）表单选择器

　　　$("#form1 :input ") .val("23");//改变表单内单行文本框的值

2、jQuery中的DOM操作

jQuery的DOM操作是个很重要的东西，包括很多经常用到的东西，

例如：对于节点操作：创建节点（创建元素节点，创建属性节点，创建文本节点），插入节点（append，after，before，insertBefore），删除节点（remove，empty，），复制节点，替换节点，包裹节点。

还有属性操作，样式操作（获取设置样式，追加样式，删除样式，切换样式等），遍历节点（children(),next(),prev(),siblings(),）

例如：var $para=$("p");//获取属性

　　　var p_text=$para.attr("title");设置属性

　　　$("p").removeAttr("title");//删除<p>元素的属性title

这个地方必须看开发手册才行，用到哪里就看哪里，这里不详细介绍

3、jQuery的事件和动画

（1）加载DOM

　　$(window).load(function(){ ……}) 等价于javascript中的 window.οnlοad=function(){……}

　　$(document).ready(function(){……}) 等价于 $(function(){……});

(2)事件绑定(移除事件和绑定事件差不多)

例如：

$(function(){
    $("#panel1 h5.head").bind("click",function(){ //绑定方式
        if($(this).next().is(":visible")){ $(this).next().hide(); }else{ $(this).next().show(); } });

　　$("#panel1 h5.head").click(function(){  //简写方式
        if($(this).next().is(":visible")){
           $(this).next().hide();  　　　　}else{  　　　　　　$(this).next().show();  　　　　}  　　});

 
});        



<div id="panel1">
    <h5 class="head">这是什么</h5>
    <div class="content">
    …………………………
    …………………………
    <div>
</div>

上面内容实现的功能是：当反复点击“标题”链接时，内容会在显示和隐藏中切换

（3）合成事件

$(function(){
    $("#panel1 h5.head").hover(function(){  //hover方法
           $(this).next().hide(); },function(){ $(this).next().show(); } });

 　　$("#panel1 h5.head").toggle(function(){  //toogle方法
           $(this).next().hide();
        },function(){
           $(this).next().show();
        } 
    });
});

（4）事件冒泡

这里简要的讲一下事件冒泡，事件冒泡是多个嵌套元素响应一个事件时，产生的效果，如果停止事件冒泡采用event.stopPropagation(); 等价于 return false;

还有阻止默认行为:event.preventDefault(); 等价于 return false;

（5）jQuery中的动画

主要的方法是 show(),hide(),fadIn(),fadeOut(),animate(),toggle(),slideToggle(),fadeTo(),fadeToggle()

其实jQuery的动画就是对前面知识点的应用，没有什么新鲜的，这里不多说，上传一个整体实例供大家参考

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> p,button,label{font-size:12px} img{position:absolute;left:10px;top:500px;} span{color:Red;font-weight:bold;padding:6px;} </style> <script src="js/jquery-1.8.0.js" type="text/javascript"></script> <script type="text/javascript"> var fn = function () {//定义函数并存储在变量fn中 var q = $("img").queue("fx");//获取附加在图片上的动画队列  $("span").text(q.length); } $(function () { $.fx.off = $("input#off").is(":checked");//根据复选框状态设置$.fx.off的属性  $("button#run").click(function () {//对run按钮绑定click事件  $("img").animate({ left: "+=456", top: "+=35" }, 4000, fn)//创建自定义动画  .animate({ left: "-=168", top: "-=50" }, 2000, fn) .delay(1000) .animate({ left: "+=136", top: "-=30" }, 2000, fn) .animate({ left: "-=196", top: "-=10" }, 2000, fn) fn(); }); $("button#add").click(function () {//对add按钮绑定click处理事件  $("img").queue("fx", function () {//向图片的动画队列中添加两个动画  $(this).animate({ height: "+=30", width: "+=50" }, 1500, fn) .animate({ height: "-=30", width: "-=55" }, 1500, fn) .dequeue();//执行动画队列中的下一个函数  }); }); $("button#stop").click(function () {//对stop按钮绑定click处理事件  $("img").stop(true, true);//停止图片正在执行动画  }); $("input#off").click(function () {//对off复选框绑定click事件处理程序 if