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)"代表什么意思了吧.

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

     作者信息:万思杰

Javascript 相关文章推荐
JQuery的一些小应用收集
Mar 27 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
JS特权方法定义作用以及与公有方法的区别
Mar 18 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
浅谈js中变量初始化
Feb 03 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
connection reset by peer问题总结及解决方案
Oct 21 Javascript
JavaScript页面实时显示当前时间实例代码
Oct 23 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
一篇文章介绍redux、react-redux、redux-saga总结
May 23 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
You might like
php面向对象全攻略 (九)访问类型
2009/09/30 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
php实现在服务器端调整图片大小的方法
2015/06/16 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
JavaScript 的方法重载效果
2009/08/07 Javascript
node.js中的fs.truncate方法使用说明
2014/12/15 Javascript
浅析AngularJS中的指令
2016/03/20 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
2016/05/15 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
Nodejs回调加超时限制两种实现方法
2017/06/09 NodeJs
Vue.extend构造器的详解
2017/07/17 Javascript
echart简介_动力节点Java学院整理
2017/08/11 Javascript
vuejs 动态添加input框的实例讲解
2018/08/24 Javascript
electron中使用bootstrap的示例代码
2018/11/06 Javascript
vscode 开发Vue项目的方法步骤
2018/11/25 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
Vue数据驱动表单渲染,轻松搞定form表单
2019/07/19 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
JavaScript实现滑动门效果
2020/01/18 Javascript
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
python简单验证码识别的实现方法
2019/05/10 Python
Python实现Mysql数据统计及numpy统计函数
2019/07/15 Python
pycharm创建scrapy项目教程及遇到的坑解析
2019/08/15 Python
django 数据库连接模块解析及简单长连接改造方法
2019/08/29 Python
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
英国女士家居服网站:hush
2017/08/09 全球购物
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
linux系统都有哪些运行级别
2012/04/15 面试题
关于运动会的稿件
2014/02/02 职场文书
堂吉诃德读书笔记
2015/06/30 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
详解Vue router路由
2021/11/20 Vue.js
Android studio 简单计算器的编写
2022/05/20 Java/Android
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技