Jquery学习笔记（1）--JQuery原理，与JS对象互换，核心函数

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

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

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

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <script src="jquery.js"></script>
 7 </head>
 8 <body>
 9     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
10     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
11     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
12     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
13     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
14     <h1>aaaaaaaaaaaaaaaaaaaaaa</h1>
15     
16 </body>
17 <script>
18     //点击显示行号
19     //each循环，函数可传参i
20     //每个h1标签添加num属性，赋值为i+1
21     $('h1').each(function(i){
22         $(this).attr('num',i+1);
23     });
24     //点击每个h1标签，让标签内部文字变成num的值
25     $('h1').click(function(){
26         $(this).html($(this).attr('num'));
27     });
28 </script>
29 
30 </html>

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

 1 <script>    
 2     $('h1').each(function(i){
 3         //data方法是生成一个标签，后面是他的值
 4         $(this).data('num',i+1);;
 5     });
 6     $('h1').click(function(){
 7         //使用data里面的num标签的值
 8         $(this).html($(this).data('num'));
 9     });
10 </script>