jQuery
参考网址
模块 《=》类库
DOM/BOM/JavaScript的类库
转换：
jquery对象[0] => Dom对象
Dom对象 => $(Dom对象)
一、查找元素
DOM：
有十个左右
1、找到标签
获取单个元素 document.getElementById('i1')
获取多个元素（列表）document.getElementsByTagName('div')
获取多个元素（列表）document.getElementsByClassName('c1')
a. 直接找
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
b. 间接
tag = document.getElementById('i1')
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
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') 找到#i10 下面的子子孙孙
$('#i10>a') 找到#i10 下面的儿子
6. 基本
:first $('#id>a:first') 找到#id下面的第一个a标签
:last $('#id>a:last') 找到#id下面的最后一个a标签
:eq() $('#id a:eq(0)') 根据a的索引找到第几个a标签 （从0开始）
7. 属性
$('[alex]') 具有alex属性的所有标签
$('[alex="123"]') alex属性等于123的标签
<input type='text'/>
<input type='text'/>
<input type='file'/>
<input type='password'/>
$("input[type='text']")
$(':text')
实例：
多选，反选，全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<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">
<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() {
$(':checkbox').each(function(k){
// this,代指当前循环的每一个元素
// Dom
/*
if(this.checked){
this.checked = false;
}else{
this.checked = true;
}
*/
/*
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>
</html>
- 选择权
-
$('#tb:checkbox').prop('checked'); 获取值
$('#tb:checkbox').prop('checked', true); 设置值
-
jQuery方法内置循环： $('#tb:checkbox').xxxx
- $('#tb:checkbox').each(function(k){
// k当前索引
// this，DOM，当前循环的元素 $(this)
})
- var v = 条件 ? 真值 : 假值
下面是一个左侧菜单栏的实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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 id="i1" class="content hide">内容</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(){
// 当前点击的标签 $(this)
// 获取某个标签的下一个标签
// 获取某个标签的父标签
// 获取所有的兄弟标签
// 添加样式和移除样式
// $('.i1').addClass('hide')
// $('#i1').removeClass('hide')
// var v = $("this + div");
// $("label + input")
// console.log(v);
//
// $("afsldkfja;skjdf;aksdjf")
// 筛选器
/*
$(this).next() 下一个
$(this).prev() 上一个
$(this).parent() 父
$(this).children() 孩子
$('#i1').siblings() 兄弟
$('#i1').find('#i1') 子子孙孙中查找
// . . .
//
$('#i1').addClass(..)
$('#i1').removeClass(..)
*/
// 链式编程
// $(...).click(function(){
// this..
// })
// $(this).next().removeClass('hide');
// $(this).parent().siblings().find('.content').addClass('hide')
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
})
</script>
</body>
</html>
当前点击的标签 $(this)
获取某个标签的下一个标签
获取某个标签的父标签
获取所有的兄弟标签
添加样式和移除样式
$('.i1').addClass('hide')
$('#i1').removeClass('hide')
var v = $("this + div");
$("label + input") #这种匹配所有跟在 label 后面的 input 元素 ，实际运用不常见，
console.log(v);
$("afsldkfja;skjdf;aksdjf")
筛选器
$(this).next() 下一个
$(this).prev() 上一个
$(this).parent() 父
$(this).children() 孩子
$('#i1').siblings() 兄弟
$('#i1').find('#i1') 子子孙孙中查找
$('#i1').addClass(..)
$('#i1').removeClass(..)
链式编程
$(...).click(function(){
this..
})
.clink 对所有捕捉的header标签都添加点击事件
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.content').addClass('hide')
=============》》$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
筛选
$('#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)
以下模拟表格编程框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .modal{ position: fixed; width: 500px; height: 400px; background-color: #dddddd; top:50%; left: 50%; margin-top: -250px; margin-left: -200px; z-index: 10; } .shamodal{ position: fixed; top:0; right: 0; left:0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } </style> </head> <body> <a onclick="addElement()"> <input type="button" value="添加"> </a> <table border="2"> <tr> <td>1.1.1.1</td> <td>80</td> <td>80</td> <td> <a class="edit">编辑</a>|<a target="del">删除</a> </td> </tr> <tr> <td>1.1.1.12</td> <td>80</td> <td>80</td> <td><a class="edit">编辑</a>|<a target="del">删除</a> </td> </tr> <tr> <td>1.1.1.13</td> <td>80</td> <td>80</td> <td> <a class="edit">编辑</a>|<a target="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="cancleModal();"/> <input type="button" value="确定" onclick="cancleModal();"/> </div> </div> <div class="shamodal hide"></div> <script src="jquery-3.3.1.js"></script> <script> function addElement() { $('.modal,.shamodal').removeClass('hide') } function cancleModal() { $('.modal,.shamodal').addClass('hide'); // $('.modal input[type="text"]').val(""); } $('.edit').click(function () { $('.modal,.shamodal').removeClass('hide'); //this var tds = $(this).parent().prevAll(); var port = $(tds[0]).text(); var id = $(tds[1]).text(); var hostname = $(tds[2]).text(); $('.model input[name="hostname"]').val(hostname); $('.model input[name="id"]').val(id); $('.model input[name="port"]').val(port); // 循环获取tds中内容 // 获取 <td>内容</td> 获取中间的内容 // 赋值给input标签中的value }) </script> </body> </html>
文本操作：
$(..).text() # 获取文本内容
$(..).text(“<a>1</a>”) # 设置文本内容 就变成字符串了
$(..).html() #获取标签及文本内容
$(..).html("<a>1</a>") #设置标签及文本内容
$(..).val() #获取input 等标签的value值
$(..).val(..) #设置input 等标签的value值
样式操作：
addClass 增加class对象
removeClass 删除class对象
toggleClass
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.menu{
height: 38px;
background-color: #eeeeee;
line-height: 38px;
}
.active{
background-color: brown;
}
.menu .menu-item{
float: left;
border-right: 1px solid red;
padding: 0 5px;
cursor: pointer;
/*变成小手*/
}
.content{
min-height: 100px;
border: 1px solid #eeeeee;
}
</style>
</head>
<body>
<div style="width: 500px;margin: 0 auto;">
<div class="menu">
<div class="menu-item active" a="1">菜单一</div>
<div class="menu-item" a="2">菜单二</div>
<div class="menu-item" a="3">菜单三</div>
<div class="menu-item" a="4">菜单四</div>
</div>
<div class="content">
<div b="1">内容一</div>
<div class="hide" b="2">内容二</div>
<div class="hide" b="3">内容三</div>
<div class="hide" b="4">内容四</div>
</div>
</div>
<script src="jquery-3.3.1.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>
</html>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .menu{ height: 50px; background-color: #dddddd; color: #FFF7FB; line-height: 50px; } .menu_item{ float:left; border-right: #F00078; padding: 0 30px; cursor: pointer; } .active{ background-color: crimson; } .content{ min-height: 200px; border:1px solid red; } .hide{ display: none; } </style> </head> <body> <div style="width: 700px;margin:0 auto"> <div class="menu"> <div class="menu_item active">菜单一</div> <div class="menu_item">菜单二</div> <div class="menu_item">菜单三</div> <div>菜单四</div> </div> <div class="content"> <div>内容1</div> <div class="hide">内容2</div> <div class="hide">内容3</div> <div class="hide">内容4</div> </div> </div> <script src="jquery-3.3.1.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> </html>
属性操作：
# 专门用于做自定义属性
$(..).attr('n')
$(..).attr('n','v')
$(..).removeAttr('n')
<input type='checkbox' id='i1' />
# 专门用于chekbox,radio
$(..).prop('checked')
$(..).prop('checked', true)
PS:
index 获取索引位置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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>1</li>
<li>2</li>
</ul>
<script src="jquery-3.3.1.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);
//$('#u1 li').eq(index).remove();
//$('#u1 li').eq(index).empty();
})
</script>
</body>
</html>
文档处理：
append
prepend
after
before
remove
empty
clone
css处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.content{
padding: 50px;
border: 3px solid rebeccapurple;
}
.item{
position: relative;
width: 30px;
}
</style>
</head>
<body>
<div class="content">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="content">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="content">
<div class="item">
<span>赞</span>
</div>
</div>
<div class="content">
<div class="item">
<span>赞</span>
</div>
</div>
<script src="jquery-3.3.1.js"></script>
<script>
$('.item').click(function (){
AddFavor(this)
});
function AddFavor(self) {
//DOM对象
var fontSize = 15;
var top = 0;
var right = 0;
var opacity = 1;
var tag = document.createElement('span');
$(tag).text('+1');
$(tag).css('color','red');
$(tag).css('fontSize',fontSize+'px');
$(tag).css('right',right+'px');
$(tag).css('top',top+'px');
$(tag).css('opacity',opacity);
$(self).append(tag);
var obj = setInterval(function () {
fontSize = fontSize +10;
top = top -10;
right = right -10;
opacity = opacity -0.05;
$(tag).css('fontSize',fontSize+'px');
$(tag).css('right',right+'px');
$(tag).css('top',top+'px');
$(tag).css('opacity',opacity);
if(opacity<0){
clearInterval(obj);
$(tag).remove();
}
},40);
}
</script>
</body>
</html>
$('t1').css('样式名称', '样式值')
点赞：
- $('t1').append()
- $('t1').remove()
- setInterval
- 透明度 1 》 0
- position
- 字体大小，位置
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></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-3.3.1.js"></script>
<script>
$(function(){
$('#title').mouseover(function(){
$(this).css('cursor','move');
});
$("#title").mousedown(function(e){
//console.log($(this).offset());
var _event = e || window.event;
var ord_x = _event.clientX;
var ord_y = _event.clientY;
var parent_left = $(this).parent().offset().left;
var parent_top = $(this).parent().offset().top;
$('#title').on('mousemove', function(e){
var _new_event = e || window.event;
var new_x = _new_event.clientX;
var new_y = _new_event.clientY;
var x = parent_left + (new_x - ord_x);
var y = parent_top + (new_y - ord_y);
$(this).parent().css('left',x+'px');
$(this).parent().css('top',y+'px');
})
});
$("#title").mouseup(function(){
$("#title").off('mousemove');
});
})
</script>
</body>
</html>
位置：
$(window).scrollTop() 获取
$(window).scrollTop(0) 设置
scrollLeft([val])
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() # 获取边框 + 纯高度 + ？
$('i1').outerHeight() # 获取边框 + 纯高度 + ？
$('i1').outerHeight(true) # 获取边框 + 纯高度 + ？
# 纯高度，边框，外边距，内边距
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text" />
<input id="a1" type="button" value="添加" />
<ul id="u1">
<li>1</li>
<li>2</li>
</ul>
<script src="jquery-3.3.1.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>
</html>
事件
DOM： 三种绑定方式
jQuery：
$('.c1').click()
$('.c1').....
$('.c1').bind('click',function(){
})
$('.c1').unbind('click',function(){
})
$('.c1').on('click', function(){
})
$('.c1').off('click', function(){
})
*******************
$('.c').delegate('a', 'click', function(){
})
$('.c').undelegate('a', 'click', function(){
})
这种绑定方式有所不同，它不仅能够绑定事件，而且还能够给事件增加其设有的属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>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-3.3.1.js"></script>
<script>
function ClickOn() {
alert(123);
return true;
}
$('#i1').click(function () {
alert(456);
return false;
})
</script>
</body>
</html>
阻止事件发生
return false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
}
</style>
</head>
<body>
<form id="f1" action="s5.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>
<div><input name="n4" tex = "端口" type="text" /></div>
<div><input name="n5" tex = "IP" type="text" /></div>
<input type="submit" value="提交" />
<img src="...">
</form>
<script src="jquery-3.3.1.js"></script>
<script>
// 当页面框架加载完毕后，自动执行
$(function(){
$.Login('#f1')
});
$(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 flag;
});
});
// $(':submit').click(function () {
// var v = $(this).prev().val();
// if(v.length > 0){
// return true;
// }else{
// alert('请输入内容');
// return false
// }
// })
</script>
</body>
</html
$.Login('#f1') jquery扩展
可以在网上找大量的扩展来引用，如果找的两个引用全局变量相同，可以使用匿名函数来解决，应为他们的作用域只在函数内生效
# 当页面框架加载完成之后，自动执行
更加节省时间
$(function(){
$(...)
})
jQuery扩展：
- $.extend $.方法
- $.fn.extend $(.选择器.).方法
可以在网上找大量的扩展来引用，如果找的两个引用全局变量相同，可以使用匿名函数来解决，应为他们的作用域只在函数内生效
(function(){
var status = 1;
/ / 封装变量
})(jQuery)
4010
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
