Web从入门到放弃<6>
<1> Canvas.
1,灰度图:
js:
function showAsGray() {
var imgNode = document.getElementById('img');
if(!imgNode)return false;
var origSource = imgNode.src;
imgNode.onmouseover = function () {
imgNode.src = createGray(imgNode);
};
imgNode.onmouseout = function () {
imgNode.src = origSource;
}
}
function createGray(img) {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
var ctx = canvas.getContext('2d');
ctx.drawImage(img,0,0);
var raw = ctx.getImageData(0,0,img.width,img.height);
for(var i=0;i<raw.height;i++){
for(var j=0;j<raw.width;j++){
var x = i*4 * raw.width + j*4;
var r = raw.data[x];
var g = raw.data[x+1];
var b = raw.data[x+2];
//var a = raw.data[x+3];
var a = 1;
raw.data[x] = raw.data[x+1] = raw.data[x+2] = a* ((r+g+b)/3);
}
}
ctx.putImageData(raw,0,0,0,0,raw.width,raw.height);
return canvas.toDataURL();
}
window.onload = showAsGray;
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <img src="data:images/img.jpg" id="img"> <script src="data:image_gray.js"></script>
</body>
</html>
<2>JS大法
1,
点击h1标签消失,点击button显示
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <h1 id="header">Click me to hide</h1> <button id="button">ShowText</button> <script src="index.js"></script>
</body>
</html>
js:
window.onload = function (ev) {
var header = document.getElementById('header');
header.onclick = function () {
header.style.display='none';
};
var button = document.getElementById('button');
button.onclick = function () {
header.style.display = "";
}
};
2,jquery :
显示<li>里的text:
window.onload = function () {
$('li').each(function (i) {
console.log(this.lastChild.nodeValue);
})
};
3,jquery tag探索
jquery的$('tag')一定是返回一个{} , 并且是一种{0:type,1:type,2:type}
比如:
window.onload = function () {
$('li').each(
function (i) {
console.log(this.lastChild.nodeValue);}
);
var button = $('button');
console.log(button);
button.click(function () {
$('li').hide();
})
};
注意是给两个button都绑定了隐藏$('li').
4,点击<li>标签自动隐藏:给所有的标签都设置
方法1:
window.onload = function (ev) {
$('li').each(function (i) {
this.onclick = function () {
this.style.display='none';
}
})
};
方法2:
window.onload = function (ev) {
$('li').each(function (i) {
this.onclick = function () {
$(this).hide();
}
})
};
方法3:
window.onload = function () {
$('li').each(function (i)
{
$(this).click(function () {
$(this).hide();
});
})
};
经过验证，必须要使用$(this)才能使用它的click() , 也只有$(this)才能hide(),必须包裹成jquery对象
$('li').hide()隐藏所有li
$('button').hide()
$('.test').hide()隐藏所有.test类
$('#test').hide()隐藏所有id=test
$(document).ready(function(){} ) 就是window.onload
5,折叠板子...
可能涉及到函数
hide(),show(),toggle(),fadeToggle(),fadeIn(),fadeOut(),fadeTo(time,opacity,callback)
slideToggle(500,callback) 本例这个才是真正的卷上去
slideUp(),slideDown()
点击Collapse,地下的直接缩起来，然后再点击再show出来。
js:
$(document).ready(function () {
var dialog = $('#clk-dialog');
var h1 = $('div#clk-dialog h1');
var text = $('div#clk-dialog p');
$(h1).click(function () {
$(text).toggle(500);
});
});
css:
body{
background-color: #222222;
}
#clk-dialog{
width: 200px;
display: block;
font-family: Consolas;
color: white;
}
#clk-dialog h1{
background: darkorange;
border: 1px solid #222222;
padding:;
margin:;
text-align: center;
}
#clk-dialog p{
margin:;;
padding:;
border-bottom: 1px solid darkcyan;
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../jquery-3.2.1.min.js"></script>
<link rel="stylesheet" href="cp_01.css">
</head>
<body> <div id="clk-dialog">
<h1>Collapse</h1>
<p>Hello this is my all text here .button margin,padding,border should 0,
必须要学习dom编程 RTFM RTFM,RTFM,RTFM</p>
</div> <script src="cp_01.js"></script>
</body>
</html>
<3>AnimationControl:
语句:(多个语句可以排队动画，跟关键帧一样)
$('#aniblock').animate({left:'+=10px',top:'+=10px',height:'+=10px',width:'+=10px'},100)
$('#aniblock').animate({height:'toggle',width:'toggle'},100) // toggle设置，类似点击按钮就会缩放消失，然后缩放出现。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<button>button</button>
<div id="aniblock" style="width:200px;height: 200px;position: relative;background-color: black" >
</div> <script>
$(document).ready(function () {
$('button').click(function () {
$('#aniblock').animate({left:'+=10px',top:'+=10px',height:'+=10px',width:'+=10px'},100)
})
})
</script> </body>
</html>
<4>HTML操作
$(selector).text()
$(selector).html()
$(selector).val() // 通常获取form里面的input的value
$(selector).attr() // 获取属性，比如要获取id='test' 的<a>标签. $('test').attr('href')
1，获取<h1>HelloWorld</h1>的text: DOM和jquery方法比较:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body>
<h1 id="hello">"HelloWorld"</h1>
</body>
<script>
$(document).ready(function () {
console.log($('#hello').text()); // use dom method
var h1Node = document.getElementById('hello');
console.log(h1Node.lastChild.nodeValue); })
</script> </html>
2,设置 DOM ,也就是给参数的情况下，会设置新值
$(selector).text('HelloWorld')
$(selector).html('<b>HelloWorld</b>')
$(selector).val('HelloWorld') 设置一个input的值
$(selector).attr('href','www.baidu.com') 设置属性
也可以是用回调方法
$(selector).text(function(i,origText){return "newText"})
$(selector).attr("href", function(i,origValue){return 'www.baidu.com'}) //属性回调
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/jquery-3.2.1.min.js"></script>
</head>
<body> <p id="hid">origText</p>
<p id="pid"></p>
<input type="email" id="eid">
<a id="link" target="_blank"> </a>
<script>
$(document).ready(function () {
$("#hid").text(function (i,origText) {
console.log(i,origText);
return "New Text";
}); $('#pid').html('<b>Hello javascript</b>');
$('#eid').val('gearslogy@qq.com');
$('#link').attr('href',"http://www.baidu.com");
$('#link').text('baidu.com');
})
</script> </body>
</html>
2,添加移除方法:
append()
prepend()
after()
before()
移除:
remove() // 可能移除
$("p").remove(".italic");
添加class
$().addClass()
$().removeClass()
$().toggleClass()
/
Web从入门到放弃<6>的更多相关文章
- Web从入门到放弃<8>
Ref: Cameron D. - HTML5, JavaScript and jQuery (Programmer to Programmer) - 2015 http://www.runoob.c ...
- Web从入门到放弃<7>
从这章开始读<javascript高级程序设计> <1>typeof 返回字符串 / 类型 未定义:undefined 布尔:boolean 字符串:string 数值:num ...
- Web从入门到放弃<5>
<1> CSS_DOM 1,structural layer 2,presentation layer 3,behavior layer style也是一个属性 <!DOCTYPE ...
- Web从入门到放弃<1>
HTML大法: <01> <!DOCTYPE html> <html lang="en"> <head> <meta char ...
- Web从入门到放弃<4>
1,插入 如下html: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...
- Web从入门到放弃<3>
UI简单的美化全部来源于Bootstrap 知识来自<javascript dom编程艺术第二版> <1> 点击列表 页面不跳转图片刷新: 主要点: href如何点击完如何不 ...
- Web从入门到放弃<2>
<添加debug-toolbar> django现在1.11是必须这么做: pip install django-debug-toolbar 设置1: INSTALLED_APPS = [ ...
- 后端API入门到放弃指北
后端API入门学习指北 了解一下一下概念. RESTful API标准] 所有的API都遵循[RESTful API标准]. 建议大家都简单了解一下HTTP协议和RESTful API相关资料. 阮一 ...
- OpenStack从入门到放弃
OpenStack从入门到放弃 目录: 为何选择云计算/云计算之前遇到的问题 什么是云计算 云服务模式 云应用形式 传统应用与云感知应用 openstack及其相关组件介绍 flat/vlan/gre ...
随机推荐
- go笔记-限速器(limiter)
参考: https://blog.csdn.net/wdy_yx/article/details/73849713https://www.jianshu.com/p/1ecb513f7632 http ...
- 装饰器模式以及Laravel框架下的中间件应用
Laravel框架的中间件使用:从请求进来到响应返回,经过中间件的层层包装,这种场景很适合用到一种设计模式---装饰器模式. 装饰器模式的作用,多种外界因素改变对象的行为.使用继承的方式改变行为不太被 ...
- centos6.8 配置mysql赋予mysql远程连接权限
1.关掉防火墙 2.检查3306端口是否开放 3.修改用户用户权限 GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY '您的数据库密码' ...
- 解决import模块后提示无此模块的问题
最近在工作中发现一个奇怪的问题: 明明已经装上了,但是还提示找不到该模块,没办法,我又去site-package文件下面看了: 发现Linux下自带的python2.7里面装上了该模块(我在root用 ...
- Linux取代ifconfig指令的ip指令
- IIS部署ASP.Net Core 502.5错误和解决
在Win7的机器上部署ASP.Net Core程序,老是提示502.5错误. 已经安装了 Microsoft Visual C++ 2015 Redistributable .NET Core Win ...
- poj-2516（最小费用流）
题意:有n个商店,每个商店有k种货物,每个货物需要a[n][k]个,有m个仓库,每个仓库也有k种货物,每个货物有b[m][k]个,然后k个矩阵,每个矩阵都是n*m的,第i行第j列表示从仓库j到商店i每 ...
- dl,dt,dd标签的使用
dl就是定义一个列表 dt说明白了就是这个列表的标题dd就是内容,能缩进和UL,OL性质差不多 <dl> <dt>标题标题</dt> <dd>内容内容& ...
- win10应用商店打不开，错误代码0x80131500
我也突然遇到这个问题,一开始找各种方法也解决不了.然后在外网找到方法. 很多人只是把代理开了,只要关了就可以了.这点不累述,都会提到. 我的win10应用商店有两个错误代码0x80131500和0x8 ...
- 1.5分布式通讯框架-RMI
分布式通信框架-RMI讲解 什么是RPC Remote procedure call protocal RPC协议其实是一个规范.常用PRC框架:Dubbo.Thrif.RMI.Webservice. ...