zoukankan      html  css  js  c++  java
  • 初学JQuery

    1.jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库。

    2.如何添加JQuery库: 可添加 <head> <script type = "text/javascript" src = "jquery.js"><script> </head> 但是在HTML5中,默认的script是javascript,所以不需要type="text/javascript"了。 jquery.js可以到http://jquery.com/download/?rdfrom=http%3A%2F%2Fdocs.jquery.com%2Fmw%2Findex.php%3Ftitle%3DDownloading_jQuery%26redirect%3Dno下载,下载是请根据需要选择不同版本的js,要考虑兼容性。 如果不想在本地保留jquery.js文件,那么可以从 Google 或 Microsoft 加载 CDN jQuery 核心文件。
    使用 Google 的 CDN <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /jquery/1.4.0/jquery.min.js"></script> </head> 可以将1.4.0替换为1.4则是得到1.4版本中最新的,同理替换为1时得到的是1系列中最新的版本。
    使用 Microsoft 的 CDN <head> <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery /jquery-1.4.min.js"></script> </head>
    用这两家公司的JQuery有一个好处就是:会从用户缓存中提取,从而大大减少了加载时间。


    3.基本语法:

    $(selector).action()

    美元符号定义JQuery .

    选择符(select)“查询”和查找HTML元素 .执行对元素的操作

    例:

    $(this).hide() - 隐藏当前元素

    $("#test").hide() - 隐藏id = test的元素

    $(".test").hide()  - 隐藏class = test的元素

    $("p").hide() - 隐藏所有段落

      $("p.test").hide()  - 隐藏class = test的段落元素


    4.文档就绪函数

    $(document).ready(function(){

    ---JQuery functions go here---

    });

    为了防止在文档完全加载就绪之前运行JQuery代码。


    5.选择器

    .元素选择器

        使用与CSS相同的class或id一样的形式来选取HTML元素如上举例

    .属性选择器

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

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

        $("[href != '#']") - 选取所有href值不等于“#”的元素

        $("[href $= '.jpg']") - 选取所有href值等于以.jpg结尾的元素

    .CSS选择器 

           $("p").css("background-color","red");


    6.JQuery事件函数 JQuery是为事件处理(触发)特别设计的,事件处理方法是JQuery中的核心函数。

    可以将自己写的JQuery函数放到单独的文件中。

    7.JQuery名称冲突

    使用var jq = JQuery.noConflict(),帮助使用自己的(如:jq)来代替$符号。

    8.

    jQuery 事件例子
    Event 函数 绑定函数至
    $(document).ready(function)  
    将函数绑定到文档的就绪事件(当文档完成加载时)
      $(selector).click(function)              触发或将函数绑定到被选元素的点击事件
    $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
    $(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
    $(selector).mouseover(function)
    触发或将函数绑定到被选元素的鼠标悬停事件
    9.显示/隐藏元素
    JQuery hide()和show()
    $(selector).hide(speed,callback);
    $(selector).show(speed,callback);
    speed表示显示或隐藏的速度,可取值:“slow”,“fast”,毫秒数。(特别注意引号)callback是隐藏或显示之后要执行的函数的名称。
    或者使用toggle(speed,callback)函数来实现显示和隐藏之间的切换。
     
    10.元素淡入淡出
    • fadeIn()

      用于淡入已隐藏的元素

      语法:$(select).fadeIn(speed,callback);

    • fadeOut()

      用于淡出要隐藏的元素

      语法:$(select).fadeOut(speed,callback);

    • fadeToggle()

      用于在fadeIn(),fadeOut()之间进行切换

      语法:$(select).fadeToggle(speed,callback);

    • fadeTo()

      用于渐变为给定的不透明度(值介于0~1)

      语法:$(select).fadeTo(speed,opacity,callback);

    11.滑动效果

    • slideDown()

    用于淡向下滑动元素

      语法:$(select).slideDown(speed,callback);

    • slideUp()

    用于淡向上滑动元素

      语法:$(select).slideUp(speed,callback);

    • slideToggle()

    用于在slideDown()和slideUp()之间进行切换。

      语法:$(select).slideToggle(speed,callback);

     

    12.动画
      animate()
      用于创建自定义动画。
      用法:$(selector).animate({params},speed,callback);
      必须的param参数定义形成动画的CSS属性;默认情况下,所有HTML元素的位置都是静态的,并且无法移动。如需对位置进行操作,
      记得首先把元素的CSS position属性设置为relative,fixed或absolute。
      几乎可以用animate来操作所有的CSS属性,但是必须使用Camel命名法书写所有属性名。marginLeft代替CSS中的margin-left。
    可以多个动画一起使用,会从上到下依次执行。
    fontSize:'3em' 将字体变换成父字体的三倍。
     
    13.停止动画
    用于在动画完成前停止动画效果。
    语法:$(select).stop(stopAll,goToEnd);
        可选参数stopAll 规定是否清除动画队列,默认是false,允许任何排入队列的动画向后执行。
    可选的参数goToEnd  规定是否完成当前动画,默认是false。
     
    14.callBack函数在当前动画执行100%后执行
    如果不这样做,可能会因为前者动画时间过长,还没执行完毕时就已调用下边的函数。
     
    15.JQuery Chaining
    Chaining允许我们在一条语句中用多个JQuery方法(在相同的元素上)。浏览器就不必多次查找相同的元素。
    例子:$("p").css("color","red")
          .slideUp(2000)
          .slideDown(2000);
    段落P首先变成红色,再淡出然后淡入。
     
     
     
     
     
  • 相关阅读:
    zoj 1033 与其说是搜索,不如说是枚举
    hdu 4294 数学分析+搜索
    新的篇章
    Silverlight 利用DataGrid行加载事件动态控制行列显示
    (转)Excel中“不同的单元格格式太多”问题解决方法
    EasyUI tree的三种选中状态
    JS监听手机返回键
    Silverlight ComBox获取当前选中项的值
    DataGrdid 利用结果集反向转换成数据List
    silverlight 动态设置下拉框选中值
  • 原文地址:https://www.cnblogs.com/VinceYang1994/p/Vince_JQuery.html
Copyright © 2011-2022 走看看