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');
});
   

评论

1 楼 随风_潜入夜 2011-10-03  

JQ很不错，学过一些。楼主也不错谢谢分享~！