事件与DOM

事件!!

事件的绑定与解除

绑定:$(“选择器”).bind( “事件类型”,function(){} );
解除:$(“选择器”).unbind( “事件类型” );

常用的事件

代码 解释
click(fn)/click() 单击
dblclick(fn)/dblclick() 双击
blur(fn)/blur() 失去焦点
focus(fn)/focus() 获得焦点
change(fn)/change() 改变值
keydown(fn)/keydown() 键盘 按下去
keyup(fn)/keyup() 键盘 弹上来
mouseover(fn)/mouseover() 鼠标 挪上来
mouseout(fn)/mouseout() 鼠标 离开了
submit(fn)/submit() 表单提交事件
load(fn)/unload(fn) 加载事件

组合事件函数

$(“选择器”).hover(1,2);

  1. 匿名函数(等同于 mouseover)

  2. 匿名函数(等同于 mouseout)

DOM

创建节点

var newLi = $("<li>x</li>");

添加节点

append //在ul里末尾追加li$(“ul”).append(newLi);
prepend //在ul里前置追加li$(“ul”).prepend(newLi);
after //与ul平级的后面追加li$(“ul”).after(newLi);
before //与ul平级的前面追加li$(“ul”).before(newLi);

删除节点

$(“li:first”).remove();
//清空元素内容$(“li:first”).empty();

复制节点

//克隆第一个livar li = $(“li:first”).clone();//添加到最后一个li的后边$(“li:last”).after(li);
//克隆第一个li(以及绑定的事件也克隆过来)var li = $(“li:first”).clone(true);$(“li:last”).after(li);

遍历节点

chiledren() 子代
next() 后边紧邻的兄弟
prev() 前边紧邻的兄弟
siblings() 所有兄弟
find(选择器) 后代和子代
parent() 父级
parents(选择器) 祖先级
eq(下标) 第几个元素
first() 第一个
last() 最后一个
is(选择器) 是不是; is(“ul”):当前的元素是不是ul
not(选择器) 除了“选择器”之外的
get(下标) 转换函数:jQuery对象 —> js对象

手风琴导航效果

1
2
3
4
5
6
7
8
$(function(){
$("dt").on("click",function(){
// 所有dd,除了点击的dt的兄弟dd, 隐藏
$("dd").not( $(this).siblings() ).slideUp('slow');
// 点击的dt的兄弟,切换显示(显示的隐藏,隐藏的显示)
$(this).siblings().slideToggle(); //fast
});
});

 上一篇
第二十天啦 第二十天啦
第二十天啦 今天是将近崩溃的一天 上午是很平常的,复习了一下聊天室的内容,因为马上就要阶段考试了, 不能拖后腿!中午的时候,航哥进来宣布了一个好消息,哈哈哈我们的新装备到了,我们班换了新的桌子和椅子,干了一下午的,又一次感受到大汗淋漓的感觉
2019-10-08 yangxin
下一篇 
jQuery选择器 jQuery选择器
JQuery强大的选择器 基本选择器 标签选择器 $(“p”).css(“color”,”red”); id选择器 $(“#er”).css(“color”,”red”); class选择器 $(“.si”).css(“col
2019-10-08 yangxin
  目录