学习周记 Week10

最新推荐文章于 2021-06-26 23:27:46 发布

Daisy47199390

最新推荐文章于 2021-06-26 23:27:46 发布

阅读量88

点赞数

分类专栏：学习周记

本文链接：https://blog.csdn.net/weixin_47199390/article/details/118078248

版权

学习周记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

学习周记 Week10

1.学习目标
2.学习内容
- 2.1 jQuery 选择器
3.练习

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>

运行结果
在这里插入图片描述

Daisy47199390

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
学习周记 Week10

学习周记 Week101.学习目标2.学习内容2.1 jQuery 选择器2.1.1 元素选择器2.1.2 id 选择器2.1.3 class 选择器3.练习3.1 鼠标经过变换选项卡3.2 输入5个数求和3.3 列表全选3.4 列表左右选取3.5 省市联动1.学习目标初步学习JQuery2.学习内容2.1 jQuery 选择器jQuery 选择器对 HTML 元素组或单个元素进行操作。jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"（或选择）HTML 元素。它基于已经存
复制链接

扫一扫