学习周记 Week10
1.学习目标
初步学习JQuery
2.学习内容
2.1 jQuery 选择器
jQuery 选择器对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。 它基于已经存在的 CSS 选择器。
除此之外，它还有一些自定义的选择器。
*jQuery 中所有选择器都以美元符号开头：$()。
2.1.1 元素选择器
jQuery 元素选择器基于元素名选取元素
在页面中选取所有 < p> 元素:
$("p")
例子：点击按钮后，所有 < p> 元素都隐藏：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>点我</button>
</body>
</html>
运行前：
运行后：
2.1.2 id 选择器
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以您要在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下：
$("#test")
例子：点击按钮后，有 id=“test” 属性的元素将被隐藏
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>这是一个标题</h2>
<p>这是一个段落</p>
<p id="test">这是另外一个段落</p>
<button>点我</button>
</body>
</html>
运行前：
运行后：
2.1.3 class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下：
$(".test")
例子：点击按钮后所有带有 class=“test” 属性的元素都隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").hide();
});
});
</script>
</head>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>
运行前：
运行后：
3.练习
3.1 鼠标经过变换选项卡
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
font-size: 12px;
}
.tab {
width: 298px;
height: 98px;
margin: 10px;
border: 1px solid #eee;
overflow: hidden;
}
.tab-title {
height: 27px;
position: relative;
background: #f7f7f7;
}
.tab-title ul {
position: absolute;
width: 301px;
left: -1px;
}
.tab-title li {
float: left;
width: 58px;
height: 26px;
line-height: 26px;
text-align: center;
padding: 0 1px;
border-bottom: 1px solid #eee;
overflow: hidden;
}
.tab li a:link, .tab li a:visited {
text-decoration: none;
color: #000;
}
.tab li a:hover {
color: #f90;
font-weight: 700;
}
.tab-title li.select {
background: #fff;
border-bottom-color: #fff;
border-left: 1px solid #eee;
border-right: 1px solid #eee;
padding: 0;
}
.tab .tab-content .tabct {
margin: 10px 10px 10px 19px;
}
.tab .tab-content .tabct ul li {
float: left;
width: 134px;
height: 25px;
overflow: hidden;
}
</style>
<body>
<div class="tab" id="tab">
<div class="tab-title" id="tab-title">
<ul>
<li class="select"><a href="#">css</a></li>
<li><a href="#">js</a></li>
<li><a href="#">php</a></li>
<li><a href="#">jquery</a></li>
</ul>
</div>
<div class="tab-content" id="tab-content">
<div class="tabct" style="display: block">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</div><div class="tabct" style="display: none">
<ul>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
</ul>
</div><div class="tabct" style="display: none">
<ul>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
<li><a href="#">11</a></li>
<li><a href="#">12</a></li>
</ul>
</div><div class="tabct" style="display: none">
<ul>
<li><a href="#">13</a></li>
<li><a href="#">14</a></li>
<li><a href="#">15</a></li>
<li><a href="#">16</a></li>
</ul>
</div>
</div>
</div>
<script>
function $(id) {
return typeof id == "string" ? document.getElementById(id) : id;
}
window.onload = function() {
var titleName = $("tab-title").getElementsByTagName("li");
var tabContent = $("tab-content").getElementsByTagName("div");
if (titleName.length != tabContent.length) {
return;
}
for (var index = 0; index < titleName.length; index++) {
titleName[index].id = index;
titleName[index].onmouseover = function () {
for (var j = 0; j < titleName.length; j++) {
titleName[j].className = "";
tabContent[j].style.display = "none"
}
this.className = "select";
tabContent[this.id].style.display = "block";
}
}
}
</script>
</body>
</html>
3.2 输入5个数求和
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script type="text/javascript">
var i=1,j=0,sum=0;
while(i<=5){
j=parseFloat(prompt("请输入第 "+i+" 个数"));
i++;
sum += j;
}
alert("和："+sum);
</script>
</head>
<body>
<h2 class="test">这是一个标题</h2>
<p class="test">这是一个段落。</p>
<p>这是另外一个段落。</p>
<button>点我</button>
</body>
</html>
3.3 列表全选
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
border: 1px solid #000;
width: 400px;
}
</style>
<script type="text/javascript">
function change(){
var all = document.getElementById("checkbox_all");
var cb = document.getElementsByName("personid");
//判断全选按钮是否被选中
if(all.checked){
for(var i = 0; i < cb.length; i++){
cb[i].checked = true;
}
}else{
for(var i = 0; i < cb.length; i++){
cb[i].checked = false;
}
}
}
//反选
function reverse(){
//获取所有的checkbox
var cb = document.getElementsByName("personid");
for(var i = 0; i < cb.length; i++){
if(cb[i].checked){
cb[i].checked = false;
}else{
cb[i].checked = true;
}
}
}
</script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>全选<input type="checkbox" id="checkbox_all" onclick="change()"/></th>
<th>课程</th>
<th>课时</th>
<th>授课人</th>
</tr>
<tr>
<td><input type="checkbox" name="personid" /></td>
<td>数据库</td>
<td>51</td>
<td>张三</td>
</tr>
<tr>
<td><input type="checkbox" name="personid"/></td>
<td>概率论</td>
<td>51</td>
<td>李四</td>
</tr>
<tr>
<td><input type="checkbox" name="personid"/></td>
<td>面向对象</td>
<td>51</td>
<td>王五</td>
</tr>
<tr>
<td><input type="checkbox" name="personid"/></td>
<td>统计学</td>
<td>51</td>
<td>赵六</td>
</tr>
</table>
<input type="button" value="反选" onclick="reverse()"/>
</body>
</html>
3.4 列表左右选取
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.center{
float:left;
margin-left: 100px ;
}
</style>
</head>
<body>
<div class="center">
<select id="select1" multiple style="width:100px;height: 200px;" ondblclick="sel()">
<option value="数据库">数据库</option>
<option value="面向对象">面向对象</option>
<option value="统计学">统计学</option>
<option value="会计学">会计学</option>
<option value="英语">英语</option>
</select>
<input type="button" onclick="sel()" value="添加到已完成" />
</div>
<div class="center">
<select id="select2" multiple style="width:100px;height: 200px;" ondblclick="cancel_sel()">
</select>
<input type="button" onclick="cancel_sel()" value="恢复到未完成" />
</div>
</body>
<script type="text/javascript">
function sel(){
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
var select1_options = select1.getElementsByTagName("option");
for(var i = 0; i < select1_options.length; i++){
var opt = select1_options[i];
if(opt.selected){
select2.appendChild(opt);
}
}
}
//取消选中
function cancel_sel(){
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
var select2_options = select2.getElementsByTagName("option");
for(var i = 0; i < select2_options.length; i++){
var opt = select2_options[i];
if(opt.selected){
select1.appendChild(opt);
}
}
}
</script>
</html>
运行结果 :
3.5 省市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
select{
width:100px;
}
</style>
</head>
<body>
省：
<select id="sheng" onchange="selectShi()">
<option value="">请选择省份</option>
<option value="0">河北省</option>
<option value="1">山东省</option>
<option value="2">河南省</option>
<option value="3">山西省</option>
</select>
市：
<select id="shi">
<option value="">请选择市</option>
</select>
</body>
<script type="text/javascript">
var arrs = [];
arrs[0] = ["秦皇岛","保定","石家庄","唐山"];
arrs[1] = ["济南","临沂","青岛","威海"];
arrs[2] = ["洛阳","郑州","开封","周口"];
arrs[3] = ["太原","大同","运城","忻州"];
function selectShi(){
var sheng = document.getElementById('sheng').value;
var shi = document.getElementById("shi");
var shis = arrs[sheng];
//清空原来的信息
//获取市的option属性
var shi_opts = shi.getElementsByTagName("option");
//遍历删除市中的option
for(var i= shi_opts.length - 1; i >= 1; i--){
var shi_opt = shi_opts[i];
shi.removeChild(shi_opt);
}
for(var i = 0; i < shis.length; i++){
var textNode = document.createTextNode(shis[i]);
var opt = document.createElement("option");
opt.appendChild(textNode);
shi.appendChild(opt);
}
}
</script>
</html>
运行结果
96
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
