jQuery 的属性操作
html() 它可以设置和获取其实标签和结束标签中的内容(与 dom 属性 innerHTML 相同)
text() 它可以设置和获取起始标签和结束标签中的文本(与 dom 属性innerText 相同)
val() 它可以设置和获取表单项的 value 属性值(与 dom 属性 value 一样)
代码展示:
<!DOCTYPE html>
<html lang="en">
<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 () {
//不传参数是获取,传递参数是设置
// alert( $("div").html() );
// $("div").html("<h1>我是div中的标题1</h1>");
//不传参数是获取,传递参数是设置
// alert( $("div").text() );//获取
// $("div").text("<h1>我是div中的标题1</h1>");
//不传参数是获取,传递参数是设置
$("button").click(function () {
alert( $("#username").val() );//获取
$("#username").val("超级程序猿");//设置
})
})
</script>
</head>
<body>
<div>我是div标签 <span>我是div标签中的span</span></div>
<input type="text" name="username" id="username"/>
<button>操作输入框</button>
</body>
</html>
val 方法同时设置多个表单项的选中状态:
<!DOCTYPE html>
<html lang="en">
<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","mul1"]);
//操作单选的下拉框选中状态
$("#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() 方法还可以操作非标准的属性(比如自定义属性)。
prop() 可以设置和获取属性的值,只推荐操作 checked、readOnly、selected、disabled等等
代码展示:
<!DOCTYPE html>
<html lang="en">
<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 () {
//attr
// alert( $(":checkbox:first").attr("name"));//获取
// $(":checkbox:first").attr("name","abc");//设置
// $(":checkbox").prop("checked",false);
// $(":checkbox:first").attr("abc","abcValue");
})
</script>
</head>
<body>
<br/>
多选:
<input name="checkbox" type="checkbox" value="checkbox1"/>checkbox1
<input name="checkbox" type="checkbox" value="checkbox2"/>checkbox2
</body>
</html>
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标签里的内容
<!DOCTYPE html>
<html lang="en">
<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 () {
// a.appendTo(b) 把a插入到b子元素末尾,称为最后一个子元素
// $("<h1>标题</h1>").appendTo("div");
// $("<h1>标题</h1>").appendTo( $("div") );
// a.prependTo(b) 把a插入到b所有子元素前面,成为第一个子元素
// $("<h1>标题</h1>").prependTo("div");
// $("<h1>标题</h1>").prependTo( $("div") );
// a.insertAfter(b) 得到 ba
// $("<h1>标题</h1>").insertBefore( $("div") );
// a.insertBefore(b) 得到 ab
// $("<h1>标题</h1>").insertAfter( $("div") );
// a.replaceWith(b) 用b替换掉a
// $("div").replaceWith("<h1>标题</h1>");
// a.replaceAll(b) 用a替换掉所有b
// $("<h1>标题</h1>").replaceAll("div");
// a.remove() 删除a标签
// $("div").remove();
// a.empty() 清空a标签里的内容
// $("div").empty();
})
</script>
</head>
<body>
<div>1234</div>
<div>abc</div>
</body>
</html>
CSS样式操作
addClass() 添加样式
removeClass() 删除样式
toggleClass() 有就删除,没有就添加样式
offset() 获取和设置元素的坐标
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
div{
width:100px;
height:260px;
}
div.whiteborder{
border: 2px white solid;
}
div.redDiv{
background-color: red;
}
div.blueBorder{
border: 5px blue solid;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
var $divEle = $('div:first');
$('#btn01').click(function(){
//addClass() - 向被选元素添加一个或多个类
$divEle.addClass('redDiv blueBorder');
});
$('#btn02').click(function(){
//removeClass() - 从被选元素删除一个或多个类
// $divEle.removeClass('redDiv blueBorder');
$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
});
});
})
</script>
</head>
<body>
<table align="center">
<tr>
<td>
<div class="border">
</div>
</td>
<td>
<div class="btn">
<input type="button" value="addClass()" id="btn01"/>
<input type="button" value="removeClass()" id="btn02"/>
<input type="button" value="toggleClass()" id="btn03"/>
<input type="button" value="offset()" id="btn04"/>
</div>
</td>
</tr>
</table>
<br /> <br />
<br /> <br />
</body>
</html>
jQuery 动画
-
基本动画
show() 将隐藏的元素显示
hide() 将可见的元素隐藏
toggle() 可见就隐藏,不可见就显示 -
淡入淡出动画
fadeIn() 淡入(慢慢可见)
fadeOut() 淡出(慢慢消失)
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0透明,1完成可见,0.5半透明
fadeToggle() 淡入/淡出 切换
以上动画方法都可以添加参数:
- 第一个参数是动画执行的时长,以毫秒为单位
- 第二个参数是动画的回调函数(动画完成后自动调用的函数)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
/*
基本
show([speed,[easing],[fn]])
hide([speed,[easing],[fn]])
toggle([speed],[easing],[fn])
滑动
slideDown([spe],[eas],[fn])
slideUp([speed,[easing],[fn]])
slideToggle([speed],[easing],[fn])
淡入淡出
fadeIn([speed],[eas],[fn])
fadeOut([speed],[eas],[fn])
fadeTo([[spe],opa,[eas],[fn]])
fadeToggle([speed,[eas],[fn]])
*/
$(function(){
//显示 show()
$("#btn1").click(function(){
$("#div1").show(1000,function () {
alert("show动画完成");
});
});
//隐藏 hide()
$("#btn2").click(function(){
$("#div1").hide(1000,function () {
alert("hide动画完成");
});
});
//切换 toggle()
$("#btn3").click(function(){
$("#div1").toggle(1000,function () {
alert("toggle动画完成");
})
});
//淡入 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完成");
})
});
})
</script>
</head>
<body>
<table style="float: left;">
<tr>
<td><button id="btn1">显示show()</button></td>
</tr>
<tr>
<td><button id="btn2">隐藏hide()</button></td>
</tr>
<tr>
<td><button id="btn3">显示/隐藏切换 toggle()</button></td>
</tr>
<tr>
<td><button id="btn4">淡入fadeIn()</button></td>
</tr>
<tr>
<td><button id="btn5">淡出fadeOut()</button></td>
</tr>
<tr>
<td><button id="btn6">淡化到fadeTo()</button></td>
</tr>
<tr>
<td><button id="btn7">淡化切换fadeToggle()</button></td>
</tr>
</table>
<div id="div1" style="float:left;border: 1px solid;background-color: blue;width: 300px;height: 200px;">
jquery动画定义了很多种动画效果,可以很方便的使用这些动画效果
</div>
</body>
</html>
jQuery 事件操作
$(function(){}); 和 window.onload = function(){} 的区别
触发时机:
- jQurey 的页面加载完成之后浏览器的内核解析完页面的标签创建好 DOM 对象之后就会马上执行。
- 原生 js 的界面加载完成之后,除了要等浏览器内核解析完标签创建好 DOM 对象,还要等标签显示时需要的内容加载完成。
触发顺序;
3. jQuery 页面加载完成之后先执行
4. 原生 js 的页面加载完成之后
执行次数:
5. 原生 js 的页面加载完成之后,只会执行最后一次的赋值函数。
6. jQuery 的页面加载完成之后把所有注册的 function 函数,依次顺序全部执行。
jQuery 中其他的事件处理方法
click() 它可以绑定单击事件,以及触发单击事件
mouseover() 鼠标移入事件
mouseout() 鼠标移出事件
bind() 可以给元素一次性绑定一个或多个事件
one() 使用上跟bind一样,但是one方法绑定的事件只会相应一次
unbind() 跟bind方法相反的操作,解除事件的绑定
live() 它可以用来绑定选择器匹配的所有元素的事件,哪怕这个元素是后面动态创建出来的也有效
代码展示:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
// $("h5").click(function () { // 传function是绑定事件
// alert("h5单击事件绑定");
// })
//使用live绑定的单机事件
$("h5").live("click",function () {
alert("h5单击事件--live方法绑定");
})
$('<h5 class="head">什么是jQuery?<h5/>').appendTo( $("#panel"));
// $("button").click(function () {
// $("h5").click(); // 不传function是触发事件
// })
//鼠标移入
// $("h5").mouseover(function () {
// console.log("鼠标进入");
// });
// 鼠标移出
// $("h5").mouseout(function () {
// console.log("鼠标移出");
// })
// 使用bind绑定事件
// $("h5").bind("click mouseover mouseout",function () {
// console.log("这是bind绑定的事件");
// })
//使用one绑定事件
// $("h5").one("click mouseover mouseout",function () {
// console.log("这是one绑定的事件");
// })
//使用unbind解除绑定事件
// $("h5").unbind();
});
</script>
</head>
<body>
<div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
</div>
<button>按钮</button>
</div>
</body>
</html>
事件的冒泡
事件的冒泡是指,父子元素同时监听同一个事件。当触发子元素的事件的时候,同一个事件也被传递到了父元素的事件里去响应。
在子元素事件函数体内,return false; 可以阻止事件的冒泡传递。
代码展示:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 13px;
line-height: 130%;
padding: 60px;
}
#content{
width: 220px;
border: 1px solid #0050D0;
background: #96E555;
}
span{
width: 200px;
margin: 10px;
background: #666666;
cursor: pointer;
color: white;
display: block;
}
p{
width: 200px;
background: #888;
color: white;
height: 16px;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#content").click(function () {
alert("我是div");
})
$("span").click(function () {
alert("我是span");
return false;
})
})
</script>
</head>
<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>
</html>
JavaScript 事件对象
事件对象,是封装有触发的事件信息的一个 javascript 对象。
获取JavaScript事件对象:在给元素绑定事件的时候,在事件的 function(event) 参数列表中添加一个参数,这个参数名,我们习惯取名为 event。 这个 event 就是 javascript 传递参事件处理函数的事件对象。
代码展示:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
#areaDiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
//1.原生javascript获取 事件对象
window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
console.log(event);
}
}
$(function () {
//2.JQuery代码获取 事件对象
$("#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("鼠标移出");
}
});
});
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>