前言:

主要概要:

1、HTML+CSS补充

2、DOM事件

3、jQuery示例

内容概要:

1、布局

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin:;
}
.w{
width:980px;
margin: auto;
border:1px solid greenyellow;
}
</style>
</head>
<body>
<div style="background-color: black;color: white;">
<div class="w">标题</div>
</div>
<div>
<div class="w">内容</div>
</div>
</body>
</html>

效果如下:

2、clear  both的另外一种写法 (清除浮动)

常规写法就是如下所示:

<body>
<div style="background-color: greenyellow;">
<div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
<div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
<div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
<div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
<div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
<div style="width: 200px;height: 200px;border: 1px solid red;float: left;"></div>
<div style="clear: both;"></div>
</div>
</body>

  接着,我们换另外一种写法

注意:有content才会加标签,一般都是这么写,不能写display: none

    <style>
.clearfix:after{
content: '.';
display: block;
clear: both;
visibility: hidden;
height:;
}
</style>

所有网站这个都会用到。

以后就写一个公共的CSS,放在引用即可,after是指在这个标签内容的后面

<link rel="stylesheet" href="commons.css">

3、页面布局,拖动浏览器如何让格式不变

第一种方法:

在外面定义一个div给一个固定宽度,如果缩小他会自动出现滚动条。如下图

写法如下:

<div style="width: 800px;">
   输入标签
</div>

方法2:@media

    <style>
@media (min-width: 800px){
.item{
width:%;
float: left;
}
}
@media (max-width: 700px){
.item{
width:%;
float: left;
}
} </style>

4、事件绑定

submit ,a标签,from表单,这些默认有些默认事件的

也可以自定义一些事件

方式1:点击出现弹框,确定,跳转

<body>
<a href="http://www.baidu.com" onclick=" func();">走你</a>
<script>
function func(){
alert();
false;
}
</script>
</body>

如果我不想让他跳转,需要return一个FALSE即可,如下

<body>
<a href="http://www.baidu.com" onclick="return func();">走你</a>
<script>
function func(){
alert();
return false;
}
</script>
</body>

方式2:

<a href="http://www.baidu.com" id="i1">走你</a>
<script>
document.getElementById('i1').onclick = function () {
alert()
}
</script>

默认阻止写法就是,价格return FALSE;

<body>
<a href="http://www.baidu.com" id="i1">走你</a>
<script>
document.getElementById('i1').onclick = function () {
alert();
return false;
}
</script>
</body>

有何作用?

用户提交数据如果为空,我就在JS上去阻止提交了。

<form action="http://www.baidu.com">
<input type="text" id="user" name="user" />
<input type="submit" value="提交" onclick="return func();">
</form>
<script>
function func(){
var v = document.getElementById('user').value;
if(v.length>){
return true;
}else{
alert('请输入内容')
return false;
}
}
</script>

第二种写法:

    <input type="submit" id="sb" value="提交" />
</form> <script>
document.getElementById('sb').onclick = function(){
var v = document.getElementById('user').value;
if(v.length>){
return true;
}else{
alert('请输入内容')
return false;
}
}
</script>

5、有一个绑定事件,我绑定想获取里面的数据。

<body>
<div id="i1" onclick="fuck();">答复</div>
<script>
function fuck(){
var v = document.getElementById('i1').innerText;
alert(v);
}
</script>

this,触发当前目标的对象

<div onclick="fuck(this);">答复</div>
<script>
function fuck(self){
var v = self.innerHTML;
alert(v);
}
</script>

另外一种写法

<div id="i1">答复</div>
<script>
document.getElementById('i1').onclick = function(){
var v = this.innerHTML;
alert(v);
}
</script>

6、点击获取时间去掉里面的关键字,拿开又恢复

代码如下:

<body>
<input type="text" value="请输入关键字" onfocus="fuckFocus(this);"onblur="fuckBlur(this);" />
<input type="button" value="提交">
<script>
/*
当标签获取焦点
*/
function fuckFocus(ths){
var v = ths.value;
if(v == "请输入关键字"){
ths.value = "";
}
}
/*
当标签失去焦点
*/
function fuckBlur(ths){
var v = ths.value;
if(v.length == ){
ths.value = "请输入关键字"
}
} </script>
</body>

this 代表当前标签。

如果获取值,都用.value(表单相关的,比如input系列,select标签)

除了这些,想获取标签中间的值(div span),用innerhtml和innertext。

2者的区别就是innerhtml除了获取值之外还能获取里面的标签,比如a标签或者span标签

如下:

7、同时绑定2个相同的事件

实现效果如下:

点击同时出现2个事件

代码如下:

    <div id="i1" onclick="console.log(1);">dfd</div>
<script>
document.getElementById('i1').addEventListener('click',function(){
console.log();
})
</script>

8、触发事件顺序。由内朝外(事件冒泡)

<body>
<div style="height: 400px;width: 400px;background-color: red" onclick="alert(1);">
<div style="height: 300px;width: 300px;background-color: greenyellow" onclick="alert(2);">
<div style="height: 200px;width: 200px;background-color: black" onclick="alert(3);">
</div>
</div>
</div>
</body>

下面,写一个捕获式。通过addEventListener和true来捕获,事件触发顺序就是由外向里了。来控制事件顺序

    <div id="i1" style="height: 400px;width: 400px;background-color: red">
<div id="i2" style="height: 300px;width: 300px;background-color: greenyellow" >
<div id="i3" style="height: 200px;width: 200px;background-color: black" >
</div>
</div>
</div> <script>
document.getElementById('i1').addEventListener('click',function(){alert(1);},true);
document.getElementById('i2').addEventListener('click',function(){alert(2);},true);
document.getElementById('i3').addEventListener('click',function(){alert(3);},true);
</script>

  

给全局绑定事件

event是当前事件的信息

    <input type="text" onkeydown="func(this,event);" />

    <script>
function func(ths,e){
console.log(ths,e)
}
</script>

全局生效,给Window绑定全局事件

    <input type="text" onkeydown="func(this,event);" />

    <script>
function func(ths,e){
console.log(ths,e);
}
window.onkeydown = function(e){
console.log(e);
}
</script>

9、通过JS  给任何标签添加提交表单功能

<form id="f1" action="http://www.baidu.com">
<input type="submit" value="提交">
<a onclick = "submitForm();">提交</a> </form>
<script>
function submitForm(){
document.getElementById('f1').submit();
}
</script>

10、给页面刷新,通过代码级别来做

window.location.reload()

获取当前URL和赋值

window.location.href

window.location.href = "http://cn.bing.com"

11、出效果图

jQuery+highchart(专门用来出图)

上官网拿图https://www.hcharts.cn/demo/highcharts

代码如下:

记住,函数式直接从官网找好图,贴上它的代码而来,然后再执行函数即可。

官网找的函数如下:

<body>
<div style="height: 500px;">
<div id="i1"></div>
</div>
<script src="jquery-1.12.4.js"></script>
<script src="highchart/highchart/highcharts.js"></script>
<script>
function createChart(){
$('#i1').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Historic World Population by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['Africa', 'America', 'Asia', 'Europe', 'Oceania'],
title: {
text: null
}
},
yAxis: {
min: ,
title: {
text: 'Population (millions)',
align: 'high'
},
labels: {
overflow: 'justify'
}
},
tooltip: {
valueSuffix: ' millions'
},
plotOptions: {
bar: {
dataLabels: {
enabled: true
}
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -,
y: ,
floating: true,
borderWidth: ,
backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
shadow: true
},
credits: {
enabled: false
},
series: [{
name: 'Year 1800',
data: [, , , , ]
}, {
name: 'Year 1900',
data: [, , , , ]
}, {
name: 'Year 2008',
data: [, , , , ]
}]
});
}
createChart();
</script>
</body>

12、利用jQuery找到并操作

<body>
<div id="i1">sdfdf</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('#i1').text('adidas')
</script>
</body>

通过class来修改

<body>

    <div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<script src="jquery-1.12.4.js"></script>
<script> $('.c1').text('')
</script>
</body>

2个条件,比如找到class为c1然后ID为i1

$('.c1,#i1').text('666')

等于

$('.c1:eq(2)').text('12345')

地址为:http://jquery.cuishifeng.cn/id.html

可以在这个里面去查找一些功能。

13、点赞实现

用到的知识点如下:

1)追加$('t1').append()在旁边增加一个标签

2)定时器  setInterval

3)透明度

4)位置变化 position: relative

5)字体大小和位置变化

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container{
padding:50px;
border:1px solid #dddddd;
}
.item{
position: relative;
width:30px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="container">
<div class="item">
<span>赞</span>
</div>
</div>
</body>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function(){
AddFavor(this);
});
function AddFavor(self){
var fontSize = ;
var top = ;
var right = ;
var opacity = ; var tag = document.createElement('span');
$(tag).text('+1');
$(tag).css('color','green');
$(tag).css('fontSize',fontSize + "px");
$(tag).css('position','absolute');
$(tag).css('right',right + "px");
$(tag).css('top',top + "px");
$(tag).css('opacity',opacity);
$(self).append(tag); var obj = setInterval(function(){
fontSize = fontSize + ;
top = top - ;
right = right - ;
opacity = opacity - 0.1; $(tag).css('fontSize',fontSize + "px");
$(tag).css('right',right + "px");
$(tag).css('top',top + "px");
$(tag).css('opacity',opacity); // 删除定时器和去除+1的标签
if (opacity < ){
clearInterval(obj);
$(tag).remove()
} },);
}
</script>
</html>

效果如下:

一个初学者的辛酸路程-jQuery的更多相关文章

  1. 一个初学者的辛酸路程-依旧Django

    回顾: 1.Django的请求声明周期?   请求过来,先到URL,URL这里写了一大堆路由关系映射,如果匹配成功,执行对应的函数,或者执行类里面对应的方法,FBV和CBV,本质上返回的内容都是字符串 ...

  2. 一个初学者的辛酸路程-初识Django

    前言: 主要是关于JavaScript的高级部分以及Django 主要内容: 一.jQuery 事件绑定: DOM事件绑定: -直接在标签上绑定 第一种: $('.title').click(func ...

  3. 一个初学者的辛酸路程-python操作SQLAlchemy-13

    前言 其实一开始写blog,我是拒绝的,但是,没办法,没有任何理由抗拒.今天呢,要说的就是如何使用Python来操作数据库. SQLAlchemy SQLAlchemy是Python编程语言下的一款O ...

  4. 一个初学者的辛酸路程-FTP-9

    前言 今天,我要描述一个FTP的故事 主要内容 嗯,今天主要以阶梯性的形式来做一个FTP项目. 第一步: 我要实现这么一个功能,一个FTP客户端,1个FTP服务端,2端建立连接以后可以进行通讯. 服务 ...

  5. 一个初学者的辛酸路程-socket编程-8

    前言: 你会发现会网络是多么幸福的事情 主要内容: socket 概念: socket本质上就是2台网络互通的电脑之间,架设一个通道,两台电脑通过这个通道来实现数据的互相传递.我们知道网络通信都是基于 ...

  6. 一个初学者的辛酸路程-Python基础-3

    前言 不要整天沉迷于学习-. 字典 一.我想跟你聊聊字典 1.为何要有字典? 大家有没有想过为什么要有字典?有列表不就可以了吗? 也许大家会这么认为,我给大家举个例子,大家就明白了. 比如说,我通讯录 ...

  7. 一个初学者的辛酸路程-了解Python-2

    前言 blog花了一上午写的,结果笔记本关机了,没有保存,找不到了,找不到了啊,所以说,你看的每一篇blog可能都是我写了2次以上的--.哎!! 代码改变世界,继续......... Python基础 ...

  8. 一个初学者的辛酸路程-初识Python-1

    前言 很喜欢的一句话,与诸位共勉. 人的一切痛苦,本质上都是对自己无能的愤怒----王小波. 初识Python 一.它的爸爸是谁 首先,我们需要认识下面这位人物. 他是Python的创始人,吉多范罗苏 ...

  9. 一个初学者的辛酸路程-继续Django

    问题1:HTTP请求过来会先到Django的那个地方? 先到urls.py  ,里面写的是对应关系,1个URL对应1个函数名. 如果发URL请求过来,到达这里,然后帮你去执行指定的函数,函数要做哪些事 ...

随机推荐

  1. 离线安装vscode vsix插件

    VS代码扩展市场 通过扩展增强Visual Studio代码的强大功能 https://marketplace.visualstudio.com/vscode Visual Studio Code包含 ...

  2. 2.NBU管理NetBackup

    2管理NetBackup2.1NetBackup作业任务监视 NetBackup任务监视器可以监视备份.恢复和归档任务的状态,也可以监视NetBackup本身数据库的备份. 2.1.1Activity ...

  3. 2017.9.16 Web 应用开发环境搭建与开发工具安装

    1.JDK的下载与安装 1.1 在网址:http://javase/downloads/index.jsp网站下载最新的JDK版本 1.2 安装jdk,双击下载好的.exe文件运行,一般默认安装在c盘 ...

  4. 2017.9.28 web设计简单的购物车应用案例--session的简单应用

    该购物过程是在session范围内完成的,需要使用session对象实现信息的共享 (1)购买“肉类”商品的页面 <%@ page language="java" impor ...

  5. 离散外微积分(DEC:Discrete Exterior Calculus)基础

    原文链接 “若人们不相信数学简单,只因为他们未意识到生命之复杂.”——Johnvon Neumann DEC主要讨论离散情况下的外积分,它在计算机领域有重要用途.我们知道,使用计算机来处理几何图形的时 ...

  6. iOS接入微信登录可能遇到的问题

    前言:记录一下接入微信登录的过程中可能遇到的问题 如果是出现明明已经安装了微信但是显示出来的是没有安装微信,可能出现的问题的地方有: 1.TARGETS->Info->URL Types处 ...

  7. ES6介绍

    1.ES6简介 ECMAScript 6.0,是 JavaScript 语言下一代标准,发布于 2015 年 6 月.它的目标是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业 ...

  8. JQuery实现层级菜单

    效果图: HTML代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset= ...

  9. tomcat7下载地址

    tomcat7下载地址:https://tomcat.apache.org/download-70.cgi

  10. 利用python在windows环境下爬取赶集网工作信息。

    主要用到了多进程和多线程的知识,最后结果保存成csv文件格式,如有需要可改成数据库版本. 对用到的库做下简要介绍,具体请参考官方文档: xpinyin.Pinyin:将输入的中文转成拼音 concur ...