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. 自定义标签（JspFragment类、invoke方法、开发带属性的标签）

    自定义标签(JspFragment类.invoke方法.开发带属性的标签) 一.JspFragment类 javax.servlet.jsp.tagext.JspFragment类是在JSP2.0中定 ...

  2. 本地环境 XAMPP+phpStorm+XDebug+chrome配置和断点调试

    不明白phpStorm+XAMPP+chrome组合的phpStorm配置XDebug的断点调试,很多种网页办法都看过了,可用,但没达预期.QQ群问,一个大牛很奇怪我都配置了怎么还不正确,很干脆地说远 ...

  3. MySQL5.6安装步骤(windows7/8_64位)

    [转]MySQL5.6安装步骤(windows7/8_64位) 1. 下载MySQL Community Server 5.6.11 2. 解压MySQL压缩包 将以下载的MySQL压缩包解压到自定义 ...

  4. 解决NoClassDefFoundError: javax/servlet/jsp/jstl/core/Config

    使用spring3.05 mvc进行开发,使用tomcat容器,通过url映射寻找view的时候,会报错NoClassDefFoundError: javax/servlet/jsp/jstl/cor ...

  5. Azkaban配置

    1,新建azkaban目录,用于安置azkaban程序 2,azkaban web服务器安装  解压 azkaban-web-server-2.5.0.tar.gz tar -zvxf azkaban ...

  6. SVG路径字符串格式

    命令 名称 参数 M 移动到(moveTo) (x y)+ Z 闭合路径(closepath) (none) L 直线(lineTo) (x y)+ H 水平直线 x+ V 垂直直线 y+ C 曲线( ...

  7. 爪哇国新游记之十四----初试JDBC

    import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import ...

  8. redis学习笔记——事件处理

    Redis服务器是一个事件驱动程序,服务器需要处理以下两类事件: 文件事件(file event):Redis服务器通过套接字与客户端(或者其他Redis服务器)进行连接,而文件事件就是服务器对套接字 ...

  9. 适合移动手机使用的js环形菜单特效插件

    blooming-menu是一款适合在移动手机上使用的js环形菜单插件.该环形菜单提供了众多的參数,通过结合CSS3动画制作出效果很炫酷的圆形菜单展开和隐藏动画效果. 以下是这个圆形菜单菜价的可用參数 ...

  10. Springboot配置文件加载顺序

    使用Springboot开发的时候遇到了配置的问题,外部config里的配置文件本来没有配置https怎么启动还是https呢,原来开发中测试https在classpath路径的配置文件添加https ...