关键词：
Web前端基础：
Web前端工具：
JQuery最强总结
- 概念
- 安装
- jQuery语法结构
- jQuery选择器
- jQuery常用函数
- jQuery与js对象的转换
- jQuery中的事件
- jQuery操作DOM
- jQuery效果
- 基于jQuery实现表单验证
- jQuery案例
概念
jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能:
- HTML 元素选取
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- A JAX
- Utilities
提示: 除此之外，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文件
<head>
<script src="jquery-1.11.1.js"></script>
</head>了。
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 元素选择器基于元素/标签名选取元素。
语法:$("标签名称")
<div>div1</div>
<div>div2</div>
<div>div3</div>
<script type="text/javascript" src="js/jquery-1.11.1.js" >
<script>
//文档就绪事件:
$(document).ready(function()
//编写jQuery
);
$(function()
//1、标签选择器:
//获取所有的div元素(集合)
var divList=$("div");
console.log(divList);//jQuery的对象
console.log(divList.length);
for(var i=0;i<divList.length;i++)
console.log(divList[i]);//js的对象
//将js对象转换为jQuery的对象
console.log($(divList[i]));
);
</script>
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");
所有选择器的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>选择器</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<script>
//1、标签选择器：
function htmlSelector()
//获取所有的div元素（集合）
var divList=$("div");
console.log(divList);//jQuery的对象
console.log(divList.length);
for(var i=0;i<divList.length;i++)
console.log(divList[i]);//js的对象
//将js对象转换为jQuery的对象
console.log($(divList[i]));
//2、id选择器
function idSelector()
//根据id获取到的元素是惟一的，即使页面上有重名的id，获取的是第一个
var p=$("#p1");
console.log(p.html());
//3、.class选择器
function classSelector()
var list=$(".mydiv");
console.log(list.length);
//4、 全局选择器
function allSelector()
var list=$("*");//包括了html、head、title.....所有标签
console.log(list.length);
for(var i=0;i<list.length;i++)
console.log(list[i]);//js的对象
//5、并集选择器
function andSelector()
var list=$(".mydiv,p,li");
printList(list);
//6、后代选择器:包括所有的后代，儿子和孙子辈都有
function subSelector()
var list=$("form input");
printList(list);
//7、子选择器：只有子元素
function sunSelector()
var list=$("form>input");
printList(list);
//8、相邻选择器
function nextSelector()
var list=$("label + input");
printList(list);
//9、同辈选择器
function sublingsSelector()
var list=$("form ~ div");
printList(list);
//10、属性选择器
function attrSelector()
var list=$("div[id]");//获取所有有id属性的div的元素集合
list=$("div[class]");//获取所有有class属性的div的元素集合
list=$("input[name='userName']");//获取所有input标签中name属性是userName元素的集合
list=$("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合
list=$("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合
list=$("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合
list=$("input[id][name^='user']");//获取所有input标签中既有id属性又有name属性以user开头的元素的集合
printList(list);
//11、可见性选择器
function seeSelector()
//匹配所有的可见div元素
var list=$("div:visible");
//匹配所有的不可见div元素
var list=$("div:hidden");
//匹配所有的不可见input元素,样式有display：none的元素和type=hidden的元素
list=$("input:hidden");
printList(list);
//文档就绪事件：页面加载完毕之后执行：
$(function()
seeSelector();
);
//打印集合
function printList(list)
for(var i=0;i<list.length;i++)
console.log(list[i]);
console.log(list[i].innerHTML);//非表单项元素使用该种方式输出
console.log(list[i].value);//只有表单项元素才有value
</script>
</head>
<body>
<form>
<label>用户名：</label>
<input type="hidden" name="userId" value="1001" />
<input style="display: none;" value="隐藏的input" />
<input id="userName" name="userName" value="jiaobaoyu" /><br />
<label>密码：</label>
<input name="userPass" type="password" value="1234567"/><br />
<fieldset>
电话：<input id="phone" name="phoneuser" value="13712345789"/><br />
邮箱：<input name="emailuser" type="email" value="lina@sina.com" />
</fieldset>
</form>
地址：<input name="addressuser1" value="北京" /><br />
<ul>
<li>li111111</li>
<li>li111111</li>
<li>li111111</li>
</ul>
<p id="p1">p111111111111</p>
<div id="div1" class="mydiv" style="display: none;" >div1</div>
<div class="mydiv">div2</div>
<div id="div3">div3</div>
</body>
</html>
jQuery常用函数
下列代码中带有
- 与标签内容相关函数
- 与标签属性相关函数
- 与标签样式相关函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>函数</title>
<script type="text/javascript" src="js/jquery-1.11.1.js" ></script>
<style>
.redBg
background-color: red;
.fontColor
color: gold;
</style>
<script>
//1、与内容相关的函数
function textFun()
var str1=$("div").html();//获取的是第一个匹配元素的围堵标签中的所有内容，包括了嵌套在内部的标签
console.log(str1);
var str2=$("div").text();//获取的是第一个匹配元素的围堵标签中的所有文本，不包含标签的内容
console.log(str2);
var str3=$("div").val();//val()只能用在表单项元素中，div不是表单元素，所以val()获取不到任何内容
var str4=$("input").val();//input是表单项元素，val()可以获取到
console.log(str3);
console.log(str4);
//2、与属性相关的函数
function attrFun()
var img=$("img");
//设置属性
img.attr("src","img/cat.jpg");
img.attr("title","不服！");
//移除属性
img.removeAttr("title");
//获取属性
var src=img.attr("src");
var title=img.attr("title");
console.log(src+"===="+title);
//获取checked属性使用prop函数，获取到的值是boolean类型，表示十分被选中
var list=$("input[type='radio']");
for(var i=0;i<list.length;i++)
var flag=$(list[i]).prop("checked");
console.log("checked="+flag);
//3、与css相关的函数
function cssFun()
//给获取的元素添加、删除、切换已有的样式 PS：样式一定是在样式表中提前定义好的
$("div").addClass("redBg");
$("div").addClass("redBg fontColor");
$("div").removeClass("fontColor");
$("div").removeClass();//没有参数的时候直接移除所有的样式
//$("div").toggleClass("fontColor");//匹配元素如果有当前的样式就删除，如果没有就添加
//给所有的元素添加样式，样式直接添加，无需提前定义
$("input").css("border-color","blue"web前端：html最强总结附详细代码(代码片段)
Web前端基础：Web前端：HTML最强总结附详细代码Web前端：CSS最强总结附详细代码Web前端：JavaScript最强总结附详细代码Web前端工具：Web前端：JQuery最强总结（附上详细代码）Web前端：Bootstrap最强总... 查看详情
web前端：css最强总结附详细代码(代码片段)
Web前端基础：Web前端：HTML最强总结附详细代码Web前端：CSS最强总结附详细代码Web前端：JavaScript最强总结附详细代码Web前端工具：Web前端：JQuery最强总结（附上详细代码）Web前端：Bootstrap最强总... 查看详情
web前端：javascript最强总结附详细代码（带常用案例！）(代码片段)
Web前端基础：Web前端：HTML最强总结附详细代码Web前端：CSS最强总结附详细代码Web前端：JavaScript最强总结附详细代码Web前端工具：Web前端：JQuery最强总结附上详细代码Web前端：Bootstrap最强总结附详细代... 查看详情
web前端：bootstrap最强总结附详细代码（带常用案例！）(代码片段)
Web前端基础：Web前端：HTML最强总结附详细代码Web前端：CSS最强总结附详细代码Web前端：JavaScript最强总结附详细代码Web前端工具：Web前端：JQuery最强总结附上详细代码Web前端：Bootstrap最强总结附详细代... 查看详情
web前端：javascript最强总结附详细代码（带常用案例！）(代码片段)
Web前端基础：Web前端：HTML最强总结附详细代码Web前端：CSS最强总结附详细代码Web前端：JavaScript最强总结附详细代码Web前端工具：Web前端：JQuery最强总结附上详细代码Web前端：Bootstrap最强总结附详细代... 查看详情
web前端：bootstrap最强总结附详细代码（带常用案例！）(代码片段)
Web前端基础：Web前端：HTML最强总结附详细代码Web前端：CSS最强总结附详细代码Web前端：JavaScript最强总结附详细代码Web前端工具：Web前端：JQuery最强总结附上详细代码Web前端：Bootstrap最强总结附详细代... 查看详情
算法学习方法要点
...遍是等待忘掉题解后自己从头推导一遍。2、学习中注意总结，每个学习阶段更要总结，这是提升的关键。3、“学扎实”注意紫书中的小结。 查看详情
为什么那么多自学web前端的后来都放弃了，总结起来就这些原因
...幅度大，机会也多，所以就会大批的人想要转行来学习web前端开发。目前来讲市场上需要的web前端人员非常多，而且按照现在的势头，以后会需要更多的web前端开发人员，理由是以后每个人公司都会有自己的网站，有自己的开发... 查看详情
springmvc要点总结
...解驱动 3.配置视图解析器 4.在web.xml中添加SpringMvc前端控制器、[编码过滤器] 查看详情
web前端--html/css/javascript/jquery学习总结
web三要素: 浏览器:向服务器发起请求,下载服务器中的网页(HTML),然后执行HTML显示出内容 服务器:接受浏览器的请求,发送相应的页面到浏览器 HTTP协议:浏览器与服务器的通讯协议.HTML的工作原理: HTML是部署在服务器... 查看详情
jquery要点
简介：jQueryMobile是用于创建移动Web应用的前端开发框架。jQueryMobile可以应用于智能手机与平板电脑。jQueryMobile使用HTML5&CSS3最小的脚本来布局网页。 jQuery 安装：从CDN中加载jQueryMobile??CDN的全称是ContentDeliveryNetwork，即内... 查看详情
想做web前端开发师，可是不知道要学习些啥知识
1.HTML知识要点：web工作原理、HTML4及HTML5、常见标签、相对路径与绝对路径、HTML5标签2.CSS+布局知识要点：CSS基本语法、基本选择器、复合选择器、背景图片、盒子模型、精灵图、常见网页布局、浮动定位、Flex布局、响应式布局... 查看详情
web测试要点方法_web端测试大全总结
一、功能测试 1.1链接测试 链接是web应用系统的一个很重要的特征，主要是用于页面之间切换跳转，指导用户去一些不知道地址的页面的主要手段，链接测试一般关注三点： 1... 查看详情
学习完web前端之后都可以从事哪些工作呢？
...业崛起，越来越多的人开始学习转行进入IT行业。Web前端因其简单、应用广泛，在市场上受到越来越多人的追捧和喜爱，诞生出广泛的需求，所以学习Web前端的人越来越多。那么我们学习完Web前端之后都可以从事... 查看详情
xss最强知识体系漏洞万字总结(代码片段)
XSS知识体系漏洞总结一.XSSI漏洞原理二.XSSI漏洞利用以及POC动态JavaScript非JavaScript三.XSSI漏洞实例四.XSSI漏洞防御【点我资料领取】一.XSSI漏洞原理同源策略同源策略是Web应用程序安全模型中最基本也是最核心的策略。现在所有支持... 查看详情
web前端之html标签总结(代码片段)
Web前端之HTML标签总结一、HTML基本原理网页的原理：用户输入网址之后，对应的服务器就发现有人请求我的网页了，所以这个服务器就会把网页和相关的图片、js文件、css文件、flash文件都通过HTTP协议传输到用户的电... 查看详情
web前端个人工作总结
参考技术Aweb前端个人工作总结 工作需要不断总结，只有这样才能有所进步。下面是我整理的web前端个人工作总结，欢迎阅读！ web前端个人工作总结1 从入职到现在，我在XXX导师的指导下走上了前端之路。在这段时间... 查看详情
每个程序员都应该知道的最强大的 Unix 命令或脚本示例
】每个程序员都应该知道的最强大的Unix命令或脚本示例【英文标题】：MostpowerfulexamplesofUnixcommandsorscriptseveryprogrammershouldknow【发布时间】：2010-11-0908:00:36【问题描述】：有很多事情是所有程序员都应该知道的，但我对我们都应该... 查看详情