zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    Mysql多表关系
    Linux权限
    Linux安装python环境脚本
    ZJNU 2136
    ZJNU 2135
    ZJNU 2133
    ZJNU 1699
    ZJNU 1542
    ZJNU 1538
    ZJNU 1535
  • 原文地址:https://www.cnblogs.com/Jacklovely/p/6178418.html
Copyright © 2011-2022 走看看