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:今天是高考第一天，祝福各位考生放平心态，发挥出自己的水准！加油！

时间： 2024-10-17 06:32:38

2017年06月07号课堂笔记的相关文章

2017年06月30号课堂笔记

2017年06月30号 星期五 多云 空气质量:中度污染 内容:MySQL第三节课 一.delete 和 truncate的区别 01.delete begin (开启事务)select * from grade;(查询年级表中所有的数据) delete from grade; (删除年级表中所有的数据)select * from grade;(查询年级表中所有的数据,没有数据) rollback; (事务回滚)select * from grade;(查询年级表中所有的数据,删除的数据恢复)

2017年5月5号课堂笔记

2017年5月5号 星期五 沙尘暴转晴 内容:U2 HTML5第一节课 一.01第一个霸气的网页 1.老师代码: <!DOCTYPE html><html><head lang="en"> <!-- html注释 不安全 用户在网页中查看源代码可以看到 w3c : World wide Web Consortium (万维网联盟) 官网: www.w3.org www.chinaw3c.org w3c标准: 01.结构化标准语言 html xh

2017年5月22号课堂笔记

2017年5月22号 星期一 大雨 内容:盒子模型,浮动 备注:5月24日补上 一.盒子模型 01.边框border 仿写老师代码: <!DOCTYPE html> <html><head lang="en"> <meta charset="UTF-8"> <title>边框</title> <style type="text/css"> div{ /* 上 to

2017年5月12号课堂笔记

2017年5月12号 星期五 空气质量:轻度污染(昨天的北风转今天的南风) 内容:html表格的基本使用,表格跨行跨列,高级表格,播放音乐,播放视频,网页布局,iframe内联框架: 文本框,密码框,单选按钮,复选框,下拉框  备注:周日晚想起来补上的周五课堂笔记(一带一路今天开会天气好晴朗) 一.html表格的基本使用 模仿老师代码: <!DOCTYPE html><html><head lang="en"> <meta charset=&q

2017年5月29号课堂笔记

2017年5月29号 阴天 空气质量:良 内容:JavaScript基础:输入输出及确认,统计字符出现的次数,系统函数,自定义函数, 自定义函数和事件的连用,四则运算小练习,方法的作用域 JavaScriptBOM对象(下次课堂笔记再补上,一起记录)history,location,open,document 一.输入输出及确认 仿写老师代码: <!DOCTYPE html><html><head lang="en"> <meta charse

2017年5月24号课堂笔记

2017年5月24号 星期三 晴 空气质量:优 内容:定位属性,CSS3动画  备注:5月25日补课堂笔记 一.定位属性  01.定位属性 仿写老师代码: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>定位属性</title> <!-- position:定位属性 属性值: 01.static:默认值

2017年4月3号课堂笔记

2017年4月3号  重度雾霾 内容:log4j,集合框架(ArrayList,LinkedList) 一.log4j 老师代码: 1)log4j.properties: log4j.appender.console=org.apache.log4j.ConsoleAppender log4j.appender.console.target=System.err log4j.appender.console.layout=org.apache.log4j.PatternLayout log4j.

2017年6月19号课堂笔记

2017年6月19号 星期一 晴转多云 空气质量:轻度污染~良 内容:表单验证 01表单选择器:02String对象实现表单验证:03登录成功页面: 04验证错误信息的显示:05正则验证年龄:06Html5validaty 备注:老师归来第一节课,大家都很开心,学习的感觉又回来了~ 一.表单选择器 老师代码: <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"

2017年6月21号课堂笔记

2017年6月21号 星期三 多云转雷阵雨 空气质量:中度污染~轻度污染 内容: JavaScript 原型式面向对象 01基于Object的对象的方式创建对象:02使用字面量赋值方式创建对象 03构造函数:04原型对象:05原型链 备注:老师休养回来第二节课,希望他手术的伤口尽快愈合,远离伤病痛苦. 一.基于Object的对象的方式创建对象 1.老师代码: <!DOCTYPE html><html><head lang="en"> <meta