为了更清晰的看懂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. 使用LINQ查询非泛型类型

    原文地址:http://www.cnblogs.com/buzz/archive/2009/04/23/1442159.html using System;using System.Collectio ...

  2. ROS的tf_tree相关

    1．相关问答 http://answers.ros.org/question/11682/robot_pose_ekf-with-an-external-sensor/ http://ros-user ...

  3. OC基础3：一些基本概念

    "OC基础"这个分类的文章是我在自学Stephen G.Kochan的<Objective-C程序设计第6版>过程中的笔记. 1.关于NSLog函数中的“%2i”: ( ...

  4. HTTP概念进阶

    1.什么是回调? 在Java中,就是类A调用类B中的某个方法b,然后类B又在某个时候反过来调用类A中的某个方法a,对于A来说,这个a方法便叫做回调方法 pubilc interface CallBac ...

  5. UVA 1603 Square Destroyer

    题意: 给定一个火柴棒拼成的方格阵,然后去掉一些火柴棒,问至少再去掉几根火柴棒能够让图中一个正方形都没有. 思路: 1. 由于题目中给定了 n 的范围,2 * n * (n + 1) <= 60 ...

  6. asp.net uploadfile 上传文件，连接已重置问题

    修改web.config中的配置 <httpRuntime maxRequestLength="/> //设置上传文件大小(kb)和响应时间(s) 针对iis7或更高版本另需要在 ...

  7. Oracle视图基础

    --表的另一种形式,看起来很像表 --用view可以实现复杂的query====select --创建一个视图 --当经常使用这个查询时封装成view /*create or replace 表示在创 ...

  8. windows系统——mysql自动定时备份数据库的最佳方法

    网上有很多关于window下Mysql自动备份的方法,可是真的能用的也没有几个,有些说的还非常的复杂,难以操作. 我们都知道mssql本身就自带了计划任务可以用来自动备份,可是mysql咱们要怎么样自 ...

  9. linux 让一个程序开机自启动并把一个程序加为服务

    本文以tomcat7为例 首先找到tomcat启动的目录,我的为 cd /usr/local/tomcat7/bin/ 这个目录 启动脚本是startup.sh 然后在/etc/rc.d/rc.loc ...

  10. Spring随笔 - 事务隔离级别

    Spring提供5中事务隔离级别: ISOLATION_DEFAULT:使用数据库后端的默认隔离级别. ISOLATION_READ_UNCOMMITTED:允许读取尚未提交的数据变更.可能会导致脏读 ...