与jQuery的感情碰撞——由浅入深学jQuery

原来的时候自己看过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.onload=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>这是什么</h5>
    <div>
    …………………………
    …………………………
    <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="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插件,还是自己写的东西适合自己开发用。

标签