jQuery学习随笔

jQuery学习随笔

一、选择器

1、id选择
$("#div1").click(function() { alert($("#div1").html()); })
同
$('#div1').click(function() { alert($('#div1').html()); })
div1为 控件id    .html() 为控件html代码

$("#div1").html()
同dom写法
document.getElementById("div1").innerHTML;

2、标签选择
$("p").click(function() { alert($("p").html()); })
p 为标签
 alert($("p").html());
同dom写法
var getE = document.getElementsByTagName("p");
for (var i = 0; i < bb.length; i++) {alert(getE[i].innerHTML); }

3、CSS选择
        $(function() {
        $(".css1").click(function() { alert($(".css1").html()); })
          })

4、多条件选择
多条件选择器:  $("p,div,span.menuitem")  同时选择p标签、div标签、div标签和拥有menuitem样式的span标签元素

5、层次选择器
$("div li")获取div下所有的li元素（后代，子，子的子......）
$("div > li")获取div下的直接li 子元素
$(".menuitem + div")获取样式名为menuitem之后的第一个div元素(不常用)
$(".menuitem ～ div")获取样式名为menuitem之后所有的div元素(不常用)

二、内置函数
1、注册事件函数ready()
        $(document).ready(function () {alert("初始化加载！");
        })
        和dom  onload类似，但是onload只能注册一次
        window.onload = function() {alert("初始化加载！");}
        $(window).load();  会调用window.onload
2、.map(array,fn)  对数组array中每个元素调用fn函数逐个进行处理,fn函数将处理结果返回，最后得到一个新的array
        var arr = [3, 5, 9];
        var arr2 = $.map(arr, function(item) { return item * 2 });
        alert(arr2);
3、.each(array,fn) 对数组array每个元素调用fn函数进行处理，没有返回值；
        var arr = { "tom": "汤姆", "jerry": "杰瑞", "lily": "莉莉" };
        var arr = ["汤姆", "杰瑞","莉莉" ];
        $.each(arr,function (key,value) {alert(key + "=" + value);})

三、隐式迭代
1、mouseover  id  btn1 写错 不会有提示错误
        $(function() {
            $('#btn1').mouseover(function() { alert("mouseover事件"); })
        })

四、节点遍历
1、next()方法  同样标签的一下个标签
        $(function() {
            $("div").click(function() {
                alert($(this).next().text());
            })
        })
2、nextAll()方法 当前标签的所有下一个指定标签 nextAll("标签")
        $(function() {
            $("div").click(function() {
                alert($(this).nextAll().text());
            })
        })
        $(function() {
            $("div").click(function() {
                $.each($(this).nextAll("div"),function () {$(this).css("background","blue")
                })
            })
        })
        $(function() {
            $("div").click(function() {
                $("div").click(function () {$(this).nextAll("div").css("background","red")
                })
            })
        })
3、siblings()方法用于获取所有同辈元素
        $("div").click(function() {$(this).siblings("div").css("background", "red")})