快捷搜索:

jquery中eq和get的区别与使用方法,图片滚动轮播示例代码

2019-11-13 09:57栏目:关于澳门金莎
TAG:

过去一段时间零零散散的自学了一点点jquery的相关用法,基本上属于用到哪个了,就去查然后就学一点,没有系统的学过,深入的用法也不是特别了解,毕竟javascript基础就比较薄弱。经过一段时间的零敲碎打的学习,我决定使用jquery做一些东西,算是对以前学到的东西做一次总结。

举个例子:
<p style="color:yellow">绯雨</p>使用eq来获得第一个p标签的color值:
$("p").eq(0).css("color") //因为eq(num)返回的是个jq对象,所以可以用jq的方法css使用get来获得第一个p标签的color值:
$("p").get(0).style.color //因为get(num)返回的是个html对象,所以要使用传统的HTML对象方法,jq对象此时就没用了。当然,你也可以get(num)后把对象转为jq的对象再进行操作:
$($("p").get(0)).css("color")--------------------------------------------------------------------------
more eq
see:

完整的项目在附件中

我选择了仿写Windows7的桌面和任务栏效果,一个是我比较喜欢Windows7的半透明效果,第二个是这个有比较大的发挥空间。再次贴出来算是做一个笔记和总结,也把一些心得分享给学习路上的朋友们。编码是本人是业余爱好,当然写这个东西也纯属个人娱乐,写的代码比较随意,没有过于关注性能上的问题,如有指教之处,还望不吝相告!

more get:
see:

eq:返回是一个 jquery对象 作用是 将匹配的元素集合缩减为一个元素。这个元素在匹配元素集合中的位置变为0,而集合长度变成1
get:是一个html 对象数组作用是取得其中一个匹配的元素。 num表示取得第几个匹配的元素。

如:html代码

复制代码 代码如下:

<ul>
<li>li-1</li>
<li>li-2</li>
</ul>

比如我们通过jquery选择器 $("li")那么我们将会有两个li元素我如何只想选择其中一个呢?

$("li:eq(0)").html() 或者 $("li").eq(0).html() 就是第一个li 这里我们将获得 li-1
$("li:eq(1)").html() 或者 $("li").eq(1).html() 就是第二个li 这里我们将获得 li-2

下面我们看看 get因为get返回是html对象所以我们这里
$("li").get(0).style.color='red'
只有这样用或者将 get返回对象转换成jquery对象在操作
$($("li").get(0)).css("color",'red')即可

完整代码

复制代码 代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<SCRIPT LANGUAGE="JavaScript" src="js/jquery.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
$("document").ready(function(){
alert($("li:eq(1)").html());//显示 li-2 alert($("li:eq(0)").html())
$("li").get(0).style.color='red';
$($("li").get(1)).css("color",'red')
})
//-->
</SCRIPT>
</HEAD>
<BODY>
<ul>
<li>li-1</li>
<li>li-2</li>
</ul>
</BODY>
</HTML>

p style="color:yellow"绯雨/p使用eq来获得第一个p标签的color值: $("p").eq(0).css("color") //因为eq(num)返回的是个jq对象,所以可以用jq的方...

复制代码 代码如下:

已实现功能:

<!DOCTYPE html>
<html>
<head>
<title>图片切换</title>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" >
var num = 0
$(function(){
$("div ol li").mouseover(function(e){
$(this).attr("class","current");
$(this).siblings().attr("class",""); //兄弟节点的class属性设置为空
//alert($('ul').index())
num = $('ul').index() + 2
var index = $(this).index(); //记录选定的li标签在ul中的索引
//图片会出现层叠现象为了显示当前的图片,把当前的图片的z-index 值设置为大于其他的兄弟元素
$("div ul li").eq(index).css({"left":"650px","zIndex":num})
$("div ul li").eq(index).siblings().css("zIndex",num-1);
//动画效果,图片从右侧飞入
$("div ul li").eq(index).animate({left:"0"},500)

  • 桌面图标的排列
  • 桌面图标hover效果
  • 任务栏定位和半透明效果
  • 时间面板
  • 任务窗口的拖拽
  • 任务窗口的最小化
  • 任务窗口的最大化和还原
  • 任务窗口的关闭
  • 任务栏点击切换任务窗口

});

 

});
</script>
<style type="text/css">
*{margin: 0px;padding: 0px;border: 0px;}
ul,ol{list-style: none;}
.all{width:650px;height: 250px;margin: 100px auto;position: relative;border: 1px solid crimson;overflow: hidden;}
.all ul{position: relative;z-index: 1;position: relative;}

先来看几张效果图:

/*子 绝 父 相*/
.all ul li{position: absolute;left: 0;top: 0px;}

由于用的是HTML5+CSS3,所以有些代码可能低版本浏览器支持的不好,所以尽量使用谷歌内核或者IE9及以上版本浏览器。全屏效果体验更好!

.all ol{position: absolute;z-index: 2; right: 10px;bottom: 10px;}
.all ol li{width: 20px;height: 20px;background: #333;border: 1px solid #509629;font-weight:
bold;text-align: center;line-height: 20px;float: left;margin-left: 10px;margin-top: 10px;}

 

.all ol .current{width: 30px;height: 30px;line-height: 30px;border: 1px solid red;margin-top: 0px;
cursor: pointer;}
</style>
</head>
<body>
<div class="all">
<ul>
<li><img src="src/1.jpg" /></li>
<li><img src="src/2.jpg" /></li>
<li><img src="src/3.jpg" /></li>
<li><img src="src/4.jpg" /></li>
</ul>
<ol>
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
</div>
</body>
</html>

澳门金莎娱乐 1

您可能感兴趣的文章:

  • Android实现图片滚动和页签控件功能的实现代码
  • Android仿淘宝商品浏览界面图片滚动效果
  • 图片自动播放器脚本之家修正
  • JS特效实现图片自动播放并可控的效果
  • autoPlay 基于jquery的图片自动播放效果
  • 基于Jquery实现的一个图片滚动切换
  • jquery 圆形旋转图片滚动切换效果
  • js实现网站首页图片滚动显示
  • jQuery+css实现图片滚动效果(附源码)
  • jquery实现图片滚动效果的简单实例
  • js+div实现图片滚动效果代码
  • ImageFlow可鼠标控制图片滚动
  • javascript 不间断的图片滚动并可点击
  • js实现鼠标经过时图片滚动停止的方法
  • Android使用自定义属性实现图片自动播放滚动的功能

桌面窗口及任务栏  图片地址:

 

澳门金莎娱乐 2

同一个窗口可以同时打开多个 图片地址:

 

澳门金莎娱乐 3

任务窗口最大化 图片地址:

 

澳门金莎娱乐 4

鼠标的悬停效果  图片地址:

 

澳门金莎娱乐 5

任务栏悬停效果 图片地址:

澳门金莎娱乐, 

基本上暂时只实现了上述的功能。下面我来写几个我认为jquery中比较有亮点的地方。

 

【无比强大的标签选择器】

$(".icons>ul>li")

一句话就选择了所有下的ul 下的 li,然后我们可以对它们进行批量操作。

 

【轻松更改元素的CSS】

$("#"+formid).css("top","50px");

formid为变量,代表已经获取到的一个元素的id,整句话的意思就是更改id为 formid值 的元素 的上距为50px

 

当然还有另外一种方式就是通过变更css名来进行更改css

$(".cbarbg").eq(num).addClass("cbarbg2"); //增加css名

$(".cbarbg").eq(num).removeClass("cbarbg2"); //移除css名

 

【很实用的索引值】

当你获取到$(".icons>ul>li")的时候实际上是 获得的一个元素数组,你得到的是一组符合条件的li元素,那么具体怎么定为到每一个元素呢?就是通过索引的方式

例如:var num=$(".icons>ul>li").index(this);

这句话是写在一个 点击触发的事件中的,那么this就代表当前所点击的元素(是其中的一个li),那么通过这种方式 就可以得到当前被点击的元素 处于 元素数组中的索引值,或者是数组的下标。

通过下标可以实现很多操作,例如:$(".icons>ul>li>.iconbg").eq(num).show();

由于.iconbg与li是对应存在的,一个li对应一个.iconbg,因此num为li的索引,同样也是.iconbg的索引,通过这种方式就实现了针对li对应元素的操作。

 

【自定义属性 这是个好东西】

属性我们都知道,例如img标签中有很多属性 src、alt、等等,这些都属于系统上的属性,是已经规定好的,那么我们如果想在Img中存放一些其他的属性,就需要通过自定义属性来操作了,通过jquery可以很轻松的获取。

自定义属性都是data-开头,例如:<span data-link=";

这是一个桌面图标的标签,其中data-link的值就是一个自定义属性,他存放的是当他被点击的时候 打开的窗口中的iframe所链接的网页。

那么通过jquery可以这样来获取:var dataid=$(".icons>ul>li>a>img").eq(num).attr("data-id");

这句话是写在点击事件中的,num为当前被点击元素的索引,整句话的意思就是获取当前被点击元素的自定义属性 data-id 的值。

 

【添加元素十分方便】

打开窗口,关闭窗口,元素的添加和移除都是少不了的操作,jquery实现起来很轻松。

$(".footBar").before("<div class="footBarbg"></div>"); //在.footbar元素之前添加
$(".footBar").append("<div class="timebar"></div>"); //在.footbar中添加

移除也很方便使用remove方法,当然还有其他的添加和移除方法,详细操作有兴趣的朋友可以查询手册。

 

【很犀利的控制显示与隐藏】

最小化操作是需要隐藏窗口的,使用jquery不需要费多大事。

$("#"+formid).hide(500); //隐藏元素 500是延迟时间

$("#"+formid).fadeOut(500,function(){$("#"+formid).remove();});  //淡出隐藏 延迟500

注意这里想要实现的是 元素隐藏后 移除,所以移除操作必须写在 隐藏操作的回调函数中,如果写在隐藏方法的外面,则500的延迟尚未执行完毕,移除操作就已经执行完毕,则延迟隐藏效果就会失效,而写在回调函数中,移除操作只有等待隐藏操作执行完毕回调时才会执行。

 

基本上目前学到的也就是这些了,效果比较简单,还有很多效果没有做

例如:开始菜单(一层一层的那种),鼠标框选图标,工作窗口的自由拉伸,任务栏顺序的更改,右键菜单等等的,继续学习,进一步完善。

 

代码下载:

 

本文出自博客园:D调的码农

转载请注明出处:

 


版权声明:本文由澳门金莎娱乐发布于关于澳门金莎,转载请注明出处:jquery中eq和get的区别与使用方法,图片滚动轮播示例代码