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. 更改＂xxxx＂ 的权限: 不允许的操作

    [摘要:做为root用户,用chmod为何改没有了文件权限 以ROOT用户上岸,当用chmod改文件权限时,体系表现无权变动,为何 文件名是:aa chmod 777 aa chmod: changi ...

  2. C#++c1FlexGrid+帮助文档09

    摘自: http://3y.uu456.com/bp-e2746s16s2d380eb62946d27-1.html C#:c1FlexGrid帮助文档:Value-MappedLists(值映射列表 ...

  3. ivy由于sha1码不正确导致找不到模块（jar）的错误

    sbt设置jboss-interceptor-api-1.1作为依赖,但是找不到 [info] Resolving org.jboss.interceptor#jboss-interceptor-ap ...

  4. Spark Streaming no receivers彻底思考

    数据接入Spark Streaming的二种方式:Receiver和no receivers方式 建议企业级采用no receivers方式开发Spark Streaming应用程序,好处: 1.更优 ...

  5. java中class.forName和classLoader加载类的区分

     java中class.forName和classLoader都可用来对类进行加载.前者除了将类的.class文件加载到jvm中之外,还会对类进行解释,执行类中的static块.而classLoade ...

  6. 使用WinScp连接远程服务器和传输文件

    早在3月份,我就使用到了WinScp,WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端.同时支持SCP协议. 它的主要功能就是在本地与远程计算机间安全的复制文件..WinSc ...

  7. Win7下Python WEB环境搭建

    环境介绍: Win7 64位 SP1 Python:2.7.6 网关接口:flup Nginx安装:http://blog.csdn.net/jacson_bai/article/details/46 ...

  8. EditText输入为空button不可点击搜索

    一丶任务详情 二丶改动后演示效果 三丶改动过程 分析:非常明显这里是须要监听EditText,推断输入字符串长度是否不为0来改变Button样式 首先的屡清楚代码逻辑在适当的位子加监听推断是最好的处理 ...

  9. react 设置代理(proxy) 实现跨域请求

    一,对于使用creat-react-app构建的项目,可以直接在package.json下配置,具体如下 "proxy": "http://api.xxxx.com&qu ...

  10. js 立即执行函数定义方法

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...