首页
所有分类
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 相关文章推荐
JQUERY THICKBOX弹出层插件
Aug 30 Javascript
js使用removeChild方法动态删除div元素
Aug 01 Javascript
JavaScript实现twitter puddles算法实例
Dec 06 Javascript
JS长整型精度问题实例分析
Jan 13 Javascript
javascript制作游戏开发碰撞检测的封装代码
Mar 31 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
微信小程序的动画效果详解
Jan 18 Javascript
js实现图片局部放大效果详解
Mar 18 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
谈谈JavaScript中的函数
Sep 08 Javascript
微信小程序canvas实现签名功能
Jan 19 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
PIL(1) Flask(2) reduce()(1) 裁剪图片(1) Python(3) 信号同步(1) 鲲鹏(1) 进度条(1) 死锁(3) 生命周期(1)
You might like
虹吸壶是谁发明的？煮出来的咖啡好喝吗
2021/03/04 冲泡冲煮
PHP遍历二维数组的代码
2011/04/22 PHP
php基础学习之变量的使用
2011/06/09 PHP
PHP实现微信发红包程序
2015/08/24 PHP
yii2中结合gridview如何使用modal弹窗实例代码详解
2016/06/12 PHP
php输出反斜杠的实例方法
2019/09/19 PHP
JavaScript 拖拉缩放效果
2008/12/10 Javascript
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
理解JavaScript的变量的入门教程
2015/07/07 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
Javascript闭包与函数柯里化浅析
2016/06/22 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
JS前端笔试题分析
2016/12/19 Javascript
自带气泡提示的vue校验插件（vue-verify-pop）
2017/04/07 Javascript
angularjs2 ng2 密码隐藏显示的实例代码
2017/08/01 Javascript
微信小程序实现省市区三级地址选择
2020/06/21 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
ES6 Iterator接口和for...of循环用法分析
2019/07/31 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
[01:36:17]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第一场 1月31日
2021/03/11 DOTA
Pycharm远程调试openstack的方法
2017/11/21 Python
Python subprocess模块详细解读
2018/01/29 Python
python Spyder界面无法打开的解决方法
2018/04/27 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
在python image 中安装中文字体的实现方法
2019/08/22 Python
python实现mean-shift聚类算法
2020/06/10 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
Selenium获取登录Cookies并添加Cookies自动登录的方法
2020/12/04 Python
CSS3关于z-index不生效问题的解决
2020/02/19 HTML / CSS
医学实习生自我鉴定
2013/12/12 职场文书
房地产销售经理岗位职责
2014/01/01 职场文书
俞敏洪励志演讲稿
2014/04/29 职场文书
2014年社团工作总结范文
2014/11/27 职场文书
大学校园餐饮创业计划书
2019/08/07 职场文书