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对象等。