zoukankan      html  css  js  c++  java
  • JQuery前奏:特性简介

    迫于JQuery强大的噱头(玩笑话O(∩_∩)O~),本人也开始着手学习,继上篇介绍了几款优秀的js框架,这篇将对JQuery核心特性进行简单记录。

    一、JQuery框架的核心就是从HTML文档中匹配元素并对其进行操作。JQuery通过封装js的原生方法,模拟了一套CSS选择器,甚至定义了完整的XPath语言的选择能力,在一定程度上简化了js的操作。另外JQuery还解决了跨浏览器的兼容问题,使DOM操作趋于统一,许多让开发者头痛的事件处理,样式设计等兼容问题变得轻松,方便。总的说来JQuery有以下几个优点:

    • 体积小,使用灵活。
    • 丰富的DOM选择器(CSS1~3,XPath)
    • 跨浏览器(IE6,FF,Safari,Opera等)
    • 链式代码。
    • 强大的事件、样式支持。
    • 强大的ajax能力
    • 易于扩展,插件丰富。

    二、下面挑选几个特性简单介绍下。

    (1)jquery构造函数:jquery把所有的操作都包装在一个jQuery()函数中,形成了统一(也是唯一)的操作入口,这就为jquery操作降低了门槛。jquery狗仔函数能够接受任意类型的数据,但是能够解析的包括以下四种。

      ①jquery(expression,context)

      jQuery("Div#wrap>p:first").addClass("red")

      ②jQuery(html)
      $('ul').append($'<li>new item</li>')

      ③jQuery(element)
      $(document).ready(function(){
        $('ul').css('color','red');
      })

      ④jQuery(fn)
      $(function(){
        $('ul').css('color','red');
      })

    (2)jquery链式语法:它允许用户进行连续设计各种行为,从而实现按人的惯性思维进行快速开发。

    View Code
    1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    2 <html xmlns="http://www.w3.org/1999/xhtml">
    3 <head>
    4 <title></title>
    5 <style type="text/css">
    6 .panel
    7 {
    8 padding:60px;
    9 background-color:Red;
    10 color:#FFFFFF;
    11 font-size:50px;
    12 font-weight:bold;
    13 width:600px;
    14 text-align:center;
    15 }
    16 </style>
    17 <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
    18 <script type="text/javascript">
    19 $(function () {
    20 //第一行代码添加四个按钮
    21 $('<input type="button" value="click me" /><input type="button" value="triggle clickme" /><input type="button" value="detach handler" /><input type="button" value="show/hide text" />').appendTo($('body'));
    22 //第二行,分别选中四个按钮,并为他们绑定不同的事件处理函数
    23 $('input[type="button"]')
    24 .eq(0).click(function () { alert('you clicked me!'); }).end()//找到第一个按钮,并为其绑定click事件处理函数,然后返回所有按钮,供下一次查找
    25 .eq(1).click(function () { $('input[type="button"]:eq(0)').trigger('click'); }).end()
    26 .eq(2).click(function () { $('input[type="button"]:eq(0)').unbind('click'); }).end()
    27 .eq(3).toggle(function () { $('.panel').hide('slow'); }, function () { $('.panel').show('slow'); });
    28 });
    29 </script>
    30 </head>
    31 <body>
    32 <div class="panel">Welcome To JQuery!</div>
    33 </body>
    34 </html>

    (3)jquery之所以让人爱不释手,原因在于其强大的选择器表达式。

      关于选择器,我们在后续的学习中无时无刻不跟其打交道,后续再讲。

    (4)扩展性。

  • 相关阅读:
    poj 2155 Matrix
    iOS之Prefix.pch
    多用派发队列,少用同步锁
    SenTestingKit.framework的报错!
    xcode4的环境变量,Build Settings参数,workspace及联编设置
    xcode4中build Settings常见参数解析
    XCode环境变量及路径设置
    Xcode添加静态库以及编译选项配置常见问题
    基于第三方微信授权登录的iOS代码分析
    理解iOS 8中的Self Sizing Cells和Dynamic Type
  • 原文地址:https://www.cnblogs.com/liujb/p/2068727.html
Copyright © 2011-2022 走看看