首页 > 软件开发 > JQUERY >

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

来源：互联网 2023-03-17 00:52:12 304

简单的介绍下：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对象。

示例代码及效果如下：

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

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

2

var $div = $("#abc"),获取id为abc的div。

为了确认div是不是被获取到了，我alert了下，发现值为【object object】，说明获取到元素了。

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

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

2相关内容未经许可获取自百度经验

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中的代码块，可以使改变样式、也可以是输出信息等等。

参看示例，代码如下图：

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

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

4

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

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

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

操作的执行——改变样式

1

1、事件触发改变样式

改变样式有两种情况，一种是改变class名，一种是直接设置如background：#fff;

示例代码，如下

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

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

2

先看直接改变样式属性值的方法：

在jQuery当中，视同过CSS（）函数实现的，通过在里面传入属性和属性值改变样式：

1） css("background-color","#f00")改变一种样式

【一些特定情况下需要写成这样css("backgroundColor","#f00") 】

点击div之后背景就变成红色。

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

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

3

2） css({"background":"#f00","color":"#fff",......}) 改变多种样式

【也可以写成这样css({background:"#f00",color:"#fff",......}) 】

示例如下，点击之后背景变红，文字变白了

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

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

4

总结：简单的说，jQuery对元素的操作分为两个步骤：1、选取；2、操作。理解起来很方便的。

今天的讲解就到这里，希望能对代价有所帮助。如觉有用，请投票哦。

(共篇)下一篇：

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！

标签： JQUERY

上一篇：教你用jQuery制作别踩白块网页版下一篇：怎样利用jquery给dedecms添加二维码

办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码