s14 jQuery笔记
jQuery
____oldboy python s14
- 知识
- 相当于python的模块，其他语言的类库
- 集合了DOM/BOM/JavaScript的类库
- jQuery文档：http://jquery.cuishifeng.cn/
- 版本：
1.x 1.12 # 推荐1.X 兼容性好，针对IE旧版
2.x
3.x
- jQuery、DOM转换：
jquery对象[0] ==> Dom对象
Dom对象 ==> $(Dom对象)
- 选择器，直接找到某个或者某类标签
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. 组合
<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') 子子孙孙
$('#i10>a') 儿子
6. 基本筛选器
:first # 第一个
:last #
:eq() # 根据索引，从0开始
7. 属性选择器
$('[alex]') 具有alex属性的所有标签
$('[alex="123"]') alex属性等于123的标签
<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>
$("input[type='text']")
$(':text')
- 多选，反选，全选的实现：
- 选择器功能
- prop对checked/selected操作
$('#tb:checkbox').prop('checked'); 获取值
$('#tb:checkbox').prop('checked', true); 设置值
- jQuery方法内置循环
$('#tb:checkbox').xxxx
- $('#tb:checkbox').each(function(k){
// k当前索引
// this:DOM，当前循环的元素 $(this)
})
- 三元运算：
var v = 条件 ? 真值 : 假值
-- 左侧菜单实现
- 筛选器
$('#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()
$('#i1').parentsUntil()
$('#i1').children() **
$('#i1').siblings() **
$('#i1').find() **
$('li:eq(1)')
$('li').eq(1)
first()
last()
hasClass(class)
- 文本操作：
$(..).text() # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容，不解析标签
$(..).html()
$(..).html("<a>1</a>")
$(..).val() # input/select/textarea...同value
$(..).val() # select 如果是多选，拿到列表！！
$(..).val(..)
- 样式操作：
addClass
hasClass # 判断有无clss
removeClass
toggleClass() # 无则添加，有则取消
- 属性操作：
# 专门用于做自定义属性
$(..).attr('n') # 获取属性n的值 ***
$(..).attr('n','v') # 设置属性：n='v';
$(..).removeAttr('n')
<input type='checkbox' id='i1' />
# jQuery 3.x版本以下： 可能出问题。
# $('#i1').attr('checked','checked') 选中正常
# $('#i1').removeAttr('checked') 取消后无法再设置
# 专门用于chekbox,radio
$(..).prop('checked') ***
$(..).prop('checked', true)
$(..).prop('checked', false)
$(this).index() 获取索引位置
- 模态对话框示例
- TAB切换示例：
添加属性方式：
通过索引方式：
- 文档处理：
append # 添加值
prepend
prependTo(temp) # 向temp中添加
after
before
remove # 删除
empty # 只清空内容，标签还在
clone # 克隆
- 添加删除复制标签示例：
- css处理
$('t1').css('样式名称', '样式值')
点赞：
- $('t1').append()
- $('t1').remove()
- setInterval
- 透明度 1 —> 0
- position
- 字体大小，位置
点赞示例
- 位置
$(window).scrollTop() # 获取
$(window).scrollTop(0) # 设置
scrollLeft([val])
#s14.html
$().offset() # 获取标签坐标
offset().left # 指定标签在html中的坐标
offset().top # 指定标签在html中的坐标
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
# 纯高度，边框，外边距，内边距
- 事件
- jQuery绑定方式：
$('.c1').click()
$('.c1').....
$('.c1').bind('click',function(){})
$('.c1').unbind('click',function(){})
******** # 增加标签后绑定（委托）
$('.c').delegate('a', 'click', function(){})
$('.c').undelegate('a', 'click', function(){})
$('.c1').on('click', function(){})
$('.c1').off('click', function(){})
绑定方式示例
- 阻止事件发生
return false
阻止事件发生示例
- 当页面框架加载完成之后，自动执行
$(function(){
$(...)
})
- 表单验证示例：
- jQuery扩展：
- $('#i1').css() # 选择器.方法
- $.ajax # $.函数
- $.extend $.方法
$.extend({
'wangsen':function(){
return 'sb';
}
});
var v = $.wangsen();
- $.fn.extend $(..).方法,得有选择器
$.fn.extend({
'hanyang':function(){
return 'db';
}
});
var v= $('#i1').hanyang()
- 应用：
$(function(){
$.Login('#f1')
//扩展Login
});
- js插件
- 插件使用：
plugin.js
-------------
$.extend({
'wangsen':function(){
return 'sb';
}
});
--------------
<script src="plugin.js"></script>
<script>
var v= $.wangsen();
alert(v);
</script>
- 不同插件，全局变量相同的解决
plugin1.js
----------------------
(function (arg) {
var status = 1
arg.extend({
'wangsen':function(){
return 'sb';
}
});
})(jQuery);
-----------------------
(function(){
var status = 1;
// 封装变量
})(jQuery)
- JS正则表达式
- test - 判断字符串是否符合规定的正则
rep = /\d+/;
rep.test("asdfoiklfasdf89asdfasdf")
/\d+/.test("asdfoiklfasdf89asdfasdf")
# true
rep = /^\d+$/;
rep.test("asdfoiklfasdf89asdfasdf")
# false
- exec - 获取匹配的数据
rep = /\d+/;
str = "wangshen_67_houyafa_20"
rep.exec(str)
# ["67"] # 默认只取第一个
var text = "JavaScript is more fun than Java or JavaBeans!"
var pattern = /\bJava\w*\b/;
pattern.exec(text)
# ["JavaScript"] # 默认只取第一个
var text = "JavaScript is more fun than Java or JavaBeans!"
var pattern = /\bJava(\w*)\b/;
pattern.exec(text)
# ["JavaScript", "Script"]
JavaScript is more fun than Java or JavaBeans!
var pattern = /\bJava\w*\b/g; # 全局匹配
# ["JavaScript"] # 执行一次
# ["Java"] # 执行二次
# ["JavaBeans"]
# null # 匹配完返回null，再次匹配再次执行一遍。
JavaScript is more fun than Java or JavaBeans!
var pattern = /\bJava(\w*)\b/g;
# ["JavaScript",'Script']
# ["Java", ""]
# ["JavaBeans", "Beans"]
# null
- 多行匹配：
# /.../m 表示多行匹配
# 默认就是多行匹配
# ^$特殊
JavaScript is more fun than \nJava or JavaBeans!
var pattern = /^Java(\w*)/g;
# ["JavaScript",'Script'] # 只匹配第一行
JavaScript is more fun than \nJava or JavaBeans!
var pattern = /^Java(\w*)/gm;
# ["JavaScript",'Script'] # 多行匹配
# ["Java", ""]
- 登录注册验证
默认事件先执行：
checkbox
自定义先执行：（绝大多数是）
a
submit
...
<form>
<input type='type' />
<input type='password' />
<input type='submit' />
</form>
$(':submit').click(function(){
$(':text,:password').each(function(){
...
return false;
})
return false;
})
- JS验证
示例略
- 后端通过python实现
- JS插件
- BootStrap
https://v3.bootcss.com/
- css
- js
a、响应式
@media
代码：
<style>
.c1{background-color: red;height: 50px;}
@media (min-width: 900px) {
.c2{background-color: grey;}
}
</style>
<body>
<div class="c1 c2"></div>
</body>
b、图标、字体
@font-face
c、基本使用
! important
- jQueryUI * (后台管理)
https://jqueryui.com/
- css
- js
- EasyUI (后台管理)
http://www.jeasyui.net
- css
- js
- 轮播图：
bxslider.com
- 多选，反选，全选代码：
<body>
<input type="button" value="全选" onclick="checkAll();">
<input type="button" value="反选" onclick="reverseAll();">
<input type="button" value="取消" onclick="cancleAll();">
<table border="1">
<thead>
<tr><th>选项</th><th>IP</th><th>PORT</th></tr>
</thead>
<tbody id="tb"><!--为避免jQuery选错、选多，指定ID-->
<tr><td><input type="checkbox"></td><td>1.1.1.1</td><td>80</td></tr>
<tr><td><input type="checkbox"></td><td>1.1.1.1</td><td>80</td></tr>
<tr><td><input type="checkbox"></td><td>1.1.1.1</td><td>80</td></tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
function checkAll(){
$('#tb :checkbox').prop('checked',true);
}
function cancleAll(){
$('#tb :checkbox').prop('checked',false);
}
function reverseAll(){
$('#tb :checkbox').each(function(){
//this代指当前循环的每一个元素,this为DOM对象
//<fun 可带参数为索引：console.log(k,this)>
// if(this.checked){
// this.checked = false;
// }else{
// this.checked = true;
// }
//以下Jquery实现
// 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);
})
}
</script>
</body>
- 左侧菜单：
<head>
<meta charset="UTF-8">
<title></title>
<style>
.header{background-color: black;color:wheat;}
.content{min-height: 50px;}
.hide{display: none;}
</style>
</head>
<body>
<div style="height: 400px;width:200px;border: 1px solid #dddddd">
<div class="item">
<div class="header">标题</div>
<div class="content">内容</div>
</div>
<div class="item">
<div class="header">标题</div>
<div class="content hide">内容</div>
</div>
<div class="item">
<div class="header">标题</div>
<div class="content hide">内容</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.header').click(function () {
//$('').click(function (){})绑定事件
//$('.i1').addClass('hide')
//$('#i1').removeClass('hide')
//筛选器：（this).next();(this).prev();(this).parent();(this).siblings;(this).find('.c1')
//$(this).next().removeClass('hide');
//$(this).parent().siblings().find('.content').addClass('hide');
//链式编程：
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
})
</script>
</body>
- 模态对话框示例
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{display: none;}
.modal{position: fixed;top:50%;left:50%;width:500px;height: 400px;
margin-left: -250px;margin-top: -250px;
z-index: 10;}
.shadow{position:fixed;;top:0;left:0;right:0;bottom:0;
opacity: 0.6;background-color: black;z-index: 9;}
</style>
</head>
<body>
<a href="#" onclick="addElement();">添加</a>
<!--# a标签href导致模态对话框出现后自己消失！！！-->
<table border="1" id="tb">
<tr><td target="hostname">1.1.1.1</td>
<td target="port">80</td>
<td target="ip">80</td>
<td><a class="edit">编辑</a><a class="del">删除</a></td></tr>
<tr><td target="hostname">1.1.1.2</td>
<td target="port">82</td>
<td target="ip">80</td>
<td><a class="edit">编辑</a>|<a class="del">删除</a></td></tr>
</table>
<div class="modal hide">
<div><input name="hostname" type="text">
<input name="port" type="text">
<input name="ip" type="text"></div>
<div><input type="button"value="取消" onclick="cancelModal();">
<input type="button"value="确定" onclick="confirmModal();"></div>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.del').click(function () {
$(this).parent().parent().remove();
});
function confirmModal(){
// 仅通过DOM实现了添加固定数据。
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.innerHTML='11.11.11.11';
var td2 = document.createElement('td');
td2.innerHTML='8001';
$(tr).append(td1);
$(tr).append(td2);
$('#tb').append(tr);
$('.modal,.shadow').addClass('hide');
}
function addElement(){
$('.modal,.shadow').removeClass('hide');
}
function cancelModal(){
$('.modal,.shadow').addClass('hide');
$('.modal input[type="text"]').val('');
//点击添加后，取消上回残留数据
}
$('.edit').click(function () {
$('.modal,.shadow').removeClass('hide');
var tds =$(this).parent().prevAll();
tds.each(function () {
//获取target的属性及内容var
n = $(this).attr('target');
var t = $(this).text();
// var a = '.modal input[name="';
// var b = '"]';
// var temp = a + n + b;
// $(temp).val(t);
$('.modal input[name="'+ n +'"]').val(t);
//此处使用了字符串拼接。
});
// //console.log(tds);// prevAll从自己向上查找==》倒序
// //获得tds，获取td中的内容，赋值给input标签中的value
// var port = $(tds[0]).text();
// var host = $(tds[1]).text();
// $('.modal input[name="hostname"]').val(host);
// $('.modal input[name="port"]').val(port);
})
</script>
</body>
- TAB切换示例：
添加属性方式：
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{display: none;}
.menu{height: 38px;background-color: #eeeeee;line-height: 38px;}
.menu .menu-item{float: left;border-right: 1px solid red;padding: 0 5px;
cursor:pointer;}
.content{min-height: 100px;border: 1px solid #eeeeee;}
.active{background-color: #2459a2}
</style>
</head>
<body>
<div style="width: 700px;margin: 0 auto">
<div class="menu">
<div class="menu-item active" a="1">菜单1</div>
<div class="menu-item" a="2">菜单2</div>
<div class="menu-item" a="3">菜单3</div>
</div>
<div class="content">
<div b="1">内容1</div>
<div class="hide" b="2">内容2</div>
<div class="hide" b="3">内容3</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function () {
$(this).addClass('active').siblings().removeClass('active');
var target = $(this).attr('a');
$('.content').children('[b="'+target+'"]').removeClass('hide').siblings().addClass('hide');
})
</script>
</body>
通过索引方式：
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{display: none;}
.menu{height: 38px;line-height: 38px;}
.menu .menu-item{float: left;border-right: 1px solid red;padding: 0 5px;
cursor:pointer;}
.content{min-height: 100px;border: 1px solid #eeeeee;}
.active{background-color: #2459a2}
</style>
</head>
<body>
<div style="width: 700px;margin: 0 auto">
<div class="menu">
<div class="menu-item active" >菜单1</div>
<div class="menu-item">菜单2</div>
<div class="menu-item">菜单3</div>
</div>
<div class="content">
<div >内容1</div>
<div class="hide">内容2</div>
<div class="hide">内容3</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.menu-item').click(function () {
$(this).addClass('active').siblings().removeClass('active');
$('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
})
</script>
</body>
- 添加删除复制标签示例：
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id='t1' type="text">
<input id='a1' type="button" value="添加">
<input id='a2' type="button" value="删除">
<input id='a3' type="button" value="复制">
<ul id="u1">
<li>12345</li>
<li>67890</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v +"</li>";
$('#u1').append(temp);
//$('#u1').prepend(temp)
//$('#u1').after(temp)
//$('#u1').before(temp)
});
$('#a2').click(function () {
var index = $('#t1').val();
$('#u1 li').eq(index).remove();
//$('#u1 li').eq(index).empty();
});
$('#a3').click(function () {
var index = $('#t1').val();
var v = $('#u1 li').eq(index).clone();
$('#u1').append(v);
});
</script>
</body>
- 点赞示例
<head>
<meta charset="UTF-8">
<title></title>
<style>
.container{padding:50px;border:1px solid #dddddd;}
.item{position: relative;width: 30px;}
</style>
</head>
<body>
<div class="container">
<div class="item"><span>赞</span></div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function () {
addFavor(this)
});
function addFavor(self){
var fontSize = 10;
var top = 10;
var right = 10;
var opacity = 1;
//DOM对象
var tag = document.createElement('span');
$(tag).text('+1').css('color','red').css('position','absolute')
.css('fontSize',fontSize+'px').css('right',right+'px').css('top',top+'px').css('opacity',opacity);
$(self).append(tag);
var obj= setInterval(function () {
fontSize = fontSize + 5;
top = top - 5;
right = right - 5;
opacity = opacity - 0.1 ;
$(tag).css('fontSize',fontSize+'px').css('right',right+'px').css('top',top+'px').css('opacity',opacity);
if(opacity<0){
clearInterval(obj);
$(this).remove();
}
},40)
}
</script>
</body>
- 绑定方式示例
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input id='t1' type="text">
<input id='a1' type="button" value="添加">
<ul id="u1">
<li>12345</li>
<li>67890</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var temp = "<li>" + v +"</li>";
$('#u1').append(temp);
});
// $('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>
- 阻止事件发生示例
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a onclick="return clickOn();" href="http://www.oldboyedu.com">走你1</a>
<a id="i1" href="http://www.oldboyedu.com">走你2</a>
<script src="jquery-1.12.4.js"></script>
<script>
function clickOn(){
//clickOn()优先
alert(123);
return false;
//绑定加return，后续事件不再继续，true则继续。
}
$('#i1').click(function(){
// 无需加return
alert(456);
return false;
})
</script>
</body>
- 表单验证示例：
<head>
<meta charset="UTF-8">
<title></title>
<style>
.error{color:red;}
</style>
</head>
<body>
<form id="f1" action="s111.html"method="POST">
<div><input name="n1" tex='用户名' type="text"></div>
<div><input name="n2" tex='密码' type="password"></div>
<div><input name="n3" tex='邮箱' type="text"></div>
<input type="submit"value="提交">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
$(':submit').click(function () {
$('.error').remove();
var flag = true;
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
var n = $(this).attr('tex');
if(v.length <= 0){
flag = false;
var tag=document.createElement('span');
tag.className = 'error';
tag.innerHTML=n +'必填';
$(this).after(tag);
//return false;//取消这句后，页面不跳转，继续循环。
// return 终止整个循环，相当于break，后续不再验证了
}
});
return flag;
});
// $(':submit').click(function () {
// var v = $(this).prev().val()
// if(v.length > 0 ){
// return true;
// }else{
// alert('请输入内容')
// return false
// }
// }) ;
</script>
</body>
- 页面框架加载完成之后，自动执行
<head>
<meta charset="UTF-8">
<title></title>
<style>
.error{color:red;}
</style>
</head>
<body>
<form id="f1" action="s111.html"method="POST">
<div><input name="n1" tex='用户名' type="text"></div>
<div><input name="n2" tex='密码' type="password"></div>
<div><input name="n3" tex='邮箱' type="text"></div>
<input type="submit"value="提交">
<img src="..." alt="">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
//当页面框架记载完毕后自动执行
$(function () {
$(':submit').click(function () {
$('.error').remove();
var flag = true;
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
var n = $(this).attr('tex');
if(v.length <= 0){
flag = false;
var tag=document.createElement('span');
tag.className = 'error';
tag.innerHTML=n +'必填';
$(this).after(tag);
//return false;//取消这句后，页面不跳转，继续循环。
// return 终止整个循环，相当于break，后续不再验证了
}
});
return flag;
});
});
/*
//当页面所有元素加载完毕后执行
$(':submit').click(function () {
$('.error').remove();
var flag = true;
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
var n = $(this).attr('tex');
if(v.length <= 0){
flag = false;
var tag=document.createElement('span');
tag.className = 'error';
tag.innerHTML=n +'必填';
$(this).after(tag);
//return false;//取消这句后，页面不跳转，继续循环。
// return 终止整个循环，相当于break，后续不再验证了
}
});
return flag;
});
*/
</script>
</body>
