Jquery学习---选择器与事件

总结一下jquery的相关技术。

jquery是对js的封装，也就是一个js的类库。它能够很好的操作dom元素，实现动画效果，实现ajax交互，很受开发者欢迎。我首先从选择器和事件说起。

一：Jquery选择器

1.元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。它就像我们平时使用的css选择器一样，#代表选择ID,.代表选择class。也可以直接采用元素名称选取，还可以逐级的选取。总之遵守css规范

I ID选择器：（$("#myId")）选择ID为myId的元素。

Class选择器：（$(".myClass")) 选择class为myClass的元素。

逐级选择 ：$("p.intro") 选取所有class="intro" 的 <p> 元素。

2.属性选择器

jQuery使用 XPath 表达式来选择带有给定属性的元素。

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

3.CSS选择器

jQueryCSS 选择器可用于改变 HTML 元素的 CSS 属性。

$("p").css("background-color","red");这个里面也可以是一组属性，一组属性的时候需要用花括号括起来。

最后注意$(this)是选择当前元素，也可以说当前获得焦点的元素，这个是很常见的一种用法。

二：Jquery事件

Jquery事件基本上是把js事件包装了一下，使它更简洁。这里需要注意的是，jquery事件是绑定到元素上去的，什么是绑定呢？这点你看看jquery事件的写法就知道了。比如：

[html]
view plaincopyprint?

<scripttypescripttype="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>

<scripttype="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>

这里面明明是button元素的单击事件，但是为什么最外面要写一个document.ready的事件呢？这里就是关键，jquery是在html页面加载完成后，将事件动态的绑定到一个dom元素上。而不是凭空写上去的。如果没有外层的$(function(){}）等同于ready事件，里面的click事件也不会执行的。

常用的jquery事件如下：

$(document).ready(function)	将函数绑定到文档的就绪事件（当文档完成加载时）
$(selector).click(function)	触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function)	触发或将函数绑定到被选元素的双击事件
$(selector).focus(function)	触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function)	触发或将函数绑定到被选元素的鼠标悬停事件