jQuery 入门指南教程
jQuery 入门指南教程
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法
$(selector).action()- 美元符号定义 jQuery
- 选择符（selector）“查询”和“查找” HTML 元素
- jQuery 的 action() 执行对元素的操作
示例：
$(this).hide() - 隐藏当前元素
$('p').hide() - 隐藏所有段落
$('p.test').hide() - 隐藏所有 class="test" 的段落
$('#test').hide() - 隐藏所有 id="test" 的元素通过jQuery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jQuery对象（集合对象），不能直接调用dom定义的方法。
jQuery的基本设计和主要用法，就是”选择某个网页元素，然后对其进行某种操作”。这是它区别于其他函数库的根本特点。使用jQuery的第一步，往往就是将一个选择表达式，放进构造函数jQuery()（简写为$），然后得到被选中的元素。
CSS 选择器
$(document) // 选择整个文档对象
$('#myId') // 选择ID为myId的页面元素
$('div.myClass') // 选择class为myClass的div元素
$('input[name=first]') // 选择name属性等于first的input元素jQuery 特有表达式
$('a:first') // 选择页面中第一个a元素
$('tr:odd') // 选择表格的奇数行
$('#myForm :input') // 选择表单中的input元素
$('div:visible') // 选择可见的div元素
$('div:gt(2)') // 选择所有的div元素，除了前三个
$('div:animated') // 选择当前处于动画状态的div元素dom对象和jQuery对象区别
只有jQuery对象才能使用jQuery定义的方法。注意dom对象和jQuery对象是有区别的，调用方法时要注意操作的是dom对象还是jQuery对象。普通的dom对象一般可以通过$()转换成jQuery对象。如：$(document.getElementById(”msg”))则为jQuery对象，可以使用jQuery的方法。
对于获取的元素集合，获取其中的某一项（通过索引指定）可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jQuery对象，而get(n)和索引返回的是dom元素对象。对于jQuery对象只能使用jQuery的方法，而dom对象只能使用dom的方法，如要获取第三个<div>元素的内容。有如下两种方法：
$('div').eq(2).html(); // 调用 jQuery 对象的方法
$('div').get(2).innerHTML; // 调用 dom 的方法属性jQuery 常用操作
// html 内容
$('#msg').html(); // 返回 id 为 msg 的元素节点的html内容
$('#msg').html('<b>content</b>'); // 将"<b>content</b>"作为html串写入id为msg的元素节点内容中，页面显示粗体的content
// 文本内容
$('#msg').text(); // 返回 id 为 msg 的元素节点的文本内容
$('#msg').text('<b>content</b>'); // 将"<b>content</b>"作为普通文本串写入id为msg 的元素节点内容中，页面显示<b>content</b>
// 高宽度
$('#msg').height(); // 返回 id 为 msg 的元素的高度
$('#msg').height('300'); // 将 id 为 msg 的元素的高度设为 300
// value 值
$('input').val(); // 返回表单输入框的value值
$('input').val('test'); // 将表单输入框的value值设为test
// 单击事件
$('#msg').click(); // 触发 id 为 msg 的元素的单击事件
$('#msg').click(fn); // 为 id 为 msg 的元素的单击事件添加函数如果选中多个元素，jQuery提供过滤器，可以缩小结果集：
$('div').has('p'); // 选择包含 p 元素的 div 元素
$('div').not('.myClass'); // 选择 class 不等于 myClass 的 div 元素
$('div').filter('.myClass'); // 选择 class 等于 myClass 的 div 元素
$('div').first(); // 选择第一个 div 元素
$('div').eq(5); // 选择第六个 div 元素有时候，我们需要从结果集出发，移动到附近的相关元素，jQuery也提供了在DOM树上的移动方法：
$('div').next('p'); // 选择 div 元素后面的第一个 p 元素
$('div').parent(); // 选择 div 元素的父元素
$('div').closest('form'); // 选择离 div 最近的那个 form 父元素
$('div').children(); // 选择 div 的所有子元素
$('div').siblings(); // 选择 div 的同级元素对 css 操作
$('#msg').css('background'); // 返回元素的背景颜色
$('#msg').css('background', "#CCC"); // 设置元素的背景颜色为灰色
$('#msg').height('300'); // 设置元素的高度为 300
$('#msg').width('200'); // 设置元素的宽度为 200
$('#msg').css({ color: 'red', background: 'blue'}); // 以键值对的形式设定样式
$('#msg').addClass('myClass'); // 为元素添加名称为 myClass 的 class
$('#msg').removeClass('myClass'); // 删除元素名称为 myClass 的 class
$('#msg').toggleClass('myClass'); // 如果存在（不存在）就删除（添加）名称为 myClass 的 class选中网页元素以后，就可以对它进行某种操作。所谓连写，即可以对一个jQuery对象连续调用各种不同的方法。 jQuery允许将所有操作连接在一起，以链条的形式写出来，比如：
$('div').find('h3').eq(2).html('Hello');分解开来，就是下面这样：
$('div') // 找到 div 元素
.find('h3') // 选择其中的 h3 元素
.eq(2) // 选择第三个 h3 元素
.html('Hello'); // 将它的内容改为 Hello这是jQuery最令人称道、最方便的特点。它的原理在于每一步的jQuery操作，返回的都是一个jQuery对象，所以不同操作可以连在一起。 jQuery还提供了.end()方法，使得结果集可以后退一步：
$('div') // 找到 div 元素
.find('h3') // 选择其中的 h3 元素
.eq(2) // 选择第三个 h3 元素
.html('Hello') // 将它的内容改为 Hello
.end() // 退回到选中的所有的 h3 元素的那一步
.eq(0) // 选中第一个 h3 元素
.html('World'); // 将它的内容改为 WorldjQuery 常用工具方法
除了对选中的元素进行操作以外，jQuery还提供一些工具方法（utility），不必选中元素，就可以直接使用。 如果你懂得Javascript语言的继承原理，那么就能理解工具方法的实质。它是定义在jQuery构造函数上的方法，即jQuery.method()，所以可以直接使用。而那些操作元素的方法，是定义在构造函数的prototype对象上的方法，即jQuery.prototype.method()，所以必须生成实例（即选中元素）后使用。如果不理解这种区别，问题也不大，只要把工具方法理解成，是像javascript原生函数那样，可以直接使用的方法就行了。
常用的工具方法有以下几种：
$.trim() 去除字符串两端的空格。
$.each() 遍历一个数组或对象。
$.inArray() 返回一个值在数组中的索引位置。如果该值不在数组中，则返回-1。
$.grep() 返回数组中符合某种标准的元素。
$.extend() 将多个对象，合并到第一个对象。
$.makeArray() 将对象转化为数组。
$.type() 判断对象的类别（函数对象、日期对象、数组对象、正则对象等等）。
$.isArray() 判断某个参数是否为数组。
$.isEmptyObject() 判断某个对象是否为空（不含有任何属性）。
$.isFunction() 判断某个参数是否为函数。
$.isPlainObject() 判断某个参数是否为用"{}"或"new Object"建立的对象。
$.support() 判断浏览器是否支持某个特性。