jquery学习之笔记一

jquery是继prototype后一个很好用的javascript库。jquery是一个轻量级的库，拥有强大的选择器，出色的DOM操作，可靠的事件处理，完善的兼容性和链式操作等功能.

window.onload  与$(document).ready()的区别
1.执行时机：window.onload 必须等待网页中所有的内容加载完毕之后才能执行（包括图片）
                   而$(document).ready()当网页中所有DOM结构绘制完毕之后就执行，可能DOM关联的东西并没有加载完。
2.编写个数：window.onload只能编写一次，而后者可以编写好多次
3.简化写法：前者没有，后者可以简写成为$(function(){.......});

 

一个导航栏的小例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
</head>

<style type="text/css">
  .menu{ width:300px;}
  .has_children{ background:#555; color:#fff; cursor:pointer}
  .highlight{ color:#fff; background:green;}
  div{ padding:0; margin:10px 0;}
  div a{ background:#888; display:none; float:left; width:300px;}
</style>

<script type="text/javascript">
$(function(){
    $('.has_children').click(function(){
        $(this).addClass('highlight').children('a').show().end().siblings().removeClass('highlight').children('a').hide();
    });
 
});   
</script>
<body>
<div class="menu">
   <div class="has_children">
      <span>第一章 认识jquery</span>
      <a>1.1javascript 和javascript库</a>
      <a>1.2javascript 和javascript库</a>
      <a>1.3javascript 和javascript库</a>
      <a>1.4javascript 和javascript库</a>
      <a>1.5javascript 和javascript库</a>
      <a>1.6javascript 和javascript库</a>
      <a>1.7javascript 和javascript库</a>
   </div>
   
   <div class="has_children">
      <span>第二章 jquery选择器</span>
      <a>2.1javascript 和javascript库</a>
      <a>2.2javascript 和javascript库</a>
      <a>2.3javascript 和javascript库</a>
      <a>2.4javascript 和javascript库</a>
      <a>2.5javascript 和javascript库</a>
      <a>2.6javascript 和javascript库</a>
      <a>2.7javascript 和javascript库</a>
   </div>
   
   <div class="has_children">
      <span>第三章 jquery操作DOM</span>
      <a>3.1javascript 和javascript库</a>
      <a>3.2javascript 和javascript库</a>
      <a>3.3javascript 和javascript库</a>
      <a>3.4javascript 和javascript库</a>
      <a>3.5javascript 和javascript库</a>
      <a>3.6javascript 和javascript库</a>
   </div>
</div>
</body>
</html>

如何将一个jquery对象转换成DOM对象

(1)jquery对象是一个数组对象，可以通过[index]对象转换

var $cr=$('#cr');   var cr=$cr[0];   alert(cr.checked);

(2)利用jquery本身的get（index）方法

var $cr=$('#cr');      var cr=$cr.get(0);   alert(cr.checked);

 

posted @ 2015-06-20 18:13  cmwang2017  阅读(320)  评论(1)  编辑  收藏  举报