jQuery基本用法与示例代码（全干货）

jQuery基本用法

一、 jQuery介绍1. jQuery概述2. jQuery的下载与引入3. jQuery对象与js对象之间的转换

二、 jQuery选择器1. 基本选择器2. 层级选择器3. 表单属性选择器

三、 jQuery的DOM操作1. jQuery对DOM树中的文本和值进行操作2. jQuery对DOM树中的属性进行操作

四、 jQuery的遍历1. 原始方式遍历2. jquery对象方法遍历3. jquery的全局方法遍历

一、 jQuery介绍

本文只简单介绍jQuery基本用法，更多信息可以参考菜鸟教程

1. jQuery概述

jQuery是一个快速、简洁的JavaScript库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。JQuery封装了JavaScript常用的功能代码，提供了一套易于使用的API，可以跨多种浏览器工作，使HTML文档的遍历和操作、事件处理、动画设计和Ajax交互等操作变得更加简单。

2. jQuery的下载与引入

jQuery的官方下载地址：http://www.jquery.com

jQuery的引入

在需要使用jQuery的html中使用js的引入方式进行引入，如下：

3. jQuery对象与js对象之间的转换

jQuery本质上虽然也是js，但如果使用jQuery的属性和方法那么必须保证对象是jQuery对象，而不是js方式获得的DOM对象，二者的API方法不能混合使用，若想使用对方的API，需要进行对象的转换。

使用js方式获取的对象是js的DOM对象，使用jQuery方式获取的对象是jQuery对象。两者的转换关系如下：

js的DOM对象转换成jQuery对象，语法：$(js的DOM对象)

jQuery对象转换成js对象，语法：jquery对象[索引] 或 jquery对象.get(索引)

代码演示：

演示使用js的DOM对象方式、jquery对象方式获取div中的文本数据演示将js的DOM对象 转换成 jquery对象，再使用转换后的jquery对象方式获取div中的数据演示将jquery对象 转换成 js的DOM对象， 再使用转换后js的DOM对象方式获取div中的数据

将上述代码总结得到：

js的DOM对象转换成jQuery对象，语法：$(js的DOM对象)

var jsDomEle = document.getElementById("myDiv"); //js的DOM对象

var $jQueryEle = $(jsDomEle); //js的DOM对象 转换成 jquery对象

jQuery对象转换成js对象，语法：jquery对象[索引] 或 jquery对象.get(索引)

var $jQueryEle = $("#myDiv"); //jQuery对象

var jsDomEle = $jQueryEle[0]; //jquery对象 转换成 js的DOM对象

提示：JQuery对象变量名前面的$符号，主要作用是便于我们区分该变量是 JsDOM对象 与 jQuery对象，并无特殊含义。写$符号代表jQuery对象是行业书写规范，不加$，代码也没有错误。

二、 jQuery选择器

1. 基本选择器

语法

选择器名称语法解释标签选择器（元素选择器）$(“html标签名”)获得所有匹配标签名称的于元素id选择器$("#id的属性值")获得与指定id属性值匹配的元素类选择器$(".class的属性值")获得与指定的class属性值匹配的元素

现有如下需求：

改变 id 为 one 的元素的背景色为 红色改变元素名为