jQuery概述

jQuery是一个轻量级javascript库兼容CSS3,还兼容各种浏览器。

使用户能更方便地处理HTML文档、事件、实现动画效果,并且方便地为网站提供Ajax交互。

1.2 能做什么

以插件的形式持续地通过开发加入新的功能

获取页面的部分内容

修改页面的外观

修改页面的内容

在页面中响应用户的交互

给页面加上动画

无刷新返回服务器端的信息 ajax

还提供了改进基本的 JavaScript 结构,如迭代和数组操作。

1.3 其他javascript库

Prototype

YUI

Dojo

mooTools

jQuery不会与全局命名空间冲突,简洁,只要花很少的时间去学习。

2.1 jQuery下载

当前版本3.1.1官方网站下载:jquery.com

两种版本,production ,development

全部代码地址: code.jquery.com

建议:用什么版本的jquery,就用什么版本的手册,测试环境用完整版(如:jquery1-11-3.js),生产环境用压缩版(如:jquery1-11-3.min.js)

2.2 jQuery安装

在页面头部head中,添加js

//加入的jquery库文件名,最好带有此库的版本名字,方便查询相对应的版本手册

<script type=”text/javascript” src=”./script/jquery1.11.3.js”></script>

jQuery基础

3.1 页面载入

$(document).ready(function(){ // 在这里写你的代码…}); //指的是:加载页面后 再执行这段JS语句。

简写方式:

$(function($){// 你可以在这里继续使用$作为别名…});

绑定一个在DOM文档载入完成后执行的函数

同一个页面上可以多次使用

请确保在 <body> 元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件。

jquery选择器

$(#id)根据给定的ID匹配一个元素

$(.class)根据给定的类匹配元素

$(tag)根据给定的元素名匹配所有元素

$(li:eq(1))获取下标为1的li标签

$(#box li:last)获取id为box的对象里面最后一个li标签

$(#box li:first)获取id为box的对象里面第一个li标签

利用jQuery不但可以获得代码的最大兼容性,而且可以避免很多js错误的发生。

因为jQuery有一个特色:如果获取不到对象,那后面的操作就自动地不会执行了,而且不报错。不像原生态的js语句

通过关系查找

$(.class).siblings();查找同辈的所有元素

$(.class).children();查找子元素

$(.class).next();查找同辈的下一个元素

$(.class).nextAll();该元素之后所有的同辈元素

$(.class).prev();查找同辈的上一个元素

$(.class).prevAll();该元素之前所有的同辈元素

$(.class).parent();查找元素的父辈

下一节将讲到 jquery对象与DOM对象等。

声明:本站为非盈利性赞助网站,本站所有软件来自互联网,版权属原著所有,如有需要请购买正版。如有侵权,敬请来信联系我们,我们立即删除。