前端学习之-- Jquery
Jquery学习笔记
中文参考文档：http://jquery.cuishifeng.cn
Jquery是一个包含DOM/BOM/JavaScript的类库
引入jquery文件方法：<script src='jquery-1.12.4.js'></script>
调用jquery方法有以下2种
<script>
jQuery 或者 $
</script>
Jquery版本系列包含：
1.X -> 推荐 兼容性更好IE8以下
2.X
3.X
Jquery和dom之间的转换方法：
jquery和dom输出的区别：jquery的输出是使用中括号[]包裹的，dom输出是直接输出的html标签样式。
jquery对象转换为dom方法：在jquery语句后面加上第0个元素[0]，这时输出就转换为DOM对象。
如：首先需要导入jquery文件
执行：$('#l1')
jquery输出：[div#l1, context: document, selector: "#l1"]
执行：$('#l1')[0]
输出：<div id="l1">123</div>
DOM对象转换为jquery写法：在dom对象外使用$()包裹后，即刻转为jquery对象，如：$(DOM对象)
如：d =document.getElementById('l1')
$(d) 转换为jquery
输出：[div#l1, context: div#l1]
一：查找元素
DOM : 10个左右(get系列）
jquery分2种：
第一种选择器：直接找到某个或者某类标签
1：id选择器，根据标签内的ID进行查询。如：$('#l1')
2：class选择器，根据标签内的class进行查询。如：$('.l1')
3：标签选择器，根据标签名进行查询。如：$('div')
4：组合选择器，可以根据标签，ID，class名统一查询，如：$('div,#l1,.l1')
5：层级选择器
$('#i10 a') 先定位到i10标签，然后从其内部包含的所有标签中查找所有的a标签
$('#i10>a') 只在i10下的子标签中查找a标签
6：基本筛选器
:first 从查询结果中提取第一个元素
:last 从查询结果中提取最后一个元素
:even 筛选所有的基数行
:odd 筛选所有的偶数行
:eq(index) 根据索引查找
:header 找到所有的h标签
7：属性
$('[name]') 具有name属性的所有标签
$('[name="123"]') name属性等于123的标签
$("input[type='text']") # 这里第一步筛选input,然后找到type=text的所有标签
$(':text') 简写
jquery方法内置循环:
$('#tb:checkbox').each(function(k){
// k 当前索引
//this 是dom对象，代指当前循环的元素 $(this)
}
三元运算写法：var v = 条件 ？ 真值 ： 假值
实例见：jquery多选反选全选.html
<!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="channelAll();" />
<table border="1" >
<thead>
<th>选择</th>
<th>IP</th>
</thead>
<tbody id="tb">
<tr>
<td><input type="checkbox"></td>
<td>1.1.1.1</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>2.2.2.2</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>3.3.3.3</td>
</tr>
</tbody>
</table>
<script src="jquery-1.12.4.js"></script>
<script>
/* 获取id=tb下所有的checkbox属性标签，使用prop方法，如果后面带1个参数表示获取值，带2个参数表示赋值*/
function checkAll() {
$('#tb :checkbox').prop('checked',true)
}
function channelAll() {
$('#tb :checkbox').prop('checked',false)
}
function reverseAll() {
/* each方法是循环获取的所有checkbox属性标签,然后通过函数对每个标签进行操作，k表示所有标签的索引*/
$(':checkbox').each(function (k) {
/* DOM写法，this表示当前的标签
if(this.checked){
this.checked = false;
}else{
this.checked = true;
}
*/
/* jquery写法，这里用$(this)将doc标签转换为jquery格式
if ($(this).prop('checked')) {
$(this).prop('checked', false)
} else {
$(this).prop('checked', true)
}*/
// 写法3，三元运算，v = 条件? 值1:值2，当条件为真将值1赋予v，反之值2赋予v
var v = $(this).prop('checked')?false:true;
$(this).prop('checked',v)
})
}
</script>
</body>
</html>
第二种筛选器：在选择器选择后出现的多个符合条件的标签中，再次进行选择。
$(this).next() 当前标签的下一个兄弟标签
$(this).nextAll() 当前标签下面的所有兄弟标签（不包含兄弟标签中的子标签）
$(this).nextUntil('#ii1') 从当前标签开始向下查找到ID=II1的兄弟标签，提取这个区间范围的所有兄弟标签
$(this').prev() 当前标签的上一个兄弟标签
$(this).prevAll() 当前标签上面的所有兄弟标签（不包含兄弟标签中的子标签）
$(this).prevUntil('#ii1') 从当前标签开始向上查找到ID=II1的兄弟标签，提取这个区间范围的所有兄弟标签
$(this).parent() 当前标签的父标签
$(this).parents() 当前标签的所有父标签，直到<html>标签
$(this).parentsUntil('#ii1') 从当前标签开始向上查找直到一个父标签ID=ii1的标签结束，提取这个区间范围的所有标签
$(this).children() 当前标签的所有子标签
$(this).siblings() 当前标签的所有兄弟标签
$(this).find(样式名) 查找当前标签下的样式名
$(this).eq(1) 查找到的标签列表根据索引提取指定的标签
hasClass(class) 判断是否具有class这个样式
实例：菜单动态.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.header{
background-color:black;
color:wheat;
}
.content{
min-height:50px;
}
.hide{
display: none;;
}
</style>
<title>Title</title>
</head>
<body>
<div id='ii1' style="height:400px;width:200px;border:1px solid red;">
<div class="item">
<div id='i11' class="content hide">内容一
<div class="ct2">test</div>
</div>
<div id='i22' class="content hide">内容2</div>
<div id='i33' class="content hide">内容3</div>
<div class="header">标题一</div>
<div id='i1' class="content hide">内容一
<div class="content2">test</div>
</div>
<div id='i2' class="content hide">内容2</div>
<div id='i3' class="content hide">内容3</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 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')
// 利用筛选器
/*
$(this).next() //获取当前标签的下一个标签
$(this).prev() //获取当前标签的上一个标签
$(this).parent() //获取当前标签的父标签
$(this).children() //获取当前标签的子标签
$(this).siblings() //获取当前标签的所有兄弟标签
$(this).find('#i1') //查找并获取当前标签内ID为i1的标签（子子孙孙中查找）
*/
console.log($(this).parentsUntil('#ii1'))
$(this).prevAll().removeClass('hide')
$(this).parent().siblings().find('.content').addClass('hide')
// 支持链式编程
// $(...).click() 这里的click是绑定事件
// $(this).next().remove('hide').parent().siblings().find('.content').addClass('hide')
})
</script>
</body>
</html>
文本操作：
$(..).text() # 只获取文本内容，不获取内部的html标签
$(..).text("<a>1</a>") # 设置文本内容,内容中的html标签不会进行解析，统一以字符串新式出现。
$(..).html() #获取文本内容，文本内容中的html标签也会以字符串形式获取到。
$(..).html("<a>1</a>") #设置文本内容，字符串中的html标签在设置时将会进行解析，将解析后的1进行赋值。
以下val适用于input之类的具有输入功能的框
$(..).val() 获取值，用于具有value属性的标签
$(..).val(..) 设置值，用于具有value属性的标签
实例：模态编辑框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.modal{
position: fixed;
top:50%;
left:50%;
width:500px;
height:400px;
margin-left:-250px;
margin-top:-250px;
background-color: #dddddd;
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 onclick="Addtx();">添加</a>
<table border="1">
<thead>
<tr>
<th>ip</th>
<th>port</th>
<th>os</th>
</tr>
</thead>
<tbody>
<tr>
<td>1.1.1.1</td>
<td>80<b>test</b></td>
<td>
<a>添加</a> | <a class="edit">编辑</a> | <a>删除</a>
</td>
</tr>
<tr>
<td>1.1.1.1</td>
<td>80</td>
<td>
<a>添加</a> | <a class="edit">编辑</a> | <a>删除</a>
</td>
</tr>
</tbody>
</table>
<div class="modal hide">
<div>
<input name="hostname" type="text"/>
<input name="port" type="text"/>
</div>
<div>
<input type="button" value="取消" onclick="cancel();" />
</div>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
/*为样式名modal,shadow的标签删除hide样式*/
function Addtx() {
$('.modal,.shadow').removeClass('hide')
}
/*为样式名 添加hide样式*/
function cancel() {
$('.modal,.shadow').addClass('hide')
/*对输入框进行清空操作*/
$('.modal input[type="text"]').val('')
}
/*样式edit 点击触发click事件，执行一个匿名函数*/
$('.edit').click(function () {
/*获取当前标签this的父标签的以上所有同级别标签*/
var tds = $(this).parent().prevAll();
Addtx(); /*执行函数*/
var ip = $(tds[1]).text() /*将tds[1]的dom转换为jquery，使用text方法提取文本内容*/
var port = $(tds[0]).text()
$('.modal input[name="hostname"]').val(ip) /*查找样式modal标签下的input[name=hostname]的标签进行赋值操作*/
$('.modal input[name="port"]').val(port)
})
</script>
</body>
</html>
样式操作：
addClass #添加样式
removeClass # 删除样式
toggleClass # 如果样式存在则删除样式，如果样式不存在则添加样式（开关效果）
实例：开关
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input id='btn' type="button" value="开关" />
<span class="i1 hide">开灯了</span>
</body>
<script src="jquery-1.12.4.js"></script>
<script>
$('#btn').click(
function () {
$('.i1').toggleClass('hide')
}
)
</script>
</html>
属性操作：
# 一般专门用于做自定义属性操作
$(..).attr('n')：当为一个参数时候是获取属性值
$(..).attr('n','v')：当为2个参数时是修改属性值，如果出现重复则覆盖
$(..).removeAttr('n')：删除属性
实例：模态编辑框通过自定义属性动态加载内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.modal{
position: fixed;
top:50%;
left:50%;
width:500px;
height:400px;
margin-left:-250px;
margin-top:-250px;
background-color: #dddddd;
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 onclick="Addtx();">添加</a>
<table border="1">
<thead>
<tr>
<th>ip</th>
<th>port</th>
<th>os</th>
</tr>
</thead>
<tbody>
<tr>
<td target="hostname">1.1.1.1</td>
<td target="port">80</td>
<td>
<a class="cp">克隆</a> | <a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.1</td>
<td target="port">80</td>
<td>
<a class="cp">克隆</a> | <a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
</tbody>
</table>
<div class="modal hide">
<div>
<input name="hostname" type="text"/>
<input name="port" type="text"/>
</div>
<div>
<input type="button" value="取消" onclick="cancel();" />
</div>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
/*为样式名modal,shadow的标签删除hide样式*/
function Addtx() {
$('.modal,.shadow').removeClass('hide')
}
/*为样式名 添加hide样式*/
function cancel() {
$('.modal,.shadow').addClass('hide')
/*对输入框进行清空操作*/
$('.modal input[type="text"]').val('')
}
/*样式edit 点击触发click事件，执行一个匿名函数*/
$('.edit').click(function () {
Addtx(); /*执行函数*/
var tds = $(this).parent().prevAll(); /*提取所有上级兄弟标签，使用each循环每个标签*/
tds.each(
function () {
/*this代表当天的td，获取td的target的值*/
var n = $(this).attr('target');
/*获取td中的内容*/
var txt = $(this).text();
/*进行字符串拼接，以满足定位目标输入框的属性和对应值*/
var a1 = '.modal input[name=';
var a2 = ']';
var temp = a1 + n + a2;
/*在input的输入框中动态输入对应的标签提取到的值(如标签target=hostname 值1.1.1.1)*/
$(temp).val(txt)
}
)
})
$('.del').click(function () {
$(this).parent().parent().remove()
})
$('.cp').click(function () {
/*克隆标签*/
var new_ct = $(this).parent().parent().clone()
var par_ct = $(this).parent().parent().parent()
par_ct.append(new_ct)
})
</script>
</body>
</html>
# prop方法专门用于checkbox,radio等类似的选择功能标签
$(..).prop('checked')
$(..).prop('checked',true)
PS:
.index 获取索引位置
见实例：菜单切换_索引方法.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.active{
background-color:brown;
}
.menu{
height:38px;
background-color: #eeeeee;
line-height:38px;
cursor:pointer;/*鼠标链接以小手形状出现*/
}
.menu-item{
float:left;
border-right:1px solid red;
padding:0 5px;
}
.content{
min-height:100px;
border:1px solid red;
}
</style>
</head>
<body>
<div style="width:700px;margin:0 auto;">
<div class="menu">
<div class="menu-item active">menu 1</div>
<div class="menu-item">menu 2</div>
<div class="menu-item">menu 3</div>
</div>
<div class="content">
<div>content 1</div>
<div class="hide">content 2</div>
<div class="hide">content 3</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
/*根据自定义属性进行操作*/
$('.menu-item').click(function () {
/*当前标签添加active样式并将所有兄弟标签删除active样式*/
$(this).addClass('active').siblings().removeClass('active');
/*获取当前标签的索引号*/
var v = $(this).index();
/*根据content下通过eq定位索引标签进行操作*/
$('.content').children().eq(v).removeClass('hide').siblings().addClass('hide')
})
</script>
</body>
</html>
文档处理：（实现添加，删除，修改）
append #在目标标签内的子标签最下方添加内容
prepend #在目标标签内的子标签最上方添加内容
after #在目标标签同级下方添加内容
before #在目标标签同级上方添加内容
remove #删除 根据索引对应到的标签和内容
empty #只清空标签内容，不删除标签
clone #克隆一份，然后需要通过append再次添加克隆的数据
实例：标签添加删除复制.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="txt">
<input type="button" id="Add" value="添加" />
<input type="button" id="Del" value="删除" />
<input type="button" id="Cp" value="复制" /> <ul>
<li>abc</li>
<li>123</li>
<li>def</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#Add').click(function () {
var txt = $('#txt').val()
var tit = '<li>' + txt +'</li>'
/* 在li的最下方添加标签和内容*/
$('ul').append(tit)
/*在li的最上方添加标签和内容
$('ul').prepend(tit)
*/
/*在同级标签的下方添加标签和内容
$('ul').after(tit)
*/
/*在同级标签的最上方添加标签和内容
$('ul').before(tit)
*/
});
$('#Del').click(function () {
var index = $('#txt').val();
/*删除标签和内容*/
$('ul li').eq(index).remove();
/*只删除内容
$('ul li').eq(index).empty()*/
});
$('#Cp').click(function () {
var index = $('#txt').val();
/*根据索引号克隆一行新的数据*/
var new_ct = $('ul li').eq(index).clone();
/*添加克隆出来的数据*/
$('ul').append(new_ct)
})
</script>
</body>
</html>
实例：模态编辑框添加编辑删除克隆.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.hide{
display: none;
}
.modal{
position: fixed;
top:50%;
left:50%;
width:500px;
height:400px;
margin-left:-250px;
margin-top:-250px;
background-color: #dddddd;
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 onclick="Addtx();">添加</a>
<table border="1">
<thead>
<tr>
<th>ip</th>
<th>port</th>
<th>os</th>
</tr>
</thead>
<tbody id="tb">
<tr>
<td target="hostname">1.1.1.1</td>
<td target="port">80</td>
<td>
<a class="cp">克隆</a> | <a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
<tr>
<td target="hostname">1.1.1.1</td>
<td target="port">80</td>
<td>
<a class="cp">克隆</a> | <a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
</tbody>
</table>
<div class="modal hide">
<div>
<input name="hostname" type="text"/>
<input name="port" type="text"/>
</div>
<div>
<input type="button" value="确定" onclick="confirmModal();" />
<input type="button" value="取消" onclick="cancel();" />
</div>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
/*为样式名modal,shadow的标签删除hide样式*/
function Addtx() {
$('.modal,.shadow').removeClass('hide')
}
/*为样式名 添加hide样式*/
function cancel() {
$('.modal,.shadow').addClass('hide')
/*对输入框进行清空操作*/
$('.modal input[type="text"]').val('')
}
/*添加行数据*/
function confirmModal() {
var htname = $('.modal input[name="hostname"]').val();
var htport = $('.modal input[name="port"]').val();
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.setAttribute('target','hostname');
td1.innerHTML = htname;
var td2 = document.createElement('td');
td2.setAttribute('target','port');
td2.innerHTML = htport;
var td3 = document.createElement('td');
td3.innerHTML = '<a class="cp">克隆</a> | <a class="edit">编辑</a> | <a class="del">删除</a>'
$(tr).append(td1);
$(tr).append(td2);
$(tr).append(td3);
$('#tb').append(tr);
cancel()
} /*样式edit 点击触发click事件，执行一个匿名函数*/
$('.edit').click(function () {
Addtx(); /*执行函数*/
var tds = $(this).parent().prevAll(); /*提取所有上级兄弟标签，使用each循环每个标签*/
tds.each(
function () {
/*this代表当天的td，获取td的target的值*/
var n = $(this).attr('target');
/*获取td中的内容*/
var txt = $(this).text();
/*进行字符串拼接，以满足定位目标输入框的属性和对应值*/
var a1 = '.modal input[name=';
var a2 = ']';
var temp = a1 + n + a2;
/*在input的输入框中动态输入对应的标签提取到的值(如标签target=hostname 值1.1.1.1)*/
$(temp).val(txt)
}
)
})
$('.del').click(function () {
$(this).parent().parent().remove()
})
$('.cp').click(function () {
/*克隆标签*/
var new_ct = $(this).parent().parent().clone()
var par_ct = $(this).parent().parent().parent()
par_ct.append(new_ct)
})
</script>
</body>
</html>
CSS样式处理
获取标签，然后通过css进行设置样式
$('t1').css('样式名称','样式值')
抽屉点赞功能：
实例：点攒.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.contain{
padding:50px;
border:1px solid #ddd;
}
.item{
position: relative;
width:30px;
}
</style>
</head>
<body>
<div class="contain">
<div class="item">
<span>攒</span>
</div>
</div>
<div class="contain">
<div class="item">
<span>攒</span>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item').click(function () {
/*点击item触发事件执行这个函数*/
Addfaver(this)
})
function Addfaver(self) {
/*实现效果，初始化效果值*/
var fontsize=15;
var top=0;
var right=0;
var opacity=1;
/*创建一个span标签*/
var tag = document.createElement('span')
$(tag).text('+1')
/*设置标签样式*/
$(tag).css('color','green')
$(tag).css('position','absolute');
$(tag).css('fontsize',fontsize + "px")
$(tag).css('top',top + "px")
$(tag).css('right',right + "px")
$(tag).css('opacity',opacity)
$(self).append(tag)
/*以下使用定时器实现效果的变化*/
var obj = setInterval(function () {
fontsize = fontsize + 5;
top = top - 5;
right= right - 5;
opacity= opacity - 0.2;
$(tag).css('fontsize',fontsize + "px")
$(tag).css('top',top + "px")
$(tag).css('right',right + "px")
$(tag).css('opacity',opacity)
/*当透明度小于0时候，进行删除定时器和删除+1的标签*/
if(opacity < 0){
clearInterval(obj)
$(tag).remove()
}
},100)
}
</script>
</body>
</html>
滑轮位置：
$(div).scrollTop() 获取div的上下滑轮位置
$(window).scrollTop() 获取windows窗口的上下滑轮位置
$(window).scrollTop(0) 设置滑轮位置值
.scrollLeft([val]) 左右位置
offset 指定标签在html中的坐标
offset().left 指定标签在html中的坐标
offset().top 指定标签在html中的坐标
事件绑定方式：
DOM:三种绑定方式
jquery:
第一种:$('.c1').click() # 很多种绑定事件
第二种:$('.c1').bind('click',function(){ }) # 对.c1绑定click事件
$('.c1').unbind('click',function(){ }) # 对.c1解除绑定click事件
$('.c1').delegate('a','click',function(){ }) # 对.c1下面的所有a标签绑定一个click事件，这个功能可以实现动态添加的标签具有事件绑定，很有用。
$('.c1').undelegate('a','click',function(){ }) # 对.c1下面所有a标签解除click事件
$('.c1').on('click',function(){}) # 以上所有绑定方式在jquery内部全部使用的是on绑定
$('.c1').off('click',function(){})
实例：绑定实例.html -->注意delegate的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input id="t1" type="text" />
<input type="button" id="a1" value="添加" />
<ul id="u1">
<li>123</li>
<li>123</li>
<li>123</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$('#a1').click(function () {
var v = $('#t1').val();
var tmp = '<li>' + v + "</li>"
$('#u1').prepend(tmp)
})
/*使用以下方法添加标签后，但是无法触发alert事件
$('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>
阻止事件:
return false # 将阻止后面的事件发生，默认是return true
# 当页面框架加载完成后，自动执行
$(function(){
$(绑定事件默认执行的操作)
})
举例:
/*通过return false 阻止后面href事件的发生*/
<a onclick='return clickon()' href='http://www.baidu.com'>let go</a>
<a id='i1' href='http://www.baidu.com'>letgo2</a>
<script>
/*dom*/
function clickon(){
alert(123);
return false;
</script>
<script src='jquery-1.12.4.js'></script>
<script>
/*jquery*/
$('#i1').click(function(){
alert(456)
return false; # 阻止后续事件的发生
})
</script>
return false: 后面的href将停止链接
实例：表单验证.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color: red;
}
</style>
</head>
<body>
<form id='f1' action="s1.html">
<div><input name='n1' type="text" /></div>
<div><input name='n2' type="password" /></div>
<div><input name='n3' type="text" /></div> <input type="submit" value="提交"/>
<img src="...">
</form>
<script src="jquery-1.12.4.js"></script>
<script>
/*当页面框架加载完毕后，会自动执行，注，不需要等待图片加载完成，只加载图片的框架，和下面的区别*/
// $(function () {
//
// }) /*当上面所有元素完全加载完毕后，才会执行,注意，需要等待图片加载完成*/
$(':submit').click(function () {
var flag = true;
$('.error').remove(); /*清空错误提示的样式*/
$('#f1').find('input[type="text"],input[type="password"]').each(function () {
var v = $(this).val();
/*当输入框为空，将创建错误提示*/
if(v.length <= 0){
flag = false;
var tag = document.createElement('span');
tag.className='error';
tag.innerHTML = '必填';
$(this).after(tag);
// return flag; /*只结束当前循环*/
}
});
return flag; /*结束整个循环*/
})
</script>
</body>
</html>
jquery 扩展，使用自执行函数封装扩展，避免全局变量冲突。
- $.extend 执行： $.方法
- $.fn.extend 执行 $(..).方法
实例：jquery扩展.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="jquery-1.12.4.js"></script>
<script>
//jquery扩展第一种，自定义jquery的方法,使用extend，内部是一个字典
$.extend({
'name':function () {
return 'jack';
}
});
var v = $.name(); /*方法调用*/
alert(v);
//jquery扩展第二种，
$.fn.extend({
'name':function () {
return 'jack';
}
});
var v = $('#i1').name();
alert(v)
</script>
</body>
</html>
js扩展引入方法：
将jqeury扩展代码写入到js文件中，引入方法：
<script src='js自定义文件.js'></script>
<script>
var v = $.自定义的方法名()
alert(v)
</script>
自执行函数，可以封装js扩展
(function(){
var status = 1;
// 封装变量
})(jquery)
前端学习之-- Jquery的更多相关文章
- 前端学习之jquery/下
前端学习之jquery 一 属性操作 html(): console.log($("div").html()); $(".test").html("& ...
- 前端学习之jquery
前端学习之jquery 1. 什么是jQuery对象? jQuery对象就是通过jQuery包装DOM对象后产生的对象.jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它 ...
- 第四篇 前端学习之JQuery基础
一 jQuery是什么? jQuery就是一个JavaScript的库. <1> jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多 javascript高手加入 ...
- 前端学习之jquery（二）
操作元素(属性,css,文档处理) 1.1 属性操作 --------------------------属性 $("").attr(); $("").remo ...
- web前端学习总结--JQuery
jQuery 什么是jQuery jQuery是一个优秀的JavaScript框架,一个轻量级的JS库. 它封装了JS.CSS.DOM,提供了一致的.简洁的API. 兼容CSS3,及各种浏览器 使用户 ...
- 前端学习之三——jquery选择器
Jquery中的选择器分为几大类:基本过滤选择器,层次选择器,内容过滤选择器,可见性过滤选择器,属性过滤选择器,子元素过滤选择器,表单对象选择器和表单对象属相过滤选择器. 1.非基本过滤选择器,一般需 ...
- web前端开发学习：jQuery的原型中的init
web前端开发学习:jQuery的原型中的init 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 jQuery.fn ...
- jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...
- 《疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践》学习笔记
<疯狂前端开发讲义jQuery+Angular+Bootstrap前端开发实践>学习笔记 二〇一九年二月十三日星期三2时28分54秒 前提:本书适合有初步HTML.CSS.JavaScri ...
随机推荐
- Keil简介
最早接触Keil是学习开发8051系列的单片机.Keil C51是Keil公司出品的51系列兼容单片机C语言软件开发系统,与汇编相比,C语言在功能上.结构性.可读性.可维护性上有明显的优势,因而易学易 ...
- Photoshop 注册破解
本机测试环境为Photoshop cs4 破解方式一: 打开C:\windows\system32\drivers\etc\"找到 hosts 文件, 右键点击--打开方式---记事本,然后 ...
- android 图片叠加效果——两种方法的简介与内容 ，带解决Immutable bitmap passed to Canvas constructor错误
第一种是通过canvas画出来的效果: public void first(View v) { // 防止出现Immutable bitmap passed to Canvas constructor ...
- BZOJ 1012： [JSOI2008]最大数maxnumber
★★ 输入文件:bzoj_1012.in 输出文件:bzoj_1012.out 简单对比时间限制:3 s 内存限制:162 MB [题目描述] 现在请求你维护一个数列,要求提供以下两种 ...
- IOS OS X 中集中消息的传递机制
1 KVO (key-value Observing) 是提供对象属性被改变是的通知机制.KVO的实现实在Foundation中,很多基于 Foundation 的框架都依赖与它.如果只对某一个对象的 ...
- C# 递归读取XML菜单数据
在博客园注册了有4年了,很遗憾至今仍未发表过博客,趁周末有空发表第一篇博客.小生不才,在此献丑了! 最近在研究一些关于C#的一些技术,纵观之前的开发项目的经验,做系统时显示系统菜单的功能总是喜欢把数据 ...
- python调用脚本或shell的方式
python调用脚本或shell有下面三种方式: os.system()特点:(1)可以调用脚本.(2)可以判断是否正确执行.(3)满足不了标准输出 && 错误 commands模块特 ...
- Docker下redis的主从配置
1.拉取redis镜像docker pull redis2.启动3个redis容器服务,分别使用到6379.6380.6381端口docker run --name redis-6379 -p 637 ...
- 【Hive】explain command throw ClassCastException in 2.3.4
参考:https://issues.apache.org/jira/browse/HIVE-21489 (一)问题描述: Hive-2.3.4 执行 explain select * from sr ...
- win10使用自带虚拟机没有Hyper-V场景
开始咯~ 1.打开控制面板-程序和功能-启用或关闭Windows功能 2.发现下面并没有Hyper-v 真难受~~~ 然后百度了一下原来是家庭版的win10没有.那就只能往下面看咯~ 3.在桌面添 ...