首页 > 其他分享 >jquery简单体验

jquery简单体验

时间:2023-06-09 10:37:01浏览次数:42  
标签:jquery function Java 代码 体验 简单 msg prototype


是继prototype之后又一个优 秀的Javascript框架。对prototype我使用不多,简单了解过。但使用上jquery之后,马上被她的优雅吸引住了。有人使用这样的一比喻 来比较prototype和jquery:prototype就像Java,而jquery就像ruby.实际上我比较喜欢java(少接触Ruby罢 了)但是jquery的简单的实用的确有相当大的吸引力啊!在项目里我把jquery作为自已唯一的框架类包。使用其间也有一点点心得,其实这些心得,在 jquery的文档上面也可能有讲,不过还是记下来,以备忘罢。
一,找到你了!
还记得$()这个东西吧?prototype还是DWR都使用了这个函数代替document.getElementById()。没错,jquery也跟风了。为达到document.getElementById()的目的,jquery是这样写的:

Java代码



1. var someElement = $("#myId");





看起来比其他两个框架的要多了一个#,好,看看下面的用法:



Java代码

1. $("div p");(1)  
2. $("div.container")(2)  
3. $("div #msg");(3)  
4. $("table a",context);(4)


在prototype里看过这样的写法吗?第一行代码得到所有<div>标签下的<p>元素。第二行代码得到class 为container的<div>元素,第三行代码得到<div>标签下面id为msg的元素。第四行代码得到context为 上下文的table里面所有的连接元素。


如果你熟悉CSS,Xpath,你会觉得这些写法很眼熟!对了。正是。看出奥妙了吧。jquery就是通过这样的方式来找到Dom对象里面的元素。跟CSS的选择器相类似。


二,Jquery对象?


jquery提供了很多便利的函数,如each(fn),但是使用这些函数的前提是:你使用的对象是Jquer对象。使一个Dom对象成为一个Jquery对象很简单,通过下面一些方式(只是一部分):


Java代码

1. var a = $("#cid");(1)  
2. var b = $("<p>hello</p>");(2)  
3. var c = document.createElement("table"); var tb = $(c);

三,代替body标签的onload


这个惯例,也许是除了$()之外,用得最多的地方了。下面一段代码:


Java代码


    1. $(document).ready(function(){  
    2.   alert("hello");  
    3. });(1)  
    4.   
    5. <body οnlοad="alert('hello');">(2)



    上面两段代码是等价的。但代码1的好处是做到表现和逻辑分离。并且可以在不同的js文件中做相同的操作, 即$(document).ready(fn)可以在一个页面中重复出现,而不会冲突。基本上Jqeury的很多plugin都是利用这个特性,正因为这 个特性,多个plugin共同使用起来,在初始化时不会发生冲突。


    不管怎么说,这个惯例可以分离javascript与HTML。推荐使用。


    四,事件机制


    我大量使用的事件可能就是button的onclick了。以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascript代码与html代码分离,保持HTML的清洁,还可以很轻松地绑定事件,甚至你可以不知道“事 件”这个名词。


    Java代码

    1. $(document).ready(function(){  
    2.   $("#clear").click(function(){  
    3.      alert("i am about to clear the table");    
    4.    });  
    5.   $("form[0]").submit(validate);  
    6. });  
    7. function validate(){  
    8.   //do some form validation  
    9. }



    五,同一函数实现set&get


    Java代码

    1. $("#msg").html();  
    2. $("#msg").html("hello");


    上面两行代码,调用了同样的函数。但结果却差别很大。


    第一行是返回指定元素的HTML值,第二行则是将hello这串字符设置到指定元素中。jquery的函数大部分有这样的特性。


    六,ajax


    这是一个ajax横行的时代。多少人,了不了解ajax的都跟着用上一把。呵。使用jquery实现ajax同样简单异常

    Java代码 
        ,{id:1},rend);  
        function rend(xml){  
            alert(xml);  
        } (1)  
        $.post("search.do",{id:1},rend);  
        function rend(xml){  
            alert(xml);  
        } (2)  
          
        $("#msg").ajaxStart(function(){  
           this.html("正在加载。。。。");  
        });(3)  
        $("#msg").ajaxSuccess(function(){  
           this.html("加载完成!");  
        });(4)


    这些都是较常用的方法,get和post用法一样。第一个参数是异步请求的url,第二个为参数,第三个回调方法。


    3,4的方法会在指定的Dom对象上绑定响应ajax执行的事件。当然,jquery的AJAX相关的函数不仅是这些,有兴趣可以去研究再多。


    七,渐入淡出


    Java代码


      1. $("#msg").fadeIn("fast");  
      2. $("#msg").fadeOut("slow");



      没错,上面两行代码已经分别实现了一个id为Msg的jquery对象的渐入和淡出。做一个像Gmail一样的动态加载通知条,用jquery就那么简单。两个函数接受的参数除了快慢等,还可以接收整型,作为渐入或淡出的完成时间,单位为MS。


      八,plugin


      这也是一个插件的时代。


      jquery插件给我的感觉清一色的清洁,简单。如Jtip,要使用它的功能,只需要在你的元素的class上加上Jtip,并引入jtip.js及其样式即可以了。其他事情插件全包。我喜欢jquery的一个重要原因是发现她已经有了很多很好,很精彩的插件。



      写得很烂。可能大家看不出jquery的好处。嗯,光听是没用的,试用一下吧。你会发觉很有趣。


      暂时告一段落吧。待有新的发现再来分享。




      加一些Jquery的资源:


      http://www.visualjquery.com/index.xml 很好的API查询站点


      http://jquery.com/demo/thickbox/ 知道lightBox吧,看看Jquery是怎样实现相同的东西


      http://www.codylindley.com/blogstuff/js/jtip/ Jtip,实用的提示工具


      http://jquery.com/plugins/ 很多牛的插件。


      http://15daysofjquery.com/  jquery 的15天教程


      标签:jquery,function,Java,代码,体验,简单,msg,prototype
      From: https://blog.51cto.com/u_16065168/6445691

      相关文章

      • O2OA (翱途) 开发平台应用市场云笔记功能邀您来体验
        O2OA云笔记提供了一个给员工记录工作笔记,在线协同编辑文档,白板演示的工具,该功能可以将记录下来的文档信息件实时同步到云端,用户随时在多个设备上进行查看、编辑与分享,支持在“云”上做笔记、管理文档、编写脑图信息。这样可以帮助整体工作团队实现资料共享、协同编辑、在线实......
      • 编写一个简单的COM组件
        参考网站:编写一个简单的COM组件_arayofsunshine(1)用MIDL编写.idl文件//将以下代码保存成IXIYIZ.idl文件//在命令行上进行编译,编译命令://midlIXIYIZ.idl//生成IXIYIZ.h,dlldata.c,IXIYIZ.h,IXIYIZ_p.c//其中IXIYIZ.h,IXIYIZ.h文件是我们目前所需要的import"un......
      • [从jQuery看JavaScript]-变量与作用域链(Variable and Scope Chain)
        jQuery片段: 1.var2.//Willspeedupreferencestowindow,andallowsmungingitsname.3.window=this,4.//Willspeedupreferencestoundefined,andallowsmungingitsname.5.undefined,6.//MapoverjQueryinc......
      • jQuery中异步交互技术详细指南
                                                                                                                                          ......
      • 简单的WebSocket对话
        步骤选择一个WebSocket服务器,这里选择到的模块是ws模块npmiws创建一个WebSocket服务器新建一个server.js编写如下代码constWebSocket=require('ws');constwss=newWebSocket.Server({port:3000});wss.on('connection',(socket)=>{console.l......
      • 实现一个简单的时间驱动处理框架
        事件驱动框架允许程序处理外部事件,如网络连接、文件I/O、超时和信号。事件驱动框架可以让程序通过回调函数处理不同的事件,回调函数可以在事件触发时立即被调用。要实现一个简单事件驱动框架,首先需要创建一个事件处理函数,它是根据发生的不同事件调用不同的回调函数。然后,我们......
      • 移动语义的简单示例
        下面是一个使用移动语义的简单示例:#include<iostream>#include<string>classMyString{public:MyString():m_data(nullptr),m_size(0){}MyString(constchar*str):MyString(){m_size=strlen(str);m_data=newchar[m_size+1......
      • Java Kafka简单地将Map对象序列化为json
        最近用到kafka,想简单地把Map对象序列化为json发送到主题,直接用string序列化,生成的结果不是json,虽然格式很像,key都没有引号,可能是直接调用的toString方法。但是网上搜了一圈,都是spring组合或者其他不太简单的方案。在哔站看了一段视频受到启发,就实现了一个自定义json序列化类,......
      • 02-MyBatis-CRUD-配置文件、参数封装、mybatisX插件、动态sql, 简单的用注解开发
        文章目录MybatisCRUD练习1,配置文件实现CRUD1.1环境准备Debug01:别名mybatisx报错1.2查询所有数据1.2.1编写接口方法1.2.2编写SQL语句1.2.3编写测试方法1.2.4起别名解决上述问题1.2.5使用resultMap解决上述问题1.2.6小结1.3查询详情1.3.1编写接口方法1.3.2编写SQL语句......
      • 实验6turtle绘图与python库应用编程体验
        实验任务1test1实验代码fromturtleimport*defmove(x,y):penup()goto(x,y)pendown()defdraw(n,size=100):foriinrange(n):fd(size)left(360/n)defmain():pensize(2)pencolor('red')move(-200,0)......