2017年06月07号课堂笔记
2024-05-24 06:38:36
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="data: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:今天是高考第一天，祝福各位考生放平心态，发挥出自己的水准！加油！
转载于:https://www.cnblogs.com/wsnedved2017/p/6956847.html
2017年06月07号课堂笔记相关推荐
- 2017年5月5号课堂笔记
2017年5月5号 星期五 沙尘暴转晴 内容:U2 HTML5第一节课 一.01第一个霸气的网页 1.老师代码: <!DOCTYPE html><html><head l ...
- 2017年4月21号课堂笔记
2017年4月21号 星期五 空气质量:良 内容:XML,Dom4j解析XML文件,单例 一.XML 老师代码: <?xml version="1.0" encoding=& ...
- 2017年4月5号课堂笔记
2017年4月5号 晴 轻度雾霾 内容:Set,Map,遍历集合的方法,泛型,小Demo,Collections工具类的使用 一.Set 老师代码: package cn.bdqn.test; imp ...
- 2017年6月16号课堂笔记
2017年6月16号 星期五 空气质量:中度污染~轻度污染 内容:jQuery:remove,bind,attr,on和live,同辈和父辈节点的操作, keyup/keypress/keydown, ...
- 2017年6月21号课堂笔记
2017年6月21号 星期三 多云转雷阵雨 空气质量:中度污染~轻度污染 内容: JavaScript 原型式面向对象 01基于Object的对象的方式创建对象:02使用字面量赋值方式创建对象 03构 ...
- 2017年4月24号课堂笔记
2017年4月24号 晴 空气质量:中度污染 内容:反射及相关,java设计六大原则(自学) 一.反射机制 在 程序运行期间,对于任何一个类,都能获得它的所有方法和属性! 对于任何一个对象,都能调 ...
- 2017年3月13号课堂笔记
2017年3月13号 晴 空气质量:优 内容:双重循环,Java基础总结 一.Double01(3个班级各4名学员参赛,求每个班的平均分) 1.老师代码: public class Double01 ...
- 2017年6月23号课堂笔记
2017年6月23号 星期五 暴雨转阵雨 空气质量:良 内容: 01jQuery-Validate验证插件的使用:02bootstrap小例子: 03引用charisma代码小例子 一.jQuery- ...
- 2017年6月2号课堂笔记
2017年6月2号 星期五 阵雨 空气质量:良 内容:JavaScriptBOM对象:history,location,open,document,定时及解除,全选和反选 备注:今天开始是李老师开始代 ...
最新文章
- 真是好东西！一组动感的页面加载动画效果
- python的基本语句_Python的基本语句
- try/catch/finally的简单实践
- Hive的基本操作-分组和多表连接
- 从C++20 shared_ptr移除unique()方法浅析多线程同步
- oracle19c连接MySQL_oracle19c的安装和使用navicat连接oracle数据库
- Mybatis SQL片段
- vnc连接linux颜色灰色,关于vnc登录界面为灰色解决办法【p13】.pdf
- “此电话号码无法用于进行验证”的解决方法
- javascript笛卡称积
- 闪电破解Word文档密码
- 用纯 JavaScript 实现的 MVC 程序
- java遍历excel 表格
- 信号与系统——傅里叶变换☞一维信号
- 正则表达式 ---判断非空
- 如果做好一个管理者的反思
- JAVA简单编写幸运抽奖
- 数据结构学习笔记（7.查找 8.排序）
- 如何使用RUN as命令安装软件
- 华为正式发布鸿蒙回看,华为正式发布“鸿蒙”操作系统
热门文章
- 在计算机上格式u盘启动,四大步,轻松让U盘启动电脑
- express 使用 redirect 对 ajax 无效 页面不跳转
- 优化网站的TDK要注意哪些问题？
- 网站优化有三个重点不能忽视
- window.print 固定表头不影响_Excel中的表头，你会处理吗
- python sorted key=str.lower_Python——sorted（）函数
- ladp3 获取属性_Ldap获取ad属性的方法.
- CC 攻击检测研究现状
- cylance做的机器学习相关材料汇总
- logz.io一个企业级的ELK日志分析器 内部集成了机器学习识别威胁——核心：利用用户对于特定日志事件的反馈处理动作来学习判断日志威胁 + 类似语音识别的专家系统从各方收集日志威胁信息...