JQuery语法、选择器、事件器

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" 的元素

4、Jquery选择器的各种用法

$(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的 元素
• $("input[@name=bar]") name是bar的元素
  $("input[@type=radio][@checked]") type是radio的元素
  $(“li”).not(“ul”) li下没有包含ul节点的节点元素
  $("span[@id]") 包含id属性的元素
  $("[@id=span1]") id为span1的节点元素
  

5、 Jquery事件器的介绍

$(selector).click() 被选元素的点击事件
$(selector).dblclick() 被选元素的双击事件
$(selector).focus() 被选元素的获得焦点事件
$(selector).mouseover() 被选元素的鼠标悬停事件
$(selector).css(); 被选元素的CSS事件
$(selector). hide(); 被选元素的隐藏事件
$(selector). show('slow'); 被选元素的显示事件