`

jquery学习小结1

阅读更多
jquery  小结学习1


1 闭包
    javascript中的闭包,实际上就是函数内部可以直接读取外部的全局变量
     比如:
      var n="test";
     function f1()
      {
       alert(n);
      }
       f1()  //输出test

    但在函数外部无法访问函数内部的变量,比如
     function f1()
      {
       var n="test";
       }
       alert(n);//error
     有时需要得到函数内部的变量,则要通过函数中的函数去实现
     function f1()
     {
       var  n="test";
        function f2()
       {
         alert(n); //输出test
        }
}
   f2可以访问F1中的内部变量,但F2中的内部变量对F1不可见。所以可以写成如下形式,以在F1的外部
得到其值
      function f1()
      {
      var  n="test";
           function f2()
       {
         alert(n); //输出test
        }
       return f2;
      }
     var result=f1();
      result();//输出test
      这个时候f2称为F1的闭包


2 jquery中的加载:
    $(document).ready( function() { })跟window.onload的区别。其中$(document).ready在框架加载
完毕后就可以使用,而window.onload必须是所有的页面加载完成后才能用。
$(document).ready( function() { })等价于  $(function() { } )

3 jquery中的获取元素小结:
    1) 通过标签名改变格式
         <span>span标签的颜色变为红色</span>

         $(function(){
$("span").css("color","red");
});
    2)通过id选择器
  <div id="id_name">标签id为id_name,变红色</div>
       $(function(){
$("#id_name").css("color","red");
});
  
   3) 通过类名获取元素
       <div class="className">这个标签的类名为className,因此变为红色</div>
<div>没有定义标签的类名,不改变颜色</div>
   
     $(function(){
$(".className").css("backgroundColor","red");
});
  4) 一次性获取多个元素
      比如下面将多个元素的背景设置为红色,用逗号分开
        $(function(){
$("p, #id_name, .className").css("backgroundColor","red");
});
   5) 根据元素的属性值获得元素
     <p id="p_test1" class="class1">p标签中定义了id属性,变红色
       $("p[id]").css("color","red");

6) 通过过滤器获得元素
      比如获得第一个元素  :first,最后一个元素last
     
  • 第0个li的文字变为红色
  • <h3><span>第1个li</span>不变色</h3>
  • 第2个li不变色
  • <span>第3个li不变色</span>
  • 最后一个li不变色

  •      $(function(){
    $("li:first").css("color","red");
    });
        此外还有li:last,li:even(偶数),li:odd(奇数),:empty(获得空元素) :parent(获得非空元素)

    7) 获得表单元素
        $(function(){
    $("#msg").html(
    "input元素有"+$(":input").length+"个(取得所有表单元素)<br/>"+
    "text属性的元素有"+$(":text").length+"个(取得text属性的元素)<br/>"+
    "password属性元素有"+$(":password").length+"个(取得password属性的元素)<br/>"+
    "radio元素有"+$(":radio").length+"个(取得单选按钮元素)<br/>"+
    "checkbox元素有"+$(":checkbox").length+"个(取得多选按钮元素)<br/>"+
    "submit或image属性元素有"+$(":submit").length+"个(取得submit属性或image属性的元素)<br/>"+
    "image属性元素有"+$(":image").length+"个(取得image属性的元素)<br/>"+
    "reset属性元素有"+$(":reset").length+"个(取得reset属性的元素)<br/>"+
    "button属性元素有"+$(":button").length+"个(取得button属性的元素或button标签)<br/>"+
    "file属性元素有"+$(":file").length+"个(取得file属性的元素)<br/>"+
    "hidden属性元素有"+$("input:hidden").length+"个(取得hidden属性的表单元素)"
        );
    });

    8) 过滤器获得表单元素
         <form>
    • <label>订单号码</label><input type = "text" name="" disabled="disabled"/>
    • <label>订单所有者</label><input type = "text"/>

    • <li><input type = "checkbox" name="category" value="红"/><label>红</label>
      <input type = "checkbox" name="category" value="黄"/><label>黄</label>
      <input type = "checkbox" name="category" value="蓝"/><label>蓝</label>
      <input type = "checkbox" name="category" value="紫"/><label>紫</label>
      <input type = "checkbox" name="category" value="白"/><label>白</label></li>

      <li><select multiple= "multiple " >
      <option>选项1</option>
      <option>选项2</option>
      <option>选项3</option>
      <option>选项4</option>
      </select/></li>

    </form>
    <div id="msg">

    <p id="option">
    </div>
    </body>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">


    $(function(){
        $("input:text:enabled").val("能输入");
        $("input:text:disabled").val("不能输入");
        (function checkboxclick(){
        $(":checkbox").unbind("click",checkboxclick);
        var val='';
        $(":checkbox:checked").each(function(){
        val += $(this).val()+',';
        });
        $("#category").html("选择的数据:"+val);
        $(":checkbox").click(checkboxclick);
        })();
    $("select").change(function(){
    var txt='';
    $("select option:selected").each(function(){
    txt += $(this).text() + ',';
    });
    $("#option").html("选择的选项是:"+txt);
    }).trigger("change");
    });
    </script>

      这里也演示了checkbox和option list中的事件操作用法了
    9
      获取指定元素一致的元素
         $('p').filter('.center');//获取类属性名为center的标签元素
    10 获取指定范围的元素
       //设置4到6标签的背景色成黄色。
    $(function(){
        $("p").slice(4,7).css("backgroundColor","yellow");
    });

    11 获取当前元素的前一个元素,后一个元素,父元素
          $(function(){
        $("p").next('.yes').css('backgroundColor','yellow');
    });
        前一个元素:
        $(function(){
        $("p").prev('.yes').css('backgroundColor','yellow');
    });
       父元素:
        $(function(){
        $("p").parent().css('backgroundColor','yellow');
    });
       子元素:
         <div id="content">
    0号

    1号


    3号

    4号

    5号

    6号

    7号

    <div>
    </body>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">

    $(function(){
        $("#content").children(".yes").css('backgroundColor','yellow');
    });


    12 在元素的不同位置添加元素
       1)在元素内部添加元素
        $(function(){
        $("#content").append("追加的新文字串。");
    });
       2) $(a).append(b),为在A元素后添加B,$(a).appendTo(b),则表示将A添加到B后

      3)在元素的开始位置加内容
           $("p").prepend("<span>追加的新字符串。</span><br/>");
            $(a).prepend(b),为在A元素后添加B,$(a).prependTo(b),则表示将A添加到B后
      4) 在元素后追加兄弟元素,比如
           在此标签的后面追加内容。

        同样也在此标签的后面追加内容。

        $(function(){
        $("p").after("<span>追加的新字符串。</span>");
    });
     
        则在所有的元素后都会添加字符串,相反,也有before
       5) wrap
          <span>将span标签包含进div标签中。</span><br/>
          $("span").wrap("<div><p>
    </div>");//将<span>标签包含到<div>
    </div>中去

      6)替换元素
          $(a).replaceWith(B)  用B元素替换A元素
          $(a).replaceAll(B)  将B元素替换成A元素
      7) 删除元素
            empty(),删除元素
            <p id="emptyTest">此标签的使用empty方法进行删除。
           
    <p class="emptyTest">准备使用remove方法删除。
                $("#emptyTest").empty();
              $("p").remove(".emptyTest");


    13 获取与设置属性
       1)  attr:设置属性,比如
        
             $("p#two").attr("title","修改two的title属性。");
      
       2) 删除属性值
          $("p#one").removeAttr("style");
       3)增加CLASS
               $("p#two").addClass("redbox");
       4) 删除
           $("p#two").removeClass("redbox");
        5) toggleClass(class),当指定类名存在,则删除,否则添加
            toggleClass(class,swith),当switch表达式为真,则追加,为假,则删除

       6) 设置HTML元素
            <p id="one"><b>第一个</b>p标签的内容。

             var val=$("p#one").html();
        $("p#two").html(val);
       7) 设置CSS
           <p id="one">将此标签的文字变为红色
     
            $('p#one').css('color','red');
        $('p#two').css({color:'white',backgroundColor:'green'});

    14  函数事件
         1) bind和unbind
         2) toggle(fn1,fn2,fn3)  定义元素被单击时按顺序执行定义的函数
           <button id="one">提交</button>
    <p id="two">文字颜色在红/绿/黑间切换。
    </body>
    <script src="jquery.js" type="text/javascript"></script>
    <script type="text/javascript">

    $(function(){
        $('button#one').toggle(function(){
        $('p#two').css('color','red');
        },function(){
        $('p#two').css('color','green');
        },function(){
        $('p#two').css('color','black');
        });
    });
    </script>

    15) AJAX控制
         $.ajax(options)或jQuery.ajax(options)
             在此放置读入的内容。
          $(function(){
    $.ajax({
    url:'test.html',
    success:function(data){
    $('p#ajax').html(data);
    }
    });
    });

      16 ajaxcomplete
         例子如下:
        <div id="comp">在此放置ajax完成时的信息。</div>
    <div id="exec">在此放置读入的内容。</div>
        ajax.html:
        
    • 第0号li元素。

    • 第1号li元素。

    • 第2号li元素。

    • 第3号li元素。

    • 第4号li元素。



         $(function() {
           $('div#comp').ajaxComplete(function()
         {
            $(this).html(..............)
          } );
      ajax通信失败
          $(function(){
    $('div#error').ajaxError(function(){
    $(this).html("ajax送信失败...
    ").css('color','red');
    });
    $('div#exec').load('noajax.html');
    });
       
    5
    9
    分享到:
    评论
    1 楼 随风_潜入夜 2011-10-03  
    JQ很不错,学过一些。楼主也不错谢谢分享~!

    相关推荐

      jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结,jquery总结学习资料JQuery总结

      1. **jQuery的特点** - **简洁性**:jQuery的语法设计易于理解和使用,使得开发者可以快速上手。 - **轻量级**:尽管功能强大,但jQuery的核心库体积小,加载速度快。 - **跨浏览器兼容**:jQuery兼容多种主流...

      JQuery学习总结及实例中文WORD版

      资源名称:JQuery 学习总结及实例 中文WORD版内容简介:普通Javascript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦。因此出现了很多对Javascript 的封装库,...

      jquery总结学习资料JQuery总结

      1. **官方文档**: jQuery 的官方网站提供了详尽的 API 文档和教程,是学习的首选资源。访问 &lt;https://api.jquery.com/&gt; 获取更多详细信息。 2. **在线教程**: 网上有许多优秀的 jQuery 教程,如 W3School ...

      jquery 学习笔记总结

      **jQuery 学习笔记总结** jQuery 是一个广泛使用的 JavaScript 库,它简化了网页文档对象模型(DOM)操作、事件处理、动画制作以及Ajax交互。本篇笔记将深入探讨 jQuery 的核心概念,包括选择器、常用方法以及在...

      jquery学习资料大全

      **jQuery学习资料大全** 在IT领域,jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript代码,使得网页交互和DOM操作变得更加便捷。这份“jQuery学习资料大全”提供了丰富的资源,无论你是初学者还是有...

      JQuery学习总结

      jQuery库包含以下功能: HTML 元素选取、HTML 元素操作、CSS 操作、HTML 事件函数、JavaScript 特效和动画、HTML DOM 遍历和修改、AJAX、Utilities 提示: 除此之外,Jquery还提供了大量的插件。

      jQuery学习笔记

      **jQuery学习笔记** jQuery是一个广泛使用的JavaScript库,它极大地简化了JavaScript代码的编写,使得网页交互变得更加简单。这个资源包含了作者在自学jQuery过程中积累的笔记,以HTML页面的形式呈现,方便阅读和...

      jquery手册jquery的学习jquery的学习

      《jQuery手册:深入学习jQuery》 在Web开发领域,jQuery是一个不可或缺的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本篇文章将深入探讨jQuery的核心概念和实用技巧,帮助你全面掌握这...

      jquery学习配套资料

      **jQuery学习配套资料详解** ...总结,这个压缩包为jQuery学习提供了全面的资源,无论是初学者还是经验丰富的开发者,都能从中受益。通过系统学习和实践,你将能够熟练掌握这一强大的JavaScript库,提升前端开发效率。

      jQuery1.4.1 小结

      **jQuery1.4.1 小结** jQuery 是一个广泛使用的JavaScript库,它极大地简化了JavaScript的DOM操作、事件处理、动画制作以及Ajax交互。在本文中,我们将深入探讨jQuery 1.4.1版本的一些核心特性、改进和常用API。 #...

      jQuery学习总结笔记

      1. **体积小**:尽管jQuery 包含了大量的功能,但其核心文件的大小仍然控制得较小,有利于快速加载。 2. **写的少做得多**:jQuery 提供了许多便利的API,使得开发者可以使用一行代码完成复杂的操作,减少代码量。 3...

      jQuery 语法学习笔记

      jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery 语法学习笔记jQuery ...

      jquery学习资料

      **jQuery学习资料** jQuery是一个广泛应用于前端开发的JavaScript库,它极大地简化了JavaScript代码的编写,使得DOM操作、事件处理、动画设计以及Ajax交互变得更加容易。这个“jQuery学习资料”压缩包显然包含了...

      jquery学习总结.docx

      《jQuery学习总结》 jQuery 是一个广泛应用于前端开发的JavaScript库,它简化了HTML文档遍历、事件处理、动画制作和Ajax交互等任务。本文主要总结了jQuery的一些核心概念和常用方法。 首先,jQuery的核心是选择器...

      jQuery学习资源包

      这个“jQuery学习资源包”显然是为了帮助开发者深入理解和掌握jQuery的核心概念和实用技巧。以下是对其中各个方面的详细介绍: 1. **jQuery核心概念**: - **选择器**:jQuery的选择器基于CSS,允许我们快速定位...

      jquery学习大全

      总结,"jQuery学习大全"这个资源包将带你逐步掌握jQuery的基础和高级用法,通过实例练习和项目实战,相信你可以从初学者逐渐成长为jQuery的专家。在学习过程中,记得不断实践、思考和查阅相关文档,这将极大地提升你...

    Global site tag (gtag.js) - Google Analytics