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. Java程序猿笔试面试之String

    1.怎样实现字符串的反转比如:"how are you"--->"you are how" 2.怎样推断2个字符串是否有同样的字符组成 比如"a ...

  2. [转]SSIS ProtectionLevel 对包中敏感数据的访问控制

    本文转自:http://technet.microsoft.com/zh-cn/library/ms141747.aspx 为了保护 Integration Services 包中的数据,可以设置保护 ...

  3. 阻止jQuery事件冒泡

    Query对DOM的事件触发具有冒泡特性.有时利用这一特性可以减少重复代码,但有时候我们又不希望事件冒泡.这个时候就要阻止 jQuery.Event冒泡. 在jQuery.Event 的文档 中的开头 ...

  4. java缓存适合使用的情况

    并非所有的情况都适合于使用二级缓存,需要根据具体情况来决定.同时可以针对某一个持久化对象配置其具体的缓存策略. 适合于使用二级缓存的情况: 1.数据不会被第三方修改 一般情况下,会被hibernate ...

  5. Spring Security实现后台管理员登录（一）

    一.实现功能 二.数据表设计 为了测试方便,这里创建一个简单的数据表,只含有name和password两个字段.至于角色,权限等,这里都先不考虑. 插入一条数据,name为admin,password ...

  6. 绿化和卸载 DOS 批处理

    @ECHO OFF&PUSHD %~DP0 &TITLE 绿化和选项 mode con cols= lines= color 2F Rd >NUL Md >NUL||(Ec ...

  7. javascript 中用到的时间戳函数

    JavaScript 获取当前时间戳:第一种方法: var timestamp = Date.parse(new Date()); 例如结果:1280977330000第二种方法: var times ...

  8. 在Eclipse中点击ctrl+h打开搜索界面，范围指定的项目中搜索包含person的文件

    ctrl+h ===>File Search Tab ===>在containing text里输入person,scope ==>selected resources,搜索就可以了

  9. VC在windows中打开文件夹并选中文件

    网上一位前辈高人的一段精髓代码让我眼前一亮…… ShellExecute(NULL, "open", "explorer.exe", "/select ...

  10. vue - .gitignore

    描述:npm官方屏蔽上传文件编写文件. 举例(屏蔽的文件/文件夹记得分行) 屏蔽文件:yarn.txt 屏蔽文件夹:/dist/