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);

注意!此信息未认证,请谨慎判断信息的真实性!

全部评论
空

相关内容推荐

头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像 头像
点赞 评论 收藏
转发
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像
点赞 评论 收藏
转发
头像 头像
点赞 评论 收藏
转发
点赞 9 评论
分享

全站热榜

正在热议