Web前端开发中jquery遍历小结

基于JQuery的触屏滑动翻页Web前端开发

摘 要：随着移动互联网时代的来临，使用各类移动终端浏览Web应用逐渐成为主流趋势，而传统的面向计算机基于点击翻页模式的Web浏览模式越来越不适应智能终端触屏滑动翻页的需求。介绍一种通过使用JQuery及其组件FullPage.js与Move.js实现滚动翻页的技术。这一技术不仅实现了流畅的触屏滚动翻页效果，而且前端开发人员无需书写大量CSS样式、JavaScript代码并实现了多浏览器的良好兼容，提高了前端开发效率。

关键词：JQuery；FullPage.js；Move.js；Web前端；JavaScript

DOIDOI：10.11907/rjdk.1511455

中图分类号：TP301

文献标识码：A 文章编号文章编号：16727800（2015）012002003

作者简介作者简介：徐华平（1977-），男，江苏盐城人，硕士，盐城师范学院信息工程学院教育技术学系讲师，研究方向为数字媒体技术、智慧教育、Web2.0；汪春霞（1980-） ，女，江苏盐城人，盐城市教育局现代教育技术中心教师，研究方法为教育信息化、智慧教育。

0 引言 自1991年8月6日世界上第一个网页正式上线至今，Web的设计与开发技术有了长足的进步[1]。然而，随着各类智能移动终端以及人机交互方式的出现，传统的基于鼠标点击翻页的Web展示技术已经不能适应诸如智能手机、平板电脑等触屏终端的交互需求。而当前主流前端开发技术中，开发人员需要书写大量的JavaScript、CSS3动画代码来实现触屏滑动翻页（鼠标滚动翻页）与页面动画效果，即使开发实现了上述效果仍然面临代码可复用性低、兼容性差等困难。JQuery及其组件FullPage.js、Move.js的出现为开发触屏滑动翻页及页面动画提供了一个简洁、高效的新开发途径。

1 JQuery及其组件

第一章

一、$(document).ready(function(){

//do something

});

和window.onload的区别

1. 前者同一页面可以使用多次，后者出现多次只有最后一次能正确显示

2. 前者在DOM模型加载完成后就开始执行，后台在所有元素（包括图片）加载完成后执行

3. 前者可以简化为$(function(){

//do something

});

后者没有简写形式。

二、jQuery比较常使用的是链式操作，比如一个书目导航条：

$(function(){

$(“ul”).click(function(){

$(this).addClass(“current”).children(“li”).slideDown().end().sublings().removeClass(“current”).children(“li”).slideUp();

})

})

对于同一元素不超过3个操作的，一般写同一行，如果操作过多，可以将类似的操纵写成一行，便于阅读。

三、jQuery对象和DOM对象的转换

1.jQuery转化为DOM对象

Var $variable = $(“tr”); //jQuery object

Var variable = $variable[0]; //DOM object

The transpartent method.

DomObject = jQueryObject[index] or = jQueryObject.get(index).

2.DOM Object To jQuery Object

Var variable = getElementsByTagName(“tr”); //DOM object

Var $variable = $(variable) // jQuery object;

The transpartent method.

菜鸟教程jquery语法

jQuery是一种高效、简洁又方便的JavaScript库，它简化了HTML文档的操作、事件处理、动画设计以及AJAX交互等操作，为前端开发者提供了非常方便的编程工具。本篇文章将为大家简单介绍jQuery的语法和用法，包括选择器、事件、动画和AJAX交互等常用功能。

1. jQuery选择器

选择器是jQuery的核心功能之一，它允许我们通过CSS样式来获取文档中的HTML元素。以下是一些常见选择器：

- 元素选择器

$('p')：获取所有的p元素

$('#header')：获取id为header的元素

$('.nav')：获取class为nav的元素

jQuery中的事件和原生JavaScript的事件类似，但是它的处理方式更为方便和高效。以下是一些常用的事件处理方法：

- click()：点击事件

$('button').click(function(){

//执行操作

});

- hover()：鼠标悬停事件

jQuery提供了一些强大的动画效果，比如淡入淡出、滑动等。以下是一些常用的动画效果：

- fadeIn()：淡入效果

$('div').fadeIn();

- slideUp()：上滑效果

4. jQuery AJAX交互 jQuery AJAX可以实现页面的异步交互，比如发送请求、接收数据等。以下是一些常用的AJAX方法：

- $.ajax()：发送和接收请求的函数

$.ajax({

type: 'post',

url: 'test.php',

data: {

'name': '小明',

'age': 18

JQuery中的each⽅法

jQuery 中的each函数 很⽅便,$.each ()函数封装了⼗分强⼤的遍历功能，它可以遍历⼀维数组、多维数组、DOM , JSON 等等，在javaScript

开发过程中使⽤$each可以⼤⼤的减轻我们的⼯作量,这⾥贴⼀个简单的模仿each的函数,只能处理数组类型的对象。

$.each()与$(selector).each()不同, 后者专⽤于jquery对象的遍历, 前者可⽤于遍历任何的集合(⽆论是数组或对象),如果是数组,回调函数每次传

⼊数组的索引和对应的值(值亦可以通过this 关键字获取,但javascript总会包装this 值作为⼀个对象—尽管是⼀个字符串或是⼀个数字),⽅法会

返回被遍历对象的第⼀参数.

each()⽅法能使DOM循环结构简洁，不容易出错。each()函数封装了⼗分强⼤的遍历功能，使⽤也很⽅便，它可以遍历⼀维数组、多维数

组、DOM, JSON 等等

在javaScript开发过程中使⽤$each可以⼤⼤的减轻我们的⼯作量。

下⾯提⼀下each的⼏种常⽤的⽤法

each处理⼀维数组

1

2

3

4

5var arr1 = [ "aaa", "bbb", "ccc" ];$.each(arr1, function(i,val){alert(i);alert(val);});

alert(i)将输出0，1，2

alert(val)将输出aaa，bbb，ccc

each处理⼆维数组

1

2

3

4

5 var arr2 = [['a', 'aa', 'aaa'], ['b', 'bb', 'bbb'], ['c', 'cc', 'ccc']] $.each(arr, function(i, item){alert(i);alert(item); });

arr2为⼀个⼆维数组，item相当于取这⼆维数组中的每⼀个数组。

item[0]相对于取每⼀个⼀维数组⾥的第⼀个值

alert(i)将输出为0，1，2，因为这⼆维数组含有3个数组元素