本节笔记
推荐学习网站：https://www.w3school.com.cn/jquery/jquery_ajax_load.asp
全选反选取消操作：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" onclick="chooseAll();" />
<input type="button" value="反选" onclick="reverseAll();" />
<input type="button" value="取消" onclick="cancleAll();" />
<table border="1">
<thead>
<tr>
<td>选择</td>
<td>主机IP</td>
<td>PORT</td>
</tr>
</thead>
<tbody id="i1">
<tr>
<td>
<input type="checkbox" />
</td>
<td>192.168.1.3</td>
<td>22</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>192.168.1.4</td>
<td>22</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>192.168.1.5</td>
<td>8000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>192.168.1.6</td>
<td>666</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function chooseAll() {
// $ = jQuery
// prop = property 所有物
$(':checkbox').prop('checked', true); //#id :表单类型操作+prop属性操作
}
function cancleAll() {
$(':checkbox').prop('checked', false);
}
function reverseAll() {
// $('#i1 :checkbox').each(function (k) { //√
// $('#i1:checkbox').each(function (k) { //X
$(':checkbox').each(function (k) { //√
//分析阶段：
//找到所有的checkbox对象，然后对每一个对象进行判断，jquery已经内置了循环
// console.log(k, this);//this:DOM对象
// 0 <input type="checkbox">
// 1 <input type="checkbox">
// 2 <input type="checkbox">
// 3 <input type="checkbox">
// console.log($(this)); //jQuery对象
//DOM方法：.属性名
/*
if(this.checked){
this.checked = false;
}else{
this.checked = true;
}
*/
//jQuery方法：.prop/.attr（属性操作） 函数形式
/*
if($(this).prop('checked')){
$(this).prop('checked', false);
}else{
$(this).prop('checked', true);
}
*/
//三元运算法
// var v = 条件？真值：假值
var v = $(this).prop('checked')?false:true;
$(this).prop('checked', v);
// 反选还可以：
// $(this).prop('checked',!$(this).prop('checked'));
})
}
</script>
</body>
</html>
开关效果：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>样式操作toggleClass</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<div>
<input id="i1" type='button' value="开关" />
<div class="c1 hide">开灯关灯</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
//方法一：
/*
$('#i1').click(function(){
if($('.c1').hasClass('hide')){
$('.c1').removeClass('hide');
}else{
$('.c1').addClass('hide');
}
})
*/
//方法二：封装
$('#i1').click(function(){
//有就加上，没有就移除
$('.c1').toggleClass('hide');
})
</script>
</body>
</html>
左侧菜单栏：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单栏</title>
<style>
.menu{
border: 1px solid red;
width: 100px;
height: 252px;
}
.item{
min-height: 30px;
}
.header{
background-color: #31b0d5;
color: #F8F8FF;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="header">学习课程</div>
<div class="content hide">Python</div>
<div class="content hide">Linux</div>
</div>
<div class="item">
<div class="header">讲课老师</div>
<div class="content hide">Alix</div>
<div class="content hide">Wusir</div>
</div>
<div class="item">
<div class="header">课程时长</div>
<div class="content hide">28周</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
//链式编程
$('.header').click(function (){
//思路：
//找到当前点击的标签 $(this)
//找到当前行标签的下一行标签，移除hide，显示内容
//找到父标签
//找到所有的兄弟标签
//找到所有的兄弟标签的content标签加上hide (find)
// $(this+div) //X +在引号内部
// $('this + div') //X this变成了字符串
// $('label + input') //√
//以上均是选择器
//下面一行是筛选器（.的形式）
// $(this).next()
// $(this).next().removeClass('hide');
// $(this).nextAll().removeClass('hide'); √
//注意content类型
// var v = $(this).parent().siblings().find('content').addClass('hide'); X
// $(this).parent().siblings().find('.content').addClass('hide'); √
// console.log(v)
//合并成一行：
$(this).nextAll().removeClass('hide').parent().siblings().find('.content').addClass('hide');
})
</script>
</body>
</html>
伪添加-假编辑-真删除：low方法
<!DOCTYPE html>
<html lang="en">
<!--编辑-属性优化-->
<head>
<meta charset="UTF-8">
<title>模态对话框-伪添加-假编辑-真删除</title>
<style>
.shadow{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #666666;
opacity: 0.6;
z-index: 9;
}
.hide{
display: none;
}
.modal{
width: 400px;
height: 300px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -230px;
z-index: 10;
background-color: #a6e1ec;
text-align: center;
}
</style>
</head>
<body>
<input type="button" value="全选" onclick="chooseAll();" />
<input type="button" value="反选" onclick="reverseAll();" />
<input type="button" value="取消" onclick="cancleAll();" />
<input type="button" value="添加" onclick="addModal();" />
<!--遮罩层-->
<div class="shadow hide"></div>
<!--模态对话框-->
<div class="modal hide">
<p>
<input type="text" name="hostname"/>
</p>
<p>
<input type="text" name="port"/>
</p>
<!--
$('.modal input[name="hostname"]').val(..)
$('.modal input[name="v"]').val(text)
$('.modal input[name="' + v + '"]').val(text)
-->
<input type="button" value="确定" onclick="confirmModal();"/>
<input type="button" value='取消' onclick="cancelModal();" />
</div>
<table border="1">
<thead>
<tr>
<td>选择</td>
<td>主机IP</td>
<td>PORT</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
<td name="hostname">192.168.1.3</td>
<td name="port">22</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td name="hostname">192.168.1.4</td>
<td name="port">22</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td name="hostname">192.168.1.5</td>
<td name="port">8000</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td name="hostname">192.168.1.6</td>
<td name="port">666</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
// {} 不加;
// (); 加;
function chooseAll() {
$(':checkbox').prop('checked', true);
}
function cancleAll() {
$(':checkbox').prop('checked', false);
}
function reverseAll() {
$(':checkbox').each(function (k) {
var v = $(this).prop('checked')?false:true;
$(this).prop('checked', v);
})
}
function addModal() {
//因为edit编辑，input输入框有数据，所以，添加前或取消后需要将数据清空
// $('.modal p input[type="text"]').val('');
$('.shadow, .modal').removeClass('hide');
}
function cancelModal() {
$('.shadow, .modal').addClass('hide');
//因为edit编辑，input输入框有数据，所以，添加前或取消后需要将数据清空
$('.modal p input[type="text"]').val('');
}
//edit
//找到所有的edit类名
$('.edit').click(function (){
//跳转到模态框
$('.modal, .shadow').removeClass('hide');
//this 代指对应的DOM对象 class='edit'
var tds = $(this).parent().prevAll(); //tds是一个jquery对象[],有多个DOM对象
//将所有td DOM对象对应的内容text（），赋值给modal对话框中的input的对应名字name的value
//通过属性找到赋值
//写一个函数，对每一个td DOM对象都要进行属性操作each()
//1.找到某个td对应原表中的hostname（属性值）
//2.获取标签对应的文本内容
tds.each(function(){
//this 代指对应的DOM对象<td></td>
var v = $(this).attr('name');
var text = $(this).text();
$('.modal input[name="' + v + '"]').val(text)
})
//DOM的具体对象
// console.log(tds[0]); //port
// console.log(tds[1]); //hostname
// $(tds[0]).text() //获取到文本内容
//将获取到的文本内容给模态对话框中的input中的value
//
// $('.modal p input[name="port"]').val($(tds[0]).text());
// $('.modal p input[name="hostname"]').val($(tds[1]).text());
});
//删除操作：删除tr的一行
$('.del').click(function(){
$(this).parent().parent().remove();
});
//伪添加：写死法测试
function confirmModal(){
//内部创建td/tr标签
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var tr = document.createElement('tr');
//获取td标签的内容
td1.innerHTML = '<input type="checkbox" />';
td2.innerHTML = '192.168.1.0';
td3.innerHTML = '80';
//td添加属性(DOM不能添加属性)
// td2.name="hostname";
// td3.name="port";
//将td标签追加到tr标签
$(tr).append(td1);
$(tr).append(td2);
$(tr).append(td3);
//将tr标签追加到表格中
$('table').append(tr);
//遮罩层隐藏
$('.shadow, .modal').removeClass('hide');
}
//真添加
</script>
</body>
</html>
真添加-可编辑：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态对话框-真添加-2-可编辑</title>
<!--问题已解决：新增行，不能编辑删除操作-->
<style>
.shadow{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #666666;
opacity: 0.6;
z-index: 9;
}
.hide{
display: none;
}
.modal{
width: 400px;
height: 300px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -230px;
z-index: 10;
background-color: #a6e1ec;
text-align: center;
}
</style>
</head>
<body>
<input type="button" value="全选" onclick="chooseAll();" />
<input type="button" value="反选" onclick="reverseAll();" />
<input type="button" value="取消" onclick="cancleAll();" />
<input type="button" value="添加" onclick="addModal();" />
<!--遮罩层-->
<div class="shadow hide"></div>
<!--模态对话框-->
<div class="modal hide">
<p>
<input type="text" name="hostname"/>
</p>
<p>
<input type="text" name="port"/>
</p>
<!--
$('.modal input[name="hostname"]').val(..)
$('.modal input[name="v"]').val(text)
$('.modal input[name="' + v + '"]').val(text)
-->
<input id="if" type="button" value="确定" />
<input type="button" value='取消' onclick="cancelModal();" />
</div>
<table border="1">
<thead>
<tr>
<td>选择</td>
<td>主机IP</td>
<td>PORT</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
<td name="hostname">192.168.1.3</td>
<td name="port">22</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td name="hostname">192.168.1.4</td>
<td name="port">22</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td name="hostname">192.168.1.5</td>
<td name="port">8000</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td name="hostname">192.168.1.6</td>
<td name="port">666</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
</tbody>
</table>
<script src="../../jquery-1.12.4.js"></script>
<script>
function chooseAll() {
$(':checkbox').prop('checked', true);
}
function cancleAll() {
$(':checkbox').prop('checked', false);
}
function reverseAll() {
$(':checkbox').each(function (k) {
var v = $(this).prop('checked')?false:true;
$(this).prop('checked', v);
})
}
function addModal() {
//因为edit编辑，input输入框有数据，所以，添加前或取消后需要将数据清空
// $('.modal p input[type="text"]').val('');
$('.shadow, .modal').removeClass('hide');
}
function cancelModal() {
$('.shadow, .modal').addClass('hide');
//因为edit编辑，input输入框有数据，所以，添加前或取消后需要将数据清空
$('.modal p input[type="text"]').val('');
}
//真添加-1
/*
$('#if').click(function(){
//td1:checkbox
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var td4 = document.createElement('td');
var cb = document.createElement('input');
cb.type = 'checkbox';
//td2:hostname
$(td2).attr('name', 'hostname');
td2.innerText = $('.modal').find('input[name="hostname"]').val();
//td3:port
$(td3).attr('name', 'port');
td3.innerText = $('.modal').find('input[name="port"]').val();
//td4:操作类型
td4.innerHTML = "<a class=\"edit\">编辑</a> | <a class=\"del\">删除</a>";
//添加嵌套
$(td1).append(cb);
// console.log(td2);
$('table').append(td1, td2, td3, td4);
//遮罩层
$('.modal, .shadow').addClass('hide');
});
*/
//真添加-2
$('#if').click(function () {
//创建tr标签
var tr = document.createElement('tr');
//创建checkbox输入框
var myc = document.createElement('td');
$(myc).html('<input type="checkbox" />');
//创建编辑/删除操作
var myd = document.createElement('td');
$(myd).html("<a class=\"edit\">编辑</a> | <a class=\"del\">删除</a>");
console.log(myc);
$(this).prevAll().each(function () {
//获取name属性
var name = $(this).children(":first").attr('name');
//<p>没有name属性$(this) = <p></p>
// var name = $(this).attr('name'); // X
//获取索引和用户输入值
// var index = $(this).find('input[type="text"]').index();
var v = $(this).find('input[type="text"]').val();
console.log(v);
console.log(name);
//创建td html 并赋予相应的name属性及内容
var myTd = document.createElement('td');
$(myTd).attr('name', name);
$(myTd).text(v);
//误区：td没有value属性
// $(myTd).val(v); X
// myTd.value = v; X
console.log(myTd);
//把td追加到tr中
tr.prepend(myTd);
});
//把内容追加到表格中
tr.prepend(myc);
tr.appendChild(myd);
$('table').append(tr);
//清除遮罩层
$('.modal, .shadow').addClass('hide');
});
//edit //新添加内容不能编辑、删除
/*
$('.edit').click(function (){
//跳转到模态框
$('.modal, .shadow').removeClass('hide');
//this 代指对应的DOM对象 class='edit'
var tds = $(this).parent().prevAll(); //tds是一个jquery对象[],有多个DOM对象
//将所有td DOM对象对应的内容text（），赋值给modal对话框中的input的对应名字name的value
//通过属性找到赋值
//写一个函数，对每一个td DOM对象都要进行属性操作each()
//1.找到某个td对应原表中的hostname（属性值）
//2.获取标签对应的文本内容
tds.each(function(){
//this 代指对应的DOM对象<td></td>
var v = $(this).attr('name');
var text = $(this).text();
$('.modal input[name="' + v + '"]').val(text)
})
//DOM的具体对象
// console.log(tds[0]); //port
// console.log(tds[1]); //hostname
// $(tds[0]).text() //获取到文本内容
//将获取到的文本内容给模态对话框中的input中的value
//
// $('.modal p input[name="port"]').val($(tds[0]).text());
// $('.modal p input[name="hostname"]').val($(tds[1]).text());
});
*/
//必须保证table下必须有edit类，td不符合要求
$('table').delegate('.edit', 'click', function (){
//跳转到模态框
$('.modal, .shadow').removeClass('hide');
//this 代指对应的DOM对象 class='edit'
var tds = $(this).parent().prevAll(); //tds是一个jquery对象[],有多个DOM对象
//将所有td DOM对象对应的内容text（），赋值给modal对话框中的input的对应名字name的value
//通过属性找到赋值
//写一个函数，对每一个td DOM对象都要进行属性操作each()
//1.找到某个td对应原表中的hostname（属性值）
//2.获取标签对应的文本内容
tds.each(function(){
//this 代指对应的DOM对象<td></td>
var v = $(this).attr('name');
var text = $(this).text();
$('.modal input[name="' + v + '"]').val(text)
})
//DOM的具体对象
// console.log(tds[0]); //port
// console.log(tds[1]); //hostname
// $(tds[0]).text() //获取到文本内容
//将获取到的文本内容给模态对话框中的input中的value
//
// $('.modal p input[name="port"]').val($(tds[0]).text());
// $('.modal p input[name="hostname"]').val($(tds[1]).text());
});
//删除操作：删除tr的一行 //新添加内容不能编辑、删除
/*
$('.del').click(function(){
$(this).parent().parent().remove();
});
*/
$('table').delegate('.del', 'click', function(){
$(this).parent().parent().remove();
});
</script>
</body>
</html>
真添加-真编辑-真删除：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>uson-真添加-真编辑-真删除</title>
<style>
.shadow{
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #666666;
opacity: 0.6;
z-index: 9;
}
.hide{
display: none;
}
.modal{
width: 400px;
height: 300px;
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -230px;
z-index: 10;
background-color: #a6e1ec;
text-align: center;
}
</style>
</head>
<body>
<input type="button" value="全选" onclick="chooseAll();" />
<input type="button" value="反选" onclick="reverseAll();" />
<input type="button" value="取消" onclick="cancleAll();" />
<input type="button" value="添加" onclick="addModal();" />
<!--遮罩层-->
<div class="shadow hide"></div>
<!--模态对话框-->
<div class="modal hide">
<p>
<input type="text" name="hostname"/>
</p>
<p>
<input type="text" name="port"/>
</p>
<!--
$('.modal input[name="hostname"]').val(..)
$('.modal input[name="v"]').val(text)
$('.modal input[name="' + v + '"]').val(text)
-->
<input id="if" type="button" value="确定" /> <!--真添加-2专用-->
<!--<input id="if" type="button" value="确定" onclick="confirmModal();"/>--><!--伪添加-->
<input type="button" value='取消' onclick="cancelModal();" />
</div>
<table border="1">
<thead>
<tr>
<td>选择</td>
<td>主机IP</td>
<td>PORT</td>
<td>操作</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" />
</td>
<td name="hostname">192.168.1.3</td>
<td name="port">22</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td name="hostname">192.168.1.4</td>
<td name="port">22</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td name="hostname">192.168.1.5</td>
<td name="port">8000</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td name="hostname">192.168.1.6</td>
<td name="port">666</td>
<td>
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
</tbody>
</table>
<script src="../../jquery-1.12.4.js"></script>
<script>
function chooseAll() {
$(':checkbox').prop('checked', true);
}
function cancleAll() {
$(':checkbox').prop('checked', false);
}
function reverseAll() {
$(':checkbox').each(function (k) {
var v = $(this).prop('checked')?false:true;
$(this).prop('checked', v);
})
}
function addModal() {
//因为edit编辑，input输入框有数据，所以，添加前或取消后需要将数据清空
// $('.modal p input[type="text"]').val('');
$('.shadow, .modal').removeClass('hide');
}
function cancelModal() {
$('.shadow, .modal').addClass('hide');
//因为edit编辑，input输入框有数据，所以，添加前或取消后需要将数据清空
$('.modal p input[type="text"]').val('');
}
//$(func);----->页面框架函数，内部只能是$(..).这种形式的事件。
$(function() {
//真添加-2
$('#if').click(function () {
//创建tr标签
var tr = document.createElement('tr');
//创建checkbox输入框
var myc = document.createElement('td');
$(myc).html('<input type="checkbox" />');
//创建编辑/删除操作
var myd = document.createElement('td');
$(myd).html("<a class=\"edit\">编辑</a> | <a class=\"del\">删除</a>");
console.log(myc);
$(this).prevAll().each(function () {
//获取name属性
var name = $(this).children(":first").attr('name');
//<p>没有name属性$(this) = <p></p>
// var name = $(this).attr('name'); // X
//获取索引和用户输入值
// var index = $(this).find('input[type="text"]').index();
var v = $(this).find('input[type="text"]').val();
console.log(v);
console.log(name);
//创建td html 并赋予相应的name属性及内容
var myTd = document.createElement('td');
$(myTd).attr('name', name);
$(myTd).text(v);
//误区：td没有value属性
// $(myTd).val(v); X
// myTd.value = v; X
console.log(myTd);
//把td追加到tr中
tr.prepend(myTd);
});
//把内容追加到表格中
tr.prepend(myc);
tr.appendChild(myd);
//判断条件：如果是编辑()，不追加一行（在edit函数已做处理）
if($(this).attr('name') === 'editing'){
var index = $(this).attr('index');
$('.edit').parent().parent().eq(index).after(tr);
$('.edit').parent().parent().eq(index).remove();
}else{
$('table').append(tr);
}
//清除遮罩层
$('.modal, .shadow').addClass('hide');
//因为edit编辑，input输入框有数据，所以，添加前或取消后需要将数据清空
$('.modal p input[type="text"]').val('');
});
//edit
$('table').delegate('.edit', 'click', function (){
//跳转到模态框
$('.modal, .shadow').removeClass('hide');
//this 代指对应的DOM对象 class='edit'
var tds = $(this).parent().prevAll(); //tds是一个jquery对象[],有多个DOM对象
//将所有td DOM对象对应的内容text（），赋值给modal对话框中的input的对应名字name的value
//通过属性找到赋值
//写一个函数，对每一个td DOM对象都要进行属性操作each()
//1.找到某个td对应原表中的hostname（属性值）
//2.获取标签对应的文本内容
tds.each(function(){
//this 代指对应的DOM对象<td></td>
var v = $(this).attr('name');
var text = $(this).text();
$('.modal input[name="' + v + '"]').val(text)
});
//点击编辑事件，让他自动给确定添加按钮标签加上 name=“editing"属性
//这样，编辑的事件，就不会另追加一行
//在确定按钮点击时，做个判断即可
$('#if').attr('name', 'editing');
var index = $(this).parent().parent().index();
$('#if').attr('index', index);
//DOM的具体对象
// console.log(tds[0]); //port
// console.log(tds[1]); //hostname
// $(tds[0]).text() //获取到文本内容
//将获取到的文本内容给模态对话框中的input中的value
//
// $('.modal p input[name="port"]').val($(tds[0]).text());
// $('.modal p input[name="hostname"]').val($(tds[1]).text());
});
//删除操作
$('table').delegate('.del', 'click', function(){
$(this).parent().parent().remove();
});
});
</script>
</body>
</html>
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>uson-真添加-真编辑-真删除</title>
6 <style>
7 .shadow{
8 position: fixed;
9 top: 0;
10 bottom: 0;
11 left: 0;
12 right: 0;
13 background-color: #666666;
14 opacity: 0.6;
15 z-index: 9;
16 }
17 .hide{
18 display: none;
19 }
20 .modal{
21 width: 400px;
22 height: 300px;
23 position: fixed;
24 left: 50%;
25 top: 50%;
26 margin-left: -200px;
27 margin-top: -230px;
28 z-index: 10;
29 background-color: #a6e1ec;
30
31 text-align: center;
32 }
33 </style>
34 </head>
35 <body>
36 <input type="button" value="全选" onclick="chooseAll();" />
37 <input type="button" value="反选" onclick="reverseAll();" />
38 <input type="button" value="取消" onclick="cancleAll();" />
39 <input type="button" value="添加" onclick="addModal();" />
40
41 <!--遮罩层-->
42 <div class="shadow hide"></div>
43
44 <!--模态对话框-->
45 <div class="modal hide">
46 <p>
47 <input type="text" name="hostname"/>
48 </p>
49 <p>
50 <input type="text" name="port"/>
51 </p>
52 <input id="if" type="button" value="确定" />
53 <input type="button" value='取消' onclick="cancelModal();" />
54 </div>
55
56 <table border="1">
57 <thead>
58 <tr>
59 <td>选择</td>
60 <td>主机IP</td>
61 <td>PORT</td>
62 <td>操作</td>
63 </tr>
64 </thead>
65 <tbody>
66 <tr>
67 <td>
68 <input type="checkbox" />
69 </td>
70 <td name="hostname">192.168.1.3</td>
71 <td name="port">22</td>
72 <td>
73 <a class="edit">编辑</a> | <a class="del">删除</a>
74 </td>
75 </tr>
76 </tbody>
77 </table>
78 <script src="jquery-1.12.4.js"></script>
79 <script>
80 function chooseAll() {
81 $(':checkbox').prop('checked', true);
82 }
83 function cancleAll() {
84 $(':checkbox').prop('checked', false);
85 }
86 function reverseAll() {
87 $(':checkbox').each(function (k) {
88 var v = $(this).prop('checked')?false:true;
89 $(this).prop('checked', v);
90 })
91 }
92
93 function addModal() {
94 $('.shadow, .modal').removeClass('hide');
95 }
96 function cancelModal() {
97 $('.shadow, .modal').addClass('hide');
98 $('.modal p input[type="text"]').val('');
99 }
100
101 $(function() {
102 $('#if').click(function () {
103 var tr = document.createElement('tr');
104 var myc = document.createElement('td');
105 $(myc).html('<input type="checkbox" />');
106
107 var myd = document.createElement('td');
108 $(myd).html("<a class=\"edit\">编辑</a> | <a class=\"del\">删除</a>");
109
110 $(this).prevAll().each(function () {
111 var name = $(this).children(":first").attr('name');
112 var v = $(this).find('input[type="text"]').val();
113
114 var myTd = document.createElement('td');
115 $(myTd).attr('name', name);
116 $(myTd).text(v);
117 tr.prepend(myTd);
118
119 });
120 tr.prepend(myc);
121 tr.appendChild(myd);
122
123 //判断条件：如果是编辑()，不追加一行（在edit函数已做处理）
124 if ($(this).attr('name') === 'editing') {
125 var index = $(this).attr('index');
126 $('.edit').parent().parent().eq(index).after(tr);
127 $('.edit').parent().parent().eq(index).remove();
128 } else {
129 $('table').append(tr);
130 }
131
132 $('.modal, .shadow').addClass('hide');
133 $('.modal p input[type="text"]').val('');
134 });
135
136 //edit
137 $('table').delegate('.edit', 'click', function () {
138 $('.modal, .shadow').removeClass('hide');
139 var tds = $(this).parent().prevAll();
140
141 tds.each(function () {
142 var v = $(this).attr('name');
143 var text = $(this).text();
144
145 $('.modal input[name="' + v + '"]').val(text)
146 });
147
148 $('#if').attr('name', 'editing');
149 var index = $(this).parent().parent().index();
150 $('#if').attr('index', index);
151
152
153 //del
154 $('table').delegate('.del', 'click', function () {
155 $(this).parent().parent().remove();
156 });
157 });
158 });
159 </script>
160 </body>
161 </html>
添加删除和复制以及delegate事件绑定测试：low方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档处理 - 添加删除复制</title>
<style>
.pg-body{
border: 1px solid red;
margin: 0 auto;
width: 360px;
height: 200px;
background-color: #c4e3f3;
/*text-align: center;*/
}
</style>
</head>
<body>
<div class="pg-body">
<input id="i1" type="text" />
<input id="i2" type="button" value="添加" />
<input id="i3" type="button" value="删除" />
<input id="i4" type="button" value="克隆" />
<!--<ul id="ul">-->
<ul>
<li>学习课程</li>
<li>讲课老师</li>
<li>学校地址</li>
</ul>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
//添加
$('#i2').click(function (){
//获取用户输入的值
var v = $('#i1').val();
//将获取到的值追加到li标签的指定位置
//格式：
var temp = "<li>" + v + "</li>";
// console.log(temp);
// $('ul').append(temp);
$('ul').prepend(temp);
});
//删除
$('#i3').click(function (){
var index = $('#i1').val(); //v是字符串 eq(字符串)
$('ul li').eq(index).remove();
});
//克隆
$('#i4').click(function(){
var index = $('#i1').val();
//将下面克隆一份的值追加到指定位置
var v = $('ul li').eq(index).clone();
// $('ul').append(v);
$('ul').prepend(v);
});
//delegate事件绑定测试
/*//添加的内容，点击无效
$('ul li').click(function(){
var v = $(this).text();
alert(v);
});
*/
/*
$('ul li').bind('click', function(){
var v = $(this).text();
alert(v);
});
*/
/*
$('ul li').on('click', function(){
var v = $(this).text();
alert(v);
});
*/
$('ul').delegate('li', 'click', function(){ // 新增标签依然可以触发事件
var v = $(this).text();
alert(v);
});
</script>
</body>
</html>
模拟Tab菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab菜单实现-属性操作</title>
<style>
.hide{
display: none;
}
.menu{
/*border: 1px solid red;*/
background-color: #eeeeee;
/*给定了高度，子级float就不用清除浮动了*/
height: 38px;
line-height: 38px;
}
.menu .item{
float: left;
border-right: 2px solid red;
padding: 0 8px;
cursor: pointer;
}
.menu .active{
background-color: #31b0d5;
}
.content{
border: 1px solid red;
}
</style>
</head>
<body>
<div style="width: 500px; margin: 0 auto;">
<div class="menu">
<div class="item active" a="1">学习课程</div>
<div class="item" a="2">讲课老师</div>
<div class="item" a="3">学习周期</div>
<div class="item" a="4">就业情况</div>
<!--不用清除浮动，因为父级给定了高度-->
</div>
<div class="content">
<div class="main" b="1">
<p>Python</p>
<p>Linux</p>
<p>Go</p>
<p>C++</p>
</div>
<div class="main hide" b="2">
<p>Alex</p>
<p>Wusir</p>
</div>
<div class="main hide" b="3">
<p>28周</p>
</div>
<div class="main hide" b="4">
<p>98%已就业</p>
<p>2%重修或未就业</p>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
//每个菜单获取“点击事件”
$('.item').click(function(){
// $(this) //当前点击的对象:item
//菜单：
$(this).addClass('active').siblings().removeClass('active');
//内容：
//思路：将讲课老师与其内容对应起来
//1.获取到item中讲课老师的属性值(现在可以新增一个属性:相同属性名不同属性值)
//2.把获取到的属性值赋值给对应内容的属性名 （相同属性值不同属性名）
var item_v = $(this).attr('a');
// console.log(item_v);
//$('content') 字体颜色：绿色， 而应该是深蓝色字体，切记
$('.content').children("[b='" + item_v + "']").removeClass('hide').siblings().addClass('hide'); // 用添加属性方式实现
//内容：
//思路：将讲课老师与其内容对应起来
//获取item的对应的索引值
//获取content对应的孩子的索引值
//$('.content').children().eq( $(this).index() ).removeClass('hide').siblings().addClass('hide'); // 用获取索引方式实现
})
</script>
</body>
</html>
点赞特效：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jquery点赞特效-css处理</title>
<style>
.pg-body{
/*border: 1px solid red;*/
/*padding: 30px;*/
text-align: center;
}
.item{
border: 1px solid red;
padding: 30px;
width: 300px;
margin: 0 auto;
cursor: pointer;
/*点赞样式设置*/
position: relative;
}
</style>
</head>
<body>
<div class="pg-body">
<div class="item">
<span>赞</span>
</div>
<div class="item">
<span>赞</span>
</div>
<div class="item">
<span>赞</span>
</div>
<div class="item">
<span>赞</span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function (){
// console.log(this);
Addfunc(this);
});
function Addfunc(self){
//初始值设置
var top = 30;
var fontsize = 15;
var right = 150;
var color = 'red';
var opacity = 1;
//创建一个span标签，并赋值内容（+1）
// var tag = $(this).children()
var tag = document.createElement('span'); //+1的效果
// tag.innerText = '+1'; //dom模式
$(tag).text('+1'); //jquery模式
//给span标签添加各种样式
//字体位置position
$(tag).css('position', 'absolute');
$(tag).css('top', top + 'px');
$(tag).css('right', right + 'px');
//字体大小、颜色
$(tag).css('font-size', fontsize + 'px');
$(tag).css('color', color);
//设置透明度opcity
$(tag).css('opacity', opacity);
// console.log(tag);
//最后将span标签及样式追加到item这个div下面
$(self).append(tag);
//每100ms改变一次样式，形成动态特效：定时器setInterval
//obj：定时器的一个句柄、对象
var obj = setInterval(function(){
// console.log(top); 可以外层函数的局部变量top=30
//动态改变初始值
top = top -10;
fontsize = fontsize + 5;
right = right - 10;
// color = 'red';
opacity = opacity - 0.2; //opacity单词不要写错了
// $(tag).css('position', 'absolute');
$(tag).css('top', top + 'px');
$(tag).css('right', right + 'px');
$(tag).css('font-size', fontsize + 'px');
// $(tag).css('color', color);
$(tag).css('opacity', opacity);
console.log(opacity);//发现：opacity 没有等于0的时候
//设置条件，满足条件终止定时器
// if(opcity === 0){
if(opacity < 0){
console.log(123);
clearInterval(obj);
//移除tag特效标签
// $(self).append(*); X
// $(self).remove(void); X
$(tag).remove();
}
}, 100);
}
// 可以用$(function(){
// xxoo
// });当框架加载完成之后，自动执行
</script>
</body>
</html>
移动面板
实例：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>实例：移动面板-1</title>
</head>
<body>
<div style="border: 1px solid #ddd;width: 600px;position: absolute;">
<div id="title" style="background-color: black;height: 40px;"></div>
<div style="height: 300px;"></div>
</div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
$(function(){
$('#title').mouseover(function(){
$(this).css('cursor','move');
}).mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
console.log("_event, e:", _event, e, window.event); // 在未拖动之前，使用的是e值
var ord_x = _event.clientX;
var ord_y = _event.clientY;
console.log("ord: x,y:", ord_x, ord_y); // 鼠标按下的坐标
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
console.log("parent:left,top:", parent_left, parent_top); // div左上角坐标（8, 8）
$(this).bind('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;
console.log("new: x,y:", _new_event, e, new_x, new_y);
var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y);
console.log("new2: x,y:", new_x, ord_x);
console.log("new2: x,y:", x, y);
$(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px');
})
}).mouseup(function(){
$(this).unbind('mousemove');
});
})
</script>
</body>
</html>
阻止事件的发生：
以a标签为例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件发生-引入</title>
</head>
<body>
<a onclick=" return Click();" href="http://www.cohui.top">智汇部落</a>
<a id="i1" href="http://www.cohui.top">Uson</a>
<script src="jquery-1.12.4.js"></script>
<script>
//dom方式
function Click(){
alert(123);
//组织后面事件的发生
return false;
}
//jQuery方式
$('#i1').click(function(){
alert(456);
//组织后面事件的发生
return false;
});
</script>
</body>
</html>
阻止事件发生案例之表单验证：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阻止事件发生 - 表单验证 - 加强版</title>
<!--输入值为空，红字提醒-->
<style>
.error{
color: red;
}
</style>
</head>
<body>
<form id="f1" action="复习/jquery-全选反选取消.html" method="post">
<div><input type="text" /></div>
<div><input type="text" /></div>
<div><input type="password" /></div>
<div><input type="text" /></div>
<div><input type="text" /></div>
<div><input type="submit" value="提交"/></div>
</form>
<script src="jquery-1.12.4.js"></script>
<script>
$(':submit').click(function () {
//标志位
var flag = true;
//文字提醒2,清空所有提示
$('.error').remove();
//获取所有input输入框的jQuery对象，并对每一项进行循环操作
// $(':input[type="text"], input[type="password"]');
// $(':input[type="text"], input[type="password"]').each(function () {
$('#f1').find(' input[type="text"], input[type="password"] ').each(function () {
//获取用户输入的值
var v = $(this).val();
if(v.length <= 0){
// console.log(1);
//文字提醒1
//1.创建标签span
//2.创建class类名=error
//3.赋值给内容
var tag = document.createElement('span');
tag.innerHTML = '必填';
//内容不为空时，不显示，用于每次清空操作
tag.className = 'error';
$(this).after(tag);
//阻止后面事件的发生,当用户有一个输入框输入为空，就会跳出所有循环（后面的循环不执行）
//进入外层循环，相当于break，终止了后面的整个循环。
//问题：跳出去没问题，但是外层循环如果直接设死return false;直接不能提交表单，判断无意义。
// 如果是return true(不写默认)，输入框是否为空，都会提交，判断也无意义。
// 所以：加上标志位flag做判断
flag = false;
// return false; //break后面的循环不再判断
}
});
// console.log(6666);
return flag; //默认可以提交表单，如果内部循环检测到问题，才否定标志位的值，阻止提交事件的发生。
});
</script>
</body>
</html>
那些不同的高度：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery获取元素宽高（内边距、边框和外边距）</title>
<style>
.div1 {
width: 100px;
height: 100px;
padding: 100px;
margin: 100px;
border: 10px solid #00FFFF;
background-color: blue;
}
</style>
</head>
<body>
<div class="div1"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$(function () {
var div = $(".div1");
// 返回元素的宽、高：100
var width = div.width();
var height = div.height();
console.log("width纯宽度:" + width + " height纯高度:" + height);
// 返回元素的宽、高（包括内边距padding）:300
var innerWidth = div.innerWidth();
var innerHeight = div.innerHeight();
console.log("innerWidth宽度（包括内边距）:" + innerWidth + " innerHeight高度（包括内边距）:" + innerHeight);
// 返回元素的高度（包括内边距padding和边框border）:320
var outerWidth = div.outerWidth();
var outerHeight = div.outerHeight();
console.log("outerWidth宽度（包括内边距和边框）:" + outerWidth + " outerHeight高度（包括内边距和边框）:" + outerHeight);
// 返回元素的高度（包括内边距padding、边框border和外边距margin）：520
var outerWidthTrue = div.outerWidth(true);
var outerHeightTrue = div.outerHeight(true);
console.log("outerWidthTrue宽度(包括内外边距和边框):" + outerWidthTrue + " outerHeightTrue高度(包括内外边距和边框):" + outerHeightTrue);
});
</script>
<!--
运行结果：
宽度:100 高度:100
包括内边距 宽度:300 高度:300
包括内边距和边框 宽度:320 高度:320
包括内外边距和边框 宽度:520 高度:520
-->
</body>
</html>
本节笔记：
http://jquery.cuishifeng.cn/
模块 《=》类库
DOM/BOM/JavaScript的类库
版本：
1.x 1.12（兼容性最好）
以上版本均忽略了兼容性
2.x
3.x
转换：
jquery对象[0] => Dom对象
Dom对象 => $(Dom对象)
$('#i1')[0] = document.getElementById('i1') ==>[0] = <></>
一、查找元素
DOM
10左右
jQuery：
选择器，直接找到某个或者某类标签(括号内只能是字符串)
1. id
$('#id')
2. class
<div class='c1'></div>
$(".c1")
3. 标签
<div id='i10' class='c1'>
<a>f</a>
<a>f</a>
</div>
<div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'> </div>
</div>
$('a')
4. 组合a
<div id='i10' class='c1'>
<a>f</a>
<a>f</a>
</div>
<div class='c1'>
<a>f</a>
</div>
<div class='c1'>
<div class='c2'> </div>
</div>
$('a')
$('.c2')
$('a,.c2,#i10')
5. 层级(可以隔代)
$('#i10 a') 子子孙孙的a标签
$('#i10>a') 儿子
6. 基本
:first # $('#id>a:first')
:last
:eq() # $('#id a:eq(0)') 索引从0开始
7. 属性([])
$('[alex]') 具有alex属性的所有标签
$('[alex="123"]') alex属性等于123的标签
<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>
$("input[type='text']")
8.表单
$(':text') ==>$("input[type='text']")
找所有input type='text'的标签
实例：
多选，反选，全选
- 选择器
- 注意有空格$('#tb :checkbox')，上下层级
$('#tb :checkbox').prop('checked'); 获取值
$('#tb :checkbox').prop('checked', true); 设置值
-
jQuery方法内置循环： $('#tb :checkbox').each(){}
- $('#tb :checkbox').each(function(k){
// k当前索引
// this：DOM对象，代指当前循环的元素 $(this)
})
- 三元运算：
var v = 条件 ? 真值 : 假值
筛选（.xx()）
$('#i1').next()
$('#i1').nextAll()
$('#i1').nextUntil('#ii1')
<div>
<a>asdf</a>
<a>asdf</a>
<a id='i1'>asdf</a>
<a>asdf</a>
<a id='ii1'>asdf</a>
<a>asdf</a>
</div>
$('#i1').prev()
$('#i1').prevAll()
$('#i1').prevUntil('#ii1')
$('#i1').parent() 父标签
$('#i1').parents() 找到所有的父级，直到祖宗html
$('#i1').parentsUntil()
$('#i1').children() 所有的孩子标签
$('#i1').siblings() 所有的兄弟标签
$('#i1').find() 子子孙孙中找，自动循环找
$('li:eq(1)') 选择器（可以字符串拼接）
$('li').eq(1) 筛选器（根据索引值从多个中DOM对象中帅选）
first()
last()
hasClass(class)
文本操作：
$(..).text() # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容
$(..).html()
$(..).html("<a>1</a>")
支持所有具有value属性的本文操作(input/select/textarea...)
$(..).val()
$(..).val(..)
样式操作：（Jquery内部做了循环）
addClass
removeClass
toggleClass 开关效果（'hide'）,有hide就移除，没有就添加
属性操作：
# 专门用于做自定义属性
$(..).attr('n')
$(..).attr('n','v')
$(..).removeAttr('n')
<input type='checkbox' id='i1' />
# 专门用于====> chekbox, radio
$(..).prop('checked')
$(..).prop('checked', true) 建议
解析：
js.3版本以下bug处理的不彻底(3.x版本没有该问题):
先：$(..).attr('checked', 'checked') 不建议
再：$(..).removeAttr('checked')
再：$(..).attr('checked', 'checked')设置无效，只能使用prop
PS:
index 获取索引位置
文档处理：
append 标签内部后追加
prepend 标签内部前追加
after 当前标签后追加
before 当前标签前追加
remove
empty 仅清空内容部分
clone 克隆、复制-
css处理
$('t1').css('样式名称', '样式值')
点赞特效：
- $('t1').append()
- $('t1').remove()
- setInterval
- 透明度 1 》 0
- position
- 字体大小，位置
位置：
$(window).scrollTop() 获取
$(window).scrollTop(0) 设置
scrollLeft([val])
offset() 获取标签在页面的位置坐标
offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标
默认页面上面左边都有8px边距
position() 指定标签相对父标签(relative)标签的坐标
<div style='relative'>
<div>
<div id='i1' style='position:absolute;height:80px;border:1px'></div>
</div>
</div>
$('i1').height() # 获取标签的高度 = 纯高度
$('i1').innerHeight() # = 纯高度 + padding
$('i1').outerHeight() # = 纯高度 + padding + border
$('i1').outerHeight(true) # = 纯高度 + padding + border + margin
# 纯高度，边框，外边距，内边距
事件
DOM： 三种绑定方式
jQuery：
$('.c1').click()
$('.c1').....
$('.c1').bind('click',function(){
})
$('.c1').unbind('click',function(){
})
*************特殊（采用委托的方式）：*************
触发事件时，才绑定当前标签a，解析时并没有绑定，不同于其他
适用于：新增的标签可以继续触发事件
$('.c').delegate('a', 'click', function(){
})
$('.c').undelegate('a', 'click', function(){
})
$('.c1').on('click', function(){
})
$('.c1').off('click', function(){
})
阻止事件发生
当原生事件与后天事件集于一身时，后天事件优先执行（checkbox事件例外），再执行原生事件(如a标签，submit事件...)，我们如果只想它执行后天事件，则可以：
DOM模式下：
1）在标签行的事件函数名前添加：return ;
2）函数内部添加：return false; (可以阻止a标签的href事件的发生)
jQuery模式下：
函数内添加：return false即可
注：checkbox事件优先于我们绑定的事件，先执行。
# 当页面框架(如果图片内容加载慢，就不会管它)加载完成之后，自动执行
$(function(){ //$(函数)
// $(...)
})
还有第二种方式： //$(document).ready(函数)
$(document).ready(function(){
// $('.slider').bxSlider();
});
还有第三种方式：// window.onload = 函数
window.onload = function(){
var oDiv = document.querySelector('#div1');
var aLi = document.querySelectorAll('.list li');
alert(aLi.length);
}
jQuery扩展：
- $.extend $.方法
- $.fn.extend $(..).方法 （比上面多个选择器）
用自执行函数()()解决不同插件之间全局变量的冲突问题
(function(){
var status = 1;
// 封装全局变量
})(jQuery)
二、操作元素
===》实例：
作业：
一：
$('i1').height() # 获取标签的高度 纯高度
$('i1').innerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight(true) # 获取边框 + 纯高度 + ？
# 纯高度，边框，外边距，内边距
二、所有实例敲一遍
三、编辑框
jQuery扩展实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a id="i1" href="http://www.cohui.top">Uson</a>
<script src="../jquery-1.12.4.js"></script>
<script>
/* jQuery扩展1
$.extend({
'Alex': function () {
return 'sb';
}
});
var v = $.Alex();
alert(v);
*/
/*jQuery扩展2*/
$.fn.extend({
'Uson': function () {
return 'Python';
}
});
// var v = $('#i1').Uson(); // 直接弹窗
// alert(v);
var v = $('#i1').click(function () {
var v = $(this).Uson();
alert(v); // 触发点击事件弹窗
});
</script>
</body>
</html>
小知识：
js中可能用到的：
// js中可能用到的：
a = [[1, 3], ] ===>取值：a[0][0]、 a[0][1]
b = [{'name': 'Uson', 'age': 26, }] ===> 取值：b[0].name， b[0].age
返回顶部实例（当在顶部位置不显示）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.back{
position: fixed;
bottom: 0px;
right: 0px;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div style="height: 2000px;"></div>
<div onclick="GoTop()" class="back hide">返回顶部</div>
<script src="jquery-1.12.4.js"></script>
<script type="text/javascript">
function GoTop(){
//返回顶部
$(window).scrollTop(0);
}
$(function(){
$(window).scroll(function(){
//当滚动滑轮时，执行函数体
//获取当前滑轮滚动的高度
var top = $(window).scrollTop();
if(top>100){
//展示“返回顶部”
$('.back').removeClass('hide');
}else{
//隐藏“返回顶部”
$('.back').addClass('hide');
}
});
});
</script>
</body>
</html>
滚动菜单：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<div id="currentPosition" style="position: fixed;top: 0px;right: 0px;"></div>
<div>
<div class="chapter" style="height: 500px;">
<h1>第一张</h1>
</div>
<div class="chapter" style="height: 1500px;">
<h1>第二张</h1>
</div>
<div class="chapter" style="height: 30px;">
<h1>第三张</h1>
</div>
</div>
</div>
<script src="jquery-1.12.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
var scroll_top = $(window).scrollTop();
var list = [];
$.each($('.chapter'), function(i){
var current_height = $($('.chapter')[i]).offset().top;
list.push(current_height);
});
$.each(list,function(i){
if (scroll_top+$(window).height() == $(document).height()){
$('#currentPosition').text($('.chapter').last().text());
return
}
if (scroll_top>list[i]){
$('#currentPosition').text($($('.chapter')[i]).text());
return
}
})
})
});
</script>
</body>
</html>
注册登录实例：
源码下载：（点击下载）
加载：
<html>
<head>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".btn1").click(function(){
$("p").fadeOut() // https://common.cnblogs.com/images/loading.gif
});
$(".btn2").click(function(){
$("p").fadeIn();
});
});
</script>
</head>
<body>
<p>This is a paragraph.</p>
<button class="btn1">Hide</button>
<button class="btn2">Show</button>
</body>
</html>
后记
jQuery的this使用注意： <onclick="goTo(this);"> // this需要传过去才能使用 // 无法直接在函数中使用，默认是全局对象Windows
jQuery on() 方法：
向 <p> 元素添加 click 事件处理程序：
$(document).ready(function(){
$("p").on("click",function(){
alert("段落被点击了。");
});
});
参照：
<script>
$(document).ready(function(){
$("#div1").on("click","p",function(){
$(this).css("background-color","pink");
});
$("#div2").delegate("p","click",function(){
$(this).css("background-color","pink");
});
});
</script>：
补充：
on() 方法在被选元素及子元素上添加一个或多个事件处理程序。
自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库。
注意：使用 on() 方法添加的事件处理程序适用于当前及未来的元素（比如由脚本创建的新元素）。
提示：如需移除事件处理程序，请使用 off() 方法。
提示：如需添加只运行一次的事件然后移除，请使用 one() 方法。