jQuery是一个轻量级javascript库兼容CSS3,还兼容各种浏览器。
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对象等。 |