原来的时候自己看过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 (this.checked) $("img").clearQueue();//若选中了复选框，则清除动画队列
                $.fx.off = this.checked//根据复选框状态设置$.fx.off
            });});</script>
</head>
<body><p align="center"><button id="run">运行动画</button><button id="add">添加动画</button><button id="stop">停止动画</button><label><input id="off" type="checkbox" />禁止动画</label></p><p align="center">动画队列的长度为<span>0</span></p><img src="data:images/3.gif" alt=""/>
</body>
</html>

（6）键盘事件操作

其实这里也是没有什么重点的东西，就是前面知识点的应用，写个例子，大家看看

<!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">div.container{font-size:12px;font-family:Verdana;height:100px;width:368px;margin:0 auto;text-align:center;overflow:scroll;border:2px solid #999;}span{color:Red;font-weight:bold;margin:6px;}</style><script src="js/jquery-1.8.0.js" type="text/javascript"></script><script type="text/javascript">$(function () {$(document).keydown(function (e) {//对文档绑定keydown处理程序var code = "<div align='center'>按键代码=<span>" + e.which + "</span></div>";$("div.container").append(code);});$(document).keyup(function (e) {//对文档绑定keyup处理程序if (e.which == 113)//若按下了<ESC>键
                    $("div.container").html("");//清除container元素内容
            });$(document).keypress(function (e) {//对文档对象绑定keypress处理程序var char = ",字符=<span>" + String.fromCharCode(e.which)+ "</span>";$("div.container>div:last").append(char);});});</script>
</head>
<body><p align="center">从键盘上按下某个键，或输入某个字符（按<b>F2</b>键清除内容（好像在IE中可以，其他的浏览器好像不行））</p><div class="container"></div>
</body>
</html>

（7）鼠标事件操作

<!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">div.demo{height:103px;width:330px;margin:0 auto;padding:6px;border:2px solid #999;overflow:scroll;}p,div{font-size:12px;}#xy{background-color:Yellow;height:120px;width:358px;border:3px inset red; margin:0 auto;text-align:center;line-height:120px;font-family:Georgia;}</style><script src="js/jquery-1.8.0.js" type="text/javascript"></script><script type="text/javascript">function getTime() {//定义函数计算时间var date = new Date();var time = date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() + "." + date.getMilliseconds();return time;}$(function () {var button = ["左键", "中键", "右键"];$("div.demo").click(function (e) {//对div绑定click事件处理程序var msg = getTime(e.timeStamp) + ":<b>单击鼠标</b>" + "</br>";$(this).append(msg).scroll()}).dblclick(function () {//对div绑定dblclick事件处理程序
                $(this).html("");}).mousedown(function (e) {//对div绑定mousedown事件处理程序var msg = getTime(e.timeStamp) + ":<b>按下鼠标" + button[e.which - 1] + "</b><br/>";$(this).append(msg).scroll()}).mouseup(function (e) {//对div绑定mouseup事件处理程序var msg = getTime(e.timeStamp) + ":<b>按下鼠标" + button[e.which - 1] + "</b><br/>";$(this).append(msg).scroll()}).scroll(function () {//对div绑定scroll事件处理程序
                $(this).scrollTop($("div.demo").find("b").length * 12);}).mouseenter(function (e) {//对div绑定mouseup事件处理程序var msg = getTime(e.timeStamp) + ":<b>触发"+e.type+"事件</b><br/>";$(this).append(msg).scroll()}).mouseleave(function (e) {//对div绑定mouseup事件处理程序var msg = getTime(e.timeStamp) + ":<b>触发" + e.type + "事件</b><br/>";$(this).append(msg).scroll()}).mouseover(function (e) {//对div绑定mouseup事件处理程序var msg = getTime(e.timeStamp) + ":<b>触发" + e.type + "事件</b><br/>";$(this).append(msg).scroll()}).mouseout(function (e) {//对div绑定mouseup事件处理程序var msg = getTime(e.timeStamp) + ":<b>触发" + e.type + "事件</b><br/>";$(this).append(msg).scroll()})});$(function () {$("#xy").mousemove(function (e) {var msg = "e.pageX=" + e.pageX + ",e.pageY=" + e.pageY;$(this).html(msg);});});</script>
</head>
<body><p align="center">请用鼠标左键或右键单击下面的方框（双击清除内容）</p><div class="demo"></div><p align="center">请在下面方框中移动鼠标</p><div id="xy"></div>
</body>
</html>

4、jQuery与Ajax

这一小结是最重要的，由于前面专门一节讲的是Ajax与ASP.Net，在这里不再重复,请访问： 学习.net与ajax的详细案例总结

在这里添加一个很重要的知识点，

jQuery中的AJax全局事件

我们是否平时上网的时候主要到这么个细节，当网站还没有加载完毕时，会显示  “加载中……”的字样，这是怎么实现的，就是通过AJax全局事件实现的

<div id="loading">加载中……</div>$("#loading").AjaxStart(function(){$(this).show();
});$("#loading").AjaxStop(function(){$(this).hide();
});   //这里也可以使用连式写法//如果想使某个页面其他Ajax不受全局Ajax的影响，使用：$.ajax({url："……";global:false;
});//在jQuery1.5版本之后，如果Ajax请求不触发全局方法，可以设置：$.ajaxPrefilter(function(){options.global=true;
})

5、jQuery的插件的使用和写法

（1）表单验证插件（Validation）但是默认语言是英语，如果想要其显示汉语，只需要引入中文信息验证库。

（2）jQuery表单插件（Form）,核心方法是ajaxForm(),ajaxSubmit()，能够很容易将表单升级为Ajax提交方式，这里不细说

（3）模态窗口插件（SimpleModel）

（4）Cookie插件（很好用）

不细说，添加代码

<!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><script src="js/jquery-1.9.1.js" type="text/javascript"></script><script src="js/jquery.cookie.js" type="text/javascript"></script><script type="text/javascript">$(function () {$("#btnWrite").click(function () {$.cookie("myText", $("#Text1").val());});$("#btnRead").click(function () {$("#Text1").val($.cookie("myText"));});$("#btnDing").click(function () {if ($.cookie("isding") == "true") {alert("不能重复顶");return;}alert("顶");$.cookie("isding", "true", { expires: 1 })//会话Cookie
});setInterval(function () {var myNote = $("#myNote").val();$.cookie("myNote", myNote, {expires:7});}, 5000);});</script>
</head>
<body><input id="Text1" type="text" /><input id="btnWrite" type="button" value="写入" /><input id="btnRead" type="button"value="读取" /><input id="btnDing" type="button" value="顶" /><textarea rows="20" height="20" id="myNote"></textarea>
</body>
</html>

（5）jQuery UI

（6）自定义jQuery插件

jQuery插件机制是提供了两个用于jQuery扩展的方法，jQuery.ftn.extend(),jQuery.extend().

这里自己可以上网查看资料，不在这里细说。

jQuery的基本内容就是这些，就看你掌握了多少，就看你会不会用，如果学的比较好的话，可以自己写一个自定义jQuery插件，还是自己写的东西适合自己开发用。

转载于:https://www.cnblogs.com/myhappylife/archive/2013/05/20/3088136.html

与jQuery的感情碰撞——由浅入深学jQuery相关推荐

  1. 跟我学jQuery(三) 无所不能的选择器1

    跟我学jQuery教程目录: 跟我学jQuery(一)    前言 跟我学jQuery(二)    初识jQuery 跟我学jQuery(三)    无所不能的选择器1 跟我学jQuery(四)    ...

  2. 跟我学jQuery(二) 初识jQuery

    跟我学jQuery教程目录: 跟我学jQuery(一)    前言 跟我学jQuery(二)    初识jQuery 跟我学jQuery(三)    无所不能的选择器1 跟我学jQuery(四)    ...

  3. java中jquery怎么学,jQuery动画+实例

    1.动画基础隐藏和显示 jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般 ...

  4. Java程序员从笨鸟到菜鸟之（八十六）跟我学jquery（二）大话jquery选择器

    本篇博客我将带大家来学习一下jQuery的第一个比较重要的知识点,这个知识点对学习jquery的同学来说是必须掌握的,因为他是所有操作的基础,这个知识点就是jquery的对象选择器,我们利用jquer ...

  5. 为什么要学jquery

    为什么要学jquery 使用javascript开发过程中,有许多的缺点: 查找元素的方法单一,麻烦. 遍历数组很麻烦,通常要嵌套一大堆的for循环. 有兼容性问题. 想要实现简单的动画效果,也很麻烦 ...

  6. Java学习的快速入门：10行代码学JQuery

    生活在快速发展时代的我们,如果不提速可能稍不留神就被时代淘汰了.快节奏的时代成就了快餐,亦成就了速成教育.尤其是身处互联网行业的我们,更新换代的速度更是迅速,快速掌握一门技术已经成为潮流趋势.怎样才能 ...

  7. 跟我一起学jQuery——第二集（未完待续..）

    <锋利的JQuery>第二版阅读笔记-第二章 跟我一起学jQuery--第二集 代码风格 jQuery选择器 接下来,就要开始正式学习jQuery的各种使用了.但是没有规矩不成方圆,所以我 ...

  8. 跟我一起学jQuery——第一集

    <锋利的JQuery>第二版阅读笔记-第一章 跟我一起学jQuery--第一集 jQuery对象和DOM对象 jQuery的优势与特点 Hello World! jQuery对象和DOM对 ...

  9. 小白学jquery Mobile《构建跨平台APP：jQuery Mobile移动应用实战》连载结束

    感谢各位亲们的大力支持,小白学jquery Mobile<构建跨平台APP:jQuery Mobile移动应用实战>连载已经结束了. 有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习 ...

最新文章

  1. 谷歌浏览器翻译插件 Linkclump:一次性打开多个链接
  2. 19、Cocos2dx 3.0游戏开发找小三之Action：流动的水没有形状，漂流的风找不到踪迹、、、...
  3. 战争游戏[tarjan]
  4. linux 同步 多终端,Linux系统如何实现不同终端间的同步
  5. LiveVideoStack音视频技术2018年度评奖揭晓
  6. libcurl实现解析(3) - libcurl对select的使用
  7. WebApi client 的面向切面编程
  8. Linux下安装Docker，报错docker: unrecognized service的两种解决方案
  9. android播放音频的格式,android 音频播放_android ios 音频格式_android 播放网络音频...
  10. 消息队列的优点和缺点
  11. 基于MATLAB实现ECG心电信号处理
  12. 程序员生存定律-六个程序员的故事（2） .
  13. Java实现短信验证码(阿里云短信服务)
  14. Internet Explorer 11内置浏览器的下载
  15. 如何安装tushare
  16. VS2019 C++ 单元测试
  17. QQ登录+分享+空间分享
  18. 如何制作SSL证书即https服务支持
  19. 服务提供和服务支持的区别
  20. 游标卡尺原理及读数方法

热门文章

  1. Texlive安装与环境变量配置
  2. Java垃圾回收之新生代垃圾收集器
  3. RPC 笔记（08）— socket 通信（多进程多线程服务器）
  4. linux中去掉^M的方法
  5. 难忘的一天——装操作系统(四）
  6. pytorch源码解析：Python层 pytorchmodule源码
  7. Octave Convolution卷积
  8. python 读取excel 内的中文显示为unicode 编码
  9. INSTALL_FAILED_USER_RESTRICTED
  10. POJ 2942 Knights of the Round Table (算竞进阶习题)