`
wanxiaotao12
  • 浏览: 457914 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Jquery基础用法

阅读更多

jQuery
   1.特点:
   小巧
   功能强
   跨浏览器
   插件

   2.使用
    实际是js文件
    a)  复制js到WebRoot
    b)  页面<script src="jquery.js" charset=""></script>

   3.核心对象及常用方法和属性
     a)名称
     jQuery和$
     用$找出来的对象叫jQuery对象
     用document找出来的对象叫Dom对象
    
     b)dom和jquery对象转换
     jQuery对象.get(0) --->dom对象
     $(dom对象)--->jQuery对象
   
     c)jQuery对象方法
      .show() 显示
      .hide() 隐藏
      .toggle() 显示或隐藏切换
      $("div").hide();
      $("#myid").show();
      $(".myclass").show(100);

      .size() 找到多少个对象
      var n = $("div").size()

      文本框赋值(value)
      $("#myid").val(123);
      .val()取值

      层的内容.innerHTML/.innerText
      $("div").html() ;
      $("div").html(123);
      $("div").html("<input type=button>");
      $("div").text("<input type=button>");

      样式 document....style.color="red"
      $("div").css("color","red").css("font-size","18");
      $("div").css({color:"red","font-size":18});

      删除
      $("div").remove(); 删除所有div

      添加
      父加子: $("div").append("<input button>");
              $("div").append( $("#myid") );
      子加父
           $("input").appendTo(  $("div") );

      对象属性
        $("input").attr("checked",true);

      去首尾空格:
         $.trim(字符串)
$("div").each(  function(i,obj){}  );
$.post(url,function(x){});
$.post(url,{键:值},function(x){});
$.getJSON(url,function(x){//这里x已转成json了,不要用eval});

      克隆
        $("div").clone();

4. 选择器
    a) 类选择器
       <input type=text class="myclass">
       $(".myclass")     找多个
    b) id选择器  
       <input type=text id="myid">
       $("#myid") 找一个
       相当于:document.getElementById("myid")
    c) 标记选择器   找多个
       $("div,span")
       相当于document.getElementsByTagName()
    d) 表单选择器
       $(":text")   所有文本框
       $("input[type=text][value='']")

       $(":radio")  所有单选框
       $(":checkbox") 所有复选框
    e) 表单属性选择器
       $(":checkbox:checked")或$(":checked:checkbox")
       $(":checked")  找所有选中(单选框和复选框)
       $(":selected") 找所有选中列表框
    f) 层级选择器
       父找子 d找c
       $("table").find("tr")  //找子孙都可以
       $("table>tbody>tr") 找所有tr
       $("table>tbody>tr:first") 找第一行
       $("table>tbody>tr").eq(0) 找第一行
       $("table>tbody>tr:odd")   所有奇数行
       $("table>tbody>tr:even")  所有偶数行

       子找父
       $("tr").parent()

       找兄弟
       $(a).next() 下一个
       $(b).prev() 上一个

分享到:
评论

相关推荐

    jQuery基础 学习教程

    我在网上找的,认为学习jQuery基础用法用法很好的一个东东。。简单易懂,自己实际操作过基本上就能理解

    jquery的基础用法例子

    jquery的基础用法例子,书中的例子,要的拿走

    jquery基础教程

    jquery基础教程,详细介绍jquery包的使用方法

    jquery插件使用方法大全

     jquery提供了很多便利的函数,如each(fn),但是使用这些函数的前提是:你使用的对象是Jquery对象。使一个Dom对象成为一个Jquery对象很简单,通过下面一些方式(只是一部分): 代码 var a = $("#cid"); var b = $...

    jQuery相关文档

    jQuery相关文档,介绍JQuery基础用法的教程书籍。

    jquery用法大全

    jquery各种基础的用法,很详细,不错的参考资料

    jquery基础学习实例集.rar

    jquery基础学习实例集,jquery初学者实例大全,里面一共包括了三季内容,有些是作者自创的实例,有些是从网络上下载然后修改的,对jquery初学者来说,非常实用且基础的实例,比如一些弹出信息框、伪装链接、无刷新...

    jquery基础应用总结

    本压缩包中包含jquery的一些基础用法和特效,均以实例展现出来

    jQuery基础教程(第四版)

    《jQuery基础教程(第4版)》是由jQuery权威专家担纲撰写的佳作,不管是谁,只要稍有JavaScript经验就可以看懂。这本书的特点就是全面、深入,它不仅向读者解释了jQuery的底层原理,更讨论了高级开发技术,而且示例...

    jquery-ui包含功能演示及代码

     用于提供丰富的动画效果,让动画不再局限于jQuery的animate()方法。 编辑本段其它  jQuery UI实际上是jQuery插件,专指由jQuery官方维护的UI方向的插件 jQuery UI 与 jquery 的主要区别是: (1) jQuery是一个js库...

    jquery基础教程之deferred对象使用方法

    jquery基础教程之deferred对象使用方法

    最简单的tap切换jquery

    极简单的tap切换,使用jquery的方法。引用一个jquery.js即可

    jQuery的一些相关使用,jQuery基础应用

    本文档主要介绍jQuery的一些常用语法规则和里面的一些方法属性等

    jQuery基础

    详细介绍jQuery的一些基础方法的使用,以及ajax请求的处理方法。

    JQuery基础实例以及详解

    适合初学者使用,里面例子很详细 jQuery_学习 :这个主要是学习和解释 jquery-starterkit :这个是实例, ... custom.js :这个就是jquery学习的用法都在这里了; 初学者最好是边学习,边看效果,然后边用。。

    jQuery基础教程(第四版)

    不仅包括创建自己的实用函数,还有添加jQuery对象方法,以及使用jQuery UI部件工厂。接下来的几章更加深入地探讨了jQuery的各种特性,在这几章里将学习到很多高级的技术。 第9章重温关于选择符和遍历的知识,讲解了...

    jquery基础教程学习

    介绍了jquery中$.getJSON(),$.getScript(),$.get('x.xml', load(带参数)的用法。后台是jsp的,不过应该区别不是太大。应该都可以参考。

    Jquery基础语法

    对Jquery基础语法、选择器的各种用法、事件器的介绍

    JQuery基础教程

    JQuery入门基础教程,介绍JQuery的基本用法,适合于初学者对JQuery有一个全面的理解和认识

    jquery.dataTable.js 使用详解 一、基础配置

    NULL 博文链接:https://rhodian.iteye.com/blog/2193305

Global site tag (gtag.js) - Google Analytics