JQuery学习笔记1

JQuery 学习笔记
一、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;
     最后一行汇总红色字体 &

补充：web前端 , JavaScript ,