嘿！宝儿萌，这里是阿木木，一周没更粉丝数目还是在继续增长，非常感谢大家对我的文字的喜爱，但是有个情况要跟宝儿萌说明一下，木木这个学期学业压力非常大，可能以后的博客会少一些幽默化的语句，但是每周学到的HTML5的知识点都会及时跟大家进行分享，实在抱歉~

（需要下载代码配套看，因为涉及到jQuery）

1 jQuery导入与查询结果：jQuery对象

jQuery的作用：找到DOM对象(们)、改变属性、增删子元素、处理事件。

jquery.js jQuery 文档组织得非常之好！

$()与jQuery(); 三种参数：html片段，查询串，函数

jQuery对象：jQuery查询所返回的对象。与DOM对象不同！

$(‘p’);

console.log($(‘body’));

console.log($(‘body’)[0]);

console.log($(‘#p1’));

console.log($(‘p’));

getter()与setter()，例如 .html(‘<h3>heading3</h3>’); .html();

其他：val() attr() css() text()

<!--jQuery初步-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>1_base</title><script src="jquery.js"></script></head><body><h1>远与近</h1><p>你，</p><p>一会看我，</p><p> 一会看云。</p><p>我觉得，</p><p>你看我时很远，</p><p>你看云时很近。</p><hr><div id="div1"><p id="p1">夜色为墨</p><p id="p2">缀以星光点烁</p><p id="p3">配那月光脉脉</p><p id="p3">满城灯火也不过给你做衬托</p></div><hr><script>//$的第一种参数————选择器//$的作用1：查找DOM对象，此时$函数的参数是选择器console.log($('p')); //调用$函数，找到所有的p元素，在F12中的console中显示//返回的东西是一个类数组，点击左侧小三角会将每一个p的具体情况展示出来，还会显示类数组中p的个数//并且最下面还有Prototype,点击左侧小三角，会将jQuery中的每一个具体的函数都展示出来//$的作用2：改变DOM对象的属性，此时$函数的参数是选择器$('p').css('color','blue'); //找到该元素并且改变其属性（直接作用于所有元素）,第一个参数是属性，第二个参数是属性值//$的第二种参数————一串html片段$('<h2>今天是浪漫的爱情诗专题哦~</h2>').appendTo('body'); $('<h1>宝儿萌，这里是阿木木！</h1>').prependTo('body');$('<h4>一封只敢在这里写的情书：</h4>').prependTo('#div1'); $('<h5>——木木致所爱~</h5>').appendTo('#div1'); //这里面参数是一串html片段，即一个h2元素//appendTo添加到body的最后面//prependTo加到body的最前面去//修改appendTo/prependTo函数的参数，变为#+id的语法形式，会加到id之中/id的前面，例如这里面的#div1//$的第三种参数————函数$(function(){alert("少年情怀总是诗……");}); //DOM tree已经建立完成之后，即相当于document.ready()/window.onload事件发生之后，就会显示该弹窗var $p=$('p'); //$p是jQuery对象(即$('p')的返回值)，如果带有$的话，自动默认为jQuery对象，和DOM对象不一样console.log($p); //这里面在F12中显示的是jQuery对象，和34行一致var $d=$('#div1'); console.log($d);  //console输出jQuery元素，可以理解为jQuery元素在DOM元素外面封装了一层，继承了jQuery.js所包含的函数console.log($d[0]);  //console输出DOM元素，相当于脱去了jQuery元素的外层，利用数组取值的具体做法，完成了从jQuery对象转化为DOM对象var dom1 = $d[0] //这里设置了一个DOM对象dom1var $d1 = $(dom1);//用DOM对象作为参数，调用$函数，返回值是jQuery对象，完成了从DOM对象转化为jQuery对象console.log($d1);//和61行输出保持一致/*获取/设置元素的值 ：getter()（获取属性方法）与setter()（设置属性方法）语法举例：获取属性：.html(); 设置属性：.html('<h3>heading3</h3>');*///获取元素的值var p1 = $('#p1').html(); //获取html中id值为p1的元素，返回值为DOM对象console.log(p1); //输出获取的id值为p1的元素的具体内容（DOM对象）console.log($('#p1')[0].innerHTML); //输出效果与前一行相同,把jQuery对象转化为DOM对象之后，然后再利用innerHTML再获取//修改元素的值$('#p2').html('<span style="color:red;">缀以</span>星光点烁')  //在html中设置参数，改变#p2原来的内容，并且将参数识别为html代码$('#p3').text('<span style="color:red;">配那</span>月光脉脉')//在html中设置参数，改变#p3原来的内容，但是将参数识别为text文本/*val(),针对表单元素进行获取或修改，文本框之类的attr(),针对html的属性进行获取或修改css(),改变css属性text(),将html的代码直接显示出来*/</script><!--1 jQuery导入与查询结果：jQuery对象（1）js的库一般就是指js文件，把文件下载之后即可使用在这里我们选择jquery库    https://jquery.com/  文档组织得非常之好！引用jquery库的代码：<script src=”jquery.js”></script>（2）jQuery的作用：找到DOM对象(们)、改变属性、增删子元素、处理事件。（3）$()是jQuery()的简写形式; 可以往里传三种参数：html片段，查询串（选择器），函数（4）jQuery对象：jQuery查询后所返回的对象。与DOM对象不同，注意区分！！！区分： $(‘p’); //返回jQuery对象console.log($(‘body’)); //在console中显示jQuery对象console.log($(‘body’)[0]);//在console中显示DOM对象（5）getter()（获取属性方法）与setter()（设置属性方法）例如 .html(‘<h3>heading3</h3>’)（括号里有参数，此处为设置属性方法）.html(); (括号里无参数，此处为获取属性方法)其他：val()  attr()  css()  text()--></body>
</html>

2 选择器

#id

.class

[attr]

[attr=abc] ^= $= *= != ~= |=

:button（按钮） :radio（单选） :checkbox（检查框） :checked（已经选中的检查框） …

:eq(n)（选择第几个元素）

:first （第一个元素）

:odd （单数）

组合： A B

A, B

A > B

<!--选择器参数-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>2_selector</title><script src="jquery.js"></script><script>$(function(){ //为了保证代码块正常执行，最好是将一个匿名函数传到$的参数之中，然后再在该匿名函数中写各种jQuery代码$('.pc').css('color','red'); //类选择器$('[data-cmd="big"]').css('color','blue'); //属性选择器//属性选择器在超级链接中的应用$('a[href^=http]').css('color','white'); //这里是设置以http开头的超级链接的css属性$('a[href^=http]').css('background-color','black');//注意每一行只能设置一条css属性//data-cmd="big"中双引号可以不写//颜色交替效果$('h2:odd').css('background-color','#fcc'); //设置奇数背景色$('h2:even').css('background-color','#cfc'); //设置偶数背景色});</script></head><body><p class="pc">悟已往之不谏</p><p class="pc">知来者之可追</p><p data-cmd="big">实迷途其未远</p> <!--自定义一个data-cmd属性--><p>觉今是而昨非</p><a href="1_base.html">复习复习前面的内容？</a><a href="https://www.bilibili.com/video/BV1qt411j7fV?spm_id_from=333.999.0.0">坚持做自己喜欢的事！</a><a href="https://www.bilibili.com/video/BV1yt4y1Q7SS/?spm_id_from=333.788.recommend_more_video.3">翻译翻译万恶之源</a><h2>我想蘸取山林秀色为你长书一卷</h2><h2>奈何山浓林深也不比你眉眼清浅</h2><h2>我总把你的名字当做可以肆意玩笑的消遣</h2><h2>因为闲时到了嘴边能想起来的只有你的模样</h2><!--2 选择器（1）#id id选择器，前一个代码文件已经提及（2）.class 类选择器（3）[attr] 属性选择器，可以根据属性的值进行进一步筛选[attr=abc] ^=（以……为开始） $= *= != ~= |=（4）伪类选择器：:button（按钮） :radio（单选） :checkbox（检查框） :checked（已经选中的检查框） …:eq(n)（选择第几个元素也可以在（）里面写first，second，odd等）:first （第一个元素）:odd （单数）:even（偶数）（5）元素关系A B：A当中所有的后代元素BA，B：与A具有并列关系的BA>B: A当中所有的子元素B--></body>
</html>

3 修改文档内容与结构

创建元素指定元素属性

添加元素到指定位置

删除元素

移动元素

<!--修改文档内容和结构-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>3_changing</title><script src="jquery.js"></script><script>$(function(){//创建元素$('<h2>因为天才生来孤独</h2>').appendTo('#left');$('<h2></h2>',{text:'不疯魔不成活',style:'color: red;'}).appendTo('#right'); //可以在第二个参数中设置{}的形式，改变第一个参数的多种属性//这里面的text就相当于在<h2></h2>之间添加的内容//删除元素$('#left1').remove();//移动元素$('#right1').appendTo('#left'); //把right1移动到left之中});</script></head><body><table border="1"> <tr><td id="left"><p id="left1">天才在左</p></td><td id="right"><p id="right1">疯子在右</p></td></tr></table></body>
</html>

4 事件处理

$(function(){…}) == $(document).ready(function(){…});

<!--事件处理-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>4_dealing</title><script src="jquery.js"></script><script>$(function(){$('p').click(function(){ //当点击p时触发匿名函数console.log(this);  //this指向用户当前点击的段落，是个DOM对象var $me = $(this); //把this变为jQuery对象console.log($me); alert($me.text()); //点击之后能以对话框的形式弹出所选择段落的文本});//点击之后能以对话框的形式弹出所选择段落的文本的另一种方式$('p').bind('click',function(){ //事件绑定alert(this.innerHTML);  //点击函数的另一种设置方法});  $('p').unbind('click');//取消事件绑定,让点击函数不再生效//$(function(){……}) == $(document).ready(function(){……});//（上面那个是本代码中主要的语法结构，后面的是完整版）//目前点击无效果是因为第21行将所有的点击效果都取消了//如果注释掉第21行，点击段落之后，会弹出两次弹窗显示两次，因为我们使用了两种方法进行了实现});</script></head><body><p>抬头望天，不见繁星闪烁</p><p>却有浪潮奔涌而来</p><p>远望，山河远阔，有你走过的路</p><p>回头，泪眼婆娑，无我爱过的人</p><p>爱意随风起，只可惜风过不留痕</p></body>
</html>

5 工具函数

$.each()

$.inArray()

$.trim()

<!--工具函数-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>5_tool_function</title><script src="jquery.js"></script><script>//$.inArray()var a=[1,4,5,6];  var has = $.inArray(5,a); //inArray的返回值元素在数组中的索引，如果没有返回-1console.log(has);//$.trim()：去掉\t \r \nvar s = "    abc\n\n\n";console.log(s); //有空格有换行console.log($.trim(s));  //无空格无换行//$.each();$.each(a,function(){ //遍历数组或者类数组元素console.log(this.toString());  //for循环的简写版本//上一行如果没有toString，则会显示this，也就是Number（）(这里面才是具体数字)//如果加了toString，则就会正常显示数字});//对段落逐步做出处理$(function(){ //如果不加外面的匿名函数，直接用$('p').each(function()，会导致没有效果//因为p的设定是在该语句的后面   var temp = 1; $('p').each(function(){ //遍历每一个段落，for循环console.log(this); //将每一个段落在console中显示//在段落前面加上段落编号，相当于小学的标自然段hhhh$('<span>',{text:temp,'class':'seq-num'}).prependTo(this); //如果改为appendTo则会在段落后面进行标号temp++;});});</script><style>.seq-num{  /*css代码，对段落标号进行格式设置，采用以类做选择器的形式*/display: inline-block;  /*使元素变为行内函数，并且拥有块元素的性质，即可以设置边框和大小*/margin-right: 1em; /*右边框*/color: red;}</style></head><body><p>When you are old 当你老了</p><p>When you are old and grey and full of sleep, 当你老了，头发花白，睡意沉沉，</p><p>And nodding by the fire，take down this book, 倦坐在炉边，取下这本书来，</p><p>And slowly read,and dream of the soft look 慢慢读着，追梦当年的眼神</p><p>Your eyes had once,and of their shadows deep; 你那柔美的神采与深幽的晕影。</p><p>How many loved your moments of glad grace, 多少人爱过你昙花一现的身影，</p><p>And loved your beauty with love false or true, 爱过你的美貌，以虚伪或真情,</p><p>But one man loved the pilgrim Soul in you 惟独一人曾爱你那朝圣者的心，</p><p>And loved the sorrows of your changing face; 爱你哀戚的脸上岁月的留痕。</p><p>And bending down beside the glowing bars, 在炉罩边低眉弯腰，</p><p>Murmur,a little sadly,how Love fled 忧戚沉思，喃喃而语，</p><p>And paced upon the mountains overhead 爱情是怎样逝去，又怎样步上群山，</p><p>And hid his face amid a crowd of stars. 怎样在繁星之间藏住了脸。</p></body><!--工具函数：为拓展js工具库提供的通用功能1.$.inArray(5,a); //查找元素时常用，inArray的返回值元素在数组中的索引，如果该元素在数组中无法找到，将返回-12.$.trim(); //去掉前后的空格、tab、换行和回车（空白字符）3.$.each(); //遍历jQuery对象中的内容-->
</html>

6 动画效果

<!--动画效果-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>6_animation_effect</title><style>.blk{display: inline-block; /*成块但是不分段元素*/width: 200px;height: 200px;background-color: black;margin: 10px; /*边框设置*/color: white;font-size: 3em; /*字体大小设置*/text-align: center; /*文本居中*/cursor: pointer;/*光标选用手的形状*/}</style><script src="jquery.js"></script><script>$(function(){ //一定要放在匿名函数中$('#d1').click(function(){$(this).slideUp('slow'); //点击时缓慢隐藏掉});$('#d2').click(function(){$(this).slideUp('fast'); //点击时快速隐藏掉});$('#button_toggle').click(function(){//$('#d3').slideToggle(); //id选择器千万别忘了前面的#//被注释的第一行代码的作用：//点击按钮会使d3消失，再次点击d3就会回来，有滑动效果$('#d3').toggle();  //点击按钮会使d3消失，再次点击d3就会回来，取消滑动效果});});</script></head><body><p><button id="button_toggle">点我试试？</button></p><div id="d1" class="blk">黑白</div><div id="d2" class="blk">救赎</div><div id="d3" class="blk">生日快乐</div></body>
</html>

7 jQueryUI：js文件与皮肤(CSS文件)

$(‘button’).button();

Chrome中查看元素样式

<!--jQuery_UI-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>7_jQuery_UI</title><link rel="stylesheet" type="text/css" href="jqui/smoothness/jquery-ui-1.10.0.custom.min.css"><link rel="stylesheet" type="text/css" href="jqui/ui-lightness/jquery-ui.min.css"> <!--引入css文件进行换皮肤，谁天天顶这个原皮编程呀--><!--这里引入了两个css文件，前一个js文件会被后一个js文件所替换掉，两款皮肤任你选择--><script src="jquery.js"></script><script src="jqui/jquery-ui.min.js"></script><!--注意要先导入jquery.js，后导入jqui/jquery-ui.min.js--><script>$(function(){$('#button1').button().click(function(){$('<h2>',{text:'孤寡木教你谈恋爱'}).dialog(//在dialog的括号里面传入参数，可以改变对话框,不同的参数用逗号隔开{title:'木木的爱情观', //在对话框上设置标题buttons:{ //在对话框上设置选项'OK':function(){$(this).dialog('close'); //点击OK后关闭对话框//this 是指当前作用的对象},'cancel':function(){$(this).dialog('close'); //点击cancel后关闭对话框}}});});//.button()改变了一个按钮的外观,具体换成那个皮肤要看最后引入的是哪一个css文件//.click(function()设置点击事件匿名函数，点击之后就会调用匿名函数,这里点击后就会弹出一个对话框});</script></head><body><p><button>点我！</button></p><p><button id="button1">不行！你要点我！</button></p><p>真爱的光芒照亮所有不真实的自我，为的是让不真实的自我被看见、被转化和被疗愈</p><p>绝无仅有的结合了各不相容的三者：妻子、情人、朋友</p><p>我们分担寒霜、风雷、霹雳；我们共享雾霭、流岚、红霓，仿佛永远分离，却又终身相依</p><p>万物生机勃勃，我遂能生机勃勃；我无须移动即可看到一切，在你的生命中我看到一切生命</p><p>友谊意味着两个人和世界，爱情意味着两个人就是世界</p><p>仿佛你是在我的心上走动，一路散播着星星和鲜花</p><p>成熟的爱是保持个人完整、独立的同时合成整体。合二为一，却又一分为二，这就是相爱的悖论</p><p>爱情就是把宇宙缩减到一个人，把唯一的一个人扩张到上帝</p><p>我说不出来为什么爱你，但我知道，你就是我不爱别人的理由</p></body><!--jQuery做的更多的是基础性的事情。例如怎么找到元素、怎么修改其属性、怎么处理事件jQuery_UI更多能实现网络中的交互内容，渐进地增强html的外观-->
</html>

8 jQueryUI TAB 分页控件

$( function() {

$( "#tabs" ).tabs();

} );

<ul>

<li><a href="#tabs-1">Nunc tincidunt</a></li>

<li><a href="#tabs-2">Proin dolor</a></li>

<li><a href="#tabs-3">Aenean lacinia</a></li>

</ul>

<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>

</div>

<p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>

</div>

<p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>

<p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>

</div>

<!--jQuery_UI_tabs-->
<!--代码来自于jQuery的网页文档-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>8_jQuery_UI_tabs</title><link rel="stylesheet" type="text/css" href="jqui/ui-lightness/jquery-ui.min.css"> <script src="jquery.js"></script><script src="jqui/jquery-ui.min.js"></script><script>$( function() {$( "#tabs" ).tabs();  //标签，可以实现分块显示} );</script></head><body><div id="tabs"><!--无序列表--><ul>  <li><a href="#tabs-1">人间绝句</a></li><li><a href="#tabs-2">相思入骨</a></li><li><a href="#tabs-3">江湖夜雨</a></li></ul><!--超级链接中如果有#，指的是链接到网页的片段--><!--每一页的内容放在div之中--><div id="tabs-1"><p>且将新火试新茶,诗酒趁年华</p><p>醉后不知天在水,满船清梦压星河</p><p>十年生死两茫茫,不思量，自难忘</p><p>最是人间留不住，朱颜辞镜花辞树</p><p>玲珑骰子安红豆，入骨相思知不知</p><p>我见青山多妩媚,料青山见我应如是</p><p>桃李春风一杯酒，江湖夜雨十年灯</p></div><div id="tabs-2"><p>别后唯所思，天涯共明月</p><p>金风玉露一相逢，便胜却人间无数</p><p>山无棱，江水为竭，冬雷震震</p><p>夏雨雪，天地合，乃敢与君绝</p><p>庭有枇杷树，吾妻死之年所手植也，今已亭亭如盖矣</p><p>取次花丛懒回顾，半缘修道半缘君</p></div><div id="tabs-3"><p>兴酣落笔摇五岳，诗成笑傲凌沧洲</p> <p>大梦谁先觉，平生我自知</p><p>为有牺牲多壮志，敢教日月换新天</p>    <p> 笔落惊风云，诗成泣鬼神</p>  <p>道之所在，虽千万人逆之，吾往矣</p>     </div></div></body>
</html>

9 jQueryUI DIALOG 弹出对话框

$(…).dialog({…});//渐进式增强 CSS Js增强已有的HTML代码

$(…).dialog(‘close’);

对话框属性：

title:

modal://模态，关闭才能继续使用其他功能；非模态

width:

height:

buttons:{

‘OK’:function(){…}

}

演示例子：基本的登录对话框

<!--对话框-->
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>9_jQuery_UI_DIALOG</title><link rel="stylesheet" type="text/css" href="jqui/ui-lightness/jquery-ui.min.css"> <script src="jquery.js"></script><script src="jqui/jquery-ui.min.js"></script><script>var accounts=['202011010098-peking683','zzz-html5'];  //存入用户:账户-密码$(function(){$('#dlg1').dialog({title:'登录',wigth:400,height:300,modal:true,//模态，关闭才能继续使用其他功能buttons:{  //设置对话框的按钮'确认':function(){var name=$('#name').val(); //获取id=name的输入框的内容var pwd=$('#pwd').val(); //获取id=pwd的输入框的内容if($.inArray(name+'-'+pwd,accounts)>=0){  //inArray函数：如果第一个参数能够在第二个参数（数组）中找到，返回这个参数的索引值//如果找不到，返回-1$(this).dialog('close');}else{$('#msg').text('用户名或密码错误');//如果输入错误，找到对应id为msg的div，显示文本}}}}); //以对话框的形式弹出，此时dialog的变量是js对象//在大括号里面可以设置高度宽度，是否模态});</script></head><body><h1>一个简单的登录界面</h1><div id="dlg1" style="width: 1px;height: 1px;overflow: hidden;"><!--修改长宽为一个像素，溢出部分（overflow）隐藏掉--><div><span>用户名：</span><input id="name"></div><div><span>密码：</span><input id="pwd" type="password"></div><div id="msg" style="color: red;"></div>  <!--输入错误提示框--></div></body><!--$(…).dialog({…});//渐进式增强  CSS Js增强已有的HTML代码$(…).dialog(‘close’); //关闭对话框设置对话框属性：title:modal://模态，关闭才能继续使用其他功能；非模态,可以继续使用其他功能width:height:buttons:{‘OK’:function(){…}}-->
</html>

好啦，今天的分享就到这里啦，我们下周再见~

翻译翻译什么叫HTML5（四）jQuery——给我的网页换个小皮肤相关推荐

HTML5与jQuery实现渐变绚丽网页图片效果
HTML5与jQuery如何实现渐变绚丽网页图片效果呢?通过HTML5和jQuery创建一个灰度/彩色的实现绚丽渐变效果.在HTML5出现之前,要想实现此类似渐变效果,需要彩图和灰度图像 ...
HTML5+PHP+jQuery手机摇一摇换衣
在上一篇文章中,我们了使用HTML5可以侦听到手机晃动从而实现摇一摇效果.手机摇一摇可以应用到很多场景中,如摇一摇换抽奖,摇一摇搜歌等.本文我将给大家介绍如何使用HTML5+PHP+jQuery实现手 ...
基于html5拖(drag)放(drop)实现换装小游戏
编码环境:asp.net mvc3 html5 运行环境:firefox浏览器通过. 一:有关html5的拖放功能,网上介绍的一大把,我将自己学习到的知识点总结如下: 1:全局属性draggable ...
翻译翻译什么叫HTML5（六）“开门，js来查水表啦”
嘿,宝儿萌,这里是阿木木,这是一篇究极精炼的blog,全是干货莫得感情,主要是木木这周要连发两篇,所以只能稍微敷衍一下啦~(翻译翻译什么叫HTML5(五)被我吃了(×)别催了,过两天就更(√)) 1. ...
翻译翻译：什么叫架构？
以下文章来源方志朋的博客,回复"666"获面试宝典作者:Yrion | 链接:cnblogs.com/wyq178/p/12151160.html 这个知识分享的爆炸时代,鉴于 ...
ubuntu20.04中安装划词翻译_教你轻松玩转免安装的网页翻译插件“有道网页翻译2.0”...
大家在日常网页浏览中肯定多多少少都会碰到英文网站,这时候往往需要花费非常多的时候去自行理解,效率低下,又或者借助浏览器自带的翻译功能进行翻译,但又可能遇到翻译不准的情况. 现在这个问题可以解决啦!&q ...
翻译翻译，什么叫他妈的惊喜？
翻译翻译,什么叫他妈的惊喜? 本随笔文章,由个人博客(鸟不拉屎)转移至博客园发布时间: 2018 年 10 月 11 日原地址:https://niaobulashi.com/archives/N ...
翻译翻译什么TMD叫EXPLAIN
翻译翻译什么TMD叫EXPLAIN 你给翻译翻译,什么叫惊喜,什么他妈的叫惊喜! --<让子弹飞> 哈喽,大家好,我是一条,一个梦想弃码从文的程序员! 先跟大家补一个元旦快乐!新年新气 ...
轻松学会python面向对象第3篇---翻译翻译，什么叫对象
黄四郎承诺三天后要给县长大人一个惊喜,马县长并不买账,逼师爷翻译,什么叫惊喜,我就叫你翻译翻译,什么TM的,叫TM的惊喜. 现在,你学了面向对象了,请翻译翻译,什么叫对象.有人告诉你,在python中 ...
计算机病毒英文文献,计算机病毒外文翻译翻译英文外文外文翻译计算机病毒外文翻英文文献计算机.doc...
计算机病毒外文翻译翻译英文外文外文翻译计算机病毒外文翻英文文献计算机广西工学院鹿山学院外文翻译题目: 计算机病毒系别: 计算机工程系专业班级: 计软082班姓名: 周政学号: 指 ...

翻译翻译什么叫HTML5（四）jQuery——给我的网页换个小皮肤

1 jQuery导入与查询结果：jQuery对象

2 选择器

3 修改文档内容与结构

4 事件处理

5 工具函数

6 动画效果

7 jQueryUI：js文件与皮肤(CSS文件)

8 jQueryUI TAB 分页控件

9 jQueryUI DIALOG 弹出对话框

翻译翻译什么叫HTML5（四）jQuery——给我的网页换个小皮肤相关推荐

最新文章

热门文章