初识jQuery

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);

来源：https://www.cnblogs.com/ACCPGuo/p/9354370.html