与Ajax同样重要的jQuery（2）
与Ajax同样重要的jQuery（2）
练习9：
² 点击button 打印radio checkbox select 中选中项的值
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 点击button 打印radio checkbox select 中选中项的值
$("#mybutton").click(function(){
// 打印选中性别的值
$("input[name='gender']:checked").each(function(){
alert($(this).val());
});
// 打印爱好
$("input[name='hobby']:checked").each(function(){
alert($(this).val());
});
// 打印城市
$("select[name='city'] option:selected").each(function(){
alert($(this).val());
});
});
});
</script>
</head>
<body>
性别 ：<input type="radio" name="gender" value="男" /> 男
<input type="radio" name="gender" value="女"/> 女 <br/>
爱好: <input type="checkbox" name="hobby" value="体育" />体育
<input type="checkbox" name="hobby" value="读书" />读书
<input type="checkbox" name="hobby" value="音乐" />音乐
<input type="checkbox" name="hobby" value="旅游" />旅游 <br/>
城市 ：<select name="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select><br/>
<input type="button" value="获取选中的值 " id="mybutton" />
</body>
3.jQuery选择器总结
①：对象访问核心方法
each(function(){}) 遍历集合
size()/length属性 返回集合长度
index() 查找目标元素是集合中第几个元素
②：CSS样式操作
css(name,value) css({name:value,name:value}); 同时修改多个CSS样式
基本过滤选择器与 筛选过滤 API功能是相同
$("tr:first") 等价于 $("tr").first()
③：九种选择器重点
l 基本选择器和层级选择器 锁定元素
l 使用属性过滤选择器和内容过滤选择器 具体选中元素
l 表单操作 :checked :selected 选中 表单选中元素
配合基本过滤选择器，缩小选中的范围
4.jQuery的DOM操作
使用jQuery的九种选择器可以基本选中需要操作的对象，但是为了提高jQuery的查询效率，可以结合jQuery的内置查找函数一起使用
①：查询
children([expr]) 获取指定的子元素
find(expr) 获取指定的后代元素
parents([expr]) 获得祖辈元素
parent() 获取父元素
next([expr]) 获取下一个兄弟元素
prev([expr]) 获取前一个兄弟元素
siblings([expr]) 获取所有兄弟元素
在XML 解析中 find 方法使用最多
对查找结果进行遍历操作 each(function(){… }) ，在each函数中可以通过this 获得DOM对象，$(this) 获得jQuery对象
②：属性操作
设置属性 attr(name,value)
读取属性 attr(name)
同时设置多个属性 attr({name:value,name:value... });
attr("checked","true") 等价于 prop("checked")
练习1：
² 点击一个button，动态设置 div的属性 id name class
² 尝试能否设置一个不存在的属性？
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
// 点击一个button，动态设置 div的属性 id name class
// 尝试能否设置一个不存在的属性？
$(function(){
$("#mybutton").click(function(){
// 可以设置一个不存在属性
$("#mydiv").attr({'id':'xxxdiv','name':'xxxxname','class':'xxxclass','itcastinfo':'xxxxitcast'});
});
});
</script>
</head>
<body>
<div id="mydiv">itcast</div>
<input type="button" value="设置属性" id ="mybutton" />
</body>
③：CSS操作
通过attr属性设置/获取 style属性
attr('style','color:red'); // 添加style属性
设置CSS样式属性
css(name, value) 设置一个CSS样式属性
css(properties) 传递key-value对象，设置多个CSS样式属性
设置class属性
addClass(class) 添加一个class属性
removeClass([class]) 移除一个class属性
toggleClass(class)如果存在（不存在）就删除（添加）一个类
练习2：
² 点击button，使一个div的背景颜色变为 黄色
² 通过toggleClass(class) 实现点击 字体变为紅色，再点击样式还原
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 点击button，使一个div的背景颜色变为 黄色
$("#button1").click(function(){
$("#div1").css("background-color","yellow");
});
// 通过toggleClass(class) 实现点击 字体变为紅色，再点击样式还原
$("#button2").click(function(){
$("#div1").toggleClass("divclass");
});
});
</script>
<style type="text/css">
.divclass {
color:red;
}
</style>
<body>
<div id="div1">AAAAAA</div>
<input type="button" value="背景颜色变为黄色" id="button1" />
<input type="button" value="字体颜色开关" id="button2" />
</body>
④：HTML代码&文本&值操作
l 读取和设置某个元素中HTML内容
html() 读取innerHTML
html(content) 设置innerHTML
l 读取和设置某个元素中的文本内容
text() 读取文本内容
text(content) 设置文本内容
l 文本框、下拉列表框、单选框 选中的元素值
val() 读取元素value属性
val(content) 设置元素value属性
练习3：
² <div><p>传智播客</p></div> 获取div中 html和text 对比
² 使用val() 获得文本框、下拉框、单选框选中的value
² 测试能否通过 val() 设置单选框、下拉框的选中效果
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// <div><p>传智播客</p></div> 获取div中 html和text 对比
var $obj = $("<div><p>传智播客</p></div>");
// alert($obj.html());
// alert($obj.text());
//使用val() 获得文本框、下拉框、单选框选中的value
$("#mybutton").click(function(){
alert($("#username").val());
alert($("input[name='gender']:checked").val());
alert($("#city").val());
});
//测试能否通过 val() 设置单选框、下拉框的选中效果
$("#city").val("广州");
$("input[name='gender']").val(['女']);
});
</script>
</head>
<body>
用户名 <input type="text" id="username" /><br/>
性别 <input type="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" /> 女<br/>
城市 <select id="city">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
</select><br/>
<input type="button" value="获取val" id="mybutton"/>
</body>
设置 val控制radio select checkbox 选中
$("#city").val("广州");
$("input[name='gender']").val(['女']);
练习4：
² 输出所有select元素下的所有option元素中对应的文本内容
例如:<option value="中专">中专^^</option> 输出--->中专^^
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#edu option").each(function(){
alert($(this).text());
});
});
</script>
</head>
<body>
<select id="edu">
<option>博士</option>
<option>硕士</option>
<option>本科</option>
<option>大专</option>
</select>⑤：jQuery添加元素
l 创建元素
拼接好HTML代码片段 $(html片段) ---- 产生jQuery对象
l 内部插入：
$node.append($newNode) 内部结尾追加
$node.prepend($newNode) 内部开始位置追加
l 外部插入：
$node.after($newNode) 在存在元素后面追加 -- 兄弟
$newNode.insertBefore($node) 在存在元素前面追加
练习5：
² 在id=edu下增加<option value="大专">大专</option>
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 追加 option 内容大专
// 创建元素
var $newNode = $("<option value='大专'>大专</option>");
// 添加元素
// $("#edu").append($newNode); // 内部结尾
// $("#edu").prepend($newNode); // 内部开始
// $("option[value='本科']").after($newNode);
$newNode.insertBefore($("option:contains('高中')"));
});
</script>
<body>
<select id="edu">
<option value="博士">博士</option>
<option value="硕士">硕士</option>
<option value="本科">本科</option>
<option value="高中">高中</option>
</select>
⑥：jQuery删除元素
选中要删除元素.remove() ---- 完成元素删除
选中要删除元素.remove(expr) ----- 删除特定规则元素
remove删除节点后，事件也会删除
detach删除节点后，事件会保留 从1.4新API
练习6：
² 分别使用detach和remove 删除带有click事件的p标签，删除后再将p 重新加入body 查看事件是否存在
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("p").click(function(){
alert($(this).text());
});
// 使用remove方法删除 p元素，连同事件一起删除
// var $p = $("p").remove();
// 使用detach删除，事件会保留
var $p = $("p").detach();
$(document.body).append($p);
});
</script>
</head>
<body>
<p>AAA</p>
<div>BBB</div>
</body>
练习7：
² 表格数据添加与删除练习
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#mybutton").click(function(){
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
// DOM添加
var $tr =
$("<tr><td>"+name+"</td><td>"+email+"</td><td>"+phone+"</td><td><a href='javascript:void(0)' onclick='del(this)'>删除</a></td></tr>");
$("table").append($tr);
});
});
function del(o) {
// 对象o 代表a 标签
$(o).parents("tr").remove();
}
</script>
</head>
<body>
<form>
姓名 <input type="text" id="name" />
邮箱 <input type="text" id="email" />
手机<input type="text" id="phone" /><br/>
<input type="button" value="提交" id="mybutton"/>
</form>
<hr/>
<table border="1" width="400">
<tr>
<th>姓名</th>
<th>邮箱</th>
<th>手机</th>
<th>删除</th>
</tr>
</table>
⑦：jQuery复制和替换
l 复制节点
$(“p”).clone(); 返回节点克隆后的副本，但不会克隆原节点的事件
$(“p”).clone(true); 克隆节点，保留原有事件
l 替换节点
$("p").replaceWith("<b>ITCAST</b>"); 将所有p元素，替换为"<b>ITCAST</b>“
$(“<b>ITCAST</b>”).replaceAll(“p”); 与replaceWith相反
⑧：全选以及左右移动练习
练习8：
² 全选练习
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 全选/ 全不选
$("#checkallbox").click(function(){
var isChecked = this.checked;
$("input[name='hobby']").each(function(){
this.checked = isChecked;
});
});
// 全选
$("#checkAllBtn").click(function(){
$("input[name='hobby']").attr("checked","checked");
});
// 全不选
$("#checkAllNotBtn").click(function(){
$("input[name='hobby']").removeAttr("checked");
});
// 反选
$("#checkOppoBtn").click(function(){
$("input[name='hobby']").each(function(){
this.checked = !this.checked;
});
});
});
</script>
<body>
请选择您的爱好<br/>
<input type="checkbox" id="checkallbox" /> 全选/全不选 <br/>
<input type="checkbox" name="hobby" value="足球" /> 足球
<input type="checkbox" name="hobby" value="篮球" /> 篮球
<input type="checkbox" name="hobby" value="游泳" /> 游泳
<input type="checkbox" name="hobby" value="唱歌" /> 唱歌 <br/>
<input type="button" value="全选" id="checkAllBtn" />
<input type="button" value="全不选" id="checkAllNotBtn" />
<input type="button" value="反选" id="checkOppoBtn" />
</body>
练习9：
² 左右移动练习
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//选中的去右边
$("#chooseToRight").click(function(){
$("#right").append($("#left option:selected"));
});
// 全去右边
$("#allToRight").click(function(){
$("#right").append($("#left option"));
});
// 全去左边
$("#allToLeft").click(function(){
$("#left").append($("#right option"));
});
//选中的去左边
$("#chooseToLeft").click(function(){
$("#left").append($("#right option:selected"));
});
});
</script>
</head>
<body>
<select id="left" multiple="multiple" size="15">
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>杭州</option>
<option>武汉</option>
<option>广州</option>
<option>深圳</option>
<option>南京</option>
</select>
<input type="button" value="-->" id="chooseToRight" />
<input type="button" value="==>" id="allToRight" />
<input type="button" value="<--" id="chooseToLeft" />
<input type="button" value="<==" id="allToLeft" />
<select id="right" multiple="multiple" size="15">
<option>郑州</option>
</select>
</body>
5.jQuery事件
①：事件绑定
传统js 一般一个对象只能绑定某种事件一个函数
jQuery 支持对同一个对象，同一个事件可以绑定多个函数
绑定事件函数到对象有两种写法
写法一
$("div").click(function(){
……
});
取消绑定：$("div").unbind("click");
*** live 为满足条件对象，实时追加绑定 、取消live事件用die方法
Demo:
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 使用live绑定
$("div").live("click",function(){
alert($(this).text());
});
// $("div").click(function(){
// alert($(this).text());
// });
// 解除绑定
// $("div").unbind("click");
// 新加入div元素没有之前div元素绑定事件
$(document.body).append($("<div>CCC</div>"));
});
</script>
</head>
<body>
<div>AAA</div>
<div>BBB</div>
</body>
②：事件一次性绑定和自动触发
一次性事件 one(type, [data], fn) 为对象绑定一次性事件，只有一次有效
触发事件 trigger(type, [data]) 触发目标对象指定的事件执行
练习1：
² 为页面内所有p 元素绑定 一次性事件，点击打印p元素中内容
² 页面内有两个按钮，点击按钮1， 触发按钮2的 click事件执行
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
//为页面内所有p 元素绑定 一次性事件，点击打印p元素中内容
$("p").one("click",function(){
alert($(this).text());
});
//页面内有两个按钮，点击按钮1， 触发按钮2的 click事件执行
$("#mybutton1").click(function(){
alert("点击了按钮一");
// 触发2 click事件
$("#mybutton2").trigger("click");
});
$("#mybutton2").click(function(){
alert("点击了按钮二");
});
});
</script>
<body>
<p>传智播客</p>
<input type="button" value="按钮一" id="mybutton1" />
<input type="button" value="按钮二" id="mybutton2" />
</body>
③：事件切换
hover(mouseover,mouseout) 模拟鼠标悬停事件
toggle(fn1,fn2,fn3...) ; 鼠标点击一次 触发一个函数
练习1：
² 编写一个div元素，光标移动上去 字体变为红色，移开后 变为蓝色
² 建立三张图片，页面显示第一张，点击切换到第二张，点击切换到第三张
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 编写一个div元素，光标移动上去 字体变为红色，移开后 变为蓝色
$("div").hover(function(){
// over
$(this).css("color","red");
},function(){
// out
$(this).css("color","blue");
});
// 建立三张图片，页面显示第一张，点击切换到第二张，点击切换到第三张
$("img").toggle(function(){
$(this).attr("src","2.jpg");
},function(){
$(this).attr("src","3.jpg");
},function(){
$(this).attr("src","4.jpg");
});
});
</script>
<body>
<div>鼠标移动上 会变色的内容！</div>
<img src="1.jpg" width="240" height="180" />
</body>④：事件阻止默认动作和传播
l 默认动作阻止
$("a").click(function(event){
event.preventDefault();
// do something
});
l 取消事件冒泡
$("p").click(function(event){
event.stopPropagation();
// do something
});
<script type="text/javascript" src="../jquery-1.8.3.min.js"></script>
<script type="text/javascript">
$(function(){
// 通过event阻止默认事件
$("#dellink").click(function(event){
var isConfirm = window.confirm("确认删除吗？");
if(!isConfirm){
event.preventDefault();
}
});
$("div").click(function(){
alert($(this).html());
});
// 阻止事件冒泡
$("p").click(function(event){
alert($(this).html());
event.stopPropagation();
});
});
</script>
<body>
<a href="del?id=1" id="dellink">删除资料</a>
<div><p>信息</p></div>
</body>