jQuery初体验：[1]jQuery基础语法和基本用法

简单的介绍下：Jquery是一个优秀的轻量级Javascript框架和javascript库，它的开发理念是“写的更少，但做的更多”——用最少的代码实现最丰富的效果。它兼容各种浏览器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+），使用相当广泛。但jQuery2.0及后续版本将不再支持IE6/7/8浏览器。基本上，对于简单的操作如如何选取 HTML 元素，以及如何对它们执行类似隐藏、移动以及操作其内容等，你可以直接学习Jquery而甚至都不用需要理解javascript。本人不才，介绍点基础的Jquery知识，希望对想入门的人有帮助。请注意：下面的示例都事先在头部当中引入了jQuery文件了。否则其他的Jquery操作将不会执行。

工具/原料

耐心、实际操作

html编辑器

$()，万能的函数——获取

1、Jquery当中几乎所有的功能、选择、事件处理等都用到了这个函数。对于比较基础的是的使用者来说，通常用这个来获取元素，获取到的元素都会被存储为jQuery对象。示例代码及效果如下：

2、var $div = $("#abc"),获取id为abc的div。为了确认div是不是被获取到了，我alert了下，发现值为【object object】，说明获取到元素了。

3、如果你熟悉html和CSS的话那就会知道这里使用的是id选择器，其他的还有类选择，标签选择，子孙选择，兄弟选择，属性选择，为类选择等等。如：$(".class")/$(".class div")/$("div")/$("div:first")......

操作的执行——事件处理

1、因为讲解的是基础，实际上我们使用到的也是些基础的事件效果。比如点击某个元素，改变下颜色或者背景，又或者隐藏/显示某个区域的内容；

2、jQuery当中的内置了几个事件函数，包括：click（） 点击事件函数；mouseover（） 鼠标划入函数；mouseout（） 鼠标画出函数；hover（） 鼠标经过函数，相当于mouseover和mouseout函数的组合等等这几个也是我经常使用到的.

3、在对元素执行了事件函数之后，其具体的操作是放在事件函数当中。比如$("#abc").click( function(){ //具体执行的代码... } );其中的function就是来执行具体的操作，整行的意思是我在点击的时候执行function中的代码块，可以使改变样式、也可以是输出信息等等。参看示例，代码如下图：

4、在示例当中，我给div添加了click事件，执行alert（）函数，输出div中的文本内容，具体代码见图。

操作的执行——改变样式

1、事件触发改变样式改变样式有两种情况，一种是改变class名，一种是直接设置如background：#fff;示例代码，如下

2、先看直接改变样式属性值的方法：在jQuery当中，视同过CSS（）函数实现的，通过在里面传入属性和属性值改变样式：1） css("background-color","#f00")改变一种样式【一些特定情况下需要写成这样css("backgroundColor","#f00") 】点击div之后背景就变成红色。

3、2） css({"background":"#f00","color":"#fff",......}) 改变多种样式【 也可以写成这样css({background:"#f00",color:"#fff",......}) 】示例如下，点击之后背景变红，文字变白了

4、总结：简单的说，jQuery对元素的操作分为两个步骤：1、选取；2、操作。理解起来很方便的。今天的讲解就到这里，希望能对代价有所帮助。如觉有用，请投票哦。