python15-day17

python15-day17

目录

python15-day17. 1

1. HTML+CSS内容补充... 2

1.1 CSS布局... 2

1.2 撑起外边框... 3

1.3 响应式布局... 4

1.4 绑定事件的操作... 6

1.4.1 第一种事件操作方法... 6

1.4.2 第二种实践操作方法（推荐）... 7

1.5 获取焦点... 7

1.6 this的用法... 8

1.6.1 第一种用法... 8

1.6.2 第二种用法... 9

1.6.3 附innertext和innerHTML的区别... 10

1.7 绑定多个相同事件... 12

1.7.1 鼠标事件响应... 12

1.7.2 绑定多个相同事件... 13

1.8 事件执行顺序... 14

1.8.1 冒泡式（默认是冒泡式）... 14

1.8.2 捕获式... 15

1.9 响应键盘事件... 16

1.10 JS配合提交表单... 18

1.11 页面刷新和跳转... 19

2.  jQuery. 19

2.1 查找... 19

2.1.1 选择器... 19

2.1.2 筛选器... 19

今日内容：

1.
HTML+CSS的补充

2. DOM事件补充

3.
jQuery（示例）

1. HTML+CSS内容补充

1.1 CSS布局

示例：

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

.w{

background-color: green;

width: 980px;

margin: 0 auto;

}

</style>

</head>

<body>

<div style="background-color: red">

<div class="w">页面布局</div>

</div>

</body>

显示：

1.2撑起外边框

示例：

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

/*现在常用这种方法来代替最后加clear：both*/

.clearfix:after{

content: ".";

display: block;

clear: both;

#visibility隐藏，类似于display的用法，但虽然隐藏但位置依然存在，不同于display

visibility: hidden;

height: 0px;

}

</style>

</head>

<body>

<div style="border: red solid 5px" class="clearfix">

<div style="width: 200px; height: 200px;border: green solid 1px;float: left"></div>

<div style="width: 200px; height: 200px;border: green solid 1px;float: left"></div>

<div style="width: 200px; height: 200px;border: green solid 1px;float: left"></div>

<div style="width: 200px; height: 200px;border: green solid 1px;float: left"></div>

<div style="width: 200px; height: 200px;border: green solid 1px;float: left"></div>

<div style="width: 200px; height: 200px;border: green solid 1px;float: left"></div>

<div style="width: 200px; height: 200px;border: green solid 1px;float: left"></div>

<div style="width: 200px; height: 200px;border: green solid 1px;float: left"></div>

<!--以前最外边的边框需要撑起来，没有这行代码是撑不起来的-->

<!--<div style="clear:
both"></div>-->

</div>

</body>

显示：

1.3响应式布局

根据浏览器窗口大小，调整呈现出的内容个数。不同的浏览器宽度可以显示出排列不同的内容。

示例：

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

@media (min-width: 1500px) {

.item{

width:
20%;

float:
left;

}

}

@media (max-width: 1500px) {

.item{

width:
25%;

float:
left;

}

}

@media (max-width: 1000px) {

.item{

width:
33.3%;

float:
left;

}

}

@media (max-width: 500px) {

.item{

width:
50%;

float:
left;

}

}

@media (max-width: 300px) {

.item{

width:
100%;

float:
left;

}

}

@media (max-width: 100px) {

.item{

display: none;

float:
left;

}

}

</style>

</head>

<body>

<div class="item">

<p>用户名：<input
type="text"></p>

</div>

<div class="item">

<p>用户名：<input
type="text"></p>

</div>

<div class="item">

<p>用户名：<input
type="text"></p>

</div>

<div class="item">

<p>用户名：<input
type="text"></p>

</div>

<div class="item">

<p>用户名：<input
type="text"></p>

</div>

<div class="item">

<p>用户名：<input
type="text"></p>

</div>

<div class="item">

<p>用户名：<input
type="text"></p>

</div>

<div class="item">

<p>用户名：<input
type="text"></p>

</div>

<div class="item">

<p>用户名：<input
type="text"></p>

</div>

<div class="item">

<p>用户名：<input
type="text"></p>

</div>

</body>

显示：

1.4绑定事件的操作

1.4.1第一种事件操作方法

示例：如果输入有内容则跳转百度，如果没有内容则alert提醒用户输入。

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<form action="http://www.baidu.com">

<input type="text" id="user" name="user">

<input type="submit" id="test" value="提交" onclick="return one()">

</form>

</body>

<script>

function one() {

var v
= document.getElementById("user").value;

if(v.length>0){

return true

}else {

// 这里先执行alert，然后执行跳转，这里返回false即结束，不再跳转。

alert("请输入内容")

return false

}

}

</script>

1.4.2第二种实践操作方法（推荐）

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<form action="http://www.baidu.com">

<input type="text" id="user">

<input type="submit" id="submit" value="提交">

</form>

</body>

<script>

document.getElementById("submit").onclick = function ()
{

var v= document.getElementById("user").value;

if (v.length>0){

return true

}else {

alert("请输入内容")

return false

}

}

</script>

1.5获取焦点

示例：（注意this的用法）

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<form action="http://www.baidu.com">

<input type="text" value="请输入用户名" id="user" onfocus="get_focus(this);" onblur="lost_focus(this);">  #一个标签可以绑定多个不同事件

<input type="submit" id="submit" value="提交">

</form>

</body>

<script>

function get_focus(ths) {

var v
= ths.value;

if (v == "请输入用户名"){

ths.value = "";

}

}

function  lost_focus(ths) {

var v
= ths.value;

if (v.length == 0 )

ths.value = "请输入用户名";

}

</script>

显示：

鼠标选中输入框，则内容消失，鼠标移开后而用户有没有输入内容，则重新自动填写内容。

1.6 this的用法

1.6.1第一种用法

示例：

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<div id="test" style="color: red;font-size: 50px">战争</div>

</body>

<script>

document.getElementById("test").onclick = function ()
{##匿名函数

alert(this.innerText)

}

</script>

显示：

1.6.2第二种用法

示例：

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<div id="test" style="color: red;font-size: 50px" onclick="test(this)">战争</div>

</body>

<script>

function test(ths) {

alert(ths.innerText)

}

</script>

显示：

1.6.3附innertext和innerHTML的区别

innertext：

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<div id="test" style="color: red;font-size: 50px" onclick="test(this)">战争

<span style="color: darkgreen;font-size: 50px;">和平</span>

</div>

</body>

<script>

function test(ths) {

alert(ths.innerText)

}

</script>

显示：

innerHTML：

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<div id="test" style="color: red;font-size: 50px" onclick="test(this)">战争

<span style="color: darkgreen;font-size: 50px;">和平</span>

</div>

</body>

<script>

function test(ths) {

alert(ths.innerHTML)

}

</script>

显示：

总结：

l 
innertext：只获取到文本内容

l 
innerHTML：获取到样式标签以及文本内容

可以从test和HTML的意思理解，text指代文本内容，而html指代html语句。

1.7绑定多个相同事件

1.7.1鼠标事件响应

示例：

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<div style="font-size: 50px;color: green" onclick=console.log(1) ondblclick=console.log(2) onmouseover=console.log(3) onmouseout=console.log(4) >

和平

</div>

</body>

显示：

说明：

l 
onmouseover：鼠标放到内容上时响应事件

l 
onmouseout：鼠标离开内容时响应事件

l 
ondblclick：鼠标双击时响应事件

l 
onclick：鼠标单击时响应事件

1.7.2绑定多个相同事件

<div style="font-size: 50px;color: green" onclick=console.log(1) onclick=console.log(2)>

以上这样绑定时无法同时绑定两个事件的，鼠标点击后只会响应第一个事件。

如果需要绑定多个相同事件，可以使用addEventListener方法：

示例：

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<div  id="test" style="font-size: 50px;color: green" onclick=console.log(1)> 
#第一个事件

和平

</div>

</body>

<script>

document.getElementById("test").addEventListener("click",function()
{

console.log(2);  #第二个事件

})

</script>

显示：

说明：同时相应单击事件。

1.8事件执行顺序

1.8.1冒泡式（默认是冒泡式）

示例：

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<div id="one" style="background-color: red;width: 500px;height: 500px">

<div id="two" style="background-color: green;width: 400px;height: 400px;">

<div id="three" style="background-color: aquamarine;width: 300px;height: 300px">

</div>

</div>

</div>

</body>

<script>

document.getElementById("one").addEventListener("click",function () {

alert("one")

})

document.getElementById("two").addEventListener("click",function () {

alert("two")

})

document.getElementById("three").addEventListener("click",function () {

alert("three")

})

</script>

</html>

显示：

1.8.2捕获式

示例：

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<div id="one" style="background-color: red;width: 500px;height: 500px">

<div id="two" style="background-color: green;width: 400px;height: 400px;">

<div id="three" style="background-color: aquamarine;width: 300px;height: 300px">

</div>

</div>

</div>

</body>

<script>

document.getElementById("one").addEventListener("click",function () {

alert("one")

},true)

document.getElementById("two").addEventListener("click",function () {

alert("two")

},true)

document.getElementById("three").addEventListener("click",function () {

alert("three")

},true)

显示：

1.9响应键盘事件

只响应文本输入，对于光标不在文本框内的事件不响应。

示例：

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<input type="text" onkeydown="result(this,event)">

</body>

<script>

function result(ths,eve) {

console.log(ths,eve)

}

</script>

</html>

说明：

n 
onkeydown：键盘按下响应事件，可以响应系统键，包括shift、ctrl、delete等。

n 
onkeyup：键盘抬起响应事件，包括系统按键，shift、delete等

n 
onkeypress：用户按下并放开字母数字键时响应。不包括系统键shift、delete等。

响应窗口内的任何按键输入：

示例：

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<input type="text" onkeyup="result(event)">

</body>

<script>

function result(eve) {

console.log(eve)

}

window.onkeydown=function (e) { #响应全部的键盘输入，而不是只在文本框内

console.log(e)

}

</script>

</html>

显示：

1.10 JS配合提交表单

我们之前接触到的提交表单的方法只有form+input标签和a标签。现在我们用JS配合form标签也可以构造出提交表单的方法。

示例：

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<form id="js" action="http://www.baidu.com">

<input type="submit" value="提交"><p></p>

<a href="http://www.baidu.com">百度一下</a>

<p onclick="submitFrom()">JS提交表单</p>

</form>

</body>

<script>

function
submitFrom() {

document.getElementById("js").submit()

}

</script>

</html>

1.11页面刷新和跳转

刷新页面：window.location.reload()

跳转页面：window.location.href
= "http://www.baidu.com"

获取当前URL：window.location.href

2.  jQuery

jQuery是封装的Dom对象，二者之间存在转换关系：

n 
jQuery对象[0]   ==> Dom对象

n 
Dom对象       ==> $(Dom对象)

2.1选择器

n 
$(‘#test‘)    找id=test的标签

n 
$(‘.test‘)     找class=test的标签

n 
$(‘div‘)      找所有div的标签

n 
$(‘*‘)       
找所有的标签

n 
$(‘#test .c1 div‘)    找到id=test，在其下边找class=c1的标签

示例：

源代码：

2.2 筛选器

2.2.1 找到子元素

描述：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合。

可以通过可选的表达式来过滤所匹配的子元素。注意：parents()将查找所有祖辈元素，而children()只考虑子元素而不考虑所有后代元素。

$("div").children()

描述：在每个div中查找
.selected 的类。

$("div").children(".selected")

2.2.2 找到下一个元素

描述：找到每个段落的后面紧邻的同辈元素。

$("p").next()

描述：找到每个段落的后面紧邻的同辈元素中类名为selected的元素。

$("p").next(".selected")

2.2.3 找到前一个元素

描述：找到每个段落紧邻的前一个同一辈元素

$("p").prev()

描述：找到每个段落紧邻的前一个同辈元素中类名为selected的元素。

$("p").prev(".selected")

2.2.4 找到父元素

取得一个包含着所有匹配元素的唯一父元素的元素集合。你可以使用可选的表达式来筛选。

描述：查找每个段落的父元素。

$("p").parent()

描述：查找每个段落的父元素每个类名为selected的父元素。

$("p").parent(".selected")

注意区分parents()，取得一个包含着所有匹配元素的祖先元素[l1] 的元素集合（不包含根元素）。可以通过一个可选的表达式进行筛选。

parents()

2.2.5 获取兄弟标签

取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

描述：找到每个div的所有同辈元素。

$("div").siblings()

描述：找到每个div的所有同辈元素中带有类名为selected的元素。

$("div").siblings(".selected")

2.2.6 示例

描述：写一个导航栏，包含标题和内容，初始状态内容为隐藏，点击标题则显示下拉的内容，其他的标题则隐藏内容。

<head>

<meta charset="UTF-8">

<title>Title</title>

<style>

.head{

background-color: aquamarine;

color: black;

}

.content{

background-color: antiquewhite;

color: black;

height: 80px;

}

.hide{

display: none;

}

</style>

</head>

<body>

<div style="height: 500px;width: 200px;border: 1px
solid black">

<div class="item">

<div class="head">标题1</div>

<div class="content hide">内容1</div>

</div>

<div class="item">

<div class="head">标题2</div>

<div class="content hide">内容2</div>

</div>

<div class="item">

<div class="head">标题3</div>

<div class="content hide">内容3</div>

</div>

</div>

</body>

<script src="jquery-1.12.4.js"></script>

<script>

$(‘.head‘).click(function ()
{

$(this).next().removeClass(‘hide‘)                      $(this).parents().siblings().children(".content").addClass(‘hide‘)

})

</script>

注意：标黄部分可以使用一行代替：

$(this).next().removeClass("hide").parent().siblings().children(".content").addClass("hide")

或者（使用find查找）：

$(this).next().removeClass("hide").parent().siblings().find(".content").addClass("hide")

2.3 内容操作

2.3.1 文本操作

l 
$(..).text()   ##不加参数，获取文本内容

l 
$(..).text("<a>1<\a>")  
##设置文本内容，不解析HTML文本

l 
$(..).html()      ##不加参数，获取HTML内容

l 
$(..).html("<a>1<\a ")         ##加参数，设置文本内容，可以解析

文本操作：

$(..).text()          
# 获取文本内容

$(..).text(“<a>1</a>”) # 设置文本内容

$(..).html()

$(..).html("<a>1</a>")

$(..).val()

$(..).val(..)

样式操作：

addClass

removeClass

toggleClass

属性操作：

#
专门用于做自定义属性

$(..).attr(‘n‘)

$(..).attr(‘n‘,‘v‘)

$(..).removeAttr(‘n‘)

<input
type=‘checkbox‘ id=‘i1‘  />

#
专门用于chekbox,radio

$(..).prop(‘checked‘)

$(..).prop(‘checked‘,
true)

PS:

index
获取索引位置

[l1]不仅仅包含父元素，还包括父元素的父元素。

null

附件列表

时间： 2024-08-29 04:47:33

python15-day17的相关文章

python_way day17 前段插件（fontawsome，easyui，bootstrap，jqueryui，bxslider，jquerylazyload），web框架

python_way day17 一.模板插件 图标的插件 fontawsome: 后台管理: easyui jqueryui 很多网站都会用: bootstrap :引入jQuery:(2.x,1.1.) :引入js bootstrap模板: bootstrap后台管理模板: bxslider:轮播图 jquerylazyload:延迟加载,所有的图片延迟加载 http://www.cnblogs.com/wupeiqi/articles/5813161.html faulure_limit:

day17

create database day17; use day17; create table user( id int primary key auto_increment, name varchar(40), password varchar(40), email varchar(60), birthday date ); insert into user(name,password,email,birthday)values('zs','123456','[email protected]'

leetcode -day17 Path Sum I II &amp; Flatten Binary Tree to Linked List &amp; Minimum Depth of Binary Tree

1.  Path Sum Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up all the values along the path equals the given sum. For example: Given the below binary tree and sum = 22, 5 / 4 8 / / 11 13 4 / \ 7 2 1 r

day17（JDBC入门&jdbcUtils工具介绍）

day17 JDBC整体思维导图 JDBC入门 导jar包:驱动! 加载驱动类:Class.forName("类名"); 给出url.username.password,其中url背下来! 使用DriverManager类来得到Connection对象! ? ? ? 1 什么是JDBC JDBC(Java DataBase Connectivity)就是Java数据库连接,说白了就是用Java语言来操作数据库.原来我们操作数据库是在控制台使用SQL语句来操作数据库,JDBC是用Java

python_way day17 jQuery表单验证，插件，文本框架

python_way day17 jQuery表单验证 dom事件绑定 jquery时间绑定 $.each return值的判断 jquery扩展方法 前段插件 jDango文本框架 一,jQuery:表单验证: 1.dom方法提交表单,并验证: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单验证</ti

day17 dbutils 和 jdbc 多表操作

day17 dbutils 和 jdbc 多表操作 1. dbutils 框架简化 jdbc 开发 1.1 ResultSetHandler 接口的实现类 2. 用 dbutils 进行事务管理 2.1 正常开发中的转账实现 2.2 ThreadLocal - 线程范围内共享数据 3. jdbc 多表操作(1:n) 3.1 jdbc 多表操作 - 级联 4. jdbc 多表操作(n:m) 5. web 树 Author:相忠良 Email: [email protected] 起始于:June

python--15 字典：当索引不好用

字典是python唯一的影射类型 hash >>> brand = ['李宁', '耐克', '阿迪达斯'] >>> slogan = ['一切皆有可能', 'Just do it','Impossible is nothing'] >>> print('李宁的口号是:',slogan[brand.index('李宁')]) 李宁的口号是: 一切皆有可能 字典不是序列类型 ,是映射类型 字符串 列表 元组是序列类型 创建和访问索引   标志性符号--花

【2016-11-2】【坚持学习】【Day17】【微软 推出的SQLHelper】

从网络上找到 微软原版本的SQLHelper,很多行代码.认真看了,学习了. 代码: 1 using System; 2 using System.Data; 3 using System.Xml; 4 using System.Data.SqlClient; 5 using System.Collections; 6 7 namespace Helper 8 { 9 /// <summary> 10 /// The SqlHelper class is intended to encapsu

Python Day17(jQuery)

一.概述 1.简介 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. jQuery的核心特性可以总结为:具有独特的链式语法和短小清晰的多功能接口

day17 包装类、日期类

包装类 作用:1.丰富了基本数据类型只能存放值的问题,还提供了大量的方法或常量. 2.包装类充当了基本数据类型和引用数据类型转换的桥梁. 应用层面:包装类.String.基本数据类型的互相转换. 1.基本数据类型转为String: String str = Integer.toString(10): String str = 10 + "": 2.String转换为基本数据类型: int i = Integer.parseInt(str): 3.基本数据类型和包装类互转换: 语法糖--