HTML零基础入门：JQ篇全面解析与基础

发表时间: 2016-09-28 22:58

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库文件名，最好带有此库的版本名字，方便查询相对应的版本手册

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

HTML零基础入门：JQ篇全面解析与基础

热门阅读

推荐阅读