当前位置:首页 > 开发 > Web前端 > Jquery > 正文

JQuery 基础

发表于: 2011-01-20   作者:德莫罗   来源:转载   浏览次数:
摘要: jQuery    1.特点:    小巧    功能强    跨浏览器    插件    2.使用     实际是js文件     a)  复制js到WebRoot   

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 基础

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
效果图: 页面代码,包含css 和 js代码: <%@ page language="java" contentType="text/html; cha
jQuery 1.8在线中文API 总结的不容易,大家转载的话麻烦留个链接!O(∩_∩)O~ javascript:new Opti
jQuery 1.8在线中文API 总结的不容易,大家转载的话麻烦留个链接!O(∩_∩)O~ javascript:new Opti
w3c school基础课程讲的非常详细,基础知识完全在这里学习就可以了 现将一些知识梳理下。 1,jQuery
这是jQuery里常用的2个方法。 他们2者功能是完全不同的,而初学者往往会被误导。 首先 我们看.find(
写在前面:   有一段时间未更新博客了,利用这段时间,重新看了《jQuery基础教程 第四版》和《锋
(每一段jQuery对应一段html代码,以标记为准则,css为共用代码,每段代码需独立运行。html和css代码
一直想做一个基础权限管理的框架可以方便的用在管理系统里面,不需要太复杂,只要有基础的功能即可
您还未登录 ! 我的应用 登录 注册 论坛首页 → Web前端技术版 → JQuery → jQuery必知必熟基础知识
 Dom是Document Object Model的缩写,意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号