脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-ѧϰJQuery - 6，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

第三章 事件处理

我们知道jQuery的大框为：

$(document).ready(function() {    // Our code here ... });

那他对应的是JS的那个原始事件呢？

我们知道在文档打开后，第一执行的事件是：onload()

因此，”$(document).ready()“ = onload()。

有的时候，为了简化写法，我们也使用

$(function())

在有的程序中需要使用美元符(“$”)，我们使用下面的格式来替换他。

标准写法的替换：

jquery(document).ready(function($) {     // In here, we can use $ like normal! });          

简写的替换：

jQuery(function($) {     // Code that uses $. });

1. 简单事件处理

我们使用按钮单击事件为例。

htML代码：

jquery的标准写法：

    $('#BTntest').on('click', function() {         window.alert("This is test message!");     });

这样写很麻烦，又没有简单的写法呢？
简单写法：

    $('#btnTest').click(function() {         window.alert("This is test message!");     });

提示：我们写程序大部分使用简写方式。

实现效果：

附：

P.S: 我们使用上章用过的文件，添加我们本节的代码<"/kf/ware/vc/" target="_blank" class="keylink">vc@H_126_69@D4KPHA+PGJyPgo8L3A+CjxwPiAgICAgIGNoYXB0ZXIwMi0yLmh0bWw8L3A+CjxwPjxwcmUgY2xhc3M9"brush:java;"> <script tyPE="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="chapter02-2.js"></script>

Shakespeare's plays

As You Like IT	Comedy
All's Well that Ends Well	Comedy	1601
Hamlet	Tragedy	1604
Macbeth	Tragedy	1606
romeo and Juliet	Tragedy	1595
Henry IV, Part I	History	1596
Henry V	History	1599

Shakespeare's Sonnets

The Fair Youth	1-126
The Dark Lady	127-152
The Rival Poet	78-86

chapter02.css

@charset "utf-8"; /* CSS Document */  .horizontal {  float: left;  list-style: none;  margin: 10px; } .sub-level {  background: #ccc; } a {  color: #00c; } a.mailto {  background: url(images/email.png) no-repeat right top;  padding-right: 18px; } a.pDFlink {  background: url(images/pdf.png) no-repeat right top;  padding-right: 18px; } a.henrylink {  background-color: #fff;  padding: 2px;  border: 1px solid #000; } /* Part 2 */ tr {  background-color: #fff; } .alt {  background-color: #ccc } .highlight {   font-weight: bold;   font-style: italic; } 

chapter02-2.js

$(document).ready(function() {     //$('tr').filter(':even').addClass('alt');  // Custom selectors  // $('tr:nth-child(odd)').addClass('alt');  // $('td:contains(Henry)').addClass('highlight');  // DOM traversal method  $('tr').filter(':odd').addClass('alt');  // $('td:contains(Henry)').next().addClass('highlight');  // $('td:contains(Henry)').nextAll().addClass('highlight');  $('td:contains(Henry)').parent().children().addClass('highlight');    // Standard wording  $('#btnTest').on('click', function() {         window.alert("This is test message!");     });   /*  // Simplified formulation  $('#btnTest').click(function() {         window.alert("This is test message!");     });  */ });

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的javascript代码实例教程-ѧϰJQuery - 6全部内容，希望文章能够帮你解决javascript代码实例教程-ѧϰJQuery - 6所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。