JQuery 学习笔记

1.JQuery对象和DOM对象的相互转换

(1)、JQuery对象转换成DOM对象

        JQuery提供了两种方法将一个JQuery对象转换成DOM对象即[index]和get(index).

　　a、JQuery对象是一个数组对象，可以通过[index]的方法得到相应的DOM对象。

   eg：

  var $cr=$("cr");  //Jquery对象

   var cr=$cr[0];   //DOM对象

   alert(cr.checked)  //检测这个checkbox是否被选中了

      b、另一种方法是JQuery本身提供的，通过get(index)方法得到相应的DOM对象。

　eg：

var $cr=$("cr");   //Jquery对象
var cr=$cr.get(0);  //DOM对象
alert(cr.checked)  //检测这个checkbox是否被选中了

(2)、DOM对象转成JQuery对象

　　对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个Jquery对象了。方式为$(DOM对象)。

eg:

var cr=document.getElementById("cr");  //DOM对象
var $cr=$(cr);  //Jquery对象

通过以上方法，可以任意地相互转换JQuery对象和DOM对象。

2、JQuery选择器

　　Jquery选择器的写法与CSS选择器的写法十分相似，只不过两者的作用效果不同，CSS选择器找到元素后是添加样式，而Jquery选择器找到元素后是添加行为，但Jquery中涉及操作的部分比单纯的CSS功能更为强大，并且拥有跨浏览器的兼容性。

(1)、Jquery选择器的优势

　　a、简洁的写法

　　　　$("#id")用来代替document.getElementById()函数，即通过ID获取元素；$("tagName")用来代替document.getElementsByTagName()函数，即通过标签获取HTML元素；

　　b、支持CSS1到CSS3选择器

　　　　使用CSS选择器时，开发人员需要考虑主流浏览器是否支持某些浏览器。而在Jquery中，开发人员则可以放心地使用Jquery选择器而无需考虑浏览器是否支持这些选择器。

　　c、完美的处理机制

　　　　使用Jquery选择器不仅比使用传统的getElementById()和getElementsByTagName()函数简介的多，而且还能避免某些错误。看下面这个例子：

<div>test</div>
<script type="text/javascript">
document.getElementById("tt").style.color="red";
</script>

运行上面的代码，浏览器就会报错，原因是网是网页中没有id为"tt"的元素。

改进后的代码

<div>test</div>
<script type="text/javascript">
　　　　if(document.getElementById("tt")){

　　　　document.getElementById("tt").style.color="red";

　　　　}
</script>

这样可以避免浏览器报错，但如果操作的元素很多，可能对每个元素都要进行一次判断，大量的重复工作是我们感到厌倦，而Jquery在这个问题上的处理是非常不错的，即使使用Jquery获取网页中不存在的元素也不会报错，如下：

<div>test</div>
<script type="text/javascript">
  $("#tt").css("color","red");
</script>

需要注意的是$("#tt")获取的永远是对象，即使网页上没有此元素。因此当要用Jquery检查某个元素在网页上是否存在时，不能使用以下代码：

if($("#tt"))
{
  //do something
}

而应该根据获取到元素的长度来判断,eg:

if($("#tt").length>0)
{
  //do something
}
或者转化成DOM对象来判断，eg：
if($("#tt")[0])
{
  //do something
}

(2)a、基本选择器

b、层次选择器

可以使用next()方法来代替$('prev+next')选择器

eg：  $(".one+div");   等价于 $(".one").next("div");

可以用nextAll()方法来代替$('prev~siblings')选择器

eg:   $("prev~div");  等价于 $("#prev").nextAll("div");

c、1—基本过滤选择器

过滤选择器主要是通过特定的过滤规则来筛选出所需的DOM元素，过滤规则与CSS中的伪类选择器语法相同，即选择器都是以一个冒号(:)开头。按照不同的过滤规则，过滤选择器可以分为基本过滤，内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

d、内容过滤选择器

内容过滤选择器的过滤规则只要是体现在它包含的子元素或文本内容上。

e、可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素。

f、属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素。

g、子元素过滤选择器

子元素过滤选择器的过滤规则相对于其他的选择器稍微有些复杂，不过没关系，只要将元素的父元素和子元素分别清楚，那么使用起来也非常简单。另外还要注意它与普通的过滤选择器的区别.

：nth-child() 选择器是很常用的子元素过滤选择器，详细功能如下：

　　（1）:nth-child(even)能选取每个父元素下的索引值是偶数的元素。

　　（2）:nth-child(old)能选取每个父元素下的索引值为奇数的元素。

　　（3）:nth-child(2)能选去每个父元素下的索引值等于2的元素。

　　（4）:nth-child(3n)能选取每个父元素下的索引值是3的倍数的元素，(n从0开始);

　　（5）:nth-child(3n+1)能选取每个父元素下的索引值是(3n+1)的元素。(n从0开始);

注意：eq(index)只匹配一个元素，而:nth-child将为每一个符合条件的父元素匹配子元素。同时应该注意到nth-child(index)的index是从1开始的，而:eq(index)是从0开始的。同理:first和first-child,:last和last-child也类似.

h、表单对象属性过滤选择器

此选择器主要是对说选择的表单元素进行过滤，比如选择被选中的下拉框，多选框等等。

i、表单选择器

为了使用户能够更加灵活的操作表单，Jquery中专门加入了表单选择器。利用这个选择器，能极其方便地获取到表单的某个或某类型的元素.

(3)、在选择器中一些注意事项

a、选择器中含有“·”、“#”、“(”或“]”等特殊字符

根据W3C的规定，属性值中使不能包含这些特殊字符的，但在实际项目中偶尔会遇到表达式中含有“#”和“·”等特殊字符如果按照普通的方式去处理出来的话就会出错。解决此类错误的方法是使用转义符转义。

HTML eg：

<div id="id#b">bb</div>
<div id="id[1]">cc</div>
如果按照普通的方式来获取，例如：
$('#id#b');
$('#id[1]');
以上代码不能正确获取到元素，正确的写法如下：
$('#id\\#b'); //转义特殊字符"#"
$('#id\\[1\\]');//转义特殊字符"[]"