JQuery和html5总结

1、JQuery增删改查

1.工厂函数
$("");
$("#id");

2、兄弟关系
$("...").next()/prev()      紧邻的前一个或者后一个元素
$("...").nextAll/prevAll()    之前或之后的所有元素
$("...").siblings()        除自己外的所有兄弟

3、访问、修改属性
$("...").attr("属性名")      获取
$("...").attr("属性名",值)   访问

4、html()操作
读取或者修改节点的html内容
$("p").html()  获取<p>元素的html代码
$("p").html("<strong>你最喜欢的水果是？</strong>"); 设置p中的代码

5、text()
读取或修改节点的文本内容
$("p").text() 读取
$("p").text("你最喜欢吃的水果是"); 修改

6、val()
获取节点的value属性
$("input：eq(5)").val(); 获取第6个
$("input").val("xxx");   设置

7、样式修改
$("...").css("CSS属性名");     获取CSS样式
$("...").css("css属性名",值);  修改css样式
批量修改
$("...").hasClass("类名");
$("...").addClass("类名");
$("...").removeClass("类名");

8、添加
var $new = $("html代码片段")    创建
$("parent").append($new);      加入DOM树

9、删除
$("...").remove();
$("ul li:eq(1)").remove(); 将ul第二个li元素删除;
$("ul li").remove("li[title!=菠萝]"); 将满足要求的元素删除

2、JQuery事件

1、事件绑定
$("...").bind("事件类型",function(e){..});

$("...").bind("click",function(e){...})
简写形式: $("...").click(function(e){...})

2、事件对象e
e为事件对象，包含与事件相关的信息，也提供了可以影响事件在DOM中传递进程的一些方法。

事件对象记录事件发生时鼠标位置、键盘按键状态和触发对象等信息。
clientX/offsetX/pageX/screenX/X:事件发生的x坐标
keyCode：键盘事件中按下的键盘的值

3、html5

1、新结构
<header>
<nav>
<aside> <content>
<footer>

2、音频
支持.mp3 .wav .ogg格式音频文件
<audio src = "peppa.mp3" controls = "controls">
    浏览器不支持HTML5:audio
</audio>

3、视频
支持.mp4 .webm .ogg文件
<video id = "myVideo" width = "420">
    <source src = "course.mp4" type = "video/mp4"/>
    浏览器不支持HTML5:video
</video>
<button onclick = "playPause()">播放/暂停

<script>
 var v = document.getElementByld("myVideo");
 function playPause()
{
    if (v.paused)
    v.play();
     else
    v.pause();
}
</script>

4、绘图canvas
定义画布、设置画布样式、JS准备绘图上下文环境、JS绘图
<canvas id = "mycanvas" width = "860" height = "480">
浏览器不支持画布
</canvas>

#mycanvas{
    border: 1px solid black;
}

<script>
function draw(event){
    var canvas = documents.getElementById("myclass");
    var pen = canvas.getContext("2d");
    pen.moveTo(50,50);
    pen.lineTo(300,300);
    pen.lineWidth = 5;
    pen.strokeStyle = "red";
    pen.stroke();
}
window.onload=draw;
</script>