jQuery学习-基本使用

jQuery是什么?

jQuery是javascript Query的缩写,它是javascript库。

jQuery库类型有两种,一种是未经压缩的开发版(jquery.js)大小大概200多KB,供测试、学习、开发使用;另一种经过压缩的生产版(jquery.min.js),经工具压缩过主要用于生产环境中。

jQuery库中$是jQuery的一种简写形式如$(“#info”)与jQuery(“#info”)是等价的,$.ajax()与jQuery.ajax()是等价的。

$(document).ready(function(){})是什么鬼?

$(document).ready(function(){
//… 
 });

这个与javascript中的window.onload方法类似,不过有区别。在该函数内部的所有代码都将在整个DOM加载完毕后,页面所有元素加载完毕前执行。

对比
  window.onload $(document).ready(function())
执行时间 页面所有元素加载完成时执行 页面DOM元素检测完毕后执行,可能DOM内容还没有加载完成
个数 一个HTML中只能有一个 window.onload 一个HTML页面中可以有多个$(document).ready(function{})
缩写   $(function{
})

jQuery对象和DOM对象

DOM对象

DOM(Document Object Model)文档对象模型,HTML中的标签就是DOM元素节点,所以一个DOM就可以表示成一颗树。DOM对象可以javascript的getElementByid()或者getElementByTagName()获取,这样得到的对象就是DOM对象。

jQuery对象

jQuery对象:是jQuery特有的,通过jQuery包装后的DOM对象。
DOM 对象与jQuery对象只能调用各自的方法,不能混用,比如:
document.getElementById("info").innerHTML是DOM对象获取id为info的html。$("#info").html()是jQuery通过jQuery对象获取id为info的html。

jQuery对象转换成DOM对象

jQuery提供两种方法转换成DOM对象。
var jo = $("#id");
通过下表法[index]
var do = jo[0];
通过get(index)

var do = jo.get(0);

DOM对象转换成jQuery对象

直接使用$()包裹DOM对象
var do = document.getElement("id");
var jo = $(do);

解决jQuery冲突

可能在一个HTML中引用多种javascript库。而jQuery库中几乎所有的插件都被限制在命名空间中,这时可能其他的js库的命名空间也实用$命名空间,比如prototype.js。
jQuery.noConflict();//将$命名空间交出
这之后就直接使用jQuery代替$,也可以自定义名字
var $j = jQuery.noConflict();这样之后的jQuery就可以使用$j代替$了。

猜你喜欢

转载自blog.csdn.net/colin_yjz/article/details/50162143
今日推荐