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>
<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>
</body>
</html>
attr() 和prop()
attr() 可以设置和获取属性的值，不推荐操作checked、readOnly、selected、disabled 等等
attr 方法还可以操作非标准的属性。比如自定义属性：abc,bbj
prop() 可以设置和获取属性的值,只推荐操作checked、readOnly、selected、disabled 等等
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//attr
// alert( $(":checkbox:first").attr("name") ); // 获取
// $(":checkbox:first").attr("name","abc") ; // 设置
// $(":checkbox").prop("checked",false );// 官方觉得返回undefined是一个错误
// $(":checkbox:first").attr("abc","abcValue");
// alert( $(":checkbox:first").attr("abc") );
});
</script>
DOM 的增删改
内部插入：
| 函数名 | 操作 |
|---|---|
| appendTo() | a.appendTo(b) 把a 插入到b 子元素末尾，成为最后一个子元素 |
| prependTo() | a.prependTo(b) 把a 插到b 所有子元素前面，成为第一个子元素 |
外部插入：
| 函数名 | 操作 |
|---|---|
| insertAfter() | a.insertAfter(b) 得到ba |
| insertBefore() | a.insertBefore(b) 得到ab |
替换:
| 函数名 | 操作 |
|---|---|
| replaceWith() | a.replaceWith(b) 用b 替换掉a |
| replaceAll() | a.replaceAll(b) 用a 替换掉所有b |
删除：
| 函数名 | 操作 |
|---|---|
| remove() | a.remove(); 删除a 标签 |
| empty() | a.empty(); 清空a 标签里的内容 |
代码演示
// $("<h1>标题</h1>").prependTo( $("div") );
// $("<h1>标题</h1>").insertAfter("div");
// $("<h1>标题</h1>").insertBefore( $("div") );
// $("<h1>标题</h1>").replaceWith("div");
// $("div").replaceWith( $("<h1>标题</h1>") );
// $("<h1>标题</h1>").replaceAll( "div" );
$("div").empty();
CSS 样式操作。
| 函数名 | 操作 |
|---|---|
| addClass() | 添加样式 |
| removeClass() | 删除样式 |
| toggleClass() | 有就删除，没有就添加样式。 |
| offset() | 获取和设置元素的坐标。 |
代码案例
$(function(){
var $divEle = $('div:first');
$('#btn01').click(function(){
//addClass() - 向被选元素添加一个或多个类
$divEle.addClass('redDiv blueBorder');
});
$('#btn02').click(function(){
//removeClass() - 从被选元素删除一个或多个类
$divEle.removeClass();
});
$('#btn03').click(function(){
//toggleClass() - 对被选元素进行添加/删除类的切换操作
$divEle.toggleClass('redDiv')
});
$('#btn04').click(function(){
//offset() - 返回第一个匹配元素相对于文档的位置。
var pos = $divEle.offset();
console.log(pos);
$divEle.offset({
top:100,
left:50
});
});
})
jQuery 动画
基本动画
| 函数名 | 操作 |
|---|---|
| show() | 将隐藏的元素显示 |
| hide() | 将可见的元素隐藏。 |
| toggle() | 可见就隐藏，不可见就显示。 |
以上动画方法都可以添加参数。
1、第一个参数是动画执行的时长，以毫秒为单位
2、第二个参数是动画的回调函数(动画完成后自动调用的函数)
淡入淡出动画
| 函数名 | 操作 |
|---|---|
| fadeIn() | 淡入（慢慢可见） |
| fadeOut() | 淡出（慢慢消失） |
| fadeTo() | 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明 |
| fadeToggle() | 淡入/淡出切换 |
代码案例
$(function(){
//显示 show()
$("#btn1").click(function(){
$("#div1").show(2000,function () {
alert("show动画完成 ")
});
});
//隐藏 hide()
$("#btn2").click(function(){
$("#div1").hide(1000,function () {
alert("hide动画 执行完成 ")
});
});
//切换 toggle()
$("#btn3").click(function(){
$("#div1").toggle(1000,function () {
alert("toggle动画 完成 ")
});
});
// var abc = function(){
// $("#div1").toggle(1000,abc);
// }
// abc();
//淡入 fadeIn()
$("#btn4").click(function(){
$("#div1").fadeIn(2000,function () {
alert("fadeIn完成 ")
});
});
//淡出 fadeOut()
$("#btn5").click(function(){
$("#div1").fadeOut(2000,function () {
alert("fadeOut完成 ")
});
});
//淡化到 fadeTo()
$("#btn6").click(function(){
$("#div1").fadeTo(2000,0.5,function () {
alert('fadeTo完成 ')
});
});
//淡化切换 fadeToggle()
$("#btn7").click(function(){
$("#div1").fadeToggle(1000,function () {
alert("fadeToggle完成 ")
});
});
})
jQuery 事件操作
$( function(){} );
和
window.onload = function(){}
的区别？
他们分别是在什么时候触发？
1、jQuery 的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM 对象之后就会马上执行。
2、原生js 的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM 对象，还要等标签显示时需要的内容加载（标签内容，如图片什么的）完成。
他们触发的顺序？
1、jQuery 页面加载完成之后先执行
2、原生js 的页面加载完成之后
他们执行的次数？
1、原生js 的页面加载完成之后，只会执行最后一次的赋值函数（重载覆盖）。
2、jQuery 的页面加载完成之后是全部把注册的function 函数，依次顺序全部执行。
jQuery 中其他的事件处理方法：
| 函数名 | 操作 |
|---|---|
| click() | 它可以绑定单击事件，以及触发单击事件 |
| mouseover() | 鼠标移入事件 |
| mouseout() | 鼠标移出事件 |
| bind() | 可以给元素一次性绑定一个或多个事件。 |
| one() | 使用上跟bind 一样。但是one 方法绑定的事件只会响应一次。 |
| unbind() | 跟bind 方法相反的操作，解除事件的绑定 |
| live() | 也是用来绑定事件。它可以用来绑定选择器匹配的所有元素的事件。哪怕这个元素是后面动态创建出来的也有效 |
事件的冒泡
什么是事件的冒泡？
事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。
那么如何阻止事件冒泡呢？
在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。
代码案例
<script type="text/javascript">
$(function(){
$("#content").click(function () {
alert('我是div');
});
$("span").click(function () {
alert('我是span');
return false;//不然会显示'我是span'再显示'我是div'
});
})
</script>
<body>
<div id="content">
外层div元素
<span>内层span元素</span>
外层div元素
</div>
<div id="msg"></div>
<br><br>
<a href="http://www.hao123.com">WWW.HAO123.COM</a>
</body>
javaScript 事件对象
事件对象，是封装有触发的事件信息的一个javascript 对象。
我们重点关心的是怎么拿到这个javascript 的事件对象。以及使用。
如何获取呢javascript 事件对象呢？
在给元素绑定事件的时候，在事件的function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为event。这个event 就是javascript 传递参事件处理函数的事件对象。
比如：
//1.原生javascript 获取事件对象
window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
console.log(event);
}
}
//2.jQuery 代码获取事件对象
$(function () {
$("#areaDiv").click(function (event) {
console.log(event);
});
});
//3.使用bind 同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$("#areaDiv").bind("mouseover mouseout",function (event) {
if (event.type == "mouseover") {
console.log("鼠标移入");
} else if (event.type == "mouseout") {
console.log("鼠标移出");
}
});