<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()
/