js对象转jQuery对象，$('num')，

jQuery对象转js对象，$('num')[0]，或$('num').get(0)。

1.点击换行，each(),html(),attr()，每个h1标签添加一个num来实现

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script src="jquery.js"></script>

 </head>

 <body>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>

 </body>

 <script>

     //点击显示行号

     //each循环，函数可传参i

     //每个h1标签添加num属性，赋值为i+1

     $('h1').each(function(i){

         $(this).attr('num',i+1);

     });

     //点击每个h1标签，让标签内部文字变成num的值

     $('h1').click(function(){

         $(this).html($(this).attr('num'));

     });

 </script>

 </html>

2. 点击换行，data()方法

 <script>

     $('h1').each(function(i){

         //data方法是生成一个标签，后面是他的值

         $(this).data('num',i+1);;

     });

     $('h1').click(function(){

         //使用data里面的num标签的值

         $(this).html($(this).data('num'));

     });

 </script>

Jquery学习笔记（1）--JQuery原理，与JS对象互换，核心函数的更多相关文章

  1. jQuery学习笔记之jQuery的Ajax（3）

    jQuery学习笔记之jQuery的Ajax(3) 6.jQuery的Ajax插件 源码地址: https://github.com/iyun/jQueryDemo.git ------------- ...

  2. jQuery 学习笔记：jQuery 代码结构

    jQuery 学习笔记:jQuery 代码结构 这是我学习 jQuery 过程中整理的笔记,这一部分主要包括 jQuery 的代码最外层的结构,写出来整理自己的学习成果,有错误欢迎指出. jQuery ...

  3. jQuery学习笔记(一)jQuery选择器

    目录 jQuery选择器的优点 基本选择器 层次选择器 过滤选择器 表单选择器 第一次写博客,希望自己能够长期坚持,以写博客的方式作为总结与复习. 最近一段时间开始学习jQuery,通过写一个jQue ...

  4. jQuery学习笔记(二)jQuery中DOM操作

    目录 DOM操作分类 jQuery中的各种DOM操作 查找节点 创建节点 删除节点 复制节点 替换节点 包裹节点 属性操作 样式操作 对HTML.文本和值的操作 遍历节点 CSS-DOM操作 小结 本 ...

  5. jQuery学习笔记（jquery.ui插件）

    官网地址:http://ui.jquery.com/ jQuery UI源自于一jQuery插件-Interface.目前版本是1.10.3,需要jQuery 1.6以上版本支持. jQuery UI ...

  6. jQuery学习笔记（jquery.simplemodal插件）

    官网地址:http://www.ericmmartin.com/ SimpleModal是一个轻量级的jQuery插件,它为模式窗口的开发提供了一个强有力的接口,可以把它当作模式窗口的框架.Simpl ...

  7. jQuery学习笔记（jquery.form插件）

    官网: http://malsup.com/jquery/form/ jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Fo ...

  8. jQuery学习笔记（jquery.validate插件）

    jquery.validate官网地址:http://jqueryvalidation.org/ 1. 导入JavaScript库 <script src="../js/jquery. ...

  9. jQuery学习笔记之jQuery.fn.init()的参数分析

    这篇文章主要介绍了jQuery.fn.init()的参数分析,需要的朋友可以参考下   从return new jQuery.fn.init( selector, context, rootjQuer ...

  10. 锋利的jQuery学习笔记之jQuery选择器

    在介绍jQuery选择器之前,先简单介绍一下CSS选择器---> 一.CSS选择器 常见的CSS选择器有以下几种: 选择器 语法 描述 示例 标签选择器 E{CSS规则} 以文档元素为选择符 t ...

随机推荐

  1. [转]自用类库整理之SqlHelper和MySqlHelper

    本文转自:http://www.cnblogs.com/lzrabbit/p/3287155.html 自用的SQLHelper和MySqlHelper,除一些通用方法外,封装了一些很实用的批量操作方 ...

  2. Verilog语法

    语法子集很小,易用. 模块:module…endmodule 端口:input,output,inout(双向特殊) inout比较难用,有一张真值表,需要大家观察后书写,基本原则就是输入时一定是高阻 ...

  3. scrapy处理需要跟进的url

    在做scrapy爬虫的时候经常会遇到需要跟进url的情况,网站a有许多url,但是我们需要跟进这些url,进一步获取这些url中的详细内容. 简单的说就是要先解析出所有需要的url,然后跟进这些url ...

  4. （转）Android项目重构之路:架构篇

    去年10月底换到了新公司,做移动研发组的负责人,刚开始接手android项目时,发现该项目真的是一团糟.首先是其架构,是按功能模块进行划分的,本来按模块划分也挺好的,可是,他却分得太细,总共分为了17 ...

  5. [Functional Programming Monad] Modify The State Of A State Monad

    Using put to update our state for a given state transaction can make it difficult to modify a given ...

  6. Mac下访问windows的共享文件夹

    Finder->前往->smb://<user>@<ip>

  7. java中==与equal()的区别

    ==和equal()都是用来判断两个变量是否相等的. (1)如果两个变量是基本类型变量,且都是数值型的(不一定数据类型相同),只要是值相同,将返回true; (2)如果两个变量是引用型变量,只有它们指 ...

  8. 解决tomcat提交的数据乱码的问题

    有时,开发过程中会遇到前端传入“中文”并返回时,会出现乱码!主要是因为前端通过tomcat7提交的数据就出现了乱码的问题,也就说根源在于tomcat7. 有2中方案解决该问题: (1)使用tomcat ...

  9. Oracle 临时表空间 temp表空间切换

    一.TEMP表空间 临时表空间主要用途是在数据库进行排序运算.管理索引.访问视图等操作时提供临时的运算空间,当运算完成之后系统会自动清理.当oracle里需要用到sort的时候,PGA中sort_ar ...

  10. Spring之替换Bean的返回结果,替换Bean的方法实例

    Spring是一个非常强悍的框架+容器,其中有代理模式(动态代理模式)的极致体现.下面是两个比较让人感觉精彩的代码使用,重点关注main方法中的ClassPathXMlApplicationConte ...