• 深入浅出 JQuery (一) 浅析JQuery

      1.  概述

                       一种新技术、新思维的出现都是因为它更方便了人们的需要，解决了目前的一些问题，它产生的同时有好处也有弊端，要看我们如何应用。

                       前面已经给大家介绍了JavaScript脚本语言，它在很大程度上帮助Web开发者提高了浏览器的交互能力和动态效果，但是随着互联网的迅速发展，不能满足用户对于页面的展示形式和用户体验度的迫切需求，于是一些牛X的人们对JavaScript做了进一步的封装、扩展，建立了一个强大的JavaScript代码库，起名为JQuery。

                       最初，它是由一个美国人所创建的一个开源项目，慢慢的越来越多的人使用而流行起来，它的主旨是：以更少的代码，实现更多的功能即(Write Less ,Do More)。

                       使用之前需要用到JQuery库文件。

                       JQuery库文件可以从这里下载：www.jquery.com

           2. 实现主要功能

                       a.控制DOM、CSS

                       b.处理页面事件

                       c.大量插件在页面中应用

                       d.完美结合Ajax

           3. 风格

                    美元符号$

                   事件操作链式写法

                          编写页面某元素的事件时,可以采用链式书写,使得代码更简洁.

           4. 基本语法

     

    [javascript] view plaincopyprint?
    1. <span style="font-size:18px;">// JavaScript Document  
    2. //第一种写法  
    3. $(document).ready(function(){         
    4.       //代码段  
    5.                  });  
    6. //第二种写法  
    7. $(function(){  
    8.     //代码段  
    9.         });</span>  

                      上述两种写法是一致的，那么它们什么意思呢？既然JQuery是JavaScript的扩展，在JavaScript中会有与之对应的代码，看下面代码：

    [javascript] view plaincopyprint?
    1. <span style="font-size:18px;">window.onload=function(){  
    2.       //代码段  
    3.                         };</span>  

                      区别：

                              执行时间不同

                                     Jquery是在Jquery库加载完毕后执行，而JavaScript是在页面全部加载完后执行，显然，前者执行效率高些。

                              执行数量不同

                                     他们都可以执行多次，但是Jquery每次都会有输出结果，而JavaScript只会有一次输出结果。

           5. 访问控制DOM、CSS实例

                   看下面代码实现了给按钮绑定单击事件，当单击时自动获取文本框、单选按钮值，然后显示在一个DIV标签中。

    [html] view plaincopyprint?
    1. <span style="font-size:18px;"><head>  
    2. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
    3. <title>控制DOM</title>  
    4. <!--JavaScript代码-->  
    5. <script type="text/javascript" src="jquery.js"></script>  
    6. <script  type="text/javascript" >  
    7.   
    8.     $(function(){  
    9.         $("#btnSubmit").click(function(){  
    10.           
    11.             //获取文本框的值  
    12.             var txtValue=$("#txtName").val();  
    13.               
    14.             //获取单选按钮值  
    15.             var radValue=$("#radSex1").is(":checked")?"男":"女";  
    16.             //显示文本框内容和值  
    17.             $("#tip").css("display","block").html(txtValue+"<br>"+radValue);  
    18.               
    19.         });  
    20.     });  
    21.       
    22. </script>  
    23. <!--CSS代码-->  
    24. <style type="text/css">  
    25.   
    26. </style>  
    27. </head>  
    28. <body>  
    29.     <div class="Frame">  
    30.         <div class="Title">  
    31.             输入如下信息：  
    32.         </div>  
    33.         <div class="Content">  
    34.             姓名：<input id="txtName" type="text" class="txtCss"/>  
    35.             性别：<input name="rad" type="radio" class="radio" id="radSex1" value="男"/>  
    36.             男  
    37.                   <input  name="rad" id="radSex" type="radio" value="女"/> 女  
    38.         </div>  
    39.         <div class="Btn">  
    40.             <input id="btnSubmit" type="button" value="提交" class="btnCss" />  
    41.         </div>  
    42.   
    43.     </div>      
    44.     <div id="tip">  
    45.           
    46.     </div>  
    47. </body>  
    48. </html></span>  


                      通过JQuery可以轻松的找到HTML元素，然后，进行各项操作不用使用GetElementById等方法先查找出来，当有很多事件需要添加时，也不需分别添加，只需要用链式往上添加即可。

                       看一下显示效果：

                 

                   代码里还用到了一种JQuery选择器：属性过滤选择器(:checked)，获取表单中所有选中的元素，返回一个数组，更多选择器应用将在下一篇博客介绍。
  • 相关阅读:
    .NET Framework类库大概
    CTS、CLS、CIL与CLR
    .NETFramework、CLR、.NET Framework class library、托管代码是什么
    万维网三大核心技术
    Clang、GCC和LLVM是什么
    常见开源许可证、开源协议GPL、BSD、MIT、Mozilla、Apache和LGPL之间区别
    编译原理之变量、名字与标识符
    编译原理之静态策略与动态策略
    Jupyter Notebook打开任意文件
    修改VsCodes的语言为中文
  • 原文地址：https://www.cnblogs.com/dyllove98/p/2891597.html
Copyright © 2020-2023  润新知