jquery知识点总结

来源：互联网发布：忘记wi-fi网络连接密码编辑：程序博客网时间：2024/06/04 23:26

jquery是javscript的程序库，使用的代码如下
$(document).ready(function () { $("#div1").html("hello world"); });
![上面的代码相当于window.onload，不过跟window.onload还是有一些区别
**$(document).ready()是在DOM结构载入完后执行的，而window.onload是得在所有文件都加载完后执行的，注意区别，一个是DOM加载完，一个是所有文件加载完 .
所谓DOM加载完，就是指DOM模型加载完，也就是指代码加载完。
两者最大的区别，就是DOM加载完之后，不必再去等相应的图片加载完就可以执行JS代码了。**

一个小例子说明jquery的书写流程，实现点击高亮显示，子元素显示，相邻元素隐藏。

<script type="text/javascript" src="jquery-1.3.2.js"></script>  <script type="text/javascript">$(function(){  /*$(".level1>a")：[parent>child],class 为level1下的子元素a即 （<li class="level1"> <a href="#none">衬衫</a>） （<li class="level1"> <a href="#none">衬衫</a>） （<li class="level1"> <a href="#none">衬衫</a>） 后面的都隐藏。*/    $(".level1>a").next().hide();   //点击事件。 $(".level1>a").click(function(){   //点击当前内容添加一个样式 high;   $(this).addClass("high")   /*找到每个段落的后面紧邻的同辈元素显示; 即<a href="#none">衬衫</a>后面的<ul>标签显示；   */   .next().show()   /*父元素(就是<li class="level1">xxxxxx</li>)的同辈元素的子元素<a>移除样式"high"。 */   .parent().siblings().children("a").removeClass("high")   //找到每个段落的后面紧邻的同辈元素隐藏;   .next().hide() //阻止跳转    return false;  })    });  </script><style type="text/css">.high{color:red;}ul  li{ list-style-type:none;}a{text-decoration:none;}.level2{}</style> </head> <body><div class="box">  <ul class="menu">    <li class="level1"> <a href="#none">衬衫</a>      <ul class="level2">        <li><a href="#none" style="">短袖衬衫</a></li>        <li><a href="#none">长袖衬衫</a></li>        <li><a href="#none">短袖T恤</a></li>        <li><a href="#none">长袖T恤</a></li>      </ul>    </li>     <li class="level1"> <a href="#none">卫衣</a>      <ul class="level2">        <li><a href="#none">开襟卫衣</a></li>        <li><a href="#none">套头卫衣</a></li>        <li><a href="#none">运动卫衣</a></li>        <li><a href="#none">童装卫衣</a></li>      </ul>    </li>    <li class="level1"> <a href="#none">裤子</a>      <ul class="level2">        <li><a href="#none">短裤</a></li>        <li><a href="#none">休闲裤</a></li>        <li><a href="#none">牛仔裤</a></li>        <li><a href="#none">免烫卡其裤</a></li>      </ul>    </li>  </ul></div> </body></html>

0 0