1.下载并导入JQuery
点击此处下载
导入:
<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>2.JQuery核心函数的使用
<head>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript">
jQuery(function() { // 用法一:页面加载时执行
// 结论1:js对象 不能调用jquery的属性和方法
// 结论2:jquery对象不能调用js的属性和方法
// 用法二:可以使用表达式获取页面的标签对象
jQuery("#myDiv").click(function() {
alert('你点击了myDiv');
})
// 方法三:js与jquery的相互转换
// js对象转成jquery对象:jQuery(js对象)
// jquery对象转成js对象:jQuery对象[0]或jQuery对象.get(0)
jQuery(document.getElementById("myDiv")).click(function() {
alert("js对象转成jquery对象");
});
jQuery("#myDiv")[0].onclick = function() {
alert("query对象转成js对象");
}
jQuery("#myDiv").get(0).onclick = function() {
alert("query对象转成js对象");
}
// 方法四:将合法字符串转成jQuery对象
var $h1 = jQuery("<h1>hello jQuery</h1>");
jQuery("body").append($h1)
});
</script>
</head>
<body>
<div id="myDiv" style="background: gray; width: 100px; height: 100px;">这是div1......</div>
</body>
</html>
3.JQuery选择器的使用
3.1 常用的4个函数 each,size,index的使用
// 1．通过each() 在每个div元素前 加入 “Div标签”
$("div").each(function() {
//alert($(this).html()); // 遍历所有的内容
// alert(this.innerHTML); // 遍历所有的内容
// alert($("div").html()); // 只显示第一个
// 设置和获取标签内的数据
// $(this).html("Div标签" + $(this).html());
this.innerHTML = "Div标签" + this.innerHTML;
});
/*
length是属性，size()是方法。
如果你只是想获取元素的个数，两者效果一样， $("img").length 和 $("img").size() 获取的值是一样的；
但是如果是获取字符串的长度就只得用length, 如 $("#text").val().length。*/
// 2．通过size() / length 打印页面中 class属性为 itcast 的元素数量
console.info("size():" + $(".itcast").size())
console.info("length:" + $(".itcast").length)
// 3．通过index() 打印 id属性为foo 的div标签 是页面内的第几个div标签
// 对象.index(对象)
var _index = $('div').index($("#foo"));
console.info(_index)
--------------------------------------------------------------------------------------
<body>
<div>DIVAAAA</div>
<div class="itcast">DIVBBBB</div>
<div>DIVCCCC</div>
<div>DIVDDDD</div>
<div class="itcast">DIVEEEE</div>
<div id="foo">DIVFFFF</div>
<p>PAAAA</p>
<p class="itcast">PBBBB</p>
<p>PCCCC</p>
</body>3.2 层级选择器
/**
空格: 选取 当前元素的所有后代元素
>: 选取 当前元素的所有子元素
+: 选取 当前元素的下一个兄弟元素
~: 选取 当前元素的所有兄弟元素
*/
$(function() {
// 1．将class属性值为itcast的元素下所有a元素字体变为红色
$(".itcast a").css("color", "red");
// 2．将class属性值为itcast的元素下直接a元素字体变为蓝色
$(".itcast>a").css("color", "blue");
// 3．将div元素后所有兄弟a元素，字体变为黄色，大小变为30px
$(".itcast~a").css("color", "yellow")
});
--------------------------------------------------------------------------------------
<body>
<div class="itcast">
<a>div link</a>
<p>
info
<a>p link</a>
</p>
</div>
<a>link</a>
<p class="itcast">
<a>p link</a>
</p>
<a>link</a>
</body>3.3 基本过滤选择器
/*2.3.基本过滤选择器
:first 选取第一个元素 $("tr:first")
:last 选取最后一个元素 $("tr:last")
:not(selector) 去除所有与给定选择器匹配的元素 $("input:not(:checked)")
:even 选取所有元素中偶数索引的元素，从 0 开始计数 $("tr:even")
:odd 选取所有元素中奇数索引的元素 ，从 0 开始计数 $("tr:odd")
:eq(index) 选取指定索引的元素 $("tr:eq(1)")
:gt(index) 选取索引大于指定index的元素 $("tr:gt(0)")
:lt(index) 选取索引小于指定index的元素 $("tr:lt(2)")
:header 选取所有的标题元素 如：h1, h2, h3 $(":header")
:animated 匹配所有正在执行动画效果的元素
*/
// 1．设置表格第一行，显示为红色
$("table tr:first").css("background", "red")
// 2．设置表格除第一行以外 显示为蓝色
// $("table tr:not(:first)").css("background", "blue")
$("table tr:gt(0)").css("background", "blue")
// 3．设置表格奇数行背景色 黄色
$("table tr:gt(0):even").css("background", "yellow")
// 4．设置表格偶数行背景色 绿色
$("table tr:gt(0):odd").css("background", "green")
// 5．设置页面中所有标题 显示为灰色
$(":header").css("color", "gray")
// 6．设置页面中正在执行动画效果div背景黄色，不执行动画div背景绿色
$("div").click(function() {
$(this).slideUp(); // 向上滑动
// 执行动画效果的
$("div:animated").css("background", "yellow")
// 不执行的
$("div:not(:animated)").css("background", "green")
});
--------------------------------------------------------------------------------------
<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>
3.4 内容过滤器选择器
/*2.4.内容过滤器选择器
:contains(text) 选取包含text文本内容的元素 $("div:contains('John')")
:empty 选取不包含子元素或者文本节点的空元素 $("td:empty") <td></td>
:has(selector) 选取含有选择器所匹配的元素的元素
$("div:has(p)").addClass("test");
:parent 选取含有子元素或文本节点的元素 $("td:parent")
*/
// 1．设置含有文本内容 ”传智播客” 的 div 的字体颜色为红色
$("div:contains('传智播客')").css("color", "red");
// 2．设置没有子元素的div元素 文本内容 '这是一个空DIV'
$("div:empty").text("这是一个空的DIV");
// 3．设置包含p元素 的 div 背景色为黄色
$("div:has(p)").css("background", "yellow");
// 4．设置所有span的子元素的字体为蓝色
$("span:parent").css("color", "blue");
--------------------------------------------------------------------------------------
<body>
<div>今天是个晴天</div>
<div>明天要去传智播客学 java</div>
<div>
<span>JavaScript</span> 是网页开发中脚本技术
</div>
<div>Ajax 是异步的 JavaScript和 XML</div>
<div>
<p>jQuery</p>
是 JavaScript一个 轻量级框架
</div>
<div></div>
<div>明天要去传智播客学 java</div>
<span>
span文本节点
<span>span子元素</span>
<div>div元素</div>
</span>
</body>3.5 可见性过滤选择器
/*
:hidden 选取所有不可见的元素
:visible 选取所有可见的元素
addClass(class|fn):为每个匹配的元素添加指定的类名。
*/
// 1．为表单中所有隐藏域 添加 class属性，值为itcast(浏览器f12可查看验证)
$("form :hidden").addClass("itcast");
// $("form :hidden").attr("class", "itcast");
// 2．设置table所有 可见 tr 背景色 黄色
$("table tr:visible").css("background", "yellow");
// 3．设置table所有 隐藏tr 字体颜色为红色，显示出来 ，并输出tr中文本值
var $hidden_tr = $("table tr:hidden");
$hidden_tr.css("color", "red").show();
alert($hidden_tr.html())
--------------------------------------------------------------------------------------
<body>4444
2222
洗衣机
热水器
<h1>隐藏页面的标签</h1>
<!--
visibility:hidden 可以实现隐藏效果, 但是占用体积
display:none 可以实现隐藏效果, 不占体积
-->
<!--<span style="visibility: hidden">3333</span>4444<br/>
<span style="display: none">1111</span>2222<br/> -->
<form>
<input type="hidden" value="aaa" />
<input type="text" value="bbb" style="display: none;" />
<input type="text" name="ccc" value="name" />
</form>
<table>
<tr>
<td>洗衣机</td>
</tr>
<tr>
<td>热水器</td>
</tr>
<tr style="display: none">
<td>电冰箱</td>
</tr>
</table>
</body>3.6 属性过滤器选择器
/*2.6. 属性过滤器选择器
[attribute] 选取拥有此属性的元素 $("div[id]")
[attribute=value] 选取指定属性值为value的所有元素: $("div[id='mydiv']")
[attribute != value] 选取属性值不为value的所有元素
[attribute ^= value] 选取属性值以value开始的所有元素
[attribute $= value] 选取属性值以value结束的所有元素
[attribute *= value] 选取属性值包含value的所有元素
[selector1] [selector2]…[selectorN] 复合性选择器，首先经[selector1]选择返回集合A，集合A再经过[selector2]选择返回集合B，集合B再经过[selectorN]选择返回结果集合*/
// 1.设置所有含有id属性的div，字体颜色红色
$("div[id]").css("color", "red");
// 2.设置所有class属性值 含有itcast元素背景色为黄色
$("[class *= 'itcast']").css("background", "yellow")
// 3.对所有既有id又有class属性div元素，添加一个点击事件，打印div标签中内容
$("div[id][class]").click(function() {
console.info($(this).html());
});
// 4 获取属性name="hobby"的input标签, 打印value属性值
$("input[name='hobby']").each(function() { // 遍历
console.info($(this).val());
});
// 5.设置所有id属性的值以my开头的文本，字体颜色蓝色
$("[id ^= 'my']").css("color", "blue")
--------------------------------------------------------------------------------------
<body>
<div>AAAA</div>
<div id="mydiv" class="itcast1">BBBB</div>
<div class="itcast2">CCCC</div>
<div id="mydiv2">DDDD</div>
<div class="divclass">EEEE</div>
<div id="xxx" class="itcast3">FFFF</div>
<p class="p-itcast">PPPPPP</p>
<input type="checkbox" name="hobby" value="高尔夫"/> 高尔夫
<input type="checkbox" name="hobby" value="蹦极"/> 蹦极
<input type="checkbox" name="hobby" value="足球"/> 足球
</body>3.7 子元素过滤器选择器
$(function() {
/*2.7.子元素过滤器选择器
:nth-child(index/even/odd) 选取索引为index的元素、索引为偶数的元素、索引为奇数的元素 ----- index 从1开始 区别 eq
':eq(index)' 只匹配一个元素，而这个将为每一个父元素匹配子元素
:first-child 此选择符将为每个父元素匹配第一个子元素
:last-child 此选择符将为每个父元素匹配最后一个子元素
:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配
*/
// 1.在每个表格 下3的倍数行，字体颜色为红色
$("table tr:nth-child(3n)").css("background", "red");
// 2.每个表格 奇数行 背景色 黄色
$("table tr:nth-child(odd)").css("background", "yellow");
// 3.每个表格 偶数行 背景色 灰色
$("table tr:nth-child(even)").css("background", "gray");
// 4.每个tr 只有一个td的 背景为 蓝色
$("table tr td:only-child").css("background", "blue");
});
--------------------------------------------------------------------------------------
<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>3.8 表单过滤器选择器
/*2.8.表单过滤器选择器
选取表单元素的过滤选择器
:input 选取所有<input>、<textarea>、<select >和<button>元素
:text 选取所有的文本框元素 <input type="text">
:password 选取所有的密码框元素 <input type="password">
:radio 选取所有的单选框元素 <input type="radio">
:checkbox 选取所有的多选框元素 <input type="checkbox">
:submit 选取所有的提交按钮元素 <input type="submit">
:image 选取所有的图像按钮元素
:reset 选取所有重置按钮元素
:button 选取所有按钮元素 <input type="button"> <button>
:file 选取所有文件上传域元素 <input type="file">
:hidden 选取所有不可见元素 <input type="hidden">
:checkbox 等价于 input[type='checkbox']
*/
//1．对所有text框和password框，添加离焦事件，校验输入内容不能为空
/*$("input[type='text'], input[type='password']").blur(function() {
if($(this).val() == ""){
alert("内容不能为空!");
}
});*/
$(":text, :password").blur(function() {
if($(this).val() == ""){
alert("内容不能为空!");
}
});
//2．对button 添加 点击事件，提交form表单
$(":button").click(function() {
$("form").submit();
});
--------------------------------------------------------------------------------------
<body>
<form action="http://ntlias-stu.boxuegu.com/#/login">
用户名 <input type="text" name="username" /> <br/>
密码 <input type="password" name="password" /> <br/>
<input type="button" value="提交" />
</form>
</body>3.9 表单对象属性过滤器选择器
/*2.9.表单对象属性过滤器选择器
:enabled 选取所有可用元素
:disabled 选取所有不可用元素
:checked 选取所有被选中的元素，如单选框、复选框 (经常使用)
:selected 选取所有被选中项元素，如下拉列表框、列表框 (经常使用)
*/
//需求1: 观察只读(readonly)和不可用(disable)标签的联系和区别
// 联系: 只能看,不能修改
// 区别:
// 只读虽然不能修改,但是可以随表单一起提交
// 不可用不仅不能修改, 还不能表单一起提交
//需求2: 点击button 打印radio checkbox select 中选中项的值
$(":button").click(function() {
/*$(":checked").each(function() { // 输出单选框,复选框,下拉框
console.info($(this).val());
});
$(":selected").each(function() {
console.info($(this).val());
});*/
// 单选
console.info($("input[name='gender']:checked").val());
// 复选
$("input[name='hobby']:checked").each(function(){
console.info($(this).val());
});
// 下拉
console.info("city1" + $("select[name='city']").val());
console.info("city2" + $("select[name='city'] option:selected").val());
});
--------------------------------------------------------------------------------------
<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" /> 音乐
<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>4JQuery中的DOM对象
4.1 标签的属性操作
/*3.1.标签的属性操作
attr(name|pro|key,val|fn) :获取/设置属性
removeAttr(name) :移除属性
prop(n|p|k,v|f)1.6+ :获取/设置属性
removeProp(name)1.6+ :移除属性
attr 和 prop 都可以设置 标签的属性, 两者之间的区别:
1 attr既可以设置标签存在的属性, 也可以设置标签不存在的属性, 而prop只能设置标签已存在的属性
2 prop比较适合 设置 单选、多选、下拉的选中状态
*/
//1设置标签存在的属性
$("#btn1").click(function() {
$("a").attr("href", "http://ntlias-stu.boxuegu.com/#/login");
});
//2设置标签不存在的属性
$("#btn2").click(function() {
$("a").attr("itcast", "黑马程序员");
});
//3通过attr获取选中状态
$("#btn3").click(function() {
console.info($("input[name='sex'], input[value='男']").attr("checked"));
$("input[name='sex']").each(function(){
console.info($(this).val() + $(this).attr("checked"));
});
});
//4通过prop获取选中状态
$("#btn4").click(function() {
// console.info($("input[name='sex'], input[value='男']").prop("checked"));
$("input[name='sex']").each(function(){
console.info($(this).val() + $(this).prop("checked"));
});
--------------------------------------------------------------------------------------
<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>4.2 标签的样式操作
/*3.2.标签的样式操作
通过attr属性设置/获取 style属性
attr("style","color:red");
设置CSS样式属性
css(name) 获取一个CSS样式属性
css(name, value) 设置一个CSS样式属性
css(properties) 传递key-value对象，设置多个CSS样式属性
设置class属性
addClass(class) 添加一个class属性 attr(‘class’,’classValue’)
removeClass([class]) 移除一个class属性
toggleClass(class) 如果存在（不存在）就删除（添加）一个类
*/
// 需求: 背景变黄
$("#btn1").click(function() {
// 方式一:
//$("div").attr("style", "background: yellow;");
// 方式二:
//$("div").css("background", "yellow");
// 方式三:
$("div").addClass("changeBackYellow");
});
// 需求: 字体变蓝
// 方式三:
$("#btn2").click(function() {
$("div").addClass("changeFontBlue");
});
// 需求: 背景变绿并且字体变红
// 方式二 扩展
var _css = {background: 'green', color: 'red'};
$("#btn3").click(function() {
$("div").css(_css);
});
<style type="text/css">
.changeBackYellow {
background : yellow;
}
.changeFontBlue {
color : blue;
}
</style>
--------------------------------------------------------------------------------------
</head>
<body>
<div>心情不错！</div>
<input type="button" value="背景变黄" id="btn1"/>
<input type="button" value="字体变蓝" id="btn2"/>
<input type="button" value="背景变绿并且字体变红" id="btn3"/>
</body>
</html>4.3 获取标签中的内容
<script type="text/javascript">
$(function(){
/*
读取和设置某个元素中HTML内容
html() 获取一个元素中html内容
html(val) 设置一个元素中html内容
这个函数不能用于XML文档。但可以用于XHTML文档
读取和设置某个元素中的文本内容
text() 获取一个元素中 文本内容
text(val) 设置一个元素中 文本内容
该方法既可以用于 XHTML 也可以用于 XML 文档
文本框、下拉列表框、单选框 选中的元素值
val() 获取文本框、下拉列表框、单选框 value值
val(val) 设置文本框、下拉列表框、单选框 value值
*/
// text()只输出标签内的文本内容，和js的innerText方法一样
// html()当前标签内的文本内容及 子标签本身和子标签内的文本
// val() 只针对标签的value属性的
// 1．<div><p>传智播客</p></div> 获取div中 html和text 对比
//console.info($("div").html());
//console.info($("div").text());
//$("div").html("<a href='http://ntlias-stu.boxuegu.com/#/login'>博学谷<a>");
//$("div").text("<a href='http://ntlias-stu.boxuegu.com/#/login'>博学谷<a>")
// 2．单击pickBtn 使用val() 获得文本框、下拉框、单选框选中的value
$("#pickBtn").click(function() {
// 文本框
console.info($("input[name='username']").val());
// 下拉框
console.info($("select").val());
// 单选框
console.info($("input[type=radio]:checked").val());
});
// 3．单击setBtn 测试能否通过 val() 设置单选框、下拉框的选中效果 ？
$("#setBtn").click(function() {
// 下拉框
$("select").val("上海");
// 单选框
$("input[name='gender']").val(["女"]);
});
});
</script>
</head>
<body>
<div><p>传智播客</p></div>
<form>
用户名 <input type="text" name="username" /> <br/>
城市 <select>
<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>4.4 添加节点
<script type="text/javascript">
$(function(){
/*3.4.添加节点
js操作
document.createElement(元素名称); // 创建节点 <a></a>
element.setAttribute(name, value) ; // 设置元素属性值 <a href=”#”></a>
element.innerHTML= 文本内容; // 浏览器不兼容 <a href=”#”>xxxx</a>
父节点.appendChild(elements); // 添加节点元素
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) 将新元素插入到每个匹配元素之前
*/
// 1.js操作
/*// 需求: 添加百度超链接显示在浏览器中
// 获取父节点
var e_body = document.getElementsByTagName("body")[0];
// 创建标签
var e_a = document.createElement("a");
// 向标签添加属性
//e_a.setAttribute("href", "http://ntlias-stu.boxuegu.com/#/login");
// 向标签添加内容
//e_a.innerText = "博学谷";
// 向标签添加属性/内容
e_a.innerHTML = "<a href='http://ntlias-stu.boxuegu.com/#/login'>博学谷</a>";
// 向父节点添加节点
e_body.appendChild(e_a);*/
//2.jQuery操作
var $a = $("<a href='http://ntlias-stu.boxuegu.com/#/login'>博学谷</a>");
$("body").append($a)
});
</script>4.5 插入节点
<script type="text/javascript">
$(function(){
/*
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) 将新元素插入到每个匹配元素之前
*/
// 插入大专学历 （本科和高中之间）--- 外部插入
// var $dazhuan = $("<option value='大专'>大专</option>");
// $("option[value='本科']").after($dazhuan);
$("option[value='本科']").after($("<option value='大专'>大专</option>"));
// 插入幼儿园 （学历列表最后） --- 内部插入
$("#edu").append($("<option value='幼儿园'>幼儿园</option>"))
});
</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>
4.6 删除节点###
<script type="text/javascript">
$(function(){
$("#inner").click(function(){
alert("敢点我...");
});
/*
js删除节点
必须通过父节点删除当前节点
当前节点对象.parentNode.removeChild(当前节点对象);
empty():清空文本数据
格式: $(表达式).remove() 删除指定节点
虽然可以返回被删除的节点对象的引用, 但是 事件丢失了.
格式2: $(表达式).detach() 删除指定节点
不仅可以保留被删除节点对象引用, 还可以 对象的事件.
*/
// 1 使用remove删除标签, 再将删除标签 重新加入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;">你们的真的太棒了!!!</div>
</div>
</body>4.7 替换###
<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.3.min.js"></script>
<script type="text/javascript">
$(function(){
/*
js操作
替换节点： 父节点.replaceChild(新节点, 原节点) ; 缺点: 会产生移动效果
复制节点： 节点.cloneNode(true/false) 要不要复制节点子节点 （默认false）
JQuery 替换节点
新节点.replaceAll(原节点) ;
原节点.replaceWith(新节点) ;
JQuery克隆节点
clone(参数一, 参数二) 参数一控制当前元素事件，参数二控制子元素的事件
*/
// 需求1:当点击btn1时,将外面的p标签 替换 里面的p标签
$("#btn1").click(function() {
// 旧换新 -- 剪切
$("#mydiv_p").replaceWith($("#myp"));
});
// 需求2:当点击btn2时,将外面的p标签 替换且克隆 里面的p标签
$("#btn2").click(function() {
// 克隆并旧换新 --- 先克隆,再剪切
$("#mydiv_p").replaceWith($("#myp").clone());
});
});
</script>
</head>
<body>
<div id="mydiv">
<p id="mydiv_p">AAAA</p>
</div>
<p id="myp">BBBB<a href="#">CCCC</a></p>
<input type="button" id="btn1" value="替换"/>
<input type="button" id="btn2" value="替换并克隆"/>
</body>
5 JQuery案例
5.1 全选/全不选
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function () {
// 全选
$("#checkall").click(function () {
// $("[name='items']").prop("checked", "checked");
$("[name='items']").prop("checked", true);
});
// 全部选
$("#checkallNo").click(function () {
// $("[name='items']").removeProp("checked");
$("[name='items']").prop("checked", false);
});
// 反选
$("#check_revsern").click(function () {
$("[name='items']").each(function () {
// $(this).prop("checked", !$(this).prop("checked"));
this.checked = !this.checked;
});
});
// 全选/全部选
$("#checkAllOrNot").click(function () {
$("[name='items']").prop("checked", this.checked);
});
});
</script>
</head>
<body>
您的爱好很广泛!!!
<br>
<input type="checkbox" id="checkAllOrNot"/>全选/全不选<br/>
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="游泳"/>游泳
<input type="checkbox" name="items" value="唱歌"/>唱歌
<br>
<input type="button" name="checkall" id="checkall" value="全选"/>
<input type="button" name="checkall" id="checkallNo" value="全不选"/>
<input type="button" name="checkall" id="check_revsern" value="反选"/>
</body>5.2 表格隔行变色和选中后高亮
效果图:
<style type="text/css">
table {
border: 1px red solid;
width: 500px;
margin: auto;
}
td {
border: 1px blue solid;
margin: 10px;
padding: 10px;
text-align: center;
}
th {
background-color: maroon;
}
.one {
background-color: blue;
}
.two {
background-color: green;
}
.over {
background-color: aqua;
}
</style>
<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 1. 奇数行 one
$("table tr:odd").addClass("one");
// 2. 偶数行 two
$("table tr:even").addClass("two");
/*
// 3. 给每个tr绑定鼠标悬浮事件, 增加over样式
$("table tr").mouseover(function(){
$(this).addClass("over");
});
// 4. 给每个tr绑定鼠标移出事件, 删除over样式
$("table tr").mouseout(function(){
$(this).removeClass("over");
});
*/
// 5 切换 悬浮和移出效果绑定到一起 (over, out)
$("table tr").hover(function () {
$(this).addClass("over");
}, function () {
$(this).removeClass("over");
})
});
</script>
</head>
<body>
<table>
<tr>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr class="one">
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr class="two">
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>5</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>6</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>7</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>8</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>9</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
<tr>
<td>10</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="">修改</a>|<a href="">删除</a></td>
</tr>
</table>
</body>
5.3 元素移动
效果图:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
<!-- BODY {
font-family: "宋体";
font-size: 12px;
margin: 0px 0px 0px 0px;
overflow-x: no;
overflow-y: no;
background-color: #B8D3F4;
}
td {
font_size: 12px;
}
.default_input {
border: 1px solid #666666;
height: 18px;
font-size: 12px;
}
.default_input2 {
border: 1px solid #666666;
height: 18px;
font-size: 12px;
}
.nowrite_input {
border: 1px solid #849EB5;
height: 18px;
font-size: 12px;
background-color: #EBEAE7;
color: #9E9A9E;
}
.default_list {
font-size: 12px;
border: 1px solid #849EB5;
}
.default_textarea {
font-size: 12px;
border: 1px solid #849EB5;
}
.nowrite_textarea {
border: 1px solid #849EB5;
font-size: 12px;
background-color: #EBEAE7;
color: #9E9A9E;
}
.wordtd5 {
font-size: 12px;
text-align: center;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd {
font-size: 12px;
text-align: left;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #b8c4f4;
}
.wordtd_1 {
font-size: 12px;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #516CD6;
color: #fff;
}
.wordtd_2 {
font-size: 12px;
text-align: right;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #64BDF9;
}
.wordtd_3 {
font-size: 12px;
text-align: right;
vertical-align: top;
padding-top: 6px;
padding-right: 5px;
padding-bottom: 3px;
padding-left: 5px;
background-color: #F1DD34;
}
.inputtd {
font-size: 12px;
vertical-align: top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.inputtd2 {
text-align: center;
font-size: 12px;
vertical-align: top;
padding-top: 3px;
padding-right: 3px;
padding-bottom: 3px;
padding-left: 3px;
}
.tablebg {
font-size: 12px;
}
.tb {
border-collapse: collapse;
border: 1px outset #999999;
background-color: #FFFFFF;
}
.td2 {
line-height: 22px;
text-align: center;
background-color: #F6F6F6;
}
.td3 {
background-color: #B8D3F4;
text-align: center;
line-height: 20px;
}
.td4 {
background-color: #F6F6F6;
line-height: 20px;
}
.td5 {
border: #000000 solid;
border-right-width: 0px;
border-left-width: 0px;
border-top-width: 0px;
border-bottom-width: 1px;
}
.tb td {
font-size: 12px;
border: 2px groove #ffffff;
}
.noborder {
border: none;
}
.button {
border: 1px ridge #ffffff;
line-height: 18px;
height: 20px;
width: 45px;
padding-top: 0px;
background: #CBDAF7;
color: #000000;
font-size: 9pt;
font-family: "宋体";
}
.textarea {
font-family: Arial, Helvetica, sans-serif, "??";
font-size: 9pt;
color: #000000;
border-bottom-width: 1px;
border-top-style: none;
border-right-style: none;
border-bottom-style: solid;
border-left-style: none;
border-bottom-color: #000000;
background-color: transparent;
text-align: left
}
-->
</style>
<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// 选中右移
$("#add").click(function() {
$("#second").append($("#first option:selected"));
});
// 全部右移
$("#add_all").click(function() {
$("#second").append($("#first option"));
});
// 选中左移
$("#remove").click(function() {
$("#first").append($("#second option:selected"));
});
// 全部左移
$("#remove_all").click(function() {
$("#first").append($("#second option"));
});
});
</script>
</head>
<body>
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:250px; background-color:#E6E6E6;">
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
<tr>
<td width="126">
<!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
<select id="first" name="first" size="10" multiple="multiple" class="td3" >
<option value="选项1">选项1</option>
<option value="选项2">选项2</option>
<option value="选项3">选项3</option>
<option value="选项4">选项4</option>
<option value="选项5">选项5</option>
<option value="选项6">选项6</option>
<option value="选项7">选项7</option>
<option value="选项8">选项8</option>
</select>
</td>
<td width="69" valign="middle">
<input name="add" id="add" type="button" class="button" value="-->" />
<input name="add_all" id="add_all" type="button" class="button" value="==>" />
<input name="remove" id="remove" type="button" class="button" value="<--" />
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
</td>
<td width="127" align="left">
<select id="second" name="second" size="10" multiple="multiple" class="td3" >
<option value="选项9">选项9</option>
</select>
</td>
</tr>
</table>
</div>
</body>
</html>6 JQuery操作Json字符串
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
<script type="text/javascript">
/*
JSON对象格式
{"key":"value","key":"value",....}
键和值使用冒号分隔。
标准规范要求key必须使用双引号，value如果没有使用双引号表示变量。
JSON数组
[ obj , obj , obj , ....]
表示一组值，多个值使用逗号分隔
*/
// 需求1: 遍历数组
var arr = [111, 333, 555];
/*// 方式一
for(var i=0; i<arr.length; i++) {
document.write(arr[i] + " ");
}
document.write("<hr/>");
// 方式二
for(var i in arr ) {
document.write(arr[i] + " ");
}*/
document.write("<hr/>");
// 方式三
$(arr).each(function(){
document.write(this + " ");
});
document.write("<hr/>");
//需求2: 获取简单json的值
var studentJson = {"username":"张三", "age":"18"};
/*document.write(studentJson.username + " ===== "+ studentJson.age);
document.write("<hr/>");
document.write(studentJson['username'] + " ===== "+ studentJson['age']);
document.write("<hr/>");*/
for(var key in studentJson) {
document.write(key +"------"+ studentJson[key] + "<br/>");
}
document.write("<hr/>");
//需求3: 获取复杂json的值
var studentJsonArr = [
{"username":"张三", "age":"18"},
{"username":"李四", "age":"30"},
{"username":"王五", "age":"40"},
{"username":"赵六", "age":"50"}
];
$(studentJsonArr).each(function(){
//var studentJson = this;
//document.write(studentJson.username + "===" + studentJson.age + "<br/>");
document.write(this.username + "===" + this.age + "<br/>");
})
</script>
</head>
<body>
</body>
</html>6.1省市2级联动
效果图:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>省市二级联动</title>
<script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="cities.js"></script>
<script type="text/javascript">
$(function () {
// 初始化省级信息
var provinceStr = "<option value='none'>--请选择省--</option>";
$(china).each(function () {
provinceStr += "<option value='" + this.p_id + "'>" + this.p_name + "</option>";
});
// 添加标签
$("#province").html(provinceStr)
$("#province").change(function () {
var province_val = this.value;
$(china).each(function () { // 遍历省
if (this.p_id == province_val) { // 显示市
var city_str = "<option value=\"none\">--请选择市--</option>";
// 遍历市的信息
$(this.cities).each(function () { // 拼接二级联动
city_str += "<option value=\"" + this.c_id + "\">" + this.c_name + "</option>";
});
$("#city").html(city_str)
}
});
});
});
</script>
</head>
<body>
<select id="province" name="province">
<option value="none">--请选择省--</option>
</select>
<select id="city" name="city">
<option value="none">--请选择市--</option>
</select>
</body>
</html>// cities.js
var china = [
{
"p_name": "吉林省",
"p_id": "jl",
"cities": [
{
"c_name": "长春",
"c_id": "cc"
},
{
"c_name": "四平",
"c_id": "sp"
},
{
"c_name": "通化",
"c_id": "th"
},
{
"c_name": "松原",
"c_id": "sy"
}
]
},
{
"p_name": "辽宁省",
"p_id": "ln",
"cities": [
{
"c_name": "沈阳",
"c_id": "sy"
},
{
"c_name": "大连",
"c_id": "dl"
},
{
"c_name": "抚顺",
"c_id": "fs"
},
{
"c_name": "铁岭",
"c_id": "tl"
}
]
},
{
"p_name": "山东省",
"p_id": "sd",
"cities": [
{
"c_name": "济南",
"c_id": "jn"
},
{
"c_name": "青岛",
"c_id": "qd"
},
{
"c_name": "威海",
"c_id": "wh"
},
{
"c_name": "烟台",
"c_id": "yt"
}
]
},
{
"p_name": "上海市",
"p_id": "sh",
"cities": [
{
"c_name": "闵行区",
"c_id": "mh"
},
{
"c_name": "徐汇区",
"c_id": "xh"
},
{
"c_name": "黄浦区",
"c_id": "hp"
},
{
"c_name": "浦东新区",
"c_id": "pd"
}
]
}
];