JQuery基础学习笔记

JQuery 学习笔记

文章转载自：http://blog.csdn.net/liyangfd/article/details/7528422

因为觉得很有用，所以就留下了。

一、Jquery简介

    1、 JQuery 是对JavaScript 的封装 (JQuery 的扩展插件非常多)
    2、 JQuery 中 $(#div) #代表一个元素  不加#代表多个
    3、 JQuery 屏蔽了浏览器的差异
    4、 开源、免费、可到网上下载大量的插件
    5、 Vsdoc 是vs2008sp1以后添加的一个技术,将它和js 放到一起Vs就有自动提示的功能。

二、JQuery之ready

    1、$(document).ready(function(){ alert(‘加载完毕’)}  
    2、ready 和 onload 的区别
 onload 是所有元素创建完毕、图片、css等都加载完毕后才被触发的，而ready 则是Dom 元素创建完毕后就触发，这样可以提高网页的响应速度。
 onload 只能注册一次,ready能注册多次
 $(window).load()来实现onload那种事件的调用时机
    3、简写ready 为 $(function(){alert('ready3'};})
    4、$其实是一个名字很怪的函数

三、JQuery 提供的内置函数

    1、$.map(array,fn) 对数组array中的每个元素调用fn函数逐个进行处理,将fn处理后的数组返回
 例子: var arr=[3,5,8];
  var arr2=$.map(arr,function(item){return item*2;}); 
    2、$.map 不能处理Dictionary风格的数组
    3、$.each(array,fn)
    4、 例子： var dict={"tom":20,"liyang":26,"lili":25}; 
  $.each(dict,function(key,value){alert(key+'的年龄是:'+value});
    5、 var arr={3,5,8};
 $.each(arr,function(item){alter(item)}); //item是索引012
 $.each(arr,function(){alter(this);} //this 是值 3,5,8

    6、VS中赋值出来的
        $(function() { alert('页面加载完成,相当于onload事件'); });

        var arr = [3, 5, 7];
        var arr2 = $.map(arr, function(item) { return item*3});

        alert(arr2);

        var dict = { "tom": 20, "liyang": 25, "lili": 32 };
        $.each(dict, function(key, value) { alert(key + "年龄是" + value); });

        $.each(arr, function(key, value) { alert(key + "___" + value); });

四、JQuery对象、DOM对象

    1、DOM对象要想通过JQuery操作必须转化为JQuery对象
    2、document.getElementById("div1")=$('#div1')
    3、DOM对象转化为JQuery对象 $(DOM对象名)
    4、JQuery对象转化为DOM对象
 var domobj=jqobj[0]或var domobj=jqobj.get(0)
 例如： var div1=$(#div)[0];
 $(function() {
            var div1 = document.getElementById("div1");
     $(div1).html("<a href='www.baidu.com'>百度</a>"); //dom对象div1 转换为JQuery对象
            var div2 = $(div1)[0];    //JQuery对象转换为Dom 对象
            alert(div2.innerHTML);
        });
    5、JQuery 设置样式 $("#div1").css("background","red");
  获得样式 $("#div1").css("background");
  设置value$("#txt1").val("测试");
  获得value$("#txt1").val();
    6、VS实例
 $(function() { alert($("#div1").html()) });
        $(function() { alert($("#div1").text()) });

五、JQuery选择器

    1、$("#控件Id")=getElementById
    2、$("TagName")=getElementByTagName 添加方法时隐式迭代
    3、$(".test")  =所有 class为"test" 的控件
    4、多条件选择器
 $("p,div,span.menuitem") 同时选择p标签,div标签,和拥有menuitem样式的span标签元素
    5、注意 选择器表达式中的空格不能多也不能少
    6、层次选择器
 (1)、$("div li") 获取div下所有li元素(后代、子、子的子)
 (2)、$("div > li") 获取div 下的直接li元素
 (3)、$(".menuitem + div")
  获取样式名称为menuitem之后的第一个div元素
 (4)、$(".menuitem ~ div")
  获取样式名称为menuitem之后的所有div元素
    7、实例

        //所有div(相当于getElementsTagName)添加点击事件 显示div中的Text
        $(function() { $("div").click(function() { alert('我是' + this.innerText); }) });
        //根据样式取得所有元素
        $(function(){$(".waring").click(function(){ alert("我是警告信息");})});
        //取到所有div下的li
        $(function() { $("div li").click(function() { alert('可以获得所有div下的li'); }) });       
        //取得div下的直接子元素  li上层必须有ul
        $(function() { $("div > li").click(function() { alert('只能取到div下直接的,p里面的取不到')}) });

六、JQuery的迭代

    1、如何判断对象是否存在，JQuery返回的是一个对象数组， 调用text(),html(),click()之类的方法其实是对每个元素迭代调用每个方法，因此通过id选择器选择的元素不存在也不会报错，如果需要判断指定id是否存在，写成  if ($(#btn1").length<=0){alter('id为btn1的元素不存在');} 

七、节点遍历

    1、next() 获取同级的下一个元素(和本身类型相同)
    2、nextAll()获取同级后的所有元素(类型可不同)
    3、nextAll("div") 获取同级后所有的div元素
    4、siblings()  用于获取所有同辈元素
    5、siblings("div") 获取所有同辈div元素

八、基本过滤选择器

    1、:first 选取第一个元素 $("div:first") 选择第一个<div>
    2、:last  选取最后一个元素   $("div:last") 选择最后一个div
    3、:not (选择器) 选取不满足"选择器"条件的元素
 $("input:not(.myClass)") 选取样式不是myClass的<input>
    4、:even、:odd  选取索引是奇数,偶数的元素:
 $("input:event") 选取索引是奇数的input
 $("input:odd")  选取索引时偶数的input
    5、:eq(索引序号)、:gt(索引序号)、:lt(索引序号) 选取索引等于、大于
 小于索引序号的元素，
 $("input:lt(1)")  选取索引小于1的<input>
    6、(":header")    选取所有的h1..h6的元素 *
    7、("div:animated")   选取正在执行动画的<div>元素 *

    8、相对定位: 只要在$()指定第二个参数,第二个参数为相对的元素
 $("ul",$(this)).css("background","red")
    8、实例：    奇数行黄色背景     第一行大字体  fontsize=40;
     最后一行汇总 红色字体     前三行诗前三名 fontSize=28
        $(function() {
            // $("#tbMain tr:event").css("background", "yellow");
            $("#tbMain tr:first").css("fontSize", "40");
            $("#tbMain tr:last").css("color", "red");
            $("#tbMain tr:gt(0):lt(3)").css("fontSize", "28");  //lt(3) 是从gt(0)计算出新的序列开始的
            $("#tbMain tr:gt(0):even").css("background", "yellow"); //表头不参与奇偶
            //gt(0) 将导致序号发生变化

        });
 //向前行下的TD 用的相对定位
        $(function() {
            $("#tb1 tr").click(function() {
                $("td", $(this)).css("background", "red");
            });
        });

九、属性过滤器

    1、$("div[id]") 选取有id属性的<div>
    2、$("div[title=test]")  选取title 属性为"test"的<div>
    3、$("div[title!=test]") 选取属性不为"test"的<div>
     还可以选择开头、结束、包含等，条件还可以复合(*)
    表单过滤器
    1、$("#form1:enabled")  选取id为form1的表单内所有启用的元素
    2、$("#form1:disabled") 选取id为form1的表单内所有禁用的元素
    3、$("input:checked")   选取所有选中的元素(Radio、CheckBox)
    4、$("select:selected") 选取所有选中的的选项元素(下拉列表)

十、元素的 each 

            $("input[name=names]").click(function() {
                var arr = new Array();
                $("input[name=names]:checked").each(function(key, value) {
                    arr[key] = $(value).val();
                    $("div").text("共选中" + arr.length + "项" + arr.join(","));
                })
            })

十一、表单选择器

    1、$(":input")  选取所有<input> <textarea> <select> 和button元素
    2、$(":text")   选取所有单行文本框 等价于 $("input:[type=text]")
    3、$(":password")选取所有密码框
 同理还有:radio :checkbox  :submit :image :reset :button :file:hidden 等。

十二、JQuery的Dom操作

    1、使用html()方法读取或设置innerHTML
    2、使用text()方法读取或设置innerText
    3、使用attr()方法读取或设置元素的属性,对于没有封装的属性用attr进行操作。
 $("a:first").attr("href","http://www.baidu.com");
    4、使用removeAttr删除属性
 清空和删除的区别 清空是指href="" 删除时没有href属性
 
    5、动态创建Dom节点 $(html字符串)
     var link="<a href="baidu.com" >百度</a>";
    6、append方法在元素末尾追加元素
    7、prepend 在元素开始添加元素
    8、after 在元素之后添加元素 (添加兄弟)
    9、before 在元素之前添加元素(添加兄弟)
    10、remove 删除选择的节点 (返回背删除的节点对象)，还可以继续使用被删除的节点
 var lis=$("#ulSite").remove();
 $("#ulSite2").append(lis);
    11、empty()是将节点清空
    12、用attr设置和取得jQuery没有封装的属性
  $("#btnReg").attr("disabled", true); 设置按钮禁用

注意：动态写的东西搜索引擎抓不到