PYTHON第五十九天笔记11.16
一、自记录：
Offset：能获取偏移量，能设置偏移量。(相对于文档中的当前元素位置)
Position：只能获取。(相对于文档中的当前元素父级元素位置)
1、下拉框多选选择某几个：
</head> <body> <select id="s1"> <option value="1">male</option> <option value="2">female</option> </select> <hr> <select id="m1" multiple="multiple" size="2"> <option value="a">multiple1</option> <option value="b">multiple2</option> <option value="c" selected>multiple3</option> <option value="d" selected>multiple4</option> </select> <hr> <select id="m1" multiple="multiple"> <option value="a">multiple1</option> <option value="b">multiple2</option> <option value="c">multiple3</option> <option value="d">multiple4</option> </select>
如图：
2、作业知识点参透：(如图)
二、课上笔记：
1 返回顶部jQuery版
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部示例</title> <style> .c1 { height: 50px; } .b1 { position: fixed; right: 10px; bottom: 10px; } .hide { display: none; } </style> </head> <body> <div class="c1">001</div> <div class="c1">002</div> <div class="c1">003</div> <div class="c1">004</div> <div class="c1">005</div> <div class="c1">006</div> <div class="c1">007</div> <div class="c1">008</div> <div class="c1">009</div> <div class="c1">010</div> <div class="c1">011</div> <div class="c1">012</div> <div class="c1">013</div> <div class="c1">014</div> <div class="c1">015</div> <div class="c1">016</div> <div class="c1">017</div> <div class="c1">018</div> <div class="c1">019</div> <div class="c1">020</div> <div class="c1">021</div> <div class="c1">022</div> <div class="c1">023</div> <div class="c1">024</div> <div class="c1">025</div> <div class="c1">026</div> <div class="c1">027</div> <div class="c1">028</div> <div class="c1">029</div> <div class="c1">030</div> <div class="c1">031</div> <div class="c1">032</div> <div class="c1">033</div> <div class="c1">034</div> <div class="c1">035</div> <div class="c1">036</div> <div class="c1">037</div> <div class="c1">038</div> <div class="c1">039</div> <div class="c1">040</div> <div class="c1">041</div> <div class="c1">042</div> <div class="c1">043</div> <div class="c1">044</div> <div class="c1">045</div> <div class="c1">046</div> <div class="c1">047</div> <div class="c1">048</div> <div class="c1">049</div> <div class="c1">050</div> <div class="c1">051</div> <div class="c1">052</div> <div class="c1">053</div> <div class="c1">054</div> <div class="c1">055</div> <div class="c1">056</div> <div class="c1">057</div> <div class="c1">058</div> <div class="c1">059</div> <div class="c1">060</div> <div class="c1">061</div> <div class="c1">062</div> <div class="c1">063</div> <div class="c1">064</div> <div class="c1">065</div> <div class="c1">066</div> <div class="c1">067</div> <div class="c1">068</div> <div class="c1">069</div> <div class="c1">070</div> <div class="c1">071</div> <div class="c1">072</div> <div class="c1">073</div> <div class="c1">074</div> <div class="c1">075</div> <div class="c1">076</div> <div class="c1">077</div> <div class="c1">078</div> <div class="c1">079</div> <div class="c1">080</div> <div class="c1">081</div> <div class="c1">082</div> <div class="c1">083</div> <div class="c1">084</div> <div class="c1">085</div> <div class="c1">086</div> <div class="c1">087</div> <div class="c1">088</div> <div class="c1">089</div> <div class="c1">090</div> <div class="c1">091</div> <div class="c1">092</div> <div class="c1">093</div> <div class="c1">094</div> <div class="c1">095</div> <div class="c1">096</div> <div class="c1">097</div> <div class="c1">098</div> <div class="c1">099</div> <div class="c1">100</div> <button class="b1 hide" onclick="up();">返回顶部</button> <script src="jquery-3.2.1.min.js"></script> <script> // m滚动条每一次滚动的时候，都要作判断 $(window).scroll(function () { if ($(window).scrollTop() > 100) { $(".b1").removeClass("hide"); } else { $(".b1").addClass("hide"); } }); function up() { $(window).scrollTop(0); } </script> </body> </html>
2
3 课堂笔记
day59 1.前情回顾 基本选择器 所有$("*") 标签选择器 $("标签名") class选择器 $(".class名") Id选择器 $("#id值") 组合选择器 $("条件1，条件2") 层级选择器 子子孙孙 $("条件1 条件2") 儿子 $("条件1 > 条件2") 毗邻 $("条件1 + 条件2") 弟弟 $("条件1~条件2") --> .siblings() 属性选择器 表单选择器 筛选器 .children() 2. 今日概要 1. 样式操作 .css() 获取具体CSS值 .css("color") .css("color", "red") .css("border", "solid 1px green") .css({"color": "red", "font-size": "36px"}) 位置相关的 CSS里面position都有哪些？ --> 赵龙飞说他忘了 1. static 2. absolute 绝对的 --> 需要有一个参照的对象 3. relative 相对的 --> 相对他本身应该在的位置， 4. fixed jQuery里面 offset() // 获取匹配元素在当前视口的相对偏移 position() // 获取匹配元素相对父元素的偏移 返回顶部的例子： 1. scrollTop() --> 获取窗口滚动距离 2. $(window).scroll() --> 滚动触发 尺寸 height 本身 width innerHeight 本身加padding innerWdth outerHeight 本身+paddding + border outerWidth 2. 文本操作 text() 获取文本 --> 我的和我孩子们的 html() 获取标签 --> 所有HTMl内容 val() input框的值 select --> value multipleselect --> value值的数组 3. 属性操作 prop() 适用于checkbox和radio 返回值是true或false attr() 获取其他属性或自定义属性 $("img").attr("src") $("img").attr("nid") 4. 事件绑定 复习下： 目前为止学过的绑定事件的方式： 1. 标签内 onclik=funcName() function funcName(){/xxxx/} 2. <script> var ele = document.getElementById("d1"); ele.onclik = function(){/blablabla.../} </script> 3. ele.addEventListener("click", function(){...}) jQuery里的绑定事件： .on() $("#all").on("click", function(){ // blablabla... }) 3. 今日作业 1. 全选反选取消（jQuery版） zi 知识点： 1. 当你的jQuery选择器，返回多个对象的时候，恰巧你要做统一的动作，不需要循环 直接在后面接动作 2. .each() $.each() $.each([11,22,33], function(i,v){ console.log(i, v); }) $(":checkbox").each(function(){ console.log(this); // 具体的标签 --> DOM对象 --> $(this).xxx() })
三、课堂图片：
1 疑难问题
2 疑难问题
3
4
5 返回顶部
6
7 赋值
8
9
10
11
12.1
12.2 部分代码
13
14
15
16
17
18
19 each循环方法
20 循环
21
