首页
所有分类
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 相关文章推荐
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
JS来动态的修改url实现对url的增删查改
Sep 05 Javascript
html的DOM中document对象forms集合用法实例
Jan 21 Javascript
JavaScript中的Math.sin()方法使用详解
Jun 15 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
详解IOS微信上Vue单页面应用JSSDK签名失败解决方案
Nov 14 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 Javascript
微信小程序页面滚动到指定位置代码实例
Sep 07 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
原生JS实现分页
Apr 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
欢迎词(65) 心得体会(660) 推荐信(292) 创业计划书(312) 岗位职责(1324) 职业生涯规划书(234) 演讲稿(869) 思想汇报(404) 道歉信(39) 证婚词(21)
You might like
php header功能的使用
2013/10/28 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
PHP基本语法总结
2014/09/06 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
jquery+javascript编写国籍控件
2015/02/12 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
RequireJS入门一之实现第一个例子
2015/09/30 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
jquery获取input type=text中的值的各种方式(总结)
2016/12/02 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
mongoose更新对象的两种方法示例比较
2017/12/19 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
jQuery事件blur()方法的使用实例讲解
2019/03/30 jQuery
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
如何在Node和浏览器控制台中打印彩色文字
2020/01/09 Javascript
详解vue 组件
2020/06/11 Javascript
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场！
2019/07/20 DOTA
[01:52]2020年DOTA2 TI10夏季活动预告片
2020/07/15 DOTA
Python使用函数默认值实现函数静态变量的方法
2014/08/18 Python
Python编程中使用Pillow来处理图像的基础教程
2015/11/20 Python
Python3如何解决字符编码问题详解
2017/04/23 Python
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
python实现智能语音天气预报
2019/12/02 Python
TensorFlow2.0:张量的合并与分割实例
2020/01/19 Python
Python configparser模块常用方法解析
2020/05/22 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
Nili Lotan官网：Nili Lotan同名品牌
2018/01/07 全球购物
涉外文秘个人求职的自我评价
2013/10/07 职场文书
实习生自我鉴定
2013/12/12 职场文书
初中物理教学反思
2014/01/14 职场文书
人代会标语
2014/06/30 职场文书
优秀团员个人总结
2015/02/26 职场文书
Golang入门之计时器
2022/05/04 Golang