1、jQuery 的属性操作
html()
它可以设置和获取起始标签和结束标签中的内容。跟dom 属性innerHTML 一样。text()
它可以设置和获取起始标签和结束标签中的文本。跟dom 属性innerText 一样。val()
它可以设置和获取表单项的value 属性值。跟dom 属性value 一样。
val 方法同时设置多个表单项的选中状态:
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
/*
// 批量操作单选
$(":radio").val(["radio2"]);
// 批量操作筛选框的选中状态
$(":checkbox").val(["checkbox3","checkbox2"]);
// 批量操作多选的下拉框选中状态
$("#multiple").val(["mul2","mul3","mul4"]);
// 操作单选的下拉框选中状态
$("#single").val(["sin2"]);
*/
$("#multiple,#single,:radio,:checkbox").val(["radio2","checkbox1","checkbox3","mul1","mul4","sin3"]
);
});
</script>
</head>
<body>
单选:
<input name="radio" type="radio" value="radio1" />radio1
<input name="radio" type="radio" value="radio2" />radio2
<br/>
多选:
<input name="checkbox" type="checkbox" value="checkbox1" />checkbox1
<input name="checkbox" type="checkbox" value="checkbox2" />checkbox2
<input name="checkbox" type="checkbox" value="checkbox3" />checkbox3
<br/>
下拉多选:
<select id="multiple" multiple="multiple" size="4">
<option value="mul1">mul1</option>
<option value="mul2">mul2</option>
<option value="mul3">mul3</option>
<option value="mul4">mul4</option>
</select>
<br/>
下拉单选:
<select id="single">
<option value="sin1">sin1</option>
<option value="sin2">sin2</option>
<option value="sin3">sin3</option>
</select>
</body>
</html>
attr()
可以设置和获取属性的值,不推荐操作checked、readOnly、selected、disabled 等等- attr 方法还可以操作非标准的属性。比如自定义属性:abc,bbj
prop()
可以设置和获取属性的值,只推荐操作checked、readOnly、selected、disabled 等等
2、DOM 的增删改
2.1、内部插入
appendTo()
a.appendTo(b) 把a 插入到b 子元素末尾,成为最后一个子元素prependTo()
a.prependTo(b) 把a 插到b 所有子元素前面,成为第一个子元素
2.2、外部插入:
insertAfter()
a.insertAfter(b) 得到bainsertBefore()
a.insertBefore(b) 得到ab
2.3、替换:
replaceWith()
a.replaceWith(b) 用b 替换掉areplaceAll()
a.replaceAll(b) 用a 替换掉所有b
2.4、删除:
remove()
a.remove(); 删除a 标签empty()
a.empty(); 清空a 标签里的内容
3、CSS 样式操作
addClass()
添加样式removeClass()
删除样式toggleClass()
有就删除,没有就添加样式。offset()
获取和设置元素的坐标。
4、jQuery 动画
4.1、基本动画
show()
将隐藏的元素显示hide()
将可见的元素隐藏。toggle()
可见就隐藏,不可见就显示。- 以上动画方法都可以添加参数。
- 第一个参数是动画执行的时长,以毫秒为单位
- 第二个参数是动画的回调函数(动画完成后自动调用的函数)
4.2、淡入淡出动画
fadeIn()
淡入(慢慢可见)fadeOut()
淡出(慢慢消失)fadeTo()
在指定时长内慢慢的将透明度修改到指定的值。0 透明,1 完成可见,0.5 半透明fadeToggle()
淡入/淡出切换
5、jQuery 事件操作
$( function(){} );
和window.onload = function(){}
的区别?- 他们分别是在什么时候触发?
- jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM 对象之后就会马上执行。
- 原生js 的页面加载完成之后,除了要等浏览器内核解析完标签创建好DOM 对象,还要等标签显示时需要的内容加载完成。
- 他们触发的顺序?
- jQuery 页面加载完成之后先执行
- 原生js 的页面加载完成之后
- 他们执行的次数?
- 原生js 的页面加载完成之后,只会执行最后一次的赋值函数。
- jQuery 的页面加载完成之后是全部把注册的function 函数,依次顺序全部执行。
5.1、jQuery 中其他的事件处理方法
click()
它可以绑定单击事件,以及触发单击事件mouseover()
鼠标移入事件mouseout()
鼠标移出事件bind()
可以给元素一次性绑定一个或多个事件。one()
使用上跟bind 一样。但是one 方法绑定的事件只会响应一次。unbind()
跟bind 方法相反的操作,解除事件的绑定live()
也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效
5.2、事件的冒泡
- 什么是事件的冒泡?
- 事件的冒泡是指,父子元素同时监听同一个事件。当触发子元素的事件的时候,同一个事件也被传递到了父元素的事件里去响应。
- 那么如何阻止事件冒泡呢?
- 在子元素事件函数体内,
return false;
可以阻止事件的冒泡传递。
- 在子元素事件函数体内,
5.3、javaScript 事件对象
- 事件对象,是封装有触发的事件信息的一个javascript 对象。
- 我们重点关心的是怎么拿到这个javascript 的事件对象。以及使用。
- 如何获取呢javascript 事件对象呢?
- 在给元素绑定事件的时候,在事件的function( event ) 参数列表中添加一个参数,这个参数名,我们习惯取名为event。
- 这个event 就是javascript 传递参事件处理函数的事件对象。
原生javascript 获取事件对象
window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
console.log(event);
}
}
jQuery 代码获取事件对象
$(function () {
$("#areaDiv").click(function (event) {
console.log(event);
});
});
使用bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$("#areaDiv").bind("mouseover mouseout",function (event) {
if (event.type == "mouseover") {
console.log("鼠标移入");
} else if (event.type == "mouseout") {
console.log("鼠标移出");
}
});