为了更清晰的看懂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. Unix/Linux环境C编程入门教程(25) C/C++字符测试那些事儿

    isalnum isalpha isascii iscntrl isdigit isgraph isislower isprint isspace ispunct isupper isxdigit介绍 ...

  2. JIRA官方:缺陷与事务跟踪

    快速跟踪软件缺陷 JIRA的网站页面使测试人员能够快速报告.管理.跟踪缺陷.使用键盘快捷键可以很容易地导航和修改问题.你还可以从IDE直接访问JIRA问题或者通过其它各种桌面客户端.手机客户端.浏览器 ...

  3. 百度地图V2.0实践项目开发工具类bmap.util.js V1.4

    /** * 百度地图使用工具类-v2.0(大眾版) * * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @em ...

  4. (译)"usermod"命令使用完全指导---15个练习例程截图

    "usermod"命令使用完全指导---15个练习例程截图 By Babin Lonston Under: Linux Commands On: November 11, 2014 ...

  5. Linux开发环境配置

      配置JDK: tar -xzvf jdk-7u71-linux-x64.tar.gz rm -f jdk-7u71-linux-x64.tar.gz 测试:java -version 配置Grad ...

  6. Swift中元组(Tuples),结构体(Struct),枚举(Enums)之间的区别

    Swift有许多种存储数据方式,你可以用枚举(enums),元组(tuples),结构体(structs),类(classes),在这篇文章中我们将比较枚举.元组.结构体之间区别,首先从最简单的开始- ...

  7. DevExpress GridView使用技巧之列标题点击事件

    在这里使用GridView的MouseDown事件.这里同样使用的是GridHitInfo来获取点击位置的信息,来判断是否在列标题上.GridHitInfo根据鼠标点击的x.y坐标获取该点的相关信息, ...

  8. sql linq lambda 对比

    . 查询Student表中的所有记录的Sname.Ssex和Class列. select sname,ssex,class from student Linq: from s in Students ...

  9. java web 之 BeanUtils.populate的作用

    首先,它是在org.apache.commons.beanutils.BeanUtils包中的一个方法. 方法的作用:用来将一些 key-value 的值(例如 hashmap)映射到 bean 中的 ...

  10. js:关于IE6/7下new Date(值)输出为NaN的解决方案

    不得不再次说,万恶的IE,你太守旧了吧,这里出错的原因是IE的时间格式,不是2012-01-23(很多人喜欢用这样的格式) 而是2012/01/23(怎么感觉像是在用VB6和access啊) 搞了好久 ...