1.3.2编写简单的jQuery代码
①$是jQuery的简写
②$(“#foo”) = $(“#foo”)
③$.ajax = jQuery.ajax
④//DOM加载完毕时运行(类似于window.onload)
$(socument).ready(function(){
//…….
})
⑤window.onload 与 $(document).ready() 对比
Window.onload |
$(document).ready() |
|
执行时机 |
必须等待网页中所有的内容加载完毕后(包括图片)才能执行 |
网页中所有的DOM结构绘制完毕后就执行,可能DOM元素关联的东西并没有加载完毕 |
编写个数 |
不能同时编写多个(不能同时运行多个,后面的会覆盖前面的) |
能同时编写并执行多个代码段 |
简化写法 |
无 |
$(function(){ //…… }) |
1.4jQuery对象和DOM对象
1.4.1 jQuery对象和DOM对象简介
①DOM对象是通过JS中的getElementsByTagName 或者getElementById 来获取元素节点。
②jQuery对象就是通过jQuery包装DOM对象后产生的对象
例:$(“#foo”).html(); //获取id为foo的元素内的html代码(.html()是jQuery里的方法)
等同于:document.getElementById(“foo”).innerHTML; //js原生代码
1.4.2jQuery对象和DOM对象的相互转换
①相互转换前,先约定好定义变量的风格
var $variable = jQuery对象
var variable =DOM对象
1.jQuery对象转成DOM对象
一般来说jQuery对象不能使用DOM中的方法,但是不得不使用DOM对象的时候,有2种方法处理:
(1)jQuery对象是一个数组对象,可以通过[index]的方法得到相应的DOM对象。
var $cr = $(“#cr”); //jQuery对象
var cr = $cr[0]; //DOM对象
alert(cr.checked) //检测这个checkbox是否被选中
(2)另一种方法是jQuery本身提供的,通过get(index)方法得到相应的DOM对象
var $cr = $(“#cr”);
var cr = $cr.get(0);
alert(cr.checked)
2.DOM对象转成jQuery对象
对于一个DOM对象,只需用$把DOM对象包装起来,就可获得jQuery对象。//$(DOM对象)
var cr = document.getElementById(“cr”); //DOM对象
var $cr = $(cr); //jQuery对象
*平时用到的jQuery对象都是通过$()函数制作出来的。