`

Jquery练习三

阅读更多
$(document).ready(function(){
	$('div.chapter a[href*=wikipedia]').each(function(index){
		var $thisLink = $(this);
		$thisLink.attr({
			'rel':'external',
			'id':'wikilink-' + index,
			'title':'learn more about ' + $thisLink.text() + ' at Wikipedia'
		});
	});
});


$(document).ready(function(){
	$('<a href = "#top">back to top</a>').insertAfter('div.chapter p:(gt)2');
	$('<a id="top" name="top"></a>').prependTo('body');
});



$(document).ready(function(){
	$('<ol id="notes"></ol>').insertAfter('div.chapter');
	$('<span.footnote>').each(function(index){
		$(this).before('<a href="#foot-note-' + (index+1) + 
		'" id="context-' + (index+1) + '" class="context"><sup>' +
		(index+1) + '</sup></a>').appendTo('#notes')
		.append( '&nbsp;(<a href="#context-' + (index+1) + '"> context </a>)' )
		.wrap('<li id="foot-note-' + (index+1) + '"></li>');
	});
});


$(document).ready(function(){
	$('span.pull-quote').each(function(index){
		var $parentParagraph = $(this).parent('p');
		$parentParagraph.css('position','relative');
		var $clonedCopy = $(this).clone();
		$clonedCopy
		.addClass('pulled')
		.find('span.drop')
		.html('&hellip')
		.end().
		prependTo($parentParagraph)
		.wrap('<div class="pulled-wrapper"></div>');
		var clonedText = $clonedCopy.text();
		$clonedCopy.html(clonedText);
	});
});
分享到:
评论

相关推荐

    jQuery案例练习.rar

    jQuery案例有4个即1、手风琴显示图片效果2、方块旋转变色3、表格数据渲染删除操作 4、jquery写轮播图,也含有原生js轮播图案例,每个案例中代码注解很详细 通过案例练习熟悉jquery相关知识点

    jquery练习实例

    在“jQuery练习实例”这个压缩包中,我们可以期待找到一系列的示例代码和讲解,帮助我们深入理解jQuery的核心功能和常见用法。 1. **DOM操作**:jQuery的核心在于其对DOM(Document Object Model)的操作。通过简洁...

    jquery练习

    通过练习,加深对jQuery的理解,提高编写高效、简洁代码的能力。 总结来说,jQuery作为一款强大的JavaScript库,它简化了许多前端开发中的常见任务,提高了开发效率。通过学习和实践jQuery,开发者可以更好地驾驭...

    jQuery练习

    本篇文章将深入探讨“jQuery练习”这一主题,特别关注如何使用jQuery实现导航菜单弹出二级菜单的功能。 首先,让我们理解导航菜单的基本结构。在网页设计中,导航菜单通常包含一级菜单项,当用户悬停在这些项上时,...

    Jquery部分效果练习

    本篇文章将围绕"Jquery部分效果练习"这一主题,详细阐述jQuery中的核心概念和常见效果的实现。 首先,jQuery的核心在于它的选择器。选择器类似于CSS,用于选取HTML文档中的元素。例如,`$("#id")`用于选取ID为"id...

    jQuery学习手册及实例练习

    3. **事件处理**:jQuery简化了事件绑定,`click(function(){...})`用于绑定点击事件,`hover(function(){...}, function(){...})`用于同时处理鼠标进入和离开事件。此外,还有`change()`, `focus()`, `blur()`等...

    JS/JQuery-第3章上机练习.zip

    在"JS/JQuery-第3章上机练习.zip"这个压缩包中,我们可以期待一系列针对这两个主题的实践练习。这些练习通常会涵盖以下几个核心知识点: 1. **基础语法与变量**:JavaScript 的基础包括数据类型(如字符串、数字、...

    jQuery基础选择器练习题

    通过上述的练习题,你可以实践并巩固这些选择器的用法。记住,熟练掌握jQuery选择器将极大地提升你的前端开发效率,让你编写出更加简洁高效的代码。在学习过程中,不断实践和应用这些知识点,你将会成为一个jQuery的...

    jQuery练习题.docx

    三、 jQuery 方法 1. contains() 方法可以根据包含文本匹配到指定元素。 2. append() 方法可以追加到指定元素的末尾。 3. offset() 方法可以获取指定元素的位置。 四、 JavaScript 中的 window.onload 事件和 ...

    JQuery使用练习

    本练习旨在帮助你熟悉并掌握jQuery的基本用法,包括选择器、事件、文档处理、函数以及属性的运用。 首先,让我们详细探讨jQuery的选择器。jQuery的选择器基于CSS选择器,允许你高效地选取DOM元素。例如,`$("#id")`...

    Jquery练习2:制作QQ简易聊天框.zip

    在本项目"Jquery练习2:制作QQ简易聊天框.zip"中,我们将探索如何使用jQuery这一流行的JavaScript库来创建一个类似QQ的简单聊天界面。这个练习旨在帮助开发者掌握jQuery的基本用法,以及如何利用它来增强网页的交互...

    jquery的相关练习

    本文件是一个小的工程,关于ajax框架的jquery的一些小的练习,与大家分享。

    jquery练习的例子,仿真google suggest

    jquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,仿真google suggestjquery练习的例子,...

    JQuery练习题1

    3. **DOM操作**: jQuery提供了一系列方法来操作DOM。`.append()`用于在元素内部添加内容,`.prepend()`则在开头插入,`.remove()`删除元素,`.html()`或`.text()`用于设置或获取元素内容。 4. **事件处理**: jQuery...

    JS/JQuery-第7章上机练习.zip

    3. **动画效果**:JQuery提供了丰富的动画方法,如`fadeIn()`, `fadeOut()`, `slideToggle()`等,用于创建平滑的过渡效果。实践中,你可能需要结合CSS和JQuery创建复杂的动画序列。 4. **AJAX操作**:JQuery的`$....

    jQuery选择器上机练习题及答案.rar

    (3)求id值为checkbox3的元素在所有表单元素里的顺序号 (4)用一条链式语句完成:先对所有img元素应用seeThrough样式,再为所有img元素和tr元素应用yellow样式 (5)用filter方法实现:选择单元格内容为Java...

    jquery练习狂拍灰太狼.zip

    在本练习中,你将运用jQuery处理一系列与属性节点相关的任务,例如: - 灰太狼的图片显示与隐藏,通过控制`style.display`属性来实现。 - 灰太狼的位置移动,利用`data-*`自定义属性记录坐标,通过修改这些属性值并...

    js 小项目练习,jQuery 小例子

    在"js 小项目练习,jQuery 小例子"中,我们可以看到几个基于jQuery实现的常见功能: 1. **菜单**:jQuery可以轻松地创建动态菜单,包括下拉菜单、滑动菜单等。通过监听用户的鼠标事件,如hover(悬停)和click...

    前端jquery练习网页

    这个“前端jQuery练习网页”项目是您在学习阶段完成的一个作品,虽然存在一些bug,但它仍然是一个很好的学习和回顾jQuery核心概念的起点。** 在项目中,`js` 文件夹可能包含你编写的所有 JavaScript 代码,这些代码...

    Jquery练习-包含JQUERY1.4.2的js库

    标题中的“Jquery练习-包含JQUERY1.4.2的js库”指向的是一个学习资源,特别关注于jQuery 1.4.2版本的实践应用。这个版本在2010年发布,虽然不是最新版,但对于初学者来说,它仍然是理解jQuery核心概念的好起点。** ...

Global site tag (gtag.js) - Google Analytics