jQ的事件和DOM操作
jQ的事件和DOM操作
jQ对于事件进行了大量的封装，click()
$().click(function(){
});
jQ对于DOM操作
获取某些节点：document.getElementById(); -> $(选择器)
添加内容：xxx.innerHTML = xxx; -> $().html();
1. 掌握常用的事件进行网页特效设计
jQ中的事件分类：
基础事件
鼠标事件
键盘事件
window事件
表单事件
复合事件
鼠标光标悬停
鼠标连续点击
1.1 掌握常用的鼠标事件
| 方法 | 描述 | 执行时机 |
|---|---|---|
| click( ) | 触发或将函数绑定到指定元素的click事件 | 单击鼠标时 |
| mouseover( ) | 触发或将函数绑定到指定元素的mouseover事件 | 鼠标指针移过时 |
| mouseout( ) | 触发或将函数绑定到指定元素的mouseout事件 | 鼠标指针移出时 |
| mouseenter( ) | 触发或将函数绑定到指定元素的mouseenter事件 | 鼠标指针进入时 |
| mouseleave( ) | 触发或将函数绑定到指定元素的mouseleave事件 | 鼠标指针离开时 |
mouseover和mouseenter的区别？
穿过被选元素或其后代元素都会触发对应的mouseover事件。
只有在穿过被选元素时才会触发对应的mouseenter事件。
1.2 掌握常用的键盘事件
| 方法 | 描述 | 执行时机 |
|---|---|---|
| keydown( ) | 触发或将函数绑定到指定元素的keydown事件 | 按下键盘时 |
| keyup( ) | 触发或将函数绑定到指定元素的keyup事件 | 释放按键时 |
| keypress( ) | 触发或将函数绑定到指定元素的keypress事件 | 产生可打印的字符时 |
<body onkeydown="enterLogin(event)">
<form action="" method="post">
帐号：<input type="text" name="username" /><br/>
密码：<input type="password" name="pwd" /><br/>
<input type="submit" value="提交"/>
form>
<script type="text/javascript">
function enterLogin(event){
// 获取按下的键的键值
var keyCode = event.keyCode;
// alert(keyCode);
if(keyCode == 13){
// 提交表单
document.forms[0].submit();
}
}
script>
body>
1.3 浏览器事件
浏览器事件：resize() 改变浏览器窗口时 会触发。
scroll() 浏览器滚动事件
<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8">script>
<script type="text/javascript">
var x = 0;
/*$(window).resize(function(){
$(".test").html(++x);
});*/
$(window).scroll(function(){
$(".test").html(++x);
});
// $(window).scrollLeft();
// $(window).scrollTop();
script>
1.4 绑定和解绑事件
-
事件函数
-
bind来绑定事件 unbind可以解绑事件
$().bind("事件名",函数); $().bind({ "事件名":函数, "事件名":函数 }); -
on绑定事件 off可以解绑事件
1.3 掌握常用的复合事件
hover：它等价于mouseover和mouseout事件的组合(其实以前用的是mouseenter和mouseleave)
$("#test").hover(function(){
$(this).css("background","lawngreen");
},function(){
$(this).css("background","white");
});
toggle：在1.8版本才能使用连续点击事件
$("input").toggle(function(){
$("body").css("background","yellow");
},function(){
$("body").css("background","blueviolet");
},function(){
$("body").css("background","pink");
});
toggle：不带参数
toggleClass：
// 点击按钮 如果div存在 则隐藏 否则显示
/*$("input").click(function(){
$("#test").toggle(); // 会自动判断
});*/
$("input").click(function(){
$("#test").toggleClass("addBd"); // 会自动判断是否有此样式
});
2. 掌握jQuery的常用DOM操作
2.1 CSS-DOM
css();
css(CSS属性名,CSS属性值); 设置单个效果
css({ 属性名1:值,属性名2:值 }); 设置多个效果
css(); 获取某个属性的值
addClass();
addClass(类属性名);
addClass(类属性名1 类属性名2); 例如：addClass(“test test1 test2”)
removeClass();
removeClass(类属性名);
removeClass(类属性名1,类属性名2);
toggleClass(); 见上方
hasClass(); 判断是否包含某个类样式
2.2 操作DOM节点(DOM-Core)
HTML代码操作 html() 等价于 xxx.innerHTML
标签内容操作 text() 等价于xxx.innerText
| 语法格式 | 参数说明 | 功能描述 |
|---|---|---|
| html( ) | 无参数 | 用于获取第一个匹配元素的HTML内容或文本内容 |
| html(content) | content为元素的HTML内容 | 用于设置所有匹配元素的HTML内容或文本内容 |
| text( ) | 无参数 | 用于获取所有匹配元素的文本内容 |
| text (content) | content为元素的文本内容 | 用于设置所有匹配元素的文本内容 |
属性val的操作
value属性只有在表单元素中才有此属性。
value属性的获取 ，当初在JS时 直接xxx.value
xxx.val(); xxx.val(“xx”);
创建节点
// JS
var imgEle = document.createElement("img");
// JQ 利用工厂函数 直接可以将HTML字符串加工成对应的节点对象
$("
")
插入节点
| 语法 | 功能 |
|---|---|
| append(content) | ( A ) . a p p e n d ( B ) 表 示 将 B 追 加 到 A 中 如 ： (A).append(B)表示将B追加到A中 如： (A).append(B)表示将B追加到A中如：(“ul”).append($newNode1); |
| appendTo(content) | ( A ) . a p p e n d T o ( B ) 表 示 把 A 追 加 到 B 中 如 ： (A).appendTo(B)表示把A追加到B中 如： (A).appendTo(B)表示把A追加到B中如：newNode1.appendTo(“ul”); |
| prepend(content) | ( A ) . p r e p e n d ( B ) 表 示 将 B 前 置 插 入 到 A 中 如 ： (A). prepend (B)表示将B前置插入到A中 如： (A).prepend(B)表示将B前置插入到A中如：(“ul”). prepend ($newNode1); |
| prependTo(content) | ( A ) . p r e p e n d T o ( B ) 表 示 将 A 前 置 插 入 到 B 中 如 ： (A). prependTo (B)表示将A前置插入到B中 如： (A).prependTo(B)表示将A前置插入到B中如：newNode1. prependTo (“ul”); |
| 语法 | 功能 |
|---|---|
| after(content) | ( A ) . a f t e r ( B ) 表 示 将 B 插 入 到 A 之 后 如 ： (A).after (B)表示将B插入到A之后 如： (A).after(B)表示将B插入到A之后如：(“ul”).after($newNode1); |
| insertAfter(content) | ( A ) . i n s e r t A f t e r ( B ) 表 示 将 A 插 入 到 B 之 后 如 ： (A). insertAfter (B)表示将A插入到B之后 如： (A).insertAfter(B)表示将A插入到B之后如：newNode1.insertAfter(“ul”); |
| before(content) | ( A ) . b e f o r e ( B ) 表 示 将 B 插 入 至 A 之 前 如 ： (A). before (B)表示将B插入至A之前 如： (A).before(B)表示将B插入至A之前如：(“ul”).before($newNode1); |
| insertBefore(content) | ( A ) . i n s e r t B e f o r e ( B ) 表 示 将 A 插 入 到 B 之 前 如 ： (A). insertBefore (B)表示将A插入到B之前 如： (A).insertBefore(B)表示将A插入到B之前如：newNode1.insertBefore(“ul”); |
删除和替换
// 删除元素
// $("#first").remove();
// 清空内容
$("li:first").empty();
// 用自己去替换别人
// $("
").replaceAll($("#second"));
// 用别人替换自己
$("#second").replaceWith($(""));
复制节点 clone(boolean) boolean：是否复制事件
设置和获取属性值、删除属性
attr(属性名); 获取对应的属性值
attr(属性名,属性值); 给对应的属性设置值
attr({属性名:属性值,...}) 可以同时设置多个
removeAttr(属性名); 删除属性
遍历子节点
childern([选择器]); 可以获取所有的直接子节点 也可以在其中添加选择器获取指定的子节点
find([选择器]); 可以通过它获取后代中的指定节点
遍历兄弟节点
next()
prev()
siblings([选择器]) 获取所有的兄弟节点
遍历父节点
parent(); 直接父节点
parents([选择器]); 获取祖先节点