zoukankan      html  css  js  c++  java
  • 学习Jquery

     早就听说了Jquery的大名,一直没有细心的学习一下,通过阅读收集的一些资料,感觉Jquery真的很强大。决定开始自己的学习Jquery之旅。在这里不是为大家讲解Jquery(深知水平有限),只是将自己的学习成果分享给大家,共同学习和交流。

    jQuery简介

    我所理解的jQuery就是一个强大的Javascript类库,里面封装好了很多现有的方法和属性。可以使开发人员用很少的代码更好更快的开发出自己想实现的效果。过多的jQquery在这里就不多介绍了,想必很多人都已经看过了更详细的文档,我就不多啰嗦了。

    Selectors (选择器)

    jQuery中使用 $ ,可以通过元素的id, css class或 tag name很容易的获取到相应的元素。

    (1)简单的获取元素

    Example:

    $("p") //获取所有的P元素
    $("#pid") //通过 ID 
    $(".p") //通过css class name

    (2)当然,他的功能不仅限于如此,还可以钻取层次结构

    Example:

    $("table > tbody > tr") //获取Table的所有行
    $("#t1 > tbody > tr") //获取t1 中所有行
    $(".table > tbody > tr") // 获取css类名为.table的所有行

    (3)Jquery为了让开发人员更准确方便的选择到相应的元素,还给我们提供了强大的筛选器的功能:

    Example:

    $(“p:first”)  //first  
    $(“p:last”)  //last  
    $(“table > tbody > tr:even”)  //even rows   
    $(“table > tbody > tr:odd”) //odd rows   
    $(“p:eq(1)”) //索引为1
    $(“p:gt(2)”) //2以上的元素
    $("p:lt(10)”) // 0-9   
    $(“p:empty”) //没有子孩子的p  
    $(“p:parent”) //为父的p

    (4)访问文本,并可以控制其中的值:

    Example:

    $("input[type='text']").css("color", "red"); 

    关于selectors的作用还有很多,大家可以参看:http://docs.jquery.com/Selectors

    访问内容

    Examlple:

    $("#span").html();   
    $(:input).val();   
    $("#name").text();

    上面的几个方法用来获取指定元素的基本结果集,在我们使用的时候应当注意:val()方法查找有一个属性和他相关联的元素。html()查找的是指定元素中HTML中的内容。text()方法获取的是指定元素的text。

    操作HTML标记,还有其他的一些方法,比较常用的还有css()和attr()。

    css()方法有两个参数,一个是css的元素名,另一个是其所对应的值,通过css()可以很容易的修改一个或多个元素的css样式。

    attr()方法可以读取或修改元素的属性。并且他可以同时设置多个元素的属性.

    Examlple:

    $("p").css("background-color", "blue");   
    $("p").css({ "background-color" : "navy", "color", "white" });   
    $("button").attr("disabled", "disabled"); 

     事件

    jQuery能够监听元素的事件。最引人注目并且频繁使用的事件就是ready 事件。这个事件在浏览器加载完之后触发。

    $(document).ready(function() { .. });

    处理一个按钮事件:

    $("#buttonid").click(function() { alert("BUTTON CLICK"); }

    小结:jQuery可以让我们很容易的控制HTML并且对其进行样式的修改。

    来自http://www.cnblogs.com/gaoweipeng/archive/2009/06/07/1498065.html

  • 相关阅读:
    tyvj P3737 逐个击破
    最小生成树 kruskal
    最小生成树 prim
    code2039 骑马修栏杆
    前端优化
    数组1
    数组
    序列化对象
    解决iphone横屏时字体变大问题或者内容大小不一样等...
    Media Queries详解
  • 原文地址:https://www.cnblogs.com/zhoupengyi/p/6067023.html
Copyright © 2011-2022 走看看