jQuery入门2

元素过滤和查找的方法
eq(i)获取第i个jquery对象 下标从0开始

$(function(){
    $("ul li").eq(0).css("color","red");
})

firend() 获取第一个元素
last() 获取最后一个元素

hasClass() 检测当前是否对应类名

console.log($("li").eq(1).hasClass("test"));

filter() 筛选对应表达式匹配的元素

$("li").filter(".test").css("background","gold");

map()将一直元素返回为数组

$("ul>li").map(function(){
    return $(this).text();
});

children() 获取当前匹配元素所有的子元素 返回所有子元素的集合

console.log($("ul").children());

parent() 获取当前匹配元素的父元素

console.log($("ul").parent());

parents() 获取当前匹配元素的祖先元素

console.log($("li").parents());

offsetParnet() 获取元素的定位父元素
next() 获取当前元素的下一个兄弟元素

$("ul li:eq(0)").next().css("color","blue");

nextAll() 获取当前元素的下面所有兄弟元素

$("ul li:eq(0)").nextAll().css("fontSize","30px");

prev() 获取当前上一个兄弟元素
prevAll() 获取当前元素上面所有的兄弟元素
siblings() 获取当前元素所有同级兄弟元素
find() 获取当前匹配元素的所有子元素或后代元素

$("ul").find(".test").css("background","gray");

each() 遍历一个jQuery()对象,为每个匹配元素执行一个函数

$("ul li").each(function(index,ele){
    console.log(index,ele);
    $(this).css("text-align","center");
});

get(i) 获取第i个元素 若不给参数返回DOM元素的集合
区别:
eq(i) 获取第i个元素 返回的是jquery()对象
get(i) 获取第i个元素 返回的是DOM对象

$("ul li:first").get(0).innerHTML = "哈哈";
$("ul li").get(1).style.color = "reg";
console.log($("ul li").get());

index() 获取匹配元素的下标 返回第一个遇到的元素的下标 若没有匹配到 返回值-1

console.log($("ul li").index());

事件
jquery中绑定事件的方式:
1.on(“事件名”,事件处理函数)
2.事件名(事件处理函数)
3.bind(“事件名”,事件处理函数) 3.0版本弃用 使用on代替
jquery 中的事件绑定,同一种类型的事件,同时可以关联多个事件处理函数 支持同时绑定多个类型的事件

$(function(){
    $("#d1").on("click",function(){
        $(this).text("点击了");
    });

    $("#d1").click(function(){
        $(this).css("color","red");
    });
    $("#d1").on("click mouseover mouseout",function(){
        if(event.type == "click"){
            $(this).text("点击了");
        }else if(event.type == "mouseover"){
            $(this).text("鼠标移入了");
        }else{
            $(this).text("鼠标移出了");
        }
    });
})

特殊的方法 hover(fn1,fn2)鼠标移入触发fn1;离开时触发fn2

$("#d1").hover(function(){
    $(this).css("background","gold");
},function(){
    $(this).css("background","pink");
})

事件如何取消绑定
1.on() -> off()
2.bind() -> unbind()
off() 若不给参数 所有事件都会被取消

$("#d1").off();

off(“事件名”) 如果参数1,对应事件名,则取消对应事件的所有处理函数

$("#d1").off("click");

off(“事件名”,事件处理函数名) 取消对应事件的对应函数

$("#d1").off("click",fn);

one(“事件名”,事件处理函数名) 用于绑定只触发一次的事件

$(document).one("click",function(){
    alert("第一次点击");
})

事件对象的属性
target 获取目标源对象
type 事件类型
which 获取鼠标点击的按键值或键盘按键的键码值
pageX 获取基于页面可视区域左上角的横向位置
pageY 获取基于页面可视区域左上角的纵向位置

$(document).keydown(function(e){
    console.log(e.which);
})

jquery中也有事件流过程
jquery中
如何取消事件冒泡:
event.stopPropagation();

如何阻止默认行为:
event.preyentDefault()

jquery中:
return false 取消事件默认行为,同时阻止事件冒泡

event.stopPropagation();
event.preventDefault();