为了更清晰的看懂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. [Leetcode][Python]51: N-Queens

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 51: N-Queenshttps://oj.leetcode.com/pro ...

  2. linux 用户空间获得纳秒级时间ns

    一.引言 我们在测试程序的性能的时候往往需要获得ns级的精确时间去衡量一个程序的性能,下面介绍下linux中用户空间获得ns级时间的方法 二.用户空间获得ns级时间 使用clock_gettime函数 ...

  3. 【DSA MOOC】有序向量二分查找的三个 版本

    内容来自 TsinghuaX: 30240184X 数据结构(2015秋) 课程的Vector一章,对有序向量的二分查找有三个版本 三个版本的函数原型是一致的,都是 Rank search(T con ...

  4. 【HDU 4771 Stealing Harry Potter's Precious】BFS+状压

    2013杭州区域赛现场赛二水... 类似“胜利大逃亡”的搜索问题,有若干个宝藏分布在不同位置,问从起点遍历过所有k个宝藏的最短时间. 思路就是,从起点出发,搜索到最近的一个宝藏,然后以这个位置为起点, ...

  5. raft 一致性算法

    介绍: 过去, Paxos一直是分布式协议的标准,但是Paxos难于理解,更难以实现,Google的分布式锁系统Chubby作为Paxos实现曾经遭遇到很多坑. 来自Stanford的新的分布式协议研 ...

  6. Linux id 命令 - 显示用户id和组id信息

    要登入一台计算机,我们需要一个用户名.用户名是一个可以被计算机识别的身份.基于此,计算机会对使用这个用户名的登陆的人应用一系列的规则.在Linux系统下,我们可以使用 id 命令. 什么是 id 命令 ...

  7. Hive 4、Hive 的安装配置(远端MyMql模式)

    1.remote一体 这种存储方式需要在远端服务器运行一个mysql服务器,并且需要在Hive服务器启动meta服务.这里用mysql的测试服务器,ip位192.168.1.214,新建hive_re ...

  8. #include <hash_set>

    哈希查找,不需要排序,适用于精确查找,比二分查找更快 #define _SILENCE_STDEXT_HASH_DEPRECATION_WARNINGS #include <iostream&g ...

  9. 解决:Incorrect line ending: found carriage return (\r) without corresponding newline (\n)

    解决方案: ——clean一下项目,这个方法可以解决 . 此方案经过验证OK

  10. KMP快速模式匹配的java实现

    假期实在无聊赖啊.把这个算法实现了一下即算是打发时间也算练练手了. KMP算法的关键是用归纳法计算失败函数.网上很详细了.下面直接给出代码. /** * * @author Vincent * */ ...