JQuery 测试内容(不保证内容完整性)
JQuery 基础
tags: 前端 JQuery 基础
一 什么是JQery
是一个 轻量级的兼容多浏览器的JavaScript库(类库)
jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是："Write less, do more."
二 为什么使用JQery
<3>它是轻量级的js库(压缩后只有21k) ，这是其它的js库所不及的，它兼容CSS3，还兼容各种浏览器
<4>jQuery是一个快速的，简洁的javaScript库，使用户能更方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供AJAX交互。
<5>jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。
三 怎么下载使用
版本选择
- 1.x：兼容IE678,使用最为广泛的，官方只做BUG维护，功能不再新增。因此一般项目来说，使用1.x版本就可以了，最终版本：1.12.4 (2016年5月20日)
- 2.x：不兼容IE678，很少有人使用，官方只做BUG维护，功能不再新增。如果不考虑兼容低版本的浏览器可以使用2.x，最终版本：2.2.4 (2016年5月20日)
- 3.x：不兼容IE678，只支持最新的浏览器。需要注意的是很多老的jQuery插件不支持3.x版。目前该版本是官方主要更新维护的版本。
版本下载
官方地址:http://jquery.com/download/
压缩的版本3.3.1 --->上线使用
未压缩的版本3.3.1 --->开发使用
安装两种方式
pass
- 优美胜于丑陋（Python 以编写优美的代码为目标）
- 明了胜于晦涩（优美的代码应当是明了的，命名规范，风格相似）
- 简洁胜于复杂（优美的代码应当是简洁的，不要有复杂的内部实现）
- 复杂胜于凌乱（如果复杂不可避免，那代码间也不能有难懂的关系，要保持接口简洁）
- 扁平胜于嵌套（优美的代码应当是扁平的，不能有太多的嵌套）
- 间隔胜于紧凑（优美的代码有适当的间隔，不要奢望一行代码解决问题）
- 可读性很重要（优美的代码是可读的）
- 即便假借特例的实用性之名，也不可违背这些规则（这些规则至高无上）
- 不要包容所有错误，除非你确定需要这样做（精准地捕获异常，不写 except:pass 风格的代码）
- 当存在多种可能，不要尝试去猜测
- 而是尽量找一种，最好是唯一一种明显的解决方案（如果不确定，就用穷举法）
- 虽然这并不容易，因为你不是 Python 之父（这里的 Dutch 是指 Guido ）
- 做也许好过不做，但不假思索就动手还不如不做（动手之前要细思量）
- 如果你无法向人描述你的方案，那肯定不是一个好方案；反之亦然（方案测评标准）
- 命名空间是一种绝妙的理念，我们应当多加利用（倡导与号召）
基础知识
基本语法
jquery的基础语法：
$(selector).action()
查找标签
:::info
本章节练习题基于:jQuery选择器筛选器练习.html
:::
基本选择器
$("#id的值")id选择器
$("#id的值")举例:找到本页面中id是i1的标签
$("#i1")
--------
-> Object [ div#i1.container
]标签选择器
查找所有标签
$("*")
----------
Object { 0: html
, 1: head, 2: meta, 3: meta, 4: meta, 5: title, 6: link, 7: link, 8: style, 9: body, … }查找
class选择器
$(".class")
$(".c1")
Object { 0: h1.c1
, 1: h1.c1, length: 2, prevObject: Object(1) }配合使用
找到div的container类的标签
$("div.container")
----------
r.fn.init(6) [div.container, div.container, div.container, div#i1.container, div.container, div.container, prevObject: r.fn.init(1)]层级选择器
练习：
自定义模态框，使用jQuery实现弹出和隐藏功能。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>模态框</title>
<style>
.cover {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.3);
z-index: 99;
}
.modal {
width: 400px;
height: 300px;
background-color: white;
position: absolute;
top: 50%;
left: 50%;
margin-top: -150px;
margin-left: -200px;
z-index: 100;
}
.close {
float: right;
margin-right: 15px;
cursor: pointer; /* 鼠标移上去光标显示类型 */
}
.hide {
display: none;
}
/*#login {*/
/*!*float: right;*!*/
/*!*top: 0;*!*/
/*!*right: 100%;*!*/
/*}*/
</style>
</head>
<body>
<div>
<h1>《钗头凤》唐婉</h1>
<p>世情薄</p>
<p>人情恶</p>
<p>雨送黄昏花易落</p>
<p>晓风干</p>
<p>泪痕残</p>
<p>欲笺心事</p>
<p>独语斜阑</p>
<p>难 难 难</p>
<p>人成各</p>
<p>今非昨</p>
<p>病魂长似秋千索</p>
<p>角声寒</p>
<p>夜阑珊</p>
<p>怕人询问</p>
<p>咽泪装欢</p>
<p>瞒 瞒 瞒</p>
</div>
<button id="login">登录</button>
<div class="cover hide"></div>
<div class="modal hide">
<div class="close">X</div>
</div>
<script src="jquery.js"></script>
<script>
$("#login")[0].onclick = function () {
//去掉cover和modal的hide样式类
// 有两种方式
// 方式一
// $(".cover")[0].classList.remove('hide');
// $(".modal")[0].classList.remove('hide');
//方式二
$(".cover,.modal").removeClass('hide')
};
// 找到close按钮绑定
$(".close")[0].onclick = function () {
//添加cover和modal的hide样式类
// $(".cover")[0].classList.add('hide');
// $(".modal")[0].classList.add('hide');
$(".cover,.modal").addClass('hide')
}
</script>
</body>
</html>基本筛选器
:first ->第一个
举例:找到id值为f1的标签内部的第一个input标签
$("#f1:first")
Object { 0: form#f1
, length: 1, prevObject: Object(1) }:last ->最后一个
找到id值为my-checkbox的标签内部最后一个input标签
举例:
$("#my-checkbox:last")
Object { 0: div#my-checkbox.panel-body
, length: 1, prevObject: Object(1) }:eq(index) -->索引等于index的那个元素
举例:
属性选择器
[arribute][attribute=value] //属性等于[attribute!=value] //属性不等于
表单筛选器
练习题
- 找到本页面中id是i1的标签
- 找到本页面中所有的h2标签
- 找到本页面中所有的input标签
- 找到本页面所有样式类中有c1的标签
- 找到本页面所有样式类中有btn-default的标签
- 找到本页面所有样式类中有c1的标签和所有h2标签
- 找到本页面所有样式类中有c1的标签和id是p3的标签
- 找到本页面所有样式类中有c1的标签和所有样式类中有btn的标签
- 找到本页面中form标签中的所有input标签
- 找到本页面中被包裹在label标签内的input标签
- 找到本页面中紧挨在label标签后面的input标签
- 找到本页面中id为p2的标签后面所有和它同级的li标签
- 找到id值为f1的标签内部的第一个input标签
- 找到id值为my-checkbox的标签内部最后一个input标签
- 找到id值为my-checkbox的标签内部没有被选中的那个input标签
- 找到所有含有input标签的label标签
实例
垂直菜单/Users/chery/Documents/LearnPython/E_前端/day51/垂直菜单.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vertical menu with CSS</title>
<link rel="stylesheet" href="fonts/css/font-awesome.css">
<style type="text/css">
body{
padding: 0;
margin: 0;
}
.menu ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.menu ul li{
padding: 15px;
position: relative;
width: 150px;
vertical-align: middle;
background-color: #2C3A47;
cursor: pointer;
/*border-right: 5px solid gold;*/
border-top:1px solid silver;
/* 颜色延迟显示 */
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.menu ul li:hover {
background-color: #2ecc71;
}
.menu > ul >li {
border-right: 5px solid gold;
}
.menu ul ul{
transition: all 0.3s;
opacity: 0;
position: absolute;
border-left: 5px solid gold;
visibility: hidden;
left: 100%;
top:-2%;
}
.menu ul li:hover>ul {
opacity: 1;
visibility: visible;
}
.menu ul li a{
color: #fff;
text-decoration: none;
}
span {
margin-right: 15px;
}
.menu> ul >li:nth-of-type(2)::after{
content: '+';
position: absolute;
margin-left: 40%;
float: right;
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href=""><span class="fa fa-home"></span>主页</a></li>
<li><a href=""><span class="fa fa-users"></span>用户</a>
<ul>
<li><a href=""><span class="fa fa-plus" ></span>添加</a></li>
<li><a href=""><span class="fa fa-edit" ></span>编辑</a></li>
<li><a href=""><span class="fa fa-remove" ></span>删除</a></li>
</ul>
</li>
<li><a href=""><span class="fa fa-desktop"></span>设计</a></li>
<li><a href=""><span class="fa fa-database"></span>数据</a></li>
<li><a href=""><span class="fa fa-info"></span>关于我</a></li>
</ul>
</div>
</body>
</html>效果:
- [x] 延迟显示
- [x] 多级菜单
操作元素(属性,css,文档处理)
文本操作
/E_前端/day51/文本操作.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本操作</title>
</head>
<body>
<div id="d1">
《前出师表》
<p>
臣本布衣，躬耕于南阳。苟全性命于乱世，不求闻达于诸侯。
先帝不以臣卑鄙，位子望去，三顾晨宇草湖之中，自衬衣党史知识
</p>
</div>
<label for="i1"></label><input type="text" id="i1">
<label>
<input type="checkbox" name="hobby" value="basketball">
</label>篮球