`
孟雪雪
  • 浏览: 53239 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

Jquery基础知识

    博客分类:
  • js
阅读更多
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对表格tr的操作
function bh()  //序号进行编号
      {
        jQuery("#t>tr").each(function(i,obj){
           obj.cells[0].innerHTML=i+1;
        });
      }
      function addRow() //添加一行tr
      {
       var tr = jQuery("#t>tr:first").clone().appendTo(jQuery("#t"));
          tr.find(":text").val("");
          tr.find("td").eq(4).html("");  //eq(4)第二个文本框

          bh();
      }
          function droRow(del) //删除一行tr
      {
         jQuery(del).parent().parent().remove();
         bh();
      }
     
      //计算输入文本中数字的结果 
      function js(js)
      {
         //找到tr
         var tr=jQuery(js).parent().parent();
         //取数
         var sl=tr.find(":text").eq(1).val();
         var jg=tr.find(":text").eq(2).val(); 
         tr.find("td").eq(4).html(sl*jg);
        
      }
分享到:
评论

相关推荐

    jquery基础知识

    **jQuery基础知识** jQuery是一款强大的JavaScript库,它极大地简化了JavaScript编程,使得网页动态化和交互变得更加容易。在web应用与开发领域,jQuery已经成为一个不可或缺的工具,尤其在处理DOM操作、事件处理、...

    最全面的jQuery基础知识

    看完“最全面的jQuery基础知识”文件包,你就能详细了解jQuery的代码规则。 文件包更是你进行jQuery开发的参考手册。 文件包内实例丰富,将其拷贝到单独的html文件中即可执行。 文件包包含一个模板文件:template....

    jQuery基础知识+实例

    **jQuery基础知识** jQuery是一个高效、简洁且功能丰富的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理、动画设计以及Ajax交互变得更加容易。jQuery的核心理念是"Write Less, Do More...

    JQuery基础知识

    **jQuery基础知识** jQuery是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理和动画设计,使得网页交互变得更加简洁高效。以下是对jQuery基础知识的详细解释: ### 1. jQuery选择器 jQuery...

    jQuery 基础知识 基础Demo

    **jQuery基础知识** jQuery是一款强大的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画设计和Ajax交互。它的设计理念是“写得更少,做得更多”,使得网页开发变得更加高效和简便。 ### 1. ...

    jquery 基础知识汇总

    **jQuery基础知识汇总** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。由于其简洁的API和强大的功能,jQuery成为了前端开发的首选工具之一。 ### 1. jQuery...

    jquery基础知识要点

    在学习 jQuery 的基础知识时,理解 jQuery 对象与 DOM 对象的区别至关重要。 1. **jQuery 对象与 DOM 对象的转换** - jQuery 对象是由 `$(...)` 包裹的对象,可以调用 jQuery 提供的所有方法。DOM 对象则是浏览器...

    【JavaScript】JQuery基础知识及应用

    一、jQuery基础 1. 引入jQuery库:在HTML文档中,可以通过`&lt;script&gt;`标签引入jQuery库,通常从CDN(内容分发网络)获取,例如: ```html &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; ```...

    jQuery基础知识的电子书

    **jQuery基础教程** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画制作和Ajax交互。自2006年发布以来,jQuery已经成为了前端开发的标准工具之一,使得开发者能够更高效地编写...

    JQuery基础知识点汇总(代码+知识点+xmind思维导图)

    代码+知识点汇总,采用xmind框图导出,知识点简单明了,无论是学过还是没学过,通过这个资料过一遍绝对对Jquery整体清楚明了。后面附带了9个基本的jquery实例,进一步加深用jquery的理解。(全部实例(30个)可另外...

    jQuery基础知识ppt

    选择器 操作DOM元素 事件与应用 动画和特效 常用插件 工具类函数

    jquery基础知识第一讲之认识jquery

    ### jQuery基础知识 jQuery是一个广泛使用的JavaScript库,它能够帮助开发者以更简单的方式操作HTML文档、处理DOM元素、绑定事件、创建动画效果以及执行Ajax调用。它的核心优势包括: 1. 轻量级:jQuery文件大小小...

    jquery知识点总结.md

    jquery

    《jQuery基础教程 第4版》PDF版本下载.txt

    根据提供的文件信息,我们可以推断出这是一本关于jQuery基础知识的教程书籍——《jQuery基础教程 第4版》,并提供了PDF版本的下载链接。下面将基于这些信息,详细展开讲解jQuery的基础知识及其应用。 ### 一、...

    jQuery基础教程第四版源码

    以下是对jQuery基础知识的详细解析: 一、jQuery的选择器 jQuery的选择器是基于CSS选择器的扩展,允许开发者高效地选取DOM元素。例如,`$("#id")`选取ID为"id"的元素,`$(".class")`选取所有class为"class"的元素,...

    jqfundamentals.com:jQuery基础知识

    jQuery基础知识旨在让您轻松解决遇到的常见问题,这些问题将被要求使用jQuery解决。 为了充分利用本网站的内容,您需要阅读内容并尝试各种互动示例。 每章将介绍一个概念,并为您提供尝试与该概念相关的示例代码的...

Global site tag (gtag.js) - Google Analytics