jQuery学习笔记1

2015年10月21日

jQuery类库说明

名称 大小 说明
jquery.js(开发版) 约229KB 完整无压缩版，主要用于测试、学习和开发
jquery.min.js(生产版) 约31KB 经过压缩，主要用于产品和项目

编写简单的jQuery代码

首先明确一点，在jQuery库中，$就是jQuery的一个简写形式，例如：
$("#foo")等价于jQuery("#foo")
$.ajax等价于jQuery.ajax

第一个jQuery程序：

效果：

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操作

首先创建一个页面：

你最喜欢的水果是？

        
苹果
        
橘子
        
菠萝

查找节点

1.查找元素节点
获取元素节点并打印出他的文本内容，示例：

var $li = $("ul  li:eq(1)");   //获取
里的第2个
节点
var  li_txt = $li.text();      //获取第2个
节点的文本内容
alert(li_txt);          //打印文本内容

2.查找属性节点
获取属性节点并打印出他的文本内容，示例：

var $para = $("p");
var p_txt = $para.attr("title");  //获取属性"title"
alert(p_txt);    //打印title属性值

创建节点

1.创建元素节点
要求：为

创建2个
• 元素
  分析：1.创建两个
• 元素
  2.将这两个新元素插入文档中

  第(1)个步骤可由jquery的工厂函数$( )来完成：

  $(html)
  

  $(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jquery对象后返回。

  首先创建两个

• 元素：

  var $li_1 = $("
  ");  //创建第一个
  元素
  var $li_2 = $("
  ");   //创建第二个
  元素
  

  然后将这个两个元素插入文档中，用append()方法：

  $(ul).append($li_1);
  $(ul).append($li_2);
  

  2.创建文本节点
  为新创建的两个节点插入文本内容：

  var $li_1 = $("
  香蕉
  ");
  var $li_1 = $("
  雪梨
  ");
  $(ul).append($li_1);
  $(ul).append($li_2);
  

  3.创建属性节点
  创建属性节点与创建文本节点类似，直接在创建元素节点时一起创建。示例：

  var $li_1 = $("
  香蕉
  ");
  var $li_1 = $("
  雪梨
  ");
  $(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前面