[随记]锋利的jQuery 第一章 认识jQuery

 

 

第一章 认识jQuery

 

1.3.2 编写简单的jQuery代码
在jQuery库中，$就是jQuery的一个简写形式，例如$("#foo")和jQuery("#foo")是等价的，$.ajax和jQuery.ajax是等价的。

//等待dom元素加载完毕
$(document).ready(function()
{
 //...
});

 类似于传统Javascript中的windows.onload方法。

 

 

 

 

1.3.3 jQuery代码效果图

<script type="text/javascript">
 var obj;
 
 //为所有class值为has_children的标签<div>添加鼠标点击事件
 $(".has_children").click(function()    
 {
  obj = $(this).addClass("highlight");  //添加CSS类highlight
  obj = obj.children("a");        //获取所有的子标签<a>
  obj.show();  //显示<a>标签

  obj = $(this).siblings().removeClass("highlight"); //移除CSS类highlight
  obj = obj.children("a");        //获取所有的子标签<a>
  obj.hide();  //隐藏<a>标签
 });
</script>

 

 

 

效果图:

 

1.4.1 DOM对象和jQuery对象简介
在jQuery对象中无法使用DOM对象任何方法。例如$("#id").innerHTML和$("#id").checked之类的写法都是错误的，可以通过$("#id").html()和$("#id").attr("checked")之类的jQuery方法来代替。
jQuery对象与DOM对象两者并不等价。

 

 

1.4.2 jQuery对象和DOM对象的相互转换
约定jQuery变量前加$。
var $variable = jQuery对象
var $variable = DOM对象

 

1. jQuery对象转成DOM对象
提供两种方法将一个jQuery对象转换成DOM对象，即[index]和get(index)。
例如：
var $cr = $("#cr");  //jQuery对象
var cr = $cr[0];  //DOM对象，通过[index]取得
var cr = $cr.get(0); //DOM对象，通过get(index)取得

 

2. DOM对象转成jQuery对象
对于一个DOM对象，只需要用$()把DOM对象包装起来，就可以获得一个jQuery对象了。方式为$(DOM对象)
var cr = document.getElementById("cr");  //DOM对象
var $cr = $(cr);       //jQuery对象

平时用到的jQuery对象都是通过$()函数制造出来的，$()函数就是一个jQuery对象的制造工厂。

 

1.4.3 实例研究
is(":checked")是jQuery中的方法，判断jQuery对象是否被选中，返回boolean值。