Web前端基础：

Web前端：HTML最强总结 附详细代码Web前端：CSS最强总结 附详细代码Web前端：JavaScript最强总结 附详细代码

Web前端工具：

Web前端： JQuery最强总结 附详细代码Web前端：Bootstrap最强总结 附详细代码

JQuery最强总结

概念知识框架

安装版本问题下载jQuery的使用

jQuery语法结构基础语法文档就绪事件

jQuery选择器元素/标签选择器id 选择器class 选择器全局选择器并集选择器后代选择器子选择器相邻选择器同辈选择器属性选择器可见性选择器所有选择器的案例

jQuery常用函数jQuery与js对象的转换jQuery中的事件常用DOM事件列表常用的 jQuery 事件方法

jQuery操作DOM元素的增加元素的克隆元素的替换元素的删除

jQuery效果隐藏和显示淡入和淡出

基于jQuery实现表单验证jQuery案例全选/全不选动态时间动态表格省市级联系

概念

jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能:

HTML 元素选取HTML 元素操作CSS 操作HTML 事件函数JavaScript 特效和动画HTML DOM 遍历和修改A JAXUtilities

提示: 除此之外，jQuery还提供了大量的插件。 目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。

知识框架

安装

版本问题

jQuery版本有很多，分为1.x 2.x 3.x 1.x版本:能够兼容IE678浏览器 2.x版本:不兼容IE678浏览器 1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。 3.x版本:不兼容IE678，更加的精简(在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678) 国内多数网站还在使用1.x的版本

该总结中所用版本为1.1的版本

下载

jQuery有两个版本:

生成环境使用的和开发测试环境使用的。

Production version - 用于实际的网站中，已被精简和压缩。

Development version - 用于测试和开发(未压缩，是可读的代码)

以上两个版本都可以从 jquery.com 中下载。

这里给个国内的下载地址： JQuery 下载

jQuery的使用

jQuery 库是一个 JavaScript 文件，我们可以直接在 HTML页面中通过script 标签引用它，跟引用自己的 外部JavaScript脚本文件一样的语法。

//将第一步中下载好的jQuery资源包进行解压，然后就可以饮用解压好的.js文件

了。

jQuery语法结构

jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作(actions)

基础语法

$(selector).action()

说明:美元符号定义 jQuery

选择符(selector)"查询"和"查找" HTML 元素

jQuery 的 action() 执行对元素的操作

文档就绪事件

文档就绪事件，实际就是文件加载事件。

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。

如果在文档没有完全加载之前就运行函数，操作可能失败。 所以我们尽可能将所有的操作都在文档加载完毕之后实现。

写法一：

$(function(){

// 开始写 jQuery 代码...

});

写法二：

$(document).ready(function(){

// 开始写 jQuery 代码...

});

jQuery的ready方法与JavaScript中的onload相似，但是也有区别 :

区别window.onload$(document).ready()执行次数只能执行一次，如果执行第二次，第一次的执行会被覆盖可用执行多次，不会覆盖之前的执行执行时机必须等待网易全部加载挖完毕(包括图片等)，然后再执行包裹的代码只需要等待网页中的DOM结果加载完 毕就可以执行包裹的代码简写方式无$(function(){ });

jQuery选择器

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头:$()。

元素/标签选择器

Query 元素选择器基于元素/标签名选取元素。 语法:$("标签名称")

id 选择器

jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。

页面中元素的 id 应该是唯一的，所以在页面中选取唯一的元素需要通过 #id 选择器。

通过 id 选取元素语法如下:

$("#p1")

class 选择器

jQuery 类选择器可以通过指定的 class 查找元素 $(".mydiv")

全局选择器

匹配所有元素 $("*")

并集选择器

将每一个选择器匹配到的元素合并后一起返回 $("div,ul,li,.mydiv")

后代选择器

在给定的祖先元素下匹配所有的后代元素 $("form input"

子选择器

在给定的父元素下匹配所有的子元素 $("form > input")

相邻选择器

匹配所有紧接在 prev 元素后的 next 元素 $("label + input")

同辈选择器

匹配 prev 元素之后的所有 siblings 元素 $("form ~ input")

属性选择器

匹配包含给定属性的元素

$("div[id]");//获取所有有id属性的div的元素集合

$("div[class]");//获取所有有class属性的div的元素集合

$("input[name='userName']");//获取所有input标签中name属性是userName元素的集合

$("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合

$("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合

$("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合

$("input[id][name^='user']");

可见性选择器

匹配所有的可见或不可见的元素 $("div:visible"); $("input:hidden");

所有选择器的案例

用户名：

密码：

电话：

邮箱：

地址：

• li111111
• li111111
• li111111

p111111111111

jQuery常用函数

下列代码中带有

与标签内容相关函数与标签属性相关函数与标签样式相关函数

切换div样式

性别：女

男

jQuery与js对象的转换

jQuery中的事件

页面对不同访问者的响应叫做事件

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法

常用DOM事件列表

鼠标事件键盘事件事件文档/窗口事件clickkeydownsubmitloaddblclickkeyupchangemouseoverfocusmouseoutblurhover

常用的 jQuery 事件方法

在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法

首页  

零食  

鲜花  

普通按钮1

普通按钮2

普通按钮3

jQuery操作DOM

元素的增加

append() - 在被选元素的结尾插入内容prepend() - 在被选元素的开头插入内容after() - 在被选元素之后插入内容before() - 在被选元素之前插入内容

append

prepend

after

before

元素的克隆

clone(boolean)：克隆匹配的DOM元素并且选中这些克隆的副本

语法:$(selector).clone(includeEvents);

参数:可选。布尔值。规定是否复制元素的所有事件处理。默认地，副本中不包含事件处理器。

克隆元素-true

克隆元素-false

要被克隆的段落

点击我试试

元素的替换

replaceWith() -将所有匹配的元素替换成指定的HTML或DOM元素replaceAll()-用匹配的元素替换掉所有 selector匹配到的元素

replaceWith

replaceWithAll

p1

p2

元素的删除

remove() - 删除被选元素(及其子元素)empty() - 从被选元素中删除子元素

remove()

remove(筛选条件)

empty()

p1

jQuery效果

隐藏和显示

语法: $(selector).hide([speed,callback]); $(selector).show([speed,callback]); $(selector).toggle([speed,callback]);

参数说明:

可选的 speed 参数规定隐藏/显示的速度，可以取以下值:“slow”、“fast” 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

隐藏-div

显示-div

切换显示和隐藏-p

p1

p2

淡入和淡出

语法: $(selector).fadeIn([speed,callback]); $(selector).fadeOut([speed,callback]); $(selector).fadeToggle([speed,callback]);

参数说明:

可选的 speed 参数规定隐藏/显示的速度，可以取以下值:“slow”、“fast” 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

淡入-div

淡出-div

切换淡入淡出-P

p1

p2

基于jQuery实现表单验证

英雄会注册

*用户名:

用户名长度至少6位,只能包含数字、字母、下划线，必须以字母开头

*密码：

密码长度至少8位

*确认密码：

确认密码与密码一致

*性别：

请选择性别

女

男

*电话号码：

*邮箱：

注册

重置

jQuery案例

全选/全不选

全选	序号	名称	单价	数量	总计
	1	小熊饼干1	￥125	1	￥125
	2	小熊饼干2	￥125	1	￥125
	3	小熊饼干3	￥125	1	￥125

动态时间

停止

停止2

动态表格

停止

停止2

省市级联系

--请选择省份--

北京

浙江省

河北省

广东省