jQuery的操作对Dom的操作

最新推荐文章于 2024-08-28 21:06:04 发布

池鱼i_

最新推荐文章于 2024-08-28 21:06:04 发布

阅读量363

点赞数 5

文章标签： html js jquery

本文链接：https://blog.csdn.net/best_p1/article/details/117986812

版权

使用css()为指定的元素设置样式值

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
       <script>
           $(function(){
               $("#pic1").css({"border":"3px solid #00ff00","opacity":"0.1"});
           });
       </script>
   </head>
   <body>
       <img src="img/lift_product_1.jpg" id="pic1" />
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           li{
               list-style: none;
           }
           .show{
               color: azure;
               background-color: blueviolet;
           }
       </style>
       <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
       <script>
           $(function(){
               $("li").hover(function(){
                   $(this).toggleClass("show");
               });
           });
       </script>
   </head>
   <body>
       <ul>
           <li>葫芦娃</li>
           <li>苏克和贝塔</li>
           <li>黑猫警长</li>
           <li>铁臂阿童木</li>
           <li>圣斗士星矢</li>
           <li>魔神坛斗士</li>
       </ul>
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
       <script>
           $(function(){
               /*
               var content=$("#left").html();
               alert(content);
               $("[type=button]").click(function(){
                   $("#left").html("<div id='content1'><img src='img/headimg.jpg' /></div>");
               });
               */
               var content=$("#left").text();
               alert(content);
               $("[type=button]").click(function(){
                   $("#left").text("<div id='content1'><img src='img/headimg.jpg' /></div>");
               });
           });
       </script>
   </head>
   <body>
       <div id="left">
           <img src="img/lift_product_1.jpg" />
           <p>这是一把小雨伞</p>
       </div>
       <input type="button" value="点我换内容" />
   </body>
</html>

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
       <script>
           $(function(){

               $("#content1").focus(function(){
                   var contents=$("#content1").val();
                   if(contents=="冰箱"){
                       $("#content1").val("");
                   }
               });
               $("#content1").blur(function(){
                   var contents=$("#content1").val();
                   if(contents==""){
                       $("#content1").val("冰箱");
                   }
               });
           });
       </script>
   </head>
   <body>
       <input type="text" value="冰箱" id="content1"/><input type="button" value="搜索" />
   </body>
</html>

元素外部插入同辈节点

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">
           li{
               list-style: none;
           };
       </style>
       <script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
       <script>
           $(function(){
//               $("h2").hide();
//               $("li").css("background-color","aqua");
           //创建节点
           var $newNode1=$("<li>犬夜叉</li>");
           //添加子节点
           //$("ul").append($newNode1);
           // $newNode1.appendTo("ul");

           //前置插入子节点
               //$("ul").prepend($newNode1);
               //$newNode1.prependTo("ul");
           //元素之后插入同辈节点
               //$("ul").after($newNode1);
               //$newNode1.insertAfter("ul");
           //元素之前插入同辈节点
               //$("ul").before($newNode1);
               //$newNode1.insertBefore("ul");
           //删除、清空节点
           //$("ul li:eq(1)").remove();
           //$("ul li:eq(1)").detach();
           //$("ul li:eq(1)").empty();
           //替换节点
           //$("ul li:eq(1)").replaceWith($newNode1);
           //$newNode1.replaceAll("ul li:eq(1)");
           //复制节点
           //$("ul li:eq(1)").clone(true).appendTo("ul");

           //获取和设置节点的属性
           var $newNode2=$("<img src='img/headimg.jpg' alt='这是一个小可爱' />");
           $newNode2.appendTo("ul");
           alert($($newNode2).attr("alt"));
           $("img").attr({"height":"100","width":"50"});
           $("img").removeAttr("width");
           });
       </script>
   </head>
   <body>
       <h2>动画片</h2>
       <ul>
           <li>葫芦娃</li>
           <li>苏克和贝塔</li>
           <li>黑猫警长</li>
           <li>铁臂阿童木</li>
           <li>圣斗士星矢</li>
           <li>魔神坛斗士</li>
       </ul>
   </body>
</html>

池鱼i_

关注

5
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
6
评论
jQuery的操作对Dom的操作

li<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> li{ list-style: none; } .show{ ...
复制链接

扫一扫