jQuery学习笔记1
2015年10月21日
jQuery类库说明
名称 大小 说明
jquery.js(开发版) 约229KB 完整无压缩版，主要用于测试、学习和开发
jquery.min.js(生产版) 约31KB 经过压缩，主要用于产品和项目
编写简单的jQuery代码
首先明确一点，在jQuery库中，$就是jQuery的一个简写形式，例如：
$("#foo")等价于jQuery("#foo")
$.ajax等价于jQuery.ajax
第一个jQuery程序：
<script type="text/javascript">
$(document).ready(function(){
alert("Hello World!");
});
</script>
效果：
Paste_Image.png
其中
$(document).ready(function(){
})
| 区别 | window.load | $(document).ready（） |
|---|---|---|
| 编写个数 | 不能同时编写多个 | 能同时编写多个 |
| 简化写法 | 无 | $(function(){ })； |
的作用类似于JavaScript中的window.load方法，不过又有不同：
| 区别 | window.load | $(document).ready（） |
|---|---|---|
| 编写个数 | 不能同时编写多个 | 能同时编写多个 |
| 简化写法 | 无 | $(function(){ })； |
2015年10月22日
jQuery对象
jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象和DOM对象的互相转换
在讨论jQuery对象和DOM对象互相转换之前，先定义好变量的风格。如果是jQuery对象，在变量之前加上$，如：
var $variiable = jQuery对象；
如果获取的是DOM对象，则：
var variable = DOM对象；
1.jQuery对象转换成DOM对象
两种方法：[index]和get(index)
a）jQuery对象是一个类似数组的对象，可以通过[index]方法得到相应的DOM对象
示例：
var $cr = $("#cr"); //jQuery对象
var cr = $cr[0]; //DOM对象
alert(cr.checked) //检测checkbox是否被选中了
b）另一种方法是jQuery本身提供的，通过get(index)方法得到相应的DOM对象
示例：
var $cr = $("#cr"); //jquery对象
var cr = $cr.get(0); //DOM对象
alert(cr.checked)
2.DOM对象转换成jquery对象
对于一个DOM对象，只需用$()把DOM对象包装起来，就可以获得一个jquery对象。方式为$(DOM对象)。
示例：
var cr = document.getElementById("cr"); //DOM对象
var $cr = $(cr); //jquery对象
转换后，可以任意使用jquery中的方法。
最后再次强调，DOM对象才能使用DOM中的方法，jquery对象不可以使用DOM中的方法。
jquery中的DOM操作
DOM操作的分类
一般来说，DOM操作分为3个方面：DOM Core、HTML-DOM和CSS-DOM
1.DOM Core
DOM Core并不专属JavaScript
JavaScript中的getElementById()、getElementsByTagName()、getAttribute()等方法，这些都是DOM Core的组成部分。
2.HTML-DOM
HTML-DOM提供了一些简明的记号来描述各种HTML元素的属性。
例：
*使用HTML-DOM来获取表单对象的方法：
document.forms //HTML-DOM提供了一个forms对象
使用HTML-DOM来获取某元素的src属性的方法：
element.erc;
3.CSS-DOM
CSS-DOM技术的主要作用是获取和设置style对象的属性。
jquery中的DOM操作
首先创建一个页面：
<p title="选择你最喜欢的水果">你最喜欢的水果是？</p>
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
查找节点
1.查找元素节点
获取元素节点并打印出他的文本内容，示例：
var $li = $("ul li:eq(1)"); //获取<ul>里的第2个<li>节点
var li_txt = $li.text(); //获取第2个<li>节点的文本内容
alert(li_txt); //打印文本内容
2.查找属性节点
获取属性节点并打印出他的文本内容，示例：
var $para = $("p");
var p_txt = $para.attr("title"); //获取属性"title"
alert(p_txt); //打印title属性值
创建节点
1.创建元素节点
要求：为<ul>创建2个<li>元素
分析：1.创建两个<li>元素
2.将这两个新元素插入文档中
第(1)个步骤可由jquery的工厂函数$( )来完成：
$(html)
$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jquery对象后返回。
首先创建两个<li>元素：
var $li_1 = $("<li></li>"); //创建第一个<li>元素
var $li_2 = $("<li></li>"); //创建第二个<li>元素
然后将这个两个元素插入文档中，用append()方法：
$(ul).append($li_1);
$(ul).append($li_2);
2.创建文本节点
为新创建的两个节点插入文本内容：
var $li_1 = $("<li>香蕉</li>");
var $li_1 = $("<li>雪梨</li>");
$(ul).append($li_1);
$(ul).append($li_2);
3.创建属性节点
创建属性节点与创建文本节点类似，直接在创建元素节点时一起创建。示例：
var $li_1 = $("<li tittle="香蕉">香蕉</li>");
var $li_1 = $("<li tittle="雪梨">雪梨</li>");
$(ul).append($li_1);
$(ul).append($li_2);
4.插入节点
append( )—在被选元素的结尾插入内容
$(A).appendTo(B ) - 将A追加到B中
prepend() - 在被选元素的开头插入内容
$(A)prependTo(B) - 将A前置到B中
after() - 在被选元素之后插入内容
$(A)insertAfter(B) - 将A插到B后面
before() - 在被选元素之前插入内容
$(A)insertBefore(B) - 将A插入到B前面
