javaWeb之JQuery的使用
文章目录
- 1.下载并导入JQuery
- 2.JQuery核心函数的使用
- 3.JQuery选择器的使用
- 3.1 常用的4个函数 each,size,index的使用
- 3.2 层级选择器
- 3.3 基本过滤选择器
- 3.4 内容过滤器选择器
- 3.5 可见性过滤选择器
- 3.6 属性过滤器选择器
- 3.7 子元素过滤器选择器
- 3.8 表单过滤器选择器
- 3.9 表单对象属性过滤器选择器
- 4JQuery中的DOM对象
- 4.1 标签的属性操作
- 4.2 标签的样式操作
- 4.3 获取标签中的内容
- 4.4 添加节点
- 4.5 插入节点
- 4.6 删除节点
- 4.7 替换
- 5 JQuery案例
- 5.1 全选/全不选
- 5.2 表格隔行变色和选中后高亮
- 5.3 元素移动
- 6 JQuery操作Json字符串
- 6.1省市2级联动
1.下载并导入JQuery
点击此处下载
导入:
<script type="text/javascript" src="../js/jquery-1.11.3.min.js" ></script>
2.JQuery核心函数的使用
<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("hello jQuery
");
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的使用
<script type="text/javascript">
// 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)
script>
<body>
<div>DIVAAAAdiv>
<div class="itcast">DIVBBBBdiv>
<div>DIVCCCCdiv>
<div>DIVDDDDdiv>
<div class="itcast">DIVEEEEdiv>
<div id="foo">DIVFFFFdiv>
<p>PAAAAp>
<p class="itcast">PBBBBp>
<p>PCCCCp>
body>
3.2 层级选择器
<script type="text/javascript">
/**
空格: 选取 当前元素的所有后代元素
>: 选取 当前元素的所有子元素
+: 选取 当前元素的下一个兄弟元素
~: 选取 当前元素的所有兄弟元素
*/
$(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")
});
script>
<body>
<div class="itcast">
<a>div linka>
<p>
info
<a>p linka>
p>
div>
<a>linka>
<p class="itcast">
<a>p linka>
p>
<a>linka>
body>
3.3 基本过滤选择器
<script type="text/javascript">
/*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")
});
script>
<h1>表格信息h1>
<h2>这是一张商品表h2>
<table border="1" width="600">
<tr>
<th>商品编号th>
<th>商品名称th>
<th>售价th>
<th>数量th>
tr>
<tr>
<td>001td>
<td>冰箱td>
<td>3000td>
<td>100td>
tr>
<tr>
<td>002td>
<td>洗衣机td>
<td>2000td>
<td>50td>
tr>
<tr>
<td>003td>
<td>热水器td>
<td>1500td>
<td>20td>
tr>
<tr>
<td>004td>
<td>手机td>
<td>2188td>
<td>200td>
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 内容过滤器选择器
<script type="text/javascript">
/*2.4.内容过滤器选择器
:contains(text) 选取包含text文本内容的元素 $("div:contains('John')")
:empty 选取不包含子元素或者文本节点的空元素 $("td:empty") 3.5 可见性过滤选择器
<script type="text/javascript">
/*
: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())
script>
<body>4444
2222
洗衣机
热水器
<h1>隐藏页面的标签h1>
<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 属性过滤器选择器
<script type="text/javascript">
/*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")
script>
<body>
<div>AAAAdiv>
<div id="mydiv" class="itcast1">BBBBdiv>
<div class="itcast2">CCCCdiv>
<div id="mydiv2">DDDDdiv>
<div class="divclass">EEEEdiv>
<div id="xxx" class="itcast3">FFFFdiv>
<p class="p-itcast">PPPPPPp>
<input type="checkbox" name="hobby" value="高尔夫"/> 高尔夫
<input type="checkbox" name="hobby" value="蹦极"/> 蹦极
<input type="checkbox" name="hobby" value="足球"/> 足球
body>
3.7 子元素过滤器选择器
<script type="text/javascript">
$(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");
});
script>
<body>
<table border="1" width="400" id="mytable">
<tr>
<td>1td>
<td>冰箱td>
tr>
<tr>
<td>2td>
<td>洗衣机td>
tr>
<tr>
<td>3td>
<td>热水器td>
tr>
<tr>
<td>4td>
<td>电饭锅td>
tr>
<tr>
<td>5td>
<td>电磁炉td>
tr>
<tr>
<td>6td>
<td>豆浆机td>
tr>
<tr>
<td>7td>
<td>微波炉td>
tr>
<tr>
<td>8td>
<td>电视td>
tr>
<tr>
<td>9td>
<td>空调td>
tr>
<tr>
<td>10td>
<td>收音机td>
tr>
<tr>
<td>11td>
<td>排油烟机td>
tr>
<tr>
<td>12td>
<td>加湿器td>
tr>
<tr>
<td>13 电暖气td>
tr>
table>
body>
3.8 表单过滤器选择器
<script type="text/javascript">
/*2.8.表单过滤器选择器
选取表单元素的过滤选择器
:input 选取所有、