为了更清晰的看懂jquery对象是一个数组，我们这一期来改变每一个<li>中的值，在前面加上序号。

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="jquery-1.10.1.js"></script>

<script type="text/javascript">

   $(function()

   {

	var lis = $("#hello ul li");//获得jquery对象

	for(i=0;i<lis.length;i++)

	{

		var li = lis[i];//获得js对象

		li.innerHTML = "["+(i+1)+"]"+li.innerHTML;//调用js对象的innerHTML方法

	}

   });

</script>

</head>

<body>

<div id="hello">

  <ul>

    <li>niujiabin</li>

	<li class="abc">maybe</li>

	<li>gossipgo</li>

  </ul>

</div>

</body>

</html>

我们还可写成下面的形式：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Insert title here</title>

<script type="text/javascript" src="jquery-1.10.1.js"></script>

<script type="text/javascript">

   $(function()

   {

	var lis = $("#hello ul li");//获得jquery对象

	for(i=0;i<lis.length;i++)

	{

		var li = lis[i];//获得js对象

		$(li).html("["+(i+1)+"]"+$(li).html());//html方法，可以改变文本值，若里面有参数是改变，

没参数是取值

 }

   });

</script>

</head>

<body>

<div id="hello">

  <ul>

    <li>niujiabin</li>

	<li class="abc">maybe</li>

	<li>gossipgo</li>

  </ul>

</div>

</body>

</html>

jquery第四期：对象转换的小实例的更多相关文章

  1. jQuery --- 第四期 (jQuery动效)

    学习笔记 1.jQuery动画的淡入淡出 <!doctype html> <html> <head> <meta charset="utf-8&qu ...

  2. 第三章 JQuery: HelloWorld--常见方法--css--选择器--筛选器--属性--效果--事件--数组操作--字符串操作--对象转换

    1.jQuery简介 为了简化JavaScript 的开发, 一些JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的页面, 并且兼 ...

  3. jquery json对象转换

    jquery json对象转换 <pre>//json数组转json串var arr = [1,2,3, { a : 1 } ];JSON.stringify( arr ); //json ...

  4. 前端（十七）—— jQuery基础：jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图

    jQuery的基本使用.JQ功能概括.JS对象与JQ对象转换.Ajax简单应用.轮播图 一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 j ...

  5. jquery 和 js 对象转换

    核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’ ...

  6. jquery第三期：js与jquery对象转换

    我们开始进入jquery的学习了,jquery的学习就不那么中规中矩了,我们来看一个和javascript有所区别的地方. <!DOCTYPE html PUBLIC "-//W3C/ ...

  7. 22-[jQuery]-选择器, js jQuery对象转换

    1.基础选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  8. jquery对象和javascript的dom对象转换

    Jquery框架为jquery对象定义了独立使用的方法和属性,它无法直接调用dom对象的方法,dom对象也无法直接调用jquery对象的方法和属性. Jquery对象和dom对象是可以相互转换的,因为 ...

  9. jquery对象和DOM对象转换

    DOM对象转换成jquery对象 var box = document.getElementById('box'); console.log($(box)); jquery对象转化成DOM对象 第一种 ...

随机推荐

  1. zabbix 组信息

    mysql> select * from groups; +---------+------------------+----------+-------+ | groupid | name | ...

  2. [转载]CTO和技术总监区别

    原文地址:http://blog.sina.com.cn/s/blog_6024cfa90101cb0h.html 技术总监(Chief Technical Officer)与CTO(Chief Te ...

  3. hdu 1050 Moving Tables_贪心

    题意:你搬n个桌子,桌子从一个地方搬到另一个地方,走廊只允许同时一个桌子通过,教室分布在两边,奇数在一边,偶数在一边,当桌子不冲突时可以同时搬运,冲突时要等别的那个桌子搬完再搬. 思路:因为奇数桌子在 ...

  4. poj 1603 Risk_spfa向前星

    poj终于到100题,贴个代码纪念一下,hdu 到400题再贴 题意:有20个城市,接下来有19行告诉你,i城市与n个城市相连,图是双向的,然后叫你求x到y的最小经过几个城市 #include < ...

  5. RTNETLINK answers: Operation not permitted

    如果出现:RTNETLINK answers: Operation not permitted,那是因为没有权限. 解决办法:su,输入root密码.

  6. 通过Jetty搭建一个简单的Servlet运行环境

    最近在做一些简单的Servlet开发的时候,感觉每次调试的时候都要发布到tomcat上很麻烦,把程序共享给同事也很麻烦,需要帮他设置本地的tomcat环境. 在网上找了找其他的Servlet运行环境, ...

  7. %1 不是有效的 Win32 应用程序

    客户环境windows server 2008,iis 6.0. 站点配置与以往并无差别,更新类库后出现“%1 不是有效的 Win32 应用程序”错误,如下图: 系统登录页面可以正常加载,登录过程中出 ...

  8. Ext.grid.GridPanel的属性

    1.Ext.grid.GridPanel     主要配置项:          store:表格的数据集          columns:表格列模式的配置数组,可自动创建ColumnModel列模 ...

  9. NT kernel & System 占用占用80端口

    问题: 1 运行'netstat -ano'发现80端口被pid=4的进程占用 2 打开任务管理器,发现pid=4的进程,其实是system进程,其对应的进程描述是NT kernel & sy ...

  10. oracle表导入导出

    数据导出: 1 将数据库TEST完全导出,用户名system 密码manager 导出到D:\daochu.dmp中   exp system/manager@TEST file=d:\daochu. ...