为了更清晰的看懂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. CSS 注意事项

    使用css缩写   使用缩写可以帮助减少你CSS文件的大小,更加容易阅读. 明确定义单位,除非值为0 忘记定义尺寸的单位是CSS新手普遍的错误.在HTML中你可以只写width="100&q ...

  2. css案例学习之float浮动

    代码: <!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3. ...

  3. fstab 介绍

    http://forum.ubuntu.org.cn/viewtopic.php?t=58468 主要翻译自http://www.tuxfiles.org/linuxhelp/fstab.html,根 ...

  4. Scrapy URLError

    错误信息如下: 2015-12-03 16:05:08 [scrapy] INFO: Scrapy 1.0.3 started (bot: LabelCrawler) 2015-12-03 16:05 ...

  5. ios中strong, weak, assign, copy

    copy 和 strong(retain) 区别 1. http://blog.csdn.net/itianyi/article/details/9018567 大部分的时候NSString的属性都是 ...

  6. 学习本课程需要具备哪些基础及微信小程序目录结构介绍

    1.html css js 基础 2.ajax 基础 3.简单的面向对象基础  

  7. android 边学边记 2015.10.16

    1.Menu.FIRST在reference中描述为:First value for group and item identifier integers.我们可以理解为ID设置的最小数值. 2.se ...

  8. java logger级别

    typedef enum android_LogPriority { ANDROID_LOG_UNKNOWN = 0, ANDROID_LOG_DEFAULT,    /* only for SetM ...

  9. ASP.NET之自定义异步HTTP处理程序(图文教程)

    前面我们学习了关于关于自定义同步HTTP处理程序,相信大家可能感觉有所成就,但是这种同步的机制只能对付客户访问较少的情况或者数据处理量不大的情况,而今天这篇文章就是解决同步HTTP处理程序的这个致命缺 ...

  10. 连接时出现：Can&#39;t open display: localhost:10.0

    解决方法: 在/etc/hosts 中增加 127.0.0.1 localhost ipaddress hostname 之后能进入图形界面,注意是实际ip和机器名 $(function () { $ ...