jquery的一些小小实例

通过两天的学习，对jquery有了初步的了解，现在介绍几个小小的实例。

1.遍历数组：

jQuery.each(object, [callback])

用此方法可以遍历数组，，同时使用元素索引和内容。

其中

object:需要遍历的对象或数组

callback:每个成员/元素执行的回调函数。

例如：

有数组【2，4，6，8】不仅遍历了数组，还让数组的每个元素加1.

用此方法可以一步就把每个数组都找出来，十分方便。

2.通过类来改变样式：

我们可以通过用addClass和removeClass分别添加类和去掉类

例如：

我们通过鼠标事件来解释一下：

有一个div我们要使鼠标放上去的时候变色应该用

$(function () {
$('li').mouseover(function () {
$(this).addClass('a');

红色字体是用addClass进行样式添加

.mouseout(function () {
$(this).removeClass('a');
})

红色字体是用removeClass来去掉类同时也去掉了样式

完整的代码如下：

 <style type="text/css">li{background-color: gray;list-style: none;float: left;margin-left: 2px;border-radius: 5px 5px 0px 0px;}.a{background-color: red;}</style><script type="text/javascript">$(function () {$('li').mouseover(function () {$(this).addClass('a');}).mouseout(function () {$(this).removeClass('a');})})</script>
</head>
<body><div><ul><li>资讯动态</li><li>产品世界</li><li>市场营销</li></ul></div>

由于效果是动态的就不在这里展示了。

jquery的一些小小实例相关推荐

jquery-1 jquery几个小实例
jquery-1 jquery几个小实例一.总结一句话总结:jquery真的是简单加简便. 1.jquery中改变多个css属性怎么整? 可以链式连接方式,也可以大括号整多个.中间是键值对加引号 ...
CSS+jQuery实现滑动幻灯片实例详解
HTML部分代码 Start with having a wrapping container div called main_view , and two sections nested insid ...
【小牛分享】jquery mobile网页demo实例代码下载
原文:[小牛分享]jquery mobile网页demo实例代码下载源代码下载地址:http://www.zuidaima.com/share/1622363259194368.htm 也可以用手机 ...
jQuery表单验证实例 / 包含用户名、密码、住址、邮箱验证
jQuery表单验证实例 / 包含用户名.密码.住址.邮箱验证如下图别忘了引入jQuery框架!!! 话不多说直接先上jQuery部分代码: <script type="text/ ...
jQuery全选反选实例
1. $('#tb:checkbox').each(function(){ 每次都会执行全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...
jquery中cookie用法实例详解(获取,存储,删除等)
这篇文章主要介绍了jquery中cookie用法,结合实例详细分析了jQuery操作cookie的获取,存储,删除等操作,并附带了Jquery操作Cookie记录用户查询过信息实现方法,需要的朋友可以 ...
jQuery基本选择器（实例及表单域 value 的获取）
jQuery基本选择器包括 CSS选择器.层级选择器和.表单域选择器. 1.CSS选择器 (1)标签选择器 $("div") $("p") $(" ...
使用jquery.cookie操作Cookie实例
我们在WebForm上增加 "增加,删除,修改"三个按钮,并使用一个文本框来显示当前写入的Cookie的内容,我们将为每个按钮写一个处理函数. 对Cookie操作实例 <%@ ...
基于PHP以及JQUERY AJAX的计算器实例
此处提供的是作者自己无事的时候写的一个基于JQUERY与PHP之间通过AJAX进行数据交互的简易计算器实例,不做过多的说明,此处直接提供源码的下载,欢迎大家下载参考并写出更智能的计算器. 文件:简易计 ...
JQuery 学习总结及实例
1.JQuery简介普通JavaScript的缺点:每种控件的操作方式不统一,不同浏览器下有区别,要编写跨浏览器的程序非常麻烦.因此出现了很多对JavaScript 的封装库,比如Prototype ...

jquery的一些小小实例

1.遍历数组：

2.通过类来改变样式：

jquery的一些小小实例相关推荐

最新文章

热门文章