2017年06月07號課堂筆記
阿新 • • 發佈：2017-06-07
too color 故事 border value 標簽 name cor 索引
2017年06月07號 晴 空氣質量：中度汙染—>良
內容：jQuery第二節：基本選擇器，層次選擇器，屬性選擇器，
基本過濾選擇器，可見性過濾選擇器
備註：代課老師：李老師
一、基本選擇器
1）老師代碼：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP ‘index.jsp‘ starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<style type="text/css">
#box {
background-color: #FFF;
border: 2px solid #000;
padding: 5px;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#btn1").click(function() {//觸發不同的效果按鈕點擊事件
//標簽選擇器，獲取<h3>元素並為其添加背景顏色
//$("h3").css("background","red");
//類選擇器，獲取並設置所有class為title的元素的背景顏色
//$(".title").css("background","red");
//ID選擇器，獲取並設置id為box的元素的背景顏色
//$("#box").css("background","red");
//並集選擇器，獲取並設置所有<h2>、<dt>、class為title的元素的背景顏色
//$("h2,dt,.title").css("background","red");
//交集選擇器，獲取並設置所有class為title的<h2>元素的背景顏色
//$("h2.title").css("background","red");
//全局選擇器，改變所有元素的字體顏色
$("*").css("color", "red");
})
});
</script>
</head>
<body>
<input type="button" id="btn1" value="顯示效果" />
<div id="box">
id為box的div
<h2 class="title">class為title的h2</h2>
<h3 class="title">class為title的h3</h3>
<h3>熱門排行</h3>
<dl>
<dt>
<img src="images/case_1.gif" width="93" height="99" alt="鬥地主" />
</dt>
<dd class="title">鬥地主</dd>
<dd>休閑遊戲</dd>
<dd>QQ鬥地主是國內同時在線人數最多的棋牌遊戲......</dd>
</dl>
</div>
</body>
</html>2）自己代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("h2").click(function(){
/* $("ul li").css("font-size","50px");//標簽 空格後是後代
$("#c").css("background","blue");class
$(".Chinese").css("background","red");*///id
/*$("h2,div").css("background","yellow");*/ //並集
$("div.Chinese").css("background","orange");//交集
$("*").css("color","blue");
})
})
</script>
</head>
<body>
<h2>數字</h2>
<ul>
<li class="Chinese">考生加油</li>
<li>two</li>
<li id="c">three</li>
<li>four</li>
</ul>
<h2>打招呼</h2>
<ol>
<li>hello</li>
<li>hi</li>
<li >ola</li>
<li class="Chinese">你好</li>
</ol>
<h2>哪個好看</h2>
<div class="Chinese">海賊王和火影哪個好看？眾說紛紜~</div>
<div class="Chinese">科幻和玄幻哪個好看？眾說紛紜~</div>
</body>
</html>
二、層次選擇器
1）老師代碼：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP ‘index.jsp‘ starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
* {
margin: 0;
padding: 0;
line-height: 30px;
}
body {
margin: 10px;
}
#menu {
border: 2px solid #03C;
padding: 10px;
}
a {
text-decoration: none;
margin-right: 5px;
}
span {
font-weight: bold;
padding: 3px;
}
h2 {
margin: 10px 0;
cursor: pointer;
}
</style>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("h2").click(function() {
//後代選擇器，獲取並設置#menu下的<span>元素的背景顏色
//$("#menu span").css("background","red");
//子選擇器，獲取並設置#menu下的子元素<span>的背景顏色
//$("#menu>span").css("background","red");
//相鄰選擇器，獲取並設置緊接在<h2>元素後的<dl>元素的背景顏色
//$("h2+dl").css("background","red");
//同輩選擇器，獲取並設置<h2>元素之後的所有同輩元素<dl>的背景顏色
$("h2~dl").css("background","red");
});
});
</script>
</head>
<body>
<div id="menu">
<h2 title="點擊看效果">全部旅遊產品分類</h2>
<dl>
<dt>
北京周邊旅遊<span>特價</span>
</dt>
<dd>
<a href="#">按天數</a> <a href="#">海邊旅遊</a> <a href="#">草原</a>
</dd>
</dl>
<dl>
<dt>景點門票</dt>
<dd>
<a href="#">名勝</a> <a href="#">暑期</a> <a href="#">樂園</a>
</dd>
<dd>
<a href="#">山水</a> <a href="#">雙休</a>
</dd>
</dl>
<span>更多分類</span>
</div>
</body>
</html>2）自己代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("h2").click(function(){
/*
$("ul>li").css("background","yellow");//子代
*/
// $("h2+div").css("color","blue");//之後緊鄰的同輩元素
/* $("h2~div").css("color","orange");//之後所有同輩元素*/
// $(".Chinese span").css("color","orange");//所有span後代
$(".Chinese>span").css("color","orange");//span子代
})
})
</script>
</head>
<body>
<h2>數字</h2>
<ul>
<li class="Chinese">考生加油</li>
<li>two</li>
<li id="c">three</li>
<li>four</li>
</ul>
<h2>打招呼</h2>
<ol>
<li>hello</li>
<li>hi</li>
<li >ola</li>
<li class="Chinese">你好</li>
</ol>
<h2>哪個好看</h2>
<div class="Chinese">
<div><span>孫子</span></div>海賊王和火影哪個好看？</div>
<div class="Chinese"><span>兒子</span>科幻和玄幻哪個好看？</div>
<div class="Chinese">商業片和文藝片哪個好看？</div>
<div>眾說紛紜~</div>
</body>
</html>
三、屬性選擇器
1）老師代碼：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP ‘index.jsp‘ starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
#box {
background-color: #FFF;
border: 2px solid #000;
padding: 5px;
}
h2 {
cursor: pointer;
}
</style>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("h2").click(function() {
//改變含有title屬性的<h2>元素的背景顏色
//$("h2[title]").css("background","red");
//改變class屬性的值為odds的元素的背景顏色
//$("[class=‘odds‘]").css("background","red");
//改變id屬性的值不為box的元素的背景顏色
//$("[id!=‘box‘]").css("background","red");
//改變title屬性的值中以h開頭的元素的背景顏色
//$("[title^=‘h‘]").css("background","red");
//改變title屬性的值中以jp結尾的元素的背景顏色
//$("[title$=‘jp‘]").css("background","red");
//改變title屬性的值中含有s的元素的背景顏色
//$("[title*=‘s‘]").css("background","red");
//改變包含class屬性，且title屬性的值中含有y的<li>元素的背景顏色
$("li[class][title*=‘y‘]").css("background","red");
});
});
</script>
</head>
<body>
<div id="box">
<h2 class="odds" title="cartoonlist">動畫列表</h2>
<ul>
<li class="odds" title="kn_jp">名偵探柯南</li>
<li class="evens" title="hy_jp">火影忍者</li>
<li class="odds" title="ss_jp">死神</li>
<li class="evens" title="yj_jp">妖精的尾巴</li>
<li class="odds" title="yh_jp">銀魂</li>
<li class="evens" title="hm_da">黑貓警長</li>
<li class="odds" title="xl_ds">仙履奇緣</li>
</ul>
</div>
</body>
</html>
2）自己代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("h2").click(function(){
//$("[href]").css("color","red");//選取含有href屬性的元素
//$("[href=‘#‘]").css("color","green");//選取href屬性值為“#”的元素
//$("[href!=‘#‘]").css("color","yellow");//選取href屬性值不為“#”的元素
//$("[href^=‘en‘]").css("color","orange");//選取href屬性值以en開頭的元素
//$("[href$=‘.jpg‘]").css("color","pink");//選取href屬性值以.jpg結尾的元素
//$("[href*=‘s‘]").css("color","purple");//選取href屬性值中含有s的元素
//選取含有id屬性和title屬性為sayhello的<li>元素
$("li[id][title=sayhello]").css("background","yellow");
})
})
</script>
</head>
<body>
<h2>屬性選擇器怎麽玩</h2>
<a href="#">我是#字軍</a><br/>
<a href="#">我是#字軍</a><br/>
<a href="#">我是#字軍</a><br/>
<a href="english">hello</a><br/>
<a href="english">brilliant</a><br/>
<a href="images/all.jpg">onepiece</a><br/>
<a href="images/sanji03.jpeg">sanji</a><br/>
<a href="images/sanji05.jpg">juniorsanji</a><br/>
<a href="files/normalWords.txt">normalwords</a><br/>
<ul>
<li class="Chinese">考生加油</li>
<li id="b" title="number">two</li>
<li id="c" title="number">three</li>
<li id="d" title="number">four</li>
</ul>
<h2>打招呼</h2>
<ol>
<li title="sayhello">hello</li>
<li id="english" title="sayhello">hi</li>
<li id="spanish" title="sayhello">ola</li>
<li class="Chinese">你好</li>
</ol>
</body>
</html>
四、基本過濾選擇器
1）老師代碼：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP ‘index.jsp‘ starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("h2").click(function(){
//改變第1個<li>元素的背景顏色
// $("li:first").css("background","pink");
//改變最後一個<li>元素的背景顏色
// $("li:last").css("background","pink");
//改變class不為three的<li>元素的背景顏色
//$("li:not(.three)").css("background","pink");
//改變索引值為偶數的<li>元素的背景顏色
// $("li:even").css("background","pink");
//改變索引值為奇數的<li>元素的背景顏色
//$("li:odd").css("background","pink");
//改變索引值等於1的<li>元素的背景顏色
// $("li:eq(1)").css("background","pink");
//改變索引值大於1的<li>元素的背景顏色
//$("li:gt(1)").css("background","pink");
//改變索引值小於1的<li>元素的背景顏色
// $("li:lt(1)").css("background","pink");
//改變所有標題元素，例如<h1>,<h2>,<h3>……這些元素的背景顏色
// $(":header").css("background","pink");
});
/* $("input").click(function(){
alert($(this).is(":focus")); //判斷元素是否獲取焦點
//改變當前獲取焦點的元素的背景顏色
$(":focus").css("background","pink");
}) */
$("input").focus(function(){
$(this).css("background","pink");
})
});
</script>
</head>
<body>
獲取焦點：<input type="text">
<h2>網絡小說</h2>
<ul>
<li>王妃不好當</li>
<li>致命交易</li>
<li class="three">迦蘭寺</li>
<li>逆天之寵</li>
<li>交錯時光的愛戀</li>
<li>張震鬼故事</li>
<li>第一次親密接觸</li>
</ul>
</body>
</html>
2）自己代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("h2").click(function(){
//$("li:first").css("background","#FFB5C5");//選取所有<li>元素中的第一個<li>元素
//$("li:last").css("background","#CD1076");//選取所有<li>元素中的最後一個<li>元素
//$("li:even").css("background","#FFB5C5");//選取索引是偶數的所有<li>元素
//$("li:odd").css("background","#1874CD");//選取索引是奇數的所有<li>元素
//$("li:eq(2)").css("background","#1874CD");//選取索引等於2的<li>元素
//$("li:gt(2)").css("background","#FF7256");//選取索引大於2的<li>元素（註：大於1，不包括1）
//$("li:lt(2)").css("background","#00FF7F");//選取索引小於2的<li>元素（註：小於1，不包括1）
//$("li:not(.Chinese)").css("background","#DDA0DD");//選取class不是Chinese的元素
$(":header").css("background","#EE1289")//選取網頁中所有標題元素
})
})
</script>
</head>
<body>
<h2>數字</h2>
<ul>
<li class="Chinese">考生加油</li>
<li id="b" title="number">two</li>
<li id="c" title="number">three</li>
<li id="d" title="number">four</li>
</ul>
<h2>打招呼</h2>
<ol>
<li title="sayhello">hello</li>
<li id="english" title="sayhello">hi</li>
<li id="spanish" title="sayhello">ola</li>
<li class="Chinese">你好</li>
</ol>
</body>
</html>
五、可見性過濾選擇器
1）老師代碼：
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP ‘index.jsp‘ starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#show").click(function(){
$("div:hidden").show(); //讓所有隱藏的元素 顯示
});
$("#hide").click(function(){
$("div:visible").hide(); //讓所有可見的元素 隱藏
});
});
</script>
</head>
<body>
<button id="show">show</button>
<button id="hide">hide</button>
<div>顯示1</div>
<div>顯示2</div>
<div style="display:none">顯示3</div>
</body>
</html>
2）自己代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#txt_show{display: none;color:#0000cc;}
#txt_hide{display: none;color:#ff3300;}
#txt_whatever{display: none;color:yellow;}
</style>
<script src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){
$("[name=show]").click(function(){
$("p:hidden").show();//$(":hidden" ) 選取所有隱藏的元素
})
$("[name=hide]").click(function(){
$("p:visible").hide();//$(":visible" )選取所有可見的元素
})
})
</script>
</head>
<body>
<p id="txt_hide">隱藏？</p>
<p id="txt_show">顯示？</p>
<p id="txt_whatever">無所謂？</p>
<input type="button" name="show" value="點擊顯示文字"/>
<input type="button" name="hide" value="點擊隱藏文字"/>
</body>
</html>
六、作業
1、看視頻
2、練習代碼
七、老師辛苦了！
PS:今天是高考第一天，祝福各位考生放平心態，發揮出自己的水準！加油！
2017年06月07號課堂筆記