标签:
jQuery库
轻量级的JavaScript库
核心依然是JavaScript
不仅兼容了CSS3,还兼容各种浏览器(IE、Chrome、Firefox)
优点:
容易上手
强大的选择器
解决浏览器的兼容
完善的事件机制
出色的Ajax封装
丰富的UI
特点(特殊之处):
链式操作
回调函数
迭代器
延迟对象
队列
......
注意 jQuery 分 2 个系列版本 1.x 与 2.x,主要的区别 在于 2.x 不再兼容 IE6、7、8 为移动端而优化
,由于减少了一些代码,使得该版本比 jQuery 1.x 更小且更快。
如果开发者比较在意老版本 IE 用户,只能使用 jQuery 1.9 及之前的版本了。
* jQuery对象和DOM对象是不一样的
* 1.分清楚哪些是jQuery对象,哪些是DOM对象
* 2.两者间的相互转换
* 3.通过jQuery方法包装后的对象,是jQuery对象,它是一个新的对象
* 4.jQuery与DOM对象完全不是同一个东西,但是又很相似,因为他们都能处理DOM
* 5.通过jQuery处理DOM的操作,可以让开发者更专注业务逻辑的开发,
* 而不需要我们具体知道哪个DOM节点有那些方法,也不需要关心不同浏览器的兼容问题,
* 我们可以通过jQuery更友好的API进行开发,同时代码也会更加精短
1 /** 2 * 获取页面上这个id为demo的p元素, 3 * 然后给这个文本节点增加一段文字:“这是一个demo”, 4 * 并且让文字颜色变成红色。 5 * */ 6 //普通处理 7 //通过原生DOM模型提供的document.getElementById()方法获取的DOM元素就是DOM对象 8 //通过DOM方法innerHTML和DOM属性style处理文本与颜色 9 var p = document.getElementById(‘demo‘); 10 p.innerHTML = ‘这是一个demo‘; 11 p.style.color = ‘red‘;
/********************************************/
1 //jQuery处理 2 //通过$()方法会得到一个jQuery对象 3 //$p是一个类数组的对象,包含DOM对象的信息和封装的很多操作方法 4 //$p调用jQuery对象的html()和css()方法 5 var $p = $(‘#demo‘); 6 $p.html(‘这是一个demo‘).css(‘color‘, ‘red‘);
jQuery对象转化成DOM对象:
([红字]jQuery是一个类数组对象,DOM对象就是一个单独的DOM元素,多个的DOM元素是不能
进行直接使用DOM的属性和方法操作的,否则会报错不能执行,要操作只能取得单一的一个DOM
元素对象进行操作。)
(***************************************)
1 var divs = document.getElementsByTagName(‘div‘); 2 divs.style.color = ‘blue‘; 3 //会报错,而且不执行 4 //报错内容:Uncaught TypeError: Cannot set property ‘color‘ of undefined 5 6 var divs = document.getElementsByTagName(‘div‘); 7 divs[1].style.color = ‘blue‘; 8 //不报错,且执行 9 10 var divs = document.getElementsByTagName(‘div‘); 11 divs[0].onclick = function () { 12 alert(‘aaa‘); 13 }; 14 //正确,执行了 15 16 var divs = document.getElementsByTagName(‘div‘); 17 divs.onclick = function () { 18 alert(‘aaa‘); 19 }; 20 //不报错,也不执行
(***************************************)
1.利用数组下标的方式读取到jQuery中的DOM对象
1 <div>元素1</div> 2 <div>元素2</div> 3 <div>元素3</div>
1 //利用数组下标把jQuery对象转化成DOM对象 2 var $div = $(‘div‘); // jQuery对象 3 var div1 = $div[0]; // 转化成DOM对象 4 div1.style.color = ‘red‘;
2.通过jQuery自带的get()方法
1 //通过jQuery自带的get()方法把jQuery对象转化成DOM对象 2 var $div = $(‘div‘); // jQuery对象 3 var div1 = $div.get(0); // 转化成DOM对象 4 div1.style.color = ‘red‘;
DOM对象转化成jQuery对象
$(DOM)
通过$(dom)方法将普通的dom对象加工成jQuery对象之后,我们就可以调用jQuery的方法了
1 //DOM对象转化成jQuery对象 2 //通过getElementsByTagName获取到所有div节点的元素,结果是一个dom合集对象,不过这个 3 对象是一个数组合集(3个div元素)。 4 var divs = document.getElementsByTagName(‘div‘); 5 divs[1].style.color = ‘blue‘; 6 var $divFirst = $(divs).first();//把DOM对象转化成jQuery对象,就可以调用jQuery对象的方法了 7 $divFirst.css(‘color‘, ‘red‘);
标签:
原文地址:http://www.cnblogs.com/lqcdsns/p/5268620.html