jquery第四期：对象转换的小实例
为了更清晰的看懂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第四期：对象转换的小实例的更多相关文章
- jQuery --- 第四期 (jQuery动效)
学习笔记 1.jQuery动画的淡入淡出 <!doctype html> <html> <head> <meta charset="utf-8&qu ...
- 第三章 JQuery: HelloWorld--常见方法--css--选择器--筛选器--属性--效果--事件--数组操作--字符串操作--对象转换
1.jQuery简介 为了简化JavaScript 的开发, 一些JavsScript 库诞生了. JavaScript库封装了很多预定义的对象和实用函数.能帮助使用者建立有高难度交互的页面, 并且兼 ...
- jquery json对象转换
jquery json对象转换 <pre>//json数组转json串var arr = [1,2,3, { a : 1 } ];JSON.stringify( arr ); //json ...
- 前端（十七）—— jQuery基础：jQuery的基本使用、JQ功能概括、JS对象与JQ对象转换、Ajax简单应用、轮播图
jQuery的基本使用.JQ功能概括.JS对象与JQ对象转换.Ajax简单应用.轮播图 一.认识jQuery 1.什么是jQuery jQuery是对原生JavaScript二次封装的工具函数集合 j ...
- jquery 和 js 对象转换
核心提示:jquery选择器得到的jquery对象和标准的 javascript中的document.getElementById()取得的dom对象是两种不同的对象类型,一般情况下,如S(’#id’ ...
- jquery第三期：js与jquery对象转换
我们开始进入jquery的学习了,jquery的学习就不那么中规中矩了,我们来看一个和javascript有所区别的地方. <!DOCTYPE html PUBLIC "-//W3C/ ...
- 22-[jQuery]-选择器, js jQuery对象转换
1.基础选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...
- jquery对象和javascript的dom对象转换
Jquery框架为jquery对象定义了独立使用的方法和属性,它无法直接调用dom对象的方法,dom对象也无法直接调用jquery对象的方法和属性. Jquery对象和dom对象是可以相互转换的,因为 ...
- jquery对象和DOM对象转换
DOM对象转换成jquery对象 var box = document.getElementById('box'); console.log($(box)); jquery对象转化成DOM对象 第一种 ...
随机推荐
- Unix/Linux环境C编程入门教程(25) C/C++字符测试那些事儿
isalnum isalpha isascii iscntrl isdigit isgraph isislower isprint isspace ispunct isupper isxdigit介绍 ...
- JIRA官方：缺陷与事务跟踪
快速跟踪软件缺陷 JIRA的网站页面使测试人员能够快速报告.管理.跟踪缺陷.使用键盘快捷键可以很容易地导航和修改问题.你还可以从IDE直接访问JIRA问题或者通过其它各种桌面客户端.手机客户端.浏览器 ...
- 百度地图V2.0实践项目开发工具类bmap.util.js V1.4
/** * 百度地图使用工具类-v2.0(大眾版) * * @author boonya * @date 2013-7-7 * @address Chengdu,Sichuan,China * @em ...
- (译)"usermod"命令使用完全指导---15个练习例程截图
"usermod"命令使用完全指导---15个练习例程截图 By Babin Lonston Under: Linux Commands On: November 11, 2014 ...
- Linux开发环境配置
配置JDK: tar -xzvf jdk-7u71-linux-x64.tar.gz rm -f jdk-7u71-linux-x64.tar.gz 测试:java -version 配置Grad ...
- Swift中元组(Tuples),结构体(Struct),枚举(Enums)之间的区别
Swift有许多种存储数据方式,你可以用枚举(enums),元组(tuples),结构体(structs),类(classes),在这篇文章中我们将比较枚举.元组.结构体之间区别,首先从最简单的开始- ...
- DevExpress GridView使用技巧之列标题点击事件
在这里使用GridView的MouseDown事件.这里同样使用的是GridHitInfo来获取点击位置的信息,来判断是否在列标题上.GridHitInfo根据鼠标点击的x.y坐标获取该点的相关信息, ...
- sql linq lambda 对比
. 查询Student表中的所有记录的Sname.Ssex和Class列. select sname,ssex,class from student Linq: from s in Students ...
- java web 之 BeanUtils.populate的作用
首先,它是在org.apache.commons.beanutils.BeanUtils包中的一个方法. 方法的作用:用来将一些 key-value 的值(例如 hashmap)映射到 bean 中的 ...
- js：关于IE6/7下new Date(值)输出为NaN的解决方案
不得不再次说,万恶的IE,你太守旧了吧,这里出错的原因是IE的时间格式,不是2012-01-23(很多人喜欢用这样的格式) 而是2012/01/23(怎么感觉像是在用VB6和access啊) 搞了好久 ...