jquery 学习笔记

jquery 学习笔记
1.  选择器
    在html里，我们可以使用javascript选择一个html标记进行操作，比如修改html标记的属性，添加一个class属性等等。使用jquery选择一个html标记更加容易
    1）通过html的id属性选择一个html标记

 var id = jQuery("#id3");
 id.html("hahaha");

<div id="id3"></div>

     
以上代码中 得到一个div 标记，并为这个标记的内容赋值hahaha，之所以得到这个标记是因为这个标记的id等于id3

    2) 通过元素名称选择

 var ids = jQuery("div");
alert(ids);
///////////////////////
<div>aa</div>
<div>bb</div>

以上代码得到一个数组，数组中的元素是2个div标记
 
   3)  通过元素的class属性选择元素
   4)  通过* 可以选择所有的元素
   5)  通过元素 子元素来选择元素
       例如:

 jQuery("div li");  // 得到div元素下面的li子元素
jQuery("div li:has(a)");  // 得到div元素下面的li子元素,and 这些子元素是有<a>标记的子元素 ,例如:<div><li><a>aa</a></li><li></li></div> 只得到第一个li
jQuery("div:eq(0)"); // 得到第一个div元素
jQuery("div:lt(2)">;  // 得到前两个div
jQuery("div:last(0)"); // 得到后div

2. 去除首位空格
   var s = jQuery.trim("sss ");

3.  window.onload = mybegin 的作用是当文档加载完成执行mybegin函数，但这句只能写一次，如果要执行多个函数，使用jquery：
   jQuery(document).ready(function(){});
   这句还可以写成：jQuery(function(){});

4. 创建元素
   var se = jQuery("<select>....</select>");  // 创建了一个select元素
   se.insertAfter("#id");  // 将新建的元素追加到div2元素后面

5.  得到元素的属性
    $("div").attr("title");

6. 设置元素属性
   $("div").attr("title", "helo");

7. 添加class属于
   $("div:eq(1)").addClass("myclass1"); 
   为第二个div元素添加一个class="myclass1"

8. 切换class属性
   $("div").toggleClass("hight");
   如果div元素有class=hight属性,则删除,如果没有则添加之

9. 获得元素文本的内容
   $("div").text();

10. 获得元素html内容
   $("div").html();

11. 为元素添加html内容
   $("div").html("......");

12. 克隆元素
   $("div").clone();
   得到此元素的一个副本.
  
   $("div").clone().appendTo($("p"));
   将div元素的一个副本追加到p元素

13. 为元素添加事件
    $("div").click(function(){});
    // 为div元素添加了一个click事件,当触发该事件时,执行function函数

    $("div").bind("click", function(){});
    // 为div元素绑定一个click事件

    $("div").bind("click", fn = function(){});
    // 为div元素绑定一个click事件

    $("div[@id=D]").click(function(event) {
            alert(event.clientX)
        });
     // 为div(并且div的id="D")添加一个click事件,事件处理函数中得到鼠标坐标

14. 移除事件
    $("div").unbind("click", fn); //fn为函数名

15. 显示元素
   $("div").show();
   $("div").show(毫秒);  // 使用"毫秒"时间将div显示出来

16. 隐藏元素
    $("div").hide();
    $("div").hide(毫秒);

17. 元素隐藏和显示
    还有:
    $("div").fadeOut();
    $("div").fadeIn();

18. 幻灯片
    $("div").slideUP();
    $("div").slideDown();

19. 浏览器检测
    $.browser 下有多个属于,可以用来判断浏览器的类别

 msie true表示IE  mozilla true表示mozilla系列,比如firefox  safari true表示safari  opera true表示opera  version 得到浏览器的版本 

if ($.browser.mozilla)
{
   ....
}
   
20. 盒子模型
    盒子模型分为w3c标准模型和IE非标准模型
    我们介绍标准模型
   

  是浏览器的区域,element是内容区域,他有width属性和height属性,padding是内容区域到tag边框的距离,称内边距,margin是element边框的浏览器边缘的距离,称外边距

判断盒子模型的类型
$.boModel 可以判断盒子模型,true为标准w3c boxmodel
这句建议使用 $.support.boModel 替代

21. 遍历对象
    $.each(array, fn);
    // 遍历array(集合),每遍历一次,执行一次fn.

    $.each($.browser , fn(p,v){...});
    // 遍历browser中的所有属性,fn函数的参数p表示属性名称,v表示属性值.

   对数组进行过滤
   $.grep(array , fn(v,index){...});
   遍历array中的元素,每遍历到一个元素执行一次fn函数. fn函数的第一个参数为array中遍历到的元素,第二个元素为index, 这个fn函数必须返回true/false,如果返回true,则保留遍历到的这个元素,如果返回false则删除此元素.
  例子:
  var ss = $.grep([1,2,3,4] , function(o){
    return o > 2;
  });
  alert(ss);  // 打印出大于2的元素.

22. map()
  我总觉得这个map函数和each一个意思,还是不理解
  $.map(array , fn);

23. 异步请求
    $.get(url, {data} , fn(data){...});
    $.post(url, {data}, fn(data){...});
    $.ajax(options);
    例子:
    $.ajax( {
           type : 'post',
           url : '....',
           data : {name:'11', age:'22'},
           success : fn(data){}
           } );

   其中{data} 是json格式的数据,表示url的参数