jQuery是JS对象和实用函数的封装。

jQuery与JS相比的优势是语法更简单、也不存在兼容性问题。

jQuery是JS的程序库。

 

jQuery的用途：

  1. 访问和操作DOM元素
  2. 控制页面样式
  3. 对页面事件的处理
  4. 方便地使用jQuery插件
  5. 与Ajax技术的完美结合

 

jQuery的优势：

  1. 轻量级，只有100kb
  2. 强大的选择器，几乎支持所有CSS选择器
  3. 出色的DOM封装。
  4. 可靠的事件处理机制
  5. 出色的浏览器兼容性
  6. 隐式迭代
  7. 丰富的插件支持

 

jQuery主要包含三部分：

  1. 工厂函数 $

$(selector).action();

$符号等价于jQuery。

DOM对象必须用双引号包裹起来，document对象则写作$(document)。

  1. 选择器 selector

$(ID选择器、类选择器、标签选择器);

  1. 方法 action()

 

jQuery用于操作CSS的操作之一：

jQuery对象.addClass([样式名]);

样式名可以是多个，用空格隔开。

css(“属性”,”属性值”);           //设置一个css

css({“属性1”:”属性值1”,”属性2”:”属性值2”})；//设置多个css

 

$(selector).show();               //显示样式

$(selector).hide();                //隐藏样式

 

css()与addClass()方法的区别：

css()方法为所匹配的元素设置给定的css样式

addClass()方法向所匹配的元素添加一个或多个类，不会删除已经存在的类，尽在原有的基础上追加的类样式。

基于结构与样式分离的原则，通常应用中addClass()比css()频率高。

 

jQuery程序代码风格

  1. $的使用

a)       选择器、功能函数的前缀都必须使用他

  1. 链式操作

a)       为了避免过渡使用临时变量或不必要的重复代码，它可以对一个对象进行一个对象进行多重操作

  1. 隐式迭代

a)       不需要遍历就可以直接设置元素样式

  1. 添加注释

a)       开发阶段：能让别人更容易读懂代码

b)       维护阶段：便于后期维护

c)        正式发布：建议删除注释，减少文件大小

 

DOM对象：每个页面都具有一个DOM,DOM里节点通常分:元素节点、文本节点、属性节点

 

jQuery对象：是通过包装DOM对象后产生的能够使用jQuery中的方法

$(“#title”).html();

同

document.getElementById(“title”).innerHTML;

 

jQuery对象与DOM对象的相互转换:

如果获取jQuery对象

var $variable=jQuery对象;

如果获取DOM对象

var variable=DOM对象;

jQuery转换DOM对象:有两种方法，[index]和get(index)

index:

var $txtName=$(“#txtName”);

       var txtName=$txtName[0];

alert(txtName.checked)

get(index):

var$txtName=$(“#txtName”);

var txtName=$txtName.get(0);

alert(txtName.checked)

 

DOM转换jQuery:

var txtName=document.getElementById(“txtName”);

var $txtName=$(txtName);