简介
jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。 jQuery的核心特性可以总结为：具有独特的链式语法和短小清晰的多功能接口；具有高效灵活的css选择器，并且可对CSS选择器进行扩展；拥有便捷的插件扩展机制和丰富的插件。jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。简单来说jQuery就是一个JavaScript框架，简化js代码的编写，做到write less do more。
jQuery核心函数
页面加载函数 Jquery(callback)
作用: 页面加载完成后执行
意义: 弥补传统js window.onload的缺点: 如果一个页面出现两个, 后面的会把前面的onload函数覆盖掉
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
// js 的页面加载函数
// 缺点: 如果一个页面出现两个onload函数, 后面会把前面的覆盖掉, 因为js不存在 函数重载
// window.onload = function(){
// alert("js 的页面加载函数 11111111111 ...");
// }// window.onload = function(){
// alert("js 的页面加载函数 2222222 ...");
// } // 页面加载完成后执行 下面两个都会执行
jQuery(function(){
alert("jQuery 的页面加载函数 11111111111 ...");
}); jQuery(function(){
alert("jQuery 的页面加载函数 22222222222 ...");
});
</script>
简写
$(function() {
//页面加载完成后执行
})
将js对象转成jQuery对象
query对象是jquery所独有的，只有jquery对象才可以使用jquery的属性和方法。
dom对象无法调用jquery对象的属性和方法；
jquery对象也无法调用dom对象的属性和方法。
jquery对象和dom对象的相互转化：
注意：需要把jquery对象理解成是一个数组，并且第一个元素就是dom对象。
jquery对象 —-》 dom对象： jquery对象[0] 或者 jquery对象.get(0);
dom对象 —-》 jquery对象： $(dom对象)
开发规范约定：
var 变量名 = dom对象；
var $变量名 = jquery对象；
//将jQuery看做是一个数组, 第一个元素就是js对象
jQuery("#myDiv")[0].onclick = function() {};
//只有jQuery对象才能调用jQuery的属性和方法
jQuery(document.getElementById("myDiv")).click(function() {});
将html文本转换成jQuery标签对象
var $span = jQuery("<span>山东张学友</span>");
$span.click(function() {})
jQuery选择器
注意：jQuery中的选择器筛选出来的结果都是符合筛选条件的一个数组（即使只有一个也会放在数组中），
使用id筛选只会筛选出第一个，并且取值赋值都是操作这一个，使用name或者其他筛选会有多个，但是都是放在数组中的；
所以在确定只有一个对象并且需要得到该对象的一些属性的时候 ，需要找到该数组的第一个，再使用其属性，比如：
//获取下拉框option的个数
$("#sel01")[0].length;<select id="sel01">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
基本选择器
#id 根据id属性值获取标签对象(唯一)
element 根据标签名获取标签对象(多个)
.class 根据class属性值值获取标签对象(多个)
* 获取所有的标签对象
selector1,selector2,selectorN 既要 第一个, 也要 第二个 还要 第N个
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
//根据id属性值获取标签对象(唯一)
var _fooHtml = $("#foo").html(); //根据标签名获取标签对象(多个)
$("div").each(function() {
$(this).html("山东张学友" + $(this).html()); // 设置
}); //根据class属性值值获取标签对象(多个)
$(".zy").each(function() {
$(this).html("zy" + $(this).html()); // 设置
});
});
</script>
</head> <body>
<div>DIVAAAA</div>
<div class="zy">DIVBBBB</div>
<div>DIVCCCC</div>
<div>DIVDDDD</div>
<div class="zy">DIVEEEE</div>
<div id="foo">DIVFFFF</div>
<p>PAAAA</p>
<p class="zy">PBBBB</p>
<p>PCCCC</p>
</body></html>
层级选择器
ancestor descendant : 选择当前标签的后代标签(空格)
parent > child : 选择当前标签的子标签(大于号 >)
prev + next : 选择当前标签的下一个弟弟标签(加号 +)
prev ~ siblings : 选择当前标签的兄弟标签(符号 ~)
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
// 1．将class属性值为alex的元素下所有a元素字体变为红色
$(".alex a").css("color", "red");
// 2．将class属性值为alex的元素下直接a元素字体变为蓝色
$(".alex>a").css("color", "blue");
// 3．将div元素后所有兄弟a元素，字体变为黄色，大小变为30px
$("div~a").css({
"color": "yellow",
"font-size": "30px"
});
});
</script>
</head> <body>
<div class="alex">
<a>div link</a>
<p>
info
<a>p link</a>
</p>
</div>
<a>link</a>
<p class="alex">
<a>p link</a>
</p>
<a>link</a>
</body></html>
属性过滤选择器
[attribute] 选择有某个属性的标签, 如: input[name] 选择有name属性的标签
[attribute=value] 选择属性等于某个值的标签 如: input[name='username']
[attribute!=value] 选择属性不等于某个值的标签 如: input[name!='username']
[attribute^=value] 选择属性以某个值开始的标签 如: input[name^='use']
[attribute$=value] 选择属性以某个值结束的标签 如: input[name$='name']
[attribute*=value] 选择属性含有某个值的标签 如: input[name*='user']
[attrSel1][attrSel2][attrSelN] 选择既有属性id,也有属性class, 如 input[id][class]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
// 1.设置所有含有id属性的div，字体颜色红色
$("div[id]").css("color", "red");
// 2.设置所有class属性值 含有alex元素背景色为黄色
$("[class*='alex']").css("background", "yellow");
// 3.对所有既有id又有class属性div元素，添加一个点击事件，打印div标签中内容
$("div[id][class]").click(function() {
// alert(this.innerHTML); // js写法
alert($(this).html()); // jquery写法
});
// 4 获取属性name="hobby"的input标签, 打印value属性值
$("input[name='hobby']").each(function() {
// alert(this.value); // js写法
alert($(this).val()); // jquery写法
});
});
</script>
</head> <body>
<div>AAAA</div>
<div id="mydiv" class="itcast1">BBBB</div>
<div class="alex3">CCCC</div>
<div id="mydiv2">DDDD</div>
<div class="divclass">EEEE</div>
<div id="xxx" class="alex3">FFFF</div>
<p class="p-alex">PPPPPP</p> <input type="checkbox" name="hobby" value="高尔夫" /> 高尔夫
<input type="checkbox" name="hobby" value="蹦极" /> 蹦极
<input type="checkbox" name="hobby" value="足球" /> 足球
</body>
</html>
基本过滤选择器
:first 选择第一个
:last 选择最后一个
:not(selector) 不选择指定的那个标签
:even 偶数
:odd 奇数
:eq(index) 选择指定下标的那个标签
:gt(index) 大于指定下标的标签
:lt(index) 小于指定下标的标签
:header 选择标签标签
:animated 选择执行动画效果的标签
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
// 1．设置表格第一行，显示为红色
$("tr:first").css("color", "red");
// 2．设置表格除第一行以外 显示为蓝色
$("tr:not(:first)").css("color", "blue")
// 3．设置表格奇数行背景色 黄色
$("tr:gt(0):odd").css("background", "yellow");
// 4．设置表格偶数行背景色 绿色
$("tr:gt(0):even").css("background", "green");
// 5．设置页面中所有标题 显示为灰色
$(":header").css("color", "gray");
// 6．设置页面中正在执行动画效果div背景黄色，不执行动画div背景绿色
$("div").click(function() {
$(this).slideUp("slow"); // 向上滑动
$("div:animated").css("background", "yellow"); // 正在执行动画效果div背景黄色
});
// 不执行动画div背景绿色
$("div:not(:animated)").css("background", "green");
});
</script>
</head> <body>
<h1>表格信息</h1>
<h2>这是一张商品表</h2>
<table border="1" width="600">
<tr>
<th>商品编号</th>
<th>商品名称</th>
<th>售价</th>
<th>数量</th>
</tr>
<tr>
<td>001</td>
<td>冰箱</td>
<td>3000</td>
<td>100</td>
</tr>
<tr>
<td>002</td>
<td>洗衣机</td>
<td>2000</td>
<td>50</td>
</tr>
<tr>
<td>003</td>
<td>热水器</td>
<td>1500</td>
<td>20</td>
</tr>
<tr>
<td>004</td>
<td>手机</td>
<td>2188</td>
<td>200</td>
</tr>
</table> <div>slideDown(speed, [callback]) 概述 通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数。 这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅。 参数 speedString,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) callback (可选)FunctionFunction在动画完成时执行的函数</div>
<div>fadeOut(speed, [callback]) 概述 通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数。 这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化。 参数 speedString,Number三种预定速度之一的字符串("slow", "normal", or "fast")或表示动画时长的毫秒数值(如：1000) callback (可选)Function在动画完成时执行的函数</div>
</body></html>
内容过滤选择器
:contains(text) 包含某个文本内容的标签
:empty 没有内容的标签
:has(selector) 包含指定内容的标签
:parent 查找有内容的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
// 1．设置含有文本内容 ”张学友” 的 div 的字体颜色为红色
$("div:contains('张学友')").css("color", "red");
// 2．设置没有子元素的div元素 文本内容 ”这是一个空DIV“
$("div:empty").html("这是一个空DIV");
// 3．设置包含p元素 的 div 背景色为黄色
$("div:has(p)").css("background", "yellow");
// 4．设置所有含有子元素的span字体为蓝色
$("span:parent").css("color", "blue");
});
</script>
</head> <body>
<div>今天是个晴天</div>
<div>山东张学友河北刘德华</div>
<div>
<span>JavaScript</span> 是网页开发中脚本技术
</div>
<div>Ajax 是异步的 JavaScript和 XML</div>
<div>
<p>jQuery</p>
是 JavaScript一个 轻量级框架
</div>
<div></div>
</body>
</html>
可见性过滤选择器
:hidden 选择隐藏的标签:1 <input type="hidden" /> 2 <标签 sytle="display:noe" .../>
:visible 选择可见的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
// 1．为表单中所有隐藏域 添加 class属性，值为alex
$("form :hidden").addClass("alex"); // 2．设置table所有 可见 tr 背景色 黄色
$("tr:visible").css("background", "yellow"); // 3．设置table所有 隐藏tr 字体颜色为红色，显示出来 ，并输出tr中文本值
/*
var _tr = $("tr:hidden").css("color", "red");
var _tr2 = _tr.show();
alert(_tr2.html());
*/
alert($("tr:hidden").css("color", "red").show().html());
});
</script>
</head> <body>
<form>
<input type="hidden" /> <input type="text" name="xxx" style="display: none;" />
</form>
<table>
<tr>
<td>洗衣机</td>
</tr>
<tr>
<td>热水器</td>
</tr>
<tr style="display: none">
<td>电冰箱</td>
</tr>
</table>
</body>
</html>
子元素过滤选择器
:nth-child 匹配其父元素下的第N个子或奇偶元素
:first-child 匹配第一个子元素' first' 只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
:last-child 匹配最后一个子元素 ':last'只匹配一个元素，而此选择符将为每个父元素匹配一个子元素
:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
// 1.在每个表格 下3的倍数行，字体颜色为红色
$("tr:nth-child(3n)").css("color", "red");
// 2.每个表格 奇数行 背景色 黄色
$("tr:nth-child(odd)").css("background", "yellow");
// 3.每个表格 偶数行 背景色 灰色
$("tr:nth-child(even)").css("background", "gray");
// 4.每个tr 只有一个td的 背景为 蓝色
$("td:only-child").css("background", "blue");
});
</script>
</head> <body>
<table border="1" width="400" id="mytable">
<tr><td>1</td><td>冰箱</td></tr>
<tr><td>2</td><td>洗衣机</td></tr>
<tr><td>3</td><td>热水器</td></tr>
<tr><td>4</td><td>电饭锅</td></tr>
<tr><td>5</td><td>电磁炉</td></tr>
<tr><td>6</td><td>豆浆机</td></tr>
<tr><td>7</td><td>微波炉</td></tr>
<tr><td>8</td><td>电视</td></tr>
<tr><td>9</td><td>空调</td></tr>
<tr><td>10</td><td>收音机</td></tr>
<tr><td>11</td><td>排油烟机</td></tr>
<tr><td>12</td><td>加湿器</td></tr>
<tr><td>13 电暖气</td></tr>
</table>
</body>
</html>
表单过滤选择器
:input 匹配所有 input, textarea, select 和 button 元素
:text 匹配所有的单行文本框
:password 匹配所有密码框
:radio 匹配所有单选框
:checkbox 匹配所有多选框
:submit 匹配提交按钮
:image 匹配图片标签
:reset 匹配重置按钮
:button 匹配按钮
:file 匹配 input type='file'的标签
:hidden 匹配隐藏的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script>
//1．对所有text框和password框，添加离焦事件，校验输入内容不能为空
$("input[name='username'], input[name='password']").blur(function() {
var val = this.value;
if(val == null || val.trim().length <= 0) {
alert(this.name + "不得为空!");
}
});
//2．对button 添加 点击事件，提交form表单
$(":button").click(function() {
$("form").submit();
});
</script>
</head> <body>
<form action="login">
用户名 <input type="text" name="username" /> <br/> 密码 <input type="password" name="password" /> <br/>
<input type="button" value="提交" />
</form>
</body>
</html>
表单对象属性
:enabled 可用
:disabled 不可用
:checked 选中(单选和多选)
:selected 选中(下拉)
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
//1: 只读和不可用标签的联系和区别
// 联系: 只能看,不能修改
// 区别:
// 只读虽然不能修改,但是可以随表单一起提交
// 不可用不仅不能修改, 还不能表单一起提交
//2: 点击button 打印radio checkbox select 中选中项的值
$(":button").click(function() {
// 性别
var sexVal = $("input[name='gender']:checked").val();
alert("性别: " + sexVal); // 爱好
var hobbyStr = "";
$("input[name='hobby']:checked").each(function() {
var hobby = this.value; // js写法
hobbyStr += hobby + ",";
});
alert("爱好 : " + hobbyStr); // 城市
var cityVal = $("select[name='city'] option:selected").val();
alert("城市:" + cityVal);
});
});
</script>
</head> <body>
<form>
用户名(只读): <input type="text" readonly="readonly" name="username" value="zhangsan" /> <br/>
密码(不可用): <input type="text" disabled="disabled" name="123" value="123" /> <br/>
性别
<input type="radio" value="男" name="gender" />男
<input type="radio" value="女" name="gender" />女 <br/>
爱好
<input type="checkbox" value="抽烟" name="hobby" /> 抽烟
<input type="checkbox" value="喝酒" name="hobby" /> 喝酒
<input type="checkbox" value="烫头" name="hobby" /> 烫头 <br/>
城市
<select name="city">
<option value="">请选择</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
</select> <br/>
<input type="button" value="打印" />
</form>
</body></html>
jQuery操作DOM
操作属性
attr(name|pro|key,val|fn) 设置或返回被选元素的属性值。
removeAttr(name)
prop(n|p|k,v|f)1.6+ 获取在匹配的元素集中的第一个元素的属性值。(适用于单选 多选 下拉框)
removeProp(name)1.6+
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
// 设置标签存在的属性
$("#btn1").click(function() {
$("a").attr("href", "http://www.baidu.com");
}) // 设置标签不存在的属性
$("#btn2").click(function() {
$("a").attr("meinv", "刘亦菲");
}) $("#btn3").click(function() {
$("input[name='sex']").each(function() {
var attrChecked = $(this).attr("checked"); // 获取单选的选中状态不合适
alert(this.checked + " ===== " + attrChecked);
});
}); $("#btn4").click(function() {
$("input[name='sex']").each(function() {
var propChecked = $(this).prop("checked");
alert(this.checked + " ===== " + propChecked);
});
});
});
</script>
</head> <body>
<a>百度</a> <br/>
<input type="button" id="btn1" value="设置标签存在的属性" /> <br/>
<input type="button" id="btn2" value="设置标签不存在的属性" /> <br/>
<hr/> <input type="radio" name="sex" value="女" />女
<input type="radio" name="sex" value="男" checked="checked" />男 <br/>
<input type="button" id="btn3" value="通过attr获取选中状态" /> <br/>
<input type="button" id="btn4" value="通过prop获取选中状态" />
</body></html>
设置样式
直接设置css样式:
$("p").css("color") 获取第一个段落的color值
$("p").css("color","red") 将所有段落的字体设为红色
$("p").css({color:"#ff0011", background:"blue"}) 将所有段落字体设置为红色,背景设置为蓝色
设置css类:
addClass(class|fn) 增加class样式
removeClass([class|fn]) 删除class样式
toggleClass(class|fn[,sw]) 切换css样式: 有 去掉; 没有 增加
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.changeBackYellow {
background: yellow;
} .changeFontBlue {
color: blue;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
$("#btn1").click(function() {
// 方式一
$("div").attr("style", "background:yellow"); // 方式二: 通过css
$("div").css("background", "yellow"); // 方式三: 增加class样式
$("div").addClass("changeBackYellow"); // 切换效果: 有 去掉; 没有 增加
$("div").toggleClass("changeBackYellow");
}); // 字体变蓝
$("#btn2").click(function() {
// 方式一
$("div").attr("style", "color:blue"); // 方式二: 通过css
$("div").css("color", "blue"); // 方式三: 增加class样式
$("div").addClass("changeFontBlue"); // 切换效果: 有 去掉; 没有 增加
$("div").toggleClass("changeFontBlue");
});
});
</script>
</head> <body>
<div>心情不错！</div>
<input type="button" value="背景变黄" id="btn1" />
<input type="button" value="字体变蓝" id="btn2" />
</body></html>
获取标签内容和标签填写的值
读取和设置某个元素中HTML内容
标签.html() 获取一个元素中html内容
标签.html(val) 设置一个元素中html内容
这个函数不能用于XML文档。但可以用于XHTML文档 读取和设置某个元素中的文本内容
标签.text() 获取一个元素中 文本内容
标签.text(val) 设置一个元素中 文本内容
该方法既可以用于 XHTML 也可以用于 XML 文档文本框、下拉列表框、单选框 选中的元素值
标签.val() 获取文本框、下拉列表框、单选框 value值
标签.val(val) 设置文本框、下拉列表框、单选框 value值
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
// 1．<div><p>山东张学友</p></div> 获取div中 html和text 对比
var _html = $("div").html(); //带有p标签
var _text = $("div").text(); //不带标签 // 2．单击pickBtn 使用val() 获得文本框、下拉框、单选框选中的value
$("#pickBtn").click(function() {
// 用户名
var usernameVal = $("input[name='username']").val();
console.info("用户名 === " + usernameVal);
// 城市
var cityVal = $("select[name='city']").val();
console.info("城市 === " + cityVal);
// 爱好
var hobbyStr = "";
$("input[name='hobby']:checked").each(function() {
hobbyStr += this.value + ", ";
});
console.info("爱好 === " + hobbyStr);
// 性别
var sexVal = $("input[name='gender']:checked").val();
console.info("性别 === " + sexVal);
}); // 3．单击setBtn 通过 val() 设置单选框、下拉框的选中效果
$("#setBtn").click(function() {
// 用户名
$("input[name='username']").val("梅西"); // 城市
$("select[name='city']").val("北京"); // 爱好(多个)
$("input[name='hobby']").val(["足球", "篮球", "乒乓球"]); // 性别(将单选认为是特殊多选, 只能选择一个)
$("input[name='gender']").val(["男"]);
});
});
</script>
</head> <body>
<div>
<p>山东张学友</p>
</div>
<form>
用户名 <input type="text" name="username" /> <br/>
城市
<select name="city">
<option value="">请选择</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
</select><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="radio" name="gender" value="男" />男
<input type="radio" name="gender" value="女" />女 <br/>
<input type="button" value="取值" id="pickBtn" />
<input type="button" value="设值" id="setBtn" />
</form>
</body></html>
jQuery操作
创建元素
使用工厂函数 jQuery(html, [ownerDocument]) --- jQuery可以写为$
例如： $(“<div>你好，jQuery</div>”);
内部插入
$node.append($newNode)向每个匹配的元素内部的结尾处追加结尾处
$newNode.appendTo($node)将新元素追加到每个匹配元素内部的结尾处
$node.prepend($newNode) 向每个匹配的元素内部的结尾处追加开始处
$newNode.prependTo($node)将新元素追加到每个匹配元素内部的开始处
外部插入
$node.after($newNode) 向每个匹配的元素的之后插入内容，是并列兄弟
$newNode.insertAfter($node) 将新元素插入到每个匹配元素之后
$node.before($newNode) 向每个匹配的元素的之前插入内容
$newNode.insertBefore($node) 将新元素插入到每个匹配元素之前
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
// 插入大专学历 （本科和高中之间）--- 外部插入
var _dazhuan = "<option value='大专'>大专</option>";
$("option[value='本科']").after(_dazhuan); // 插入幼儿园 （学历列表最后） --- 内部插入
var _youeryuan = "<option value='幼儿园'>幼儿园</option>";
$("#edu").append(_youeryuan)
});
</script>
</head> <body>
<!-- 选择学历 -->
<select id="edu" name="edu">
<option value="">请选择</option>
<option value="本科">本科</option>
<option value="高中">高中</option>
<option value="中转">中专</option>
<option value="小学">小学</option>
</select>
</body></html>
删除标签对象
$("").remove() 删除标签 并删除标签对应的事件
$("").detach() 删除标签 但是不删除标签对应的事件
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script>
$(function() {
// 绑定事件
$("#inner").click(function() {
//既会触发inner的click事件 也会触发outer的click事件(事件冒泡)
alert("点击内部的div ... ...");
}); $("#outer").click(function() {
alert("点击外部的div ... ...");
}); // 1 使用remove删除内部div标签, 再将删除标签 重新加入body 查看事件是否存在: 事件不存在
var _inner = $("#inner").remove();
$("body").append(_inner); // 2 使用detach删除标签, 再将删除标签 重新加入body 查看事件是否存在: 保留事件
var _inner = $("#inner").detach();
$("body").append(_inner); // 3 清空id='inner'的标签内容
$("#inner").empty(); });
</script>
</head> <body>
<div id="outer" style="background:blue;width:300px;height:300px;">
<div id="inner" style="background:red;width:150px;height:150px;">山东张学友!!!
</body></html>
替换标签对象
替换：
replaceWith(content|fn) 将所有匹配的元素替换成指定的HTML或DOM元素。
replaceAll(selector) 用匹配的元素替换掉所有 selector匹配到的元素。
克隆：
clone([Even[,deepEven]]) 克隆匹配的DOM元素并且选中这些克隆的副本。
replaceWith（把所有的段落标记替换成加粗的标记。）：
html代码：
<p>Hello</p><p>cruel</p><p>World</p>
jQuery代码：
$("p").replaceWith("<b>Paragraph. </b>");
结果：
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>replaceAll（把所有的段落标记替换成加粗标记）：
html代码：
<p>Hello</p><p>cruel</p><p>World</p>
jQuery代码：
$("<b>Paragraph. </b>").replaceAll("p");
结果：
<b>Paragraph. </b><b>Paragraph. </b><b>Paragraph. </b>clone：
1，克隆所有b元素（并选中这些克隆的副本），然后将它们前置到所有段落中。
html代码：
<b>Hello</b><p>, how are you?</p>
jQuery代码：
$("b").clone().prependTo("p");
结果：
<b>Hello</b><p><b>Hello</b>, how are you?</p>
2，创建一个按钮，他可以复制自己，并且他的副本也有同样功能。
html代码：
<button>Clone Me!</button>
jQuery代码：
$("button").click(function(){
$(this).clone(true).insertAfter(this);
});
<!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 {
padding : 10px;
background-color : blue;
} p {
background-color : red;
}
</style>
<script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
// 需求1:当点击btn1时,将外面的p标签 替换 里面的p标签
$("#btn1").click(function(){
// $(被替换的节点).replaceWith(新节点);
$("#mydiv_p").replaceWith($("#myp"));
// 问题: 替换产生了移动效果, 类似域 ctrl + x 剪切
// 理想效果: 先复制,再粘贴
});
// 需求2:当点击btn2时,将外面的p标签 替换且克隆 里面的p标签
$("#btn2").click(function(){
// $(被替换的节点).replaceWith(新节点);
// 问题: 替换产生了移动效果, 类似域 ctrl + x 剪切
// 理想效果: 先复制,再粘贴
// 克隆: $(被复制的标签).clone() 类似 : ctrl + c
$("#mydiv_p").replaceWith($("#myp").clone()); });});
</script>
</head>
<body>
<div id="mydiv">
<p id="mydiv_p">AAAA</p>
</div>
<p id="myp">BBBB<a href="#" rel="external nofollow" >CCCC</a></p>
<input type="button" id="btn1" value="替换"/>
<input type="button" id="btn2" value="替换并克隆"/>
</body>
</html>
jQuery事件
blur([[data],fn])
change([[data],fn])
click([[data],fn])
dblclick([[data],fn])
error([[data],fn])
focus([[data],fn])
focusin([data],fn)
focusout([data],fn)
keydown([[data],fn])
keypress([[data],fn])
keyup([[data],fn])
mousedown([[data],fn])
mouseenter([[data],fn])
mouseleave([[data],fn])
mousemove([[data],fn])
mouseout([[data],fn])
mouseover([[data],fn])
mouseup([[data],fn])
resize([[data],fn])
scroll([[data],fn])
select([[data],fn])
submit([[data],fn])
unload([[data],fn])
事件相关用法及jQuery其他用法可以参考相关api。
