2017年06月07号课堂笔记
Posted 不抽烟的香吉士
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了2017年06月07号课堂笔记相关的知识,希望对你有一定的参考价值。
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号课堂笔记的主要内容,如果未能解决你的问题,请参考以下文章