首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JQuery 无废话系列教程(二) jquery实战篇上

Posted in Javascript onJune 23, 2009

我知道大家的想法, 放心好了,有些东西是不需要太多的理论知道做为基础, 其实在我们已经掌握JavaScript时,就已经掌握了JQuery的理论知识. 还是入门篇所说的那样,其实JQuery很简单. : )
在我们开始学习之前建议大家先去下载JQuery1.3中文参考. 下载地址
https://3water.com/books/17812.html

好了,进入正题. 再次申明JQuery很简单,take easy!

    从那开始呢? 最好的切入地方就从 ready 函数开始!

    定义

    ready(fn);

    功能    

    这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

    简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

    有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。

    请确保在 元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。

    可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

     通过上面所述,我们可以把ready看做onLoad的替代方法. 这时有的朋友就会问了,有onLoad方法我们干什么还要用ready方法? 

     我个人的体会及看法是 onLoad缺点是以后维护起来麻烦,到处都是JavaScript代码,很容易出问题的哟! 在<<ppk谈JavaScript>>中,ppk针对这个问题的看法也是如此,尽量不要在标签中直接编写JavaScript 代码.

     实例

     两种编写方式

     一

     $(document).ready(function(){alert("Hello World!");});

     二

     var myFun = function(){alert("Hello World!");}

     $(document).ready(myFun);

    

     到这儿我想大家对ready的用法应该是明白了,但对前面的 $(document)应该很迷惑. 这是什么东东?别急... 现在只要记住这段代码的功能就是当整个文档载入完毕后再执行ready内的函数就够了.

     看完下面的代码我们就明白了$()的用法.

     index.html代码结构如下:

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JQuery测试</title>

    <style type="text/css">

        .p1 {
            background: #ff0000;
        }

        .p2 {
            background: #00ff00;
        }

        .p3{

            background: #0000ff;

        }

        .myPCss{

            font-size:36px;

        }        
    </style>
    <script language="javascript" src="jquery-1.3.2.js">
    </script>
    <script language = "JavaScript" type="text/javascript">
        //<![CDATA[
        $(document).ready(function(){
            $("p").addClass("p1");
            $("p").removeClass("p1");

            $("#myP").addClass("p2");

            $(".myPCss").addClass("p3"); 

           

            $("#myDiv  p").addClass("p3");

            $("#myDiv>p").addClass("p3");

            $("div+p").addClass("p3");

            $("div~p").addClass("p3");

            var aP = document.getElementById("myP");

            $(aP).addClass("p2");

        });
        //]]>
    </script>
</head>
<body>

  <p>快购利众网1</p>

  <p id="myP">快购利众网2</p>

  <p class="myPCss">快购利众网3</p>

  <div id="myDiv">

       <div id="myDivInner">

           <p>快购利众网4</p>

       </div>

       <div id="myDivTemp">

       </div>

       <p>快购利众网5</p>

       <p>快购利众网6</p>

   </div>

   <p>快购利众网7</p>
</body>
</thml>

 代码解析: 

    $("p").addClass("p1");
    $("p").removeClass("p1");

    $("#myP").addClass("p2");

    $(".myPCss").addClass("p3");

    $("#myDiv  p").addClass("p3");

    $("#myDiv>p").addClass("p3");

    $("div+p").addClass("p3");

    $("div~p").addClass("p3");

    

    var aP = document.getElementById("myP");

    $(aP).addClass("p2");

    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

    $("p").addClass("p1");

    $("p").removeClass("p1"); 

    选择文档里全部的<p>元素对象,不论<p>在文档中所处的层次结构如何, 最后选到了7个<p> 元素对象 "<p>快购利众网1</p><p id="myP">快购利众网2</p><p class="myPCss">快购利众网3</p><p>快购利众网4</p><p>快购利众网5</p><p>快购利众网6</p><p>快购利众网7</p>"

     addClass("css name")函数很简单,就是为前面$()选择到的元素对象增加CSS样式.

     removeClass("css name")函数也很简单,就是去掉前面$()选择到的元素对象的指定的样式.

      在这儿,这两段代码功能抵消,相当什么也没做.

    

     $("#myP").addClass("p2"); 

     选择文档里id为"myP"的指定元素对象,并为该元素对象增加名称为"p2"的样式. 最后选到了1个<p>元素对象 "<p id="myP">快购利众网2</p>"

      知识点: 如果要选择指定ID号的元素对象,记得前面用"#"

     $(".myPCss").addClass("p3"); 

      选择文档里样式名为"myPCss"的指定元素对象,并为该元素对象增加名称为"p3"的样式. 最后选到了1个<p>元素对象 "<p class="myPCss">快购利众网3</p>"

      知识点: 如果要选择指定样式的元素对象,记得前面用"." 

      现在可以为大家正式介绍$(),在JQuery里,我们称她为"选择器函数",里面的内容称为"选择器".

      现在大家自己试试,记住选择器选择出的对象有可能是多个哟.

      上面的内容是不是挺简单的!! 嗯,革命才刚刚开始,下面的内容稍稍复杂些因为牵涉到层次的概念,但大家别急,只要记住"选择器"选择出的元素对象可能是多个这点就不用怕了.

    

     $("#myDiv  p").addClass("p3");    

    功能:在给定的祖先元素下匹配所有的后代元素

     分成两部分来分析 

      一,$("#myDiv") 根据上面所学的知识,选择出1个<div>元素对象, "<div id="myDiv">"

      二,$("#myDiv  p") 在上面2个<div>元素对象中的任意层中选择<p>元素对象. 几个? 3个 "<p>快购利众网4</p><p>快购利众网5</p><p>快购利众网6</p>"

      其中"<p>快购利众网4</p><p>快购利众网5</p><p>快购利众网6< /p>"都是在"<div id="myDiv"></div>"内部定义的

      虽然"<p>快购利众网4</p>"是在id为"myDivInner的"div"内部定义的.但因为id 为"myDivInner的"div" 也是id为"myDiv的下层,所以"<p>快购利众网5</p>"也属于id为"myDiv的下层. 有些绕口,记住一点就行. A,B操作器中如果是用空格连接,那么表示B属于A的下层(可以为任意层)之中

      最后为这3个<p>元素对象增加名为"p3"的样式 

      知识点: 对于这类有层次的选择表达式$("A B"),A选择器和B选择器可以是"标签名","#id",".css"三种中的任意一种,中间用空格分开,空格表示任意次. 

     右边的B选择器是在左边A选择器选择的结果上进行内部任意层中选择, 记住是在左边选择出的元素对象(可能是多个)的内部进行再次选择(可能是多个). <- 这个知识点一定要理解透!

     $("#myDiv>p").addClass("p3"); 

    功能:在给定的父元素下匹配所有的子元素

    >代表#myDiv下的子元素对象(多个并只是下一层),最后选择出2个<p>元素对象,""<p>快购利众网5</p><p>快购利众网6</p>",并为该<p>对象增加名为"p3"的样式

  

    $("div+p").addClass("p3");

    功能:匹配所有紧接在 div 元素后的 第一个同辈p 元素

    +代表紧接着div同层的第一个子元素对象.

    id为"myDivInner"同层后面第一个因为是"<div>",所以后没有紧接着的"<p>"

    id为"myDiv"同层后面正好是一个"<p>"

    最后选择出1个<p>元素对象,""<p>快购利众网7</p>",并为该<p>对象增加名为"p3"的样式

    知识点: 是紧接着,如果A与B之间有其它元素都无法匹配.

    $("div~p").addClass("p3");

     功能:匹配 #myDiv 元素之后的所有同辈p 元素

     该功能与 + 类似,不同的有两处.

     一, +为同辈并且紧跟, ~为同辈不需要一定紧跟

     二, +为同辈并且第一个, ~为同辈多个.

    var aP = document.getElementById("myP");

    $(aP).addClass("p2");

    $(aP).addClass("p2") 其实就是$("#myP").addClass("p2") 的另一种形式.

    $()中处了可以用字符串的表达式选择器,还可以使用DOM对象

    

     当你能看到这句话,我想对你说"辛苦了."

     学习的过程本来就是艰辛难耐的,唯为坚持才能战胜一切.

     到现在我们应该明白之前的"$(document)"代表什么意思了吧.

     好了, 今天先讲到这儿. 要快速熟悉选择器的用法只有多加练习.更多的高级应用我相信大家都能自己学会,掌握.

     作者信息:万思杰

JQuery 无废话系列教程(二) jquery实战篇上

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
告诉大家什么是JSON
Jun 10 Javascript
jQuery的12招常用技巧分享
Aug 08 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
jQuery操作表格（table）的常用方法、技巧汇总
Apr 12 Javascript
js省市联动效果完整实例代码
Dec 09 Javascript
IE和Firefox之间在JavaScript语法上的差异
Apr 22 Javascript
基于JavaScript实现鼠标箭头移动图片跟着移动
Aug 30 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
JS操作时间 - UNIX时间戳的简单介绍(必看篇)
Aug 16 Javascript
利用JQuery操作iframe父页面、子页面的元素和方法汇总
Sep 10 jQuery
vuejs实现ready函数加载完之后执行某个函数的方法
Aug 31 Javascript
vue-better-scroll 的使用实例代码详解
Dec 03 Javascript
JQuery 无废话系列教程(一) jquery入门 [推荐]
Jun 23 #Javascript
IE JS编程需注意的内存释放问题
Jun 23 #Javascript
js form 验证函数 当前比较流行的错误提示
Jun 23 #Javascript
javascript form 验证函数 弹出对话框形式
Jun 23 #Javascript
WordPress 照片lightbox效果的运用几点
Jun 22 #Javascript
WordPress JQuery处理沙发头像
Jun 22 #Javascript
JQuery 前台切换网站的样式实现
Jun 22 #Javascript
Express(1) HBuilder(1) kubernetes(1) 条形码(1) GPU(1) tree shaking(1) 分布式追踪(1) group by(1) delete in(1) Three.js(1)
You might like
php中static静态变量的使用方法详解
2010/06/04 PHP
深入php define()函数以及defined()函数的用法详解
2013/06/05 PHP
javascript 写类方式之九
2009/07/05 Javascript
javascript string字符串优化问题
2011/07/31 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
JavaScript知识点整理
2015/12/09 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
2017/03/09 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
JS回调函数深入理解
2019/10/16 Javascript
微信小程序基于高德地图查找位置并显示文字
2019/10/30 Javascript
JS中this的4种绑定规则详解
2020/02/04 Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
2020/03/04 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
Openlayers学习之地图比例尺控件
2020/09/28 Javascript
绘制微信小程序验证码功能的实例代码
2021/01/05 Javascript
python连接mongodb操作数据示例(mongodb数据库配置类)
2013/12/31 Python
python脚本实现查找webshell的方法
2014/07/31 Python
python设置值及NaN值处理方法
2018/07/03 Python
Python远程视频监控程序的实例代码
2019/05/05 Python
django框架使用orm实现批量更新数据的方法
2019/06/21 Python
django settings.py 配置文件及介绍
2019/07/15 Python
Pytorch 实现权重初始化
2019/12/31 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
Django模板标签中url使用详解(url跳转到指定页面)
2020/03/19 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
自我评价的正确写法
2013/09/19 职场文书
工商学院毕业生自荐信
2013/11/12 职场文书
财务部出纳岗位职责
2013/12/22 职场文书
法律专业实习鉴定
2013/12/22 职场文书
团支部建设方案
2014/05/02 职场文书
水利水电专业自荐信
2014/07/08 职场文书
离婚财产处理协议书
2014/09/30 职场文书
mysql 排序失效
2022/05/20 MySQL