1、Jquery介绍与下载组件
Jquery 是什么?
jQuery 是一个“写的更少,但做的更多”的轻量级 JavaScript 库。
2、Jquery的引入与$的作用
<script type="text/javascript">
$(document).ready(function(){ $("button").click(function(){ $("p").hide(); });
});
</script>
举例:
<script>
$(document).ready(function(){
var video = $('#php100');
$("#play").click(function(){ video[0].play(); });
$("#pause").click(function(){ video[0].pause(); });
$("#go10").click(function(){ video[0].currentTime+=10; });
$("#back10").click(function(){ video[0].currentTime-=10; });
$("#rate1").click(function(){ video[0].playbackRate+=2; });
$("#rate0").click(function(){ video[0].playbackRate-=2; });
$("#volume1").click(function(){ video[0].volume+=0.1; });
$("#volume0").click(function(){ video[0].volume-=0.1; });
$("#muted1").click(function(){ video[0].muted=true; });
$("#muted0").click(function(){ video[0].muted=false; });
$("#full").click(function(){
video[0].webkitEnterFullscreen(); // webkit类型的浏览器
video[0].mozRequestFullScreen(); // FireFox浏览器
});
});
3、Jquery基础语法
基础语法是:$(selector).action()
$符号定义 jQuery
选择符(selector)HTML 元素
jQuery 的 action() 执行对元素的操作
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有
$(".test").hide() - 隐藏所有 class="test" 的段落
$("#test").hide() - 隐藏所有 id="test" 的元素
$(this) 当前元素
$("p") 所有
元素
$("input") 所有input元素
$(".intro") 所有 class=“intro” 的元素
$("p.intro") 所有 class="intro" 的元素
$("#intro") id="intro" 的第一个元素
$("ul > li") ul下的所有li节点
$("ul li:first") 每个li的第一个元素
- $("[href$='.jpg']") 所有带有以 ".jpg" 结尾的 href 属性的元素
$("div#intro .head") id="intro" 的元素中的所有 class="head" 的元素$(li[a:contains('Register')]") 内容包含Register的 元素
5、
Jquery事件器的介绍