Jquery 详解
Jquery 详解
JavaScript 库作用及对比
l 为了简化 JavaScript的开发, 一些JavsScript 库诞生了. JavaScript 库封装了很多预定义的对象和实用函数。能帮助使用者建立有高难度交互的Web2.0 特性的富客户端页面, 并且兼容各大浏览器
jQuery 简介
l jQuery 是继Prototype 之后又一个优秀的JavaScript 库
l jQuery 理念: 写得少, 做得多. 优势如下:
• 轻量级
• 强大的选择器
• 出色的 DOM 操作的封装
• 可靠的事件处理机制
• 完善的 Ajax
• 出色的浏览器兼容性
• 链式操作方式
jQuery 对象
l jQuery 对象就是通过jQuery ($()) 包装 DOM 对象后产生的对象
l jQuery 对象是jQuery 独有的. 如果一个对象是jQuery 对象, 那么它就可以使用jQuery 里的方法: $(“#persontab”).html();
l jQuery 对象无法使用DOM 对象的任何方法, 同样DOM 对象也不能使用jQuery 里的任何方法
l 约定：如果获取的是 jQuery 对象, 那么要在变量前面加上 $.
• var $variable = jQuery 对象
• var variable = DOM 对象
DOM 对象转成 jQuery 对象
l 对于一个 DOM 对象, 只需要用 $() 把DOM 对象包装起来(jQuery 对象就是通过jQuery 包装DOM 对象后产生的对象), 就可以获得一个jQuery 对象.
jQuery 对象转成 DOM 对象
l jQuery 对象不能使用DOM 中的方法, 但如果jQuery 没有封装想要的方法, 不得不使用DOM 对象的时候, 有如下两种处理方法:
l (1) jQuery 对象是一个数组对象, 可以通过[index] 的方法得到对应的DOM对象.
l (2) 使用jQuery 中的get(index) 方法得到相应的DOM 对象
例如：
<body>
<input type="text" name="name" id="name"/>
</body>
</html>
<script type="text/javascript" charset="utf-8">
//document 什么对象 Dom对象包装后 就变成了 jquary对象 DOM只能使用都没属性的方法，jquary只能使用jquary对象
//.ready()方法 jquery对象的方法 绑定一个执行的函数 匿名回调函数
//dom对象与jquaey对象的转换
$(document).ready(function(){
var Domi=document.getElementById("name");
Domi.value="ready"
var $jInp=$("#name");
$jInp.val("hehehe");
//把dom转化成jquery 对象
var $Dinput=$(Domi);
$Dinput.val("hehehheheheee");
var dinp=$jInp[0];
dinp.value="herrhr";
dinp=$jInp.get(0);
dinp.value="hdueefdg";
});
// //上面的简写方式
// $(function(){
//
// });
</script>