JQuery 常见DOM操作练习1

来源：互联网发布：网络中控主机技术措施编辑：程序博客网时间：2024/05/06 20:03

1.管理选择器(size()方法)所得的结果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>size()方法</title><style type="text/css"><!-- html{     cursor:help; font-size:12px;     font-family:Arial, Helvetica, sans-serif;  } div{     border:1px solid #003a75;     background-color:#FFFF00;     margin:5px;     padding:20px;     text-align:center;     height:20px;     width:20px;     float:left  } --></style><script type="text/javascript" src="jquery-3.1.1.min.js"></script><script type="text/javascript">  document.onclick=function(){    var i=$("div").size()+1;    var div=document.createElement("div");    div.innerHTML=i;    $("body")[0].appendChild(div) ;//将jquery对象转换成DOM对象    $("span")[0].innerHTML=i;  }</script></head><body>   <p>页面中一共有<span>0</span>个div块。点击鼠标添加div:</p></body></html>

2.管理选择器(index()方法)所得的结果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>size()方法</title><style type="text/css"><!-- html{     cursor:help; font-size:12px;     font-family:Arial, Helvetica, sans-serif;  } div{     border:1px solid #FF0;     background-color:#609;     margin:5px;     padding:20px;     text-align:center;     height:20px;     width:20px;     float:left ;     cursor:help; } --></style><script type="text/javascript" src="jquery-3.1.1.min.js"></script><script type="text/javascript">  $(function()  {      $("div").click(function(){         var index=$("div").index(this);//得到当前点击的div下标         $("span").html(index.toString());//得到的下标放在span元素内      });//给6个div分别绑定click事件  })</script></head><body>   <div>0</div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div>   点击的div块序列号为： <span></span></body></html>

截图：

3.管理选择器(filter()方法)所得的结果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>size()方法</title><style type="text/css"><!-- div{     margin:5px;     padding:5px;     height:40px;     width:40px;     float:left;  } .myclass1{     background:#F00; } .myclass2{     border:2px solid #0C9; } --></style><script type="text/javascript" src="jquery-3.1.1.min.js"></script><script type="text/javascript">  $("div").addClass("myclass1");//添加myclass1类选择器  var divs=$("div").filter("[class*='middle']");//过滤出类名为middle的选择器  divs.addClass("myclass2");//添加myclass2类选择器  //$("div").addClass("myclass1").filter("[class*='middle']").addClass("myclass2");//第二种方法  //filter也可以添加函数  $("div").addClass("myclass1").filter(function(index){      return index==1||index==3;//添加第2和第4个类选择器  }).addClass("myclass2");  </script></head><body>  <div></div>  <div class="middle"></div>  <div class="middle"></div>  <div class="middle"></div>  <div class="middle"></div>  <div></div></body></html>

4.管理选择器(add(),not(),find()方法)所得的结果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>size()方法</title><style type="text/css"><!-- .myclass{     background:#F00; } --></style><script type="text/javascript" src="jquery-3.1.1.min.js"></script><script type="text/javascript"> $(function(){    $("p").find("span").add('p>b').not('p>b').addClass("myclass") ; });</script></head><body>  <p><span>Hello</span>,how <b>are</b> you?</p></body>

截图：

5.管理选择器(each()方法)所得的结果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>size()方法</title><style type="text/css"><!-- img{    border:1px solid #FF0;  } --></style><script type="text/javascript" src="jquery-3.1.1.min.js"></script><script type="text/javascript"> $(function(){    $("img").each(function(index){        this.title="这是第"+index+"幅图，id是:"+this.id;//鼠标点上去显示第几幅图片    }); });</script></head><body>  <img src="jia.jpg" width="50px" height="50px" id="img01"/>  <img src="jia.jpg" width="50px" height="50px" id="img02"/>  <img src="jia.jpg" width="50px" height="50px" id="img03"/>  <img src="jia.jpg" width="50px" height="50px" id="img04"/>  <img src="jia.jpg" width="50px" height="50px" id="img05"/></body>

截图：

6.管理选择器(endSelf()方法)所得的结果

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>size()方法</title><style type="text/css"><!--.myBackground{    background:#03C;}.myborder{    border:2px solid #FF0;}p{    margin:8px;    padding:4px;    font-size:12px;} --></style><script type="text/javascript" src="jquery-3.1.1.min.js"></script><script type="text/javascript"> $(function(){    $("div").find("p").addClass("myBackground").end().addClass("myborder");//加入end()方法回到div，然后再加边框属性    $("div").find("p").addClass("myBackground").endSelf().addClass("myborder");//用endself()进行将前面对象进行组合化处理,先给自身加边框，再给整体加边框 });</script></head><body><div <p>第一段</p> <p>第二段</p> </div></body>

截图：

0 0