• JQuery学习总结


    基础


      在学习一些新的知识的时候,总会一些新的概念,需要我们去理解,去跟之前的学习的内容去做比较。这样在学习的时候,对之前的也是一个更深的理解,也不会对新的知识产生一些错误的大方向上的认识。计算机一门很重视实践的学科(人们更喜欢是直接看到程序员的结果),但是学习的基础也是必不可少的。


    什么是jquery?


      在之前接触过javascript的知识,javascript是一门解释性的可以对页面元素进行操作的这样的一门脚本语言。而jquery的本质也就是javascript,其实也就是javascript query的简写。由一些封装好的函数,配有相关的api帮助手册。这样更好的便于查询和使用,有很多像jquery这样相当丰富的javascript库的。jquery是其中的一个。


    语法


    $(selector).action()


    大家在使用可以发现,jquery语法是为选择html页中的元素所指定的。selector就是用来查询html元素的选择符,action就是jquery后续的操作。


    使用


         对于jquery的了解,掌握了上面的一些概念基础上就可以看看一些小demon了。当然必备的jquery的查询api手册也是必备的,做为初学者了解这个手册在结合一些demon基本上就能够做出一些好看的效果了。这里是


    官方的在线api查询网址:http://api.jquery.com/,当然也有离线的chm版的。

    官方jquery下载地址:http://jquery.com/download/#Download_jQuery



    1.引入js文件



    通常将js代码放在head标签内如

    <head>
    <script type="text/javascript">
    $("button").click(function(){
    $("p").hide();
    });
    </script>
    </head>


    当然上述做法不太受欢迎,一般比较好的做法是引入js文件

    <scripttype="text/javascript"src="jquery.js"></script>  

    这里使用的是js已经下载好了的js离线文件,也可以直接使用Google CDN或者Microsoft 的CDN 。这个也就是一个google的服务地址或者CDN的服务器地址

     

    使用Google的CDN

    <head>
    <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
    </head>

    使用Microsoft 的 CDN

    <head>
    <script type="text/javascript"src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.min.js"></script>
    </head>

     

    2.常用方法



    其实对于jquery的使用,在jquery的api手册里面写的已经很清楚了。为了加深一些常用的方法的使用我们还是做一些实例这样比较好。


    选择器


    在jquery里面,选择器的种类有很多

    1.属性选择

      也就是选择在html页面含有这个属性的元素

    如:

      $("[href]")选取所有带有 href 属性的元素。

      $("[href='#']")选取所有带有 href 值等于 "#" 的元素。

    2.元素选择

      元素选择也就是选择相应的html的元素,如hr元素,div元素等。

      $("p")选取 <p> 元素。

    3.css选择

      其实这谈不上选择,也就是选择完html页面上的元素后再进行css的样式设置

      $("p").css("red");

    事件处理

      其实这里的事件处理类似于css样式的设置,同样是建立在已经对html页面元素选择的情况下。再进行调用这个函数罢了。


    实例


     

    <html>
    <head>
    <script type="text/javascript" src="/jquery/jquery.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("Linkbutton").click(function(){
    $("p").show();
    });
    });
    </script>
    </head>
    
    <body>
    <h2>This is a heading</h2>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
    <Linkbutton type="button">Click me</Linkbutton>
    </body>
    </html> 

     

     总结


      总的来说,jquery本质是javascript库,在某种程度简化的javascript的编程。只不过换了一种表达和书写的方式,当然这只是在接触这个javascript库时的一些大局的理解。当涉及到具体的js技巧时,还是细心的去做demon。多多积累,多多查阅手册,多多实践。

     

     

     

     

     

     


  • 相关阅读:
    【简报】一款使用静态图片生成动画的jQuery插件:JZoopraxiscope
    使用jQuery timelinr和animate.css创建超酷的CSS动画时间轴特效
    超酷信息图分享:你属于哪类geek?
    数据库操作优化
    android R.java aapt
    xml sax 解析 & 符号
    sql server2000 完全卸载
    cmd 命令总结
    手动打包 解释
    bat 执行 java jar包
  • 原文地址:https://www.cnblogs.com/guziming/p/4232711.html
Copyright © 2020-2023  润新知