1.DOM的增删改
内部插入
appendTo(content) a.appendTo(b); 把a加到b里面 添加到最后面
prependTo(content) a.prependTo(b); 把a添加到b里面 添加到最前面
外部插入
insertAfter(content) a.insertAfter(b); 把a插入到b的后面
insertBefore(content) a.insertBefore(b); 把a插入到b的前面
替换
replaceWith(content|fn) a.replaceWith(b) 把a用b替换
replaceAll(selector) a.replaceAll(b) 用a替换所有的b
删除
empty() a.empty() 把a掏空，把a里面的所有元素都删除
remove([expr]) a.remove(b) 所有的a，是b的话就会删除 a.remove()删除a
appendTo(content) a.appendTo(b); 把a加到b里面 添加到最后面
prependTo(content) a.prependTo(b); 把a添加到b里面 添加到最前面
外部插入
insertAfter(content) a.insertAfter(b); 把a插入到b的后面
insertBefore(content) a.insertBefore(b); 把a插入到b的前面
替换
replaceWith(content|fn) a.replaceWith(b) 把a用b替换
replaceAll(selector) a.replaceAll(b) 用a替换所有的b
删除
empty() a.empty() 把a掏空，把a里面的所有元素都删除
remove([expr]) a.remove(b) 所有的a，是b的话就会删除 a.remove()删除a
*/
$(function(){
$("#btn01").click(function(){
//创建一个"广州"节点,添加到#city下[appendTo()]
//子节点.appendTo(父节点)
$("<li>广州</li>").appendTo($("#city"));
});
$("#btn02").click(function(){
//创建一个"广州"节点,添加到#city下[prependTo()]
$("<li>广州</li>").prependTo($("#city"));
});
$("#btn03").click(function(){
//将"广州"节点插入到#bj前面[insertBefore()]
//前边.insertBefore(后边的)
$("<li>广州</li>").insertBefore($("#bj"));
});
$("#btn04").click(function(){
//将"广州"节点插入到#bj后面[insertAfter()]
//后边.insertAfter(前边的)
$("<li>广州</li>").insertAfter($("#bj"));
});
$("#btn05").click(function(){
//使用"广州"节点替换#bj节点[replaceWith()]
//被替换的.replaceWith
$("#bj").replaceWith($("<li>广州</li>"));
});
$("#btn06").click(function(){
//使用"广州"节点替换#bj节点[replaceAll()]
//新的节点.replaceAll(旧的节点)
$("<li>广州</li>").replaceAll($("#bj"));
});
$("#btn07").click(function(){
//删除#rl节点[remove()]
//$("ul").remove("#rl");
//$("#rl").remove();
$("*").remove("#rl");
});
$("#btn08").click(function(){
//掏空#city节点[empty()]
$("#city").empty();
});
$("#btn09").click(function(){
//读取#city内的HTML代码
alert($("#city").html()); //读取
alert($("#city").html("哈哈"));//修改
});
$("#btn10").click(function(){
//设置#bj内的HTML代码
alert($("#bj").html()); //读取
alert($("#bj").html("哈哈"));//修改
});
});
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br>
<br>
<p>
你喜欢哪款单机游戏?
</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>*飞车</li>
<li>魔兽</li>
</ul>
<br />
<br />
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input type="radio" name="gender" value="male"/>
Male
<input type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">创建一个"广州"节点,添加到#city下[appendTo()]</button></div>
<div><button id="btn02">创建一个"广州"节点,添加到#city下[prependTo()]</button></div>
<div><button id="btn03">将"广州"节点插入到#bj前面[insertBefore()]</button></div>
<div><button id="btn04">将"广州"节点插入到#bj后面[insertAfter()]</button></div>
<div><button id="btn05">使用"广州"节点替换#bj节点[replaceWith()]</button></div>
<div><button id="btn06">使用"广州"节点替换#bj节点[replaceAll()]</button></div>
<div><button id="btn07">删除#rl节点[remove()]</button></div>
<div><button id="btn08">掏空#city节点[empty()]</button></div>
<div><button id="btn09">读取#city内的HTML代码</button></div>
<div><button id="btn10">设置#bj内的HTML代码</button></div>
</div>
</body>
</html>
案例:从左移到右,从右移到左
<!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">
select {
width: 100px;
height: 140px;
}
div {
width: 130px;
float: left;
text-align: center;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function () {
//1.选中移到右边
$("button:eq(0)").click(function () {
$("select[name='sel01'] option:selected").appendTo($("select[name='sel02']"));
})
//2.选中移到左边
$("button:eq(2)").click(function () {
$("select[name='sel02'] option:selected").appendTo($("select[name='sel01']"));
})
//3.全部移到右边
$("button:eq(1)").click(function () {
$("select[name='sel01'] option").appendTo($("select[name='sel02']"));
})
//4.全部移到左边
$("button:eq(3)").click(function () {
$("select[name='sel02'] option").appendTo($("select[name='sel01']"));
})
})
</script>
</head>
<body>
<div id="left">
<select multiple="multiple" name="sel01">
<option value="opt01">选项1</option>
<option value="opt02">选项2</option>
<option value="opt03">选项3</option>
<option value="opt04">选项4</option>
<option value="opt05">选项5</option>
<option value="opt06">选项6</option>
<option value="opt07">选项7</option>
<option value="opt08">选项8</option>
</select>
<button>选中添加到右边</button>
<button>全部添加到右边</button>
</div>
<div id="rigth">
<select multiple="multiple" name="sel02">
</select>
<button>选中删除到左边</button>
<button>全部删除到左边</button>
</div>
</body>
</html>
2.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")
});
$('#btn02').click(function(){
//removeClass() - 从被选元素删除一个或多个类
$divEle.removeClass("redDiv");
});
$('#btn03').click(function(){
//toggleClass() - 对被选元素进行添加/删除类的切换操作
$divEle.toggleClass("redDiv");
});
$('#btn04').click(function(){
//offset() - 返回第一个匹配元素相对于文档的位置。
console.log($divEle.offset());
});
})
</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>
3.JQuery动画
基本动画
show() 将隐藏的元素显示
hide() 将可见的元素隐藏。
toggle() 可见就隐藏，不可见就显示
以上动画方法都可以添加参数。
1、第一个参数是动画 执行的时长，以毫秒为单位
2、第二个参数是动画的回调函数 (动画完成后自动调用的函数)
淡入淡出动画
fadeIn() 淡入（慢慢可见）
fadeOut() 淡出（慢慢消失）
fadeTo() 在指定时长内慢慢的将透明度修改到指定的值。0 透明，1 完成可见，0.5 半透明
fadeToggle() 淡入/淡出 切换
练习 06 、CSS_画 动画 品牌展示
需求：
1.点击按钮的时候，隐藏和显示卡西欧之后的品牌。
2.当显示全部内容的时候，按钮文本为“显示精简品牌”然后，小三角形向上。所有品牌产品为默认颜色。
3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌”然后小三形向下。并且把 佳能，尼康的品牌颜色改为红色（给 li 标签添加 promoted 样式即可）
body {
font-size: 12px;
text-align: center;
}
a {
color: #04D;
text-decoration: none;
}
a:hover {
color: #F50;
text-decoration: underline;
}
.SubCategoryBox {
width: 600px;
margin: 0 auto;
text-align: center;
margin-top: 40px;
}
.SubCategoryBox ul {
list-style: none;
}
.SubCategoryBox ul li {
display: block;
float: left;
width: 200px;
line-height: 20px;
}
.showmore , .showless{
clear: both;
text-align: center;
padding-top: 10px;
}
.showmore a , .showless a{
display: block;
width: 120px;
margin: 0 auto;
line-height: 24px;
border: 1px solid #AAA;
}
.showmore a span {
padding-left: 15px;
background: url(img/down.gif) no-repeat 0 0;
}
.showless a span {
padding-left: 15px;
background: url(img/up.gif) no-repeat 0 0;
}
.promoted a {
color: #F50;
}
- 佳能(30440)
- 索尼(27220)
- 三星(20808)
- 尼康(17821)
- 松下(12289)
- 卡西欧(8242)
- 富士(14894)
- 柯达(9520)
- 宾得(2195)
- 理光(4114)
- 奥林巴斯(12205)
- 明基(1466)
- 爱国者(3091)
- 其它品牌相机(7275)
他们触发的顺序？
1、jQuery 页面加载完成之后先执行
2、原生 js 的页面加载完成之后
他们执行的次数？
1、原生 js 的页面加载完成之后，只会执行最后一次的赋值函数。
2、jQuery 的页面加载完成之后是全部把注册的 function 函数，依次顺序全部执行。
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(" 鼠标移出");
}
});
练习:图片跟随
$(function(){
$("#small").bind("mouseover mouseout mousemove",function (event) {
if (event.type == "mouseover") {
$("#showBig").show();
} else if (event.type == "mousemove") {
console.log(event);
$("#showBig").offset({
left: event.pageX + 10,
top: event.pageY + 10
});
} else if (event.type == "mouseout") {
$("#showBig").hide();
}
});
});