纯jQuery-添加/修改/删除 标签，属性

<h1>通过学习《精彩绝伦的jQuery》与W3C,大致了解JQuery的一些方法。</h1>

　　PS：需要有一些前置条件，比如JQuery源代码，比如html就要有如下代码

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8">
 5     <script src="jquery-1.7.2.min.js"></script>
 6     <script src="jS.js"></script>
 7 </head>
 8 <body>
 9 
10 </body>
11 </html>

 

于是在实例一些例子后，开始了自己学一下自己 的想法

  1. 如何通过JQ给HTML添加对象? 答：可以用prepend如：<div>,<img>,...。

    1 $(document).ready(function(){ 2 $('body').prepend("<button>添加</button>"); //添加button 3 });

    这条是用来给<body>添加一个<button>标签

     

  2. 如何给标签具有点击事件的效果? 答：可以用click（） 
    1 $(document).ready(function(){
2     $('body').prepend("<button>添加</button>");  //添加button
3     $('button').click(function(){       //点击button触发事件
4         $('body').append("<p>就是这样的！</p>");   //在body的后面添加文字
5     });
6 });  //点击按钮添加文字

    这段，就有1的方法上添加function(){}的方法。

  3. 如何用纯jQuery来写html，添加<div> ,添加class属性。 
     1 /*$(function(){
 2  $('body').append("<div id='red-bird'>R</div>" +
 3  "<div id='buld-bird'>Q</div>" +
 4  "<div id='green-bird'>W</div>" +
 5  "<div id='black-bird'>E</div>");
 6  $('div[id$="bird"]').addClass('b');
 7  $('.b').css( {"border": "1px",
 8  "solid":"#ccc",
 9  "width": "200px",
10  "margin": "5px",
11  "backgroundColor": "red"
12  });
13 });

     

 

posted @ 2016-04-05 16:00  毕晁瑞  阅读(918)  评论(0)    收藏  举报