jquery学习之笔记一,jquery学习之笔记

好了开始我的Jquery第一天。
我也是从Hello wrod!开始的。关于jquery 的引用我直接一笔带过。如下:

jquery学习之笔记一,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"&gt;
<html xmlns=”http://www.w3.org/1999/xhtml"&gt;
<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[mgm娱乐场,0];   alert(cr.checked);

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

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

 

http://www.bkjia.com/jQuery/1019638.htmlwww.bkjia.comtruehttp://www.bkjia.com/jQuery/1019638.htmlTechArticlejquery学习之笔记一,jquery学习之笔记
jquery是继prototype后一个很好用的javascript库。jquery是一个轻量级的库,拥有强大的选择器,出色的DOM操…

复制代码 代码如下:

<html>
<head>
<title>jquery 链式操作</title>
<script type=”text/javascript”
src=”jquery-1.3.1.js”></script>
<script type=’text/javascript’>
$(document).ready(function(){
alert(“hello word!”);
//静止右键点击
// $(document).bind(“contextmenu”,function(e){
// return false;
// });
});
</script>
</head>
<body>
</body>
</html>

相关文章