python笔记-18 jQuery
目录
->jQuery与js的关系
->模块与类库
->版本问题
->jquery引用的方法
->jquery对象和dom对象的相互转换的方法
->jQuery选择器
->jquery与$
->通过id查找jQuery对象
->class查找 jQuery对象
->标签查找 jQuery对象
->组合查找 jQuery对象
->层级选择器jQuery对象
->子子孙孙查找
->只找儿子
->选择器的基本过滤
#id>child:first
last
eq
->属性查找jQuery对象
->用于自定义属性的过滤
->所有属性过滤
->属性的值过滤 等于啥啥啥
->input type=text的写法
->checked、true false
->表单对象
->disable
->enable
->应用 全选 反选 取消的使用
->prop() checked，true
->each()
->三元运算
->this
->筛选器
->在选择器基础上再进行一次过滤筛选
->next()
->prev()
->parent() ->需要区分清prev 和parent的区别
->children()
->siblings() 兄弟标签 ->不包括自己
->find()子子孙孙寻找 ->使用find能节省很多next children这些操作
->例子 菜单
->addclass
->removeclass
->链式编程
->绑定事件 $().click
->筛选补充
->$('li:eq(1)')
->$('li').eq(1)
->first()
->last()
->文本操作
->text()与html()的区别
->val()
-> 实例：模态对话框
->text获取赋值给val，结合preval的使用，注意prevall的序号
->样式操作
addClass
removeClass
hasClass
toggleClass
-> 单击显示或隐藏 开灯关灯
->属性操作
attr
removeattr
prop
自定义属性实例
tab菜单实例
->标签操作
append() 插入子标签尾部
prepend() 插入子标签首部
before() 前方插入同级标签
after() 后方插入同级标签
empty() 清空内容
remove() 清除标签
clone() 复制
-> 例子： 插入、删除、复制 li
需要结合筛选器eq children 同时添加了一个onmouseover onmouseout
-> 例子 模态框的添加和删除 ->先不考虑修改
->css操作
$('t1').css('样式名称', '样式值')
点赞：
- $('t1').append()
- $('t1').remove()
- setInterval
- 透明度 1 》 0
- position
- 字体大小，位置
->点赞
点赞：
- $('t1').append()
- $('t1').remove()
- setInterval
- 透明度 1 》 0
- position
- 字体大小，位置
->高度与位置
->位置
->滚轮位置
->scrollTop
->scrollLeft 获取位置及操作位置
->坐标
->实例 切换到顶层
->offset().left() offset().top() 获取当前坐标
->position() ->显示与reltion 指定标签相对父标签(relative)标签的坐标
->高度
->4种高度
->事件的委托
->普通方式绑定事件存在的不足
->委托的方式绑定事件delegate('a', 'click', function(){
-> 阻止事件 return false
->表单验证
->jquery 的扩展事件
->extend与fn.extend两种扩展方式
->自执行函数防止js中变量名重复的情况
->jquery的执行时机
$(function(){
xxxxx
});
一、jQuery与js的关系
1、模块与类库
在python中，有模块的概念，我们可以写一些独立的通用的代码单独存放在文件中。其他程序调用时候可以调用它。这个是python中模块的含义
在其他的语言中，也有这么一种独立通用的代码，称之为类库，实际是一样的东西
即:模块=类库
jQuery就是js的一个类库，是使用js写的。
2、版本问题
1.x版本
2.x版本
3.x版本
我们此处使用1.12.4版本的jquery来操作，1.x版本兼容性较好，2.x之后的版本均取消了对老版本ie的兼容
3、jQuery的引用方法
<script scr=‘1.12.4.js’></script>
4、jQuery对象和dom对象之间的相互转换方法
$('xxx')[0] -->dom对象
(问;如果jQuery选择出的结果有很多，那怎么变成dom对象？下标0->n一个个转换，一种类似列表的对象，但是不是列表，有很多jQuery自己的方法)
$(dom对象) -->jQuery对象
二、jQuery选择器
1、jQuery与$的关系
jQuery的方法，我们用$符号代替jQuery 同样 我们也可以直接写jquery
$('#1')[0];
jQuery('#1')[0];
//两种写法等价
2、id选择器
#id的方式选择
$('#1')
3、class选择器
.classname的方式选择
$('.myclass');
$('.tab-line');
4、标签选择器
直接写标签名的方式选择
$('div');
$('span');
jQuery.fn.init [span, prevObject: jQuery.fn.init(1), context: document, selector: "span"]
//jq对象显示的形式
$('span')[0];
<span>i am span</span>
5、组合选择器
多个选择器直接用,逗号隔开，或的关系
$('#1,.1,span');
jQuery.fn.init(3) [div#1, div.1, span, prevObject: jQuery.fn.init(1), context: document, selector: "#1,.1,span"]
$('#1,.1,span')[0];
<div id="1">D1</div>
$('#1,.1,span')[1];
<div class="1">D2-1</div>
$('#1,.1,span')[2];
<span>i am span</span>
6、层级选择器
分别符合各个条件，嵌套的关系，每个条件直接用空格隔开
6.1 子子孙孙都选择
6.2 只选择儿子 使用 >
$('body div').each(function(){console.log(this)});
<div id="1">D1</div>
<div>"
D2
"<div class="1">D2-1</div>">
"<span>i am span</span>">
"</div>
<div class="1">D2-1</div>
<div>D3</div>
$('body>div').each(function(){console.log(this)});
<div id="1">D1</div>
<div>"
D2
"<div class="1">D2-1</div>">
"<span>i am span</span>">
"</div>
<div>D3</div>
7、基本过滤方法
7.1 :first 取第一个
7.2 :last 取最后一个
7.3 :eq 取第几个(第一个从0开始算)
x=$('body div:first')[0];
<div id="1">D1</div>
x=$('body div:last')[0];
<div>D3</div>
x=$('body div:eq(0)')[0];
<div id="1">D1</div>
x=$('body div:eq(-1)')[0];
<div>D3</div>
8、属性选择器
写法:标签名[属性名=“xxx”]
8.1 用于自定义属性的过滤
8.2 标签属性的过滤
8.3 属性的值的过滤
$('[type]:first')[0];
<input type="text">
$('input[type]:first')[0];
<input type="text">
$('input [type]:first')[0];
undefined
$('[type]:first')[0];
<input type="text">
$('[type="password"]')[0];
<input type="password">
$('[type="password"]:first')[0];
<input type="password">
9、实例: 全选，反选、取消的使用
需要结合
each/checkbox的prop/三元运算/this来实现
$('[type="checkbox"]').prop('checked',true);jq对象
this.checked=true; dom对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1" style="margin: 0 auto">
<tr>
<td>
<input type="checkbox">
</td>
<td>
1.1.1.1
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
1.1.1.1
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
1.1.1.1
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>
1.1.1.1
</td>
</tr>
<div>
<input type="button" value="全选" onclick="checkall()">
<input type="button" value="取消" onclick="checknone()">
<input type="button" value="反选" onclick="checkreverse()">
</div>
<script src="jquery-1.12.4.js"></script>
<script>
function checkall() {
$('[type="checkbox"]').prop('checked',true);
}
function checknone() {
$('[type="checkbox"]').prop('checked',false);
}
function checkreverse() {
/*
//方式一 if else
$('[type="checkbox"]').each(function () {
console.log(this);
if(this.checked){
this.checked=false;
}else{
this.checked=true;
}
})*/
//方式二 三元运算
$('[type="checkbox"]').each(function () {
this.checked=this.checked ? false:true;
})
}
</script>
</table>
</body>
</html>
三、筛选器
在选择器的基础上再进行一次过滤筛选
1、next
同一级别的下一个标签
2、prev
同一级别的上一个标签
3、parent
上一层标签
4、children
下一层标签
5、siblings
邻居标签除了自己
6、find
内部可以写选择器的语句，对结果再过滤
7、实例：左侧菜单
需要知识:addclass/removeclass/链式编程/事件绑定
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.header {
height: 20px;
color: white;
background-color: #2459a2;
}
.content{
background-color: white;
}
.hide{
display: none;
}
</style>
</head>
<body >
<div style="width:200px;height: 400px;border: 1px solid #dddddd">
<div class="item">
<div class="header">标题一</div>
<div class="content hide">
<div>1-1</div>
<div>1-2</div>
<div>1-3</div>
</div>
</div>
<div class="item">
<div class="header">标题二</div>
<div class="content hide">
<div>2-1</div>
<div>2-2</div>
<div>2-3</div>
</div>
</div>
<div class="item">
<div class="header">标题三</div>
<div class="content hide">
<div>3-1</div>
<div>3-2</div>
<div>3-3</div>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
$('.item div[class="header"]').click(function () {
//$(this).next().removeClass('hide');
//$(this).parent().siblings().find('.content').addClass('hide');
//链式编程
$(this).next().removeClass('hide').parent().siblings().find('.content').addClass('hide');
//同一级别的下一个标签->去掉class='hide'->上一层标签的兄弟姐妹除了我->过滤class='content'->添加hide
})
</script>
</body>
</html>
8、筛选的补充
8.1 first()
8.2 last()
8.3 eq(n)
使用方法和选择器时候:基本过滤的方式一样
$('tr').first()[0];
<tr><th>-</th><th>ip地址</th><th>端口号</th><th>操作</th></tr>
$('tr:first')[0];
<tr><th>-</th><th>ip地址</th><th>端口号</th><th>操作</th></tr>
eq
$('tr:eq(0)')[0];
<tr><th>-</th><th>ip地址</th><th>端口号</th><th>操作</th></tr>
$('tr').eq(0)[0];
<tr><th>-</th><th>ip地址</th><th>端口号</th><th>操作</th></tr>
hasclass
x.hasClass('hide');
true
x.hasClass('xxx');
false
x.hasClass('xxx');
false
x[0];
<div class="pg-L3 hide"><div><div>请使用管理员账户登录</div><input type="button" class="L3-cancle" value="取消"></div></div>
四、 文本操作
1、text()与html()
text为修改内部内容，写了html标签也会被处理为文本内容
html可以显示标签，也可以修改标签
这个text与html和js中的innerText与innerHTML一样
<html> <head> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button class="btn1">改变 p 元素的内容</button> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ $("p").text("Hello <h1>world!</h1>"); }); }); </script> </body> </html>
<html> <head> </head> <body> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button class="btn1">改变 p 元素的内容</button> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").click(function(){ $("p").html("Hello <h1>world!</h1>"); }); }); </script> </body> </html>
2、val()
即js中的value()，input类标签没有text，有val
3、实例：模态框的编辑功能
思路：
获取td中的text赋值给input中的val
prevall()的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-L2{ position: fixed; top:0; bottom: 0; left: 0; right: 0; background-color: black; z-index: 20; opacity: 0.5; } .pg-L3{ position: fixed; top:50%; left: 50%; height: 400px; width: 300px; margin-top: -200px; margin-left:-150px; z-index: 30; background-color: lightgoldenrodyellow; } .pg-content { width: 400px; margin: 0 auto; text-align: center; border: 1px solid #dddddd; padding: 3px; } table { width:400px; } .hide{ display: none; } .edit,.rm_line_record{ border-bottom: 1px solid; color: red; font-size: 12px; line-height: 20px; } tr{ height: 20px; } </style> </head> <body> <div class="pg-L2 hide"></div> <div class="pg-L3 hide"> <div> <div>IP <input type="text" class="L3_iP_text"></div> <div>端口<input type="text" class="L3_port_text"></div> <input type="button" class="L3-cancle" value="取消"> </div> </div> <div class="pg-content"> <table border="1"> <thead> <tr> <th>-</th> <th>ip地址</th> <th>端口号</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>1.1.1.1</td> <td>80</td> <td><a class="edit">编辑</a> | <a class="rm_line_record">删除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>2.2.2.2</td> <td>443</td> <td><a class="edit">编辑</a> | <a class="rm_line_record">删除</a></td> </tr> <tr> <td><input type="checkbox"></td> <td>3.3.3.3</td> <td>22</td> <td><a class="edit">编辑</a> | <a class="rm_line_record">删除</a></td> </tr> </tbody> </table> <hr /> <div class="button_line"> <input type="button" value="添加"> <input type="button" value="全选" > <input type="button" value="反选"> <input type="button" value="取消"> </div> </div> <script src="ICG_HTML/jquery-1.12.4.js"></script> <script> $('tbody tr td a[class="edit"]').click(function () { $('.pg-L2,.pg-L3').removeClass('hide'); //var tmp_tds=$(this).parent().parent(); tmp_tds=$(this).parent().prevAll(); var tmp_post=$(tmp_tds[0]).text(); var tmp_ip=$(tmp_tds[1]).text(); $('.L3_iP_text').val(tmp_ip); $('.L3_port_text').val(tmp_post); }); $('.L3-cancle').click(function () { $('.pg-L2,.pg-L3').addClass('hide'); }); $('.rm_line_record').click(function () { var v=confirm('是否删除？'); console.log(v); }); </script> </body> </html>
tmp_tds=$(this).parent().prevAll();
第0个为port
第1个为ip
五、样式操作
1、addClass 添加某样式
2、removeClass 删除某样式
3、hasClass 判断是否有样式
4、toggleClass('xxx') 判断是否有某个样式，有就删，没有就添加
5、实例：单击显示或隐藏、开关灯
$('.button_light').click(function () {
$('.light').toggleClass('hide');
});
六、属性的操作
对于属性的增删改查(js中的attribute、get、set、remove)
1、checkbox全选、反选、取消的实现(prop)
$('.button_all').click(
function () {
$('table input[type="checkbox"]').each(
function () {
this.checked=true;
});
}
);
$('.button_none').click(function () {
$('table input[type="checkbox"]').prop('checked',false);
});
//上面两种方法对比
//反选必须循环
$('.button_reverse').click(
function () {
$('table input[type="checkbox"]').each(
function () {
this.checked=this.checked?false:true;
});
}
);
2、jQuery操作属性的两个方法
1、attr 查增改
2、removeAttr删
$('.light')[0];
<div class="light hide">lighting</div>
$('.light').attr('xxx','yyy');
jQuery.fn.init [div.light.hide, prevObject: jQuery.fn.init(1), context: document, selector: ".light"]
$('.light')[0];
<div class="light hide" xxx="yyy">lighting</div>
$('.light').removeAttr('xxx');
jQuery.fn.init [div.light.hide, prevObject: jQuery.fn.init(1), context: document, selector: ".light"]
$('.light')[0];
<div class="light hide">lighting</div>
3、prop
<p> A:<input type="radio" name='r1' id='A' checked="checked"> B:<input type="radio" name="r1" id="B" > </p> <p> C:<input type="checkbox" name="c1" id="C" checked="checked"> D:<input type="checkbox" name="c1" id="D"> </p> <select> <option id="s1">1</option> <option id="s2">2</option> <option id="s3" selected="selected">3</option> </select>
dom与jQuery对checkbox，radio，select的修改对比
document.getElementById('s1').selected=true;
true
document.getElementById('A').checked;
true
document.getElementById('A').checked=false;
false
document.getElementById('A').checked=true;
true
document.getElementById('C').checked=true;
true
document.getElementById('C').checked=false;
false
------------------------
$('#A');
jQuery.fn.init [input#A, context: document, selector: "#A"]
$('#A').prop('checked',true);
jQuery.fn.init [input#A, context: document, selector: "#A"]
$('#A').prop('checked',false);
jQuery.fn.init [input#A, context: document, selector: "#A"]
$('#C').prop('checked',true);
jQuery.fn.init [input#C, context: document, selector: "#C"]
$('#s2').prop('selected',true);
jQuery.fn.init [option#s2, context: document, selector: "#s2"]
4、实例: 自定义标签在模态操作框中的使用(防止因表结构的变动，通过下标寻找变量出现的问题)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-L2{
position: fixed;
top:0;
bottom: 0;
left: 0;
right: 0;
background-color: black;
z-index: 20;
opacity: 0.5;
}
.pg-L3{
position: fixed;
top:50%;
left: 50%;
height: 400px;
width: 300px;
margin-top: -200px;
margin-left:-150px;
z-index: 30;
background-color: lightgoldenrodyellow;
}
.pg-content {
width: 400px;
margin: 0 auto;
text-align: center;
border: 1px solid #dddddd;
padding: 3px;
}
table {
width:400px;
}
.hide{
display: none;
}
.edit,.rm_line_record{
border-bottom: 1px solid;
color: red;
font-size: 12px;
line-height: 20px;
}
tr{
height: 20px;
}
</style>
</head>
<body>
<div class="pg-L2 hide"></div>
<div class="pg-L3 hide">
<div>
<div>IP <input type="text" class="L3_iP_text"></div>
<div>端口<input type="text" class="L3_port_text"></div>
<input type="button" class="L3-cancle" value="取消">
</div>
</div>
<div class="pg-content">
<table border="1">
<thead>
<tr>
<th>-</th>
<th>ip地址</th>
<th>端口号</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td myxxx="iP">1.1.1.1</td>
<td myxxx="port">80</td>
<td><a class="edit">编辑</a> | <a class="rm_line_record">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td myxxx="iP">2.2.2.2</td>
<td myxxx="port">443</td>
<td><a class="edit">编辑</a> | <a class="rm_line_record">删除</a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td myxxx="iP">3.3.3.3</td>
<td myxxx="port">22</td>
<td><a class="edit">编辑</a> | <a class="rm_line_record">删除</a></td>
</tr>
</tbody>
</table>
<hr />
<div class="light hide">lighting</div>
<div class="button_line">
<input type="button" value="添加" class="button_new">
<input type="button" value="全选" class="button_all">
<input type="button" value="反选" class="button_reverse">
<input type="button" value="取消" class="button_none">
<input type="button" value="开关灯" class="button_light">
</div>
</div>
<script src="ICG_HTML/jquery-1.12.4.js"></script>
<script>
/*
$('tbody tr td a[class="edit"]').click(function () {
$('.pg-L2,.pg-L3').removeClass('hide');
//var tmp_tds=$(this).parent().parent();
tmp_tds=$(this).parent().prevAll();
var tmp_post=$(tmp_tds[0]).text();
var tmp_ip=$(tmp_tds[1]).text();
$('.L3_iP_text').val(tmp_ip);
$('.L3_port_text').val(tmp_post);
});
*/
//方法二 使用自定义标签获取值
$('tbody tr td a[class="edit"]').click(function () {
$('.pg-L2,.pg-L3').removeClass('hide');
//var tmp_tds=$(this).parent().parent();
var tmp_tds=$(this).parent().prevAll();
tmp_tds.each(function () {
var tmp_target=$(this).attr('myxxx');
var tmp_text=$(this).text();
var tmp_str='.L3_'+tmp_target+'_text';
$(tmp_str).val(tmp_text);
});
});
$('.L3-cancle').click(function () {
$('.pg-L2,.pg-L3').addClass('hide');
});
$('.rm_line_record').click(function () {
var v=confirm('是否删除？');
if(v){$(this).parent().parent().remove();
}
});
$('.button_all').click(
function () {
$('table input[type="checkbox"]').each(
function () {
this.checked=true;
});
}
);
$('.button_none').click(function () {
$('table input[type="checkbox"]').prop('checked',false);
});
//上面两种方法对比
//反选必须循环
$('.button_reverse').click(
function () {
$('table input[type="checkbox"]').each(
function () {
this.checked=this.checked?false:true;
});
}
);
$('.button_light').click(function () {
$('.light').toggleClass('hide');
});
</script>
</body>
</html>
5、实例：tab菜单的实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .pg-content{ width: 1000px; margin: 0 auto; } .tab-line .tab{ float:left; height: 30px; width:100px; border-right: 1px solid red; text-align: center; line-height:30px; cursor: pointer; } .active{ background-color: blue; color: white; } .hide{ display: none; } .tab-pgs .tab-info{ height: 300px; width:400px; border: 1px solid #dddddd; } </style> <body> <div class="pg-header"></div> <div class="pg-content"> <div class="tab-line"> <div class="tab" xxx="t1">首页</div> <div class="tab" xxx="t2">操作日志</div> <div class="tab" xxx="t3">系统配置</div> <div style="clear: both"></div> </div> <div class="tab-pgs"> <div class="tab-info hide" xxx="t1">内容一</div> <div class="tab-info hide" xxx="t2">内容二</div> <div class="tab-info hide" xxx="t3">内容三</div> </div> </div> <div class="pg-footer"></div> <script src="jquery-1.12.4.js"></script> <script> $('.tab').click(function () { var tmp_key=$(this).toggleClass('active').attr('xxx'); $(this).siblings().removeClass('active'); var tmp_str='.tab-info[xxx="'+tmp_key+'"]'; console.log(tmp_str); $(tmp_str).toggleClass('hide').siblings().addClass('hide'); }); </script> </body> </html>
七、标签操作
append() 插入子标签尾部
prepend() 插入子标签首部
before() 前方插入同级标签
after() 后方插入同级标签
empty() 清空内容
remove() 清除标签
clone() 复制
1、ul li的实现
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div><input type="text" id="t1"></div> <div> <input type="button" value="插入首部" class="b_prepend"> <input type="button" value="插入尾部" class="b_append"> <input type="button" value="删除" class="b_rm"> <input type="button" value="复制" class="b_cp"> </div> <ul class="u1"> <li>1</li> <li>2</li> <li>3</li> </ul> <script src="jquery-1.12.4.js"></script> <script> $('.b_prepend').click(function () { var tmp_val=$('#t1').val(); var tmp_str='<li>'+tmp_val+'</li>'; console.log(tmp_str,tmp_str); $('.u1').prepend(tmp_str); }); $('.b_append').click(function () { var tmp_val=$('#t1').val(); var tmp_str='<li>'+tmp_val+'</li>'; console.log(tmp_str,tmp_str); $('.u1').append(tmp_str); }); $('.b_rm').click(function () { //$('.u1').children().eq(($('#t1').val())).remove();//全删除 $('.u1').children().eq(($('#t1').val())).empty();//清空内容但是保留值 }); $('.b_cp').click(function () { $('.u1').append($('.u1').children().eq($('#t1').val()).clone()); }); document.getElementsByClassName('b_cp')[0].onmouseover=function () { console.log('over'); }; document.getElementsByClassName('b_cp')[0].onmouseout=function () { console.log('out'); }; </script> </body> </html>
2、模态操作框的扩展（append的内容可以为dom对象，str的html，jq对象）
<!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: #eeeeee; 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="addElement();">添加</a> <table border="1" id="tb"> <tr> <td target="hostname">1.1.1.11</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.12</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.13</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.14</td> <td target="port">80</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() { 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'); // $('.modal input[type="text"]').each(function () { // // var temp = "<td>..." // // // // }) } function addElement() { $(".modal,.shadow").removeClass('hide'); } function cancelModal() { $(".modal,.shadow").addClass('hide'); $('.modal input[type="text"]').val(""); } $('.edit').click(function(){ $(".modal,.shadow").removeClass('hide'); // this var tds = $(this).parent().prevAll(); tds.each(function () { // 获取td的target属性值 var n = $(this).attr('target'); // 获取td中的内容 var text = $(this).text(); var a1 = '.modal input[name="'; var a2 = '"]'; var temp = a1 + n + a2; $(temp).val(text); }); // var port = $(tds[0]).text(); // var host = $(tds[1]).text(); // // $('.modal input[name="hostname"]').val(host); // $('.modal input[name="port"]').val(port); // 循环获取tds中内容 // 获取 <td>内容</td> 获取中间的内容 // 赋值给input标签中的value }); </script> </body> </html>
八、css操作->相当于dom_obj.style.xxx的操作
1、css的基本操作
$('t1').css('样式名称', '样式值')
2、实例:点赞效果的实现
2.1 标签操作，标签的添加和删除
2.2 定时器操作，不停改变点赞后+1字样的大小
2.3 position 透明度的理解
2.4 字体大小及位置的设置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .content{ padding: 50px; border: 1px solid #dddddd; } .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> <script src="jquery-1.12.4.js"></script> <script> $('.item').click(function () { var obj=document.createElement('span'); $(obj).text('+1').css('position','absolute').css('color','red'); var tmp_top=0; var tmp_right=0; var tmp_opacity=1; var tmp_fontsize=15; $(obj).css('top',tmp_top+'px').css('right',tmp_right+'px').css('opacity',tmp_opacity).css('font-size',tmp_fontsize+'px'); $(this).append(obj); //此处append的就是jq对象 var tmp_timer=setInterval(function () { tmp_top=tmp_top-10; tmp_right=tmp_right-10; tmp_opacity=tmp_opacity-0.2; tmp_fontsize=tmp_fontsize+5; $(obj).css('top',tmp_top+'px').css('right',tmp_right+'px').css('opacity',tmp_opacity).css('font-size',tmp_fontsize+'px'); if(tmp_opacity<0){ clearInterval(tmp_timer); $(obj).remove(); console.log('done'); } },100);
//定时器内部设置判断条件，满足条件删除定时器及标签 }); </script> </body> </html>
九、位置与高度
1、滚动条的位置
1.1 scrollTop
1.2 scrollLeft
不写值的时候可以获取位置
写上值可以操作位置
需要注意操作对象是谁及scrollTop与scrollLeft均为jQuery的用法
2、实例：返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.backtotop{
height: 45px;
width: 35px;
position: fixed;
bottom: 0;
right: 0;
z-index: 10;
background-color: yellow;
}
</style>
</head>
<body>
<div class='backtotop' >返回顶部</div>
<div id='1' style="width:50px;height: 100px;overflow: auto">
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
<div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div>
</div>
<div><input type="button" value="返回"></div>
<div>
<p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p>
<p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p>
<p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p><p>正文</p>
</div>
</body>
<script src="jquery-1.12.4.js"></script>
<script>
$('.backtotop').click(function () {
console.log($(window).scrollTop());
$(window).scrollTop(0);
});
$('input[value="返回"]').click(function () {
$('#1').scrollTop(0);
});
</script>
</html>
3、元素的坐标offset
offset().left() offset().top() 获取当前坐标
offset 使用 ->结合鼠标事件来拖动窗体位置 在html中的坐标
此处不展开说明
4、position坐标
position() ->显示与reltion 指定标签相对父标签(relative)标签的坐标
如果没有relative,这个坐标没有意义
$('.ball').position();
{top: 0, left: 8}
5、高度
4种高度的理解
height ->我能输入内容的部分的高度
innerHeight ->height+padding(上下则*2)
outerHeight ->height+padding(上下则*2)+border (上下则*2)
outerHeight （true） ->height+padding(上下则*2)+border (上下则*2)+margin(上下则*2)
<body> <div id =1 style="margin:1px;height: 1000px;border: 10px solid red;padding: 100px"> height </div> <script src="jquery-1.12.4.js"></script> <script> console.log($('#1').height()); console.log($('#1').innerHeight()); console.log($('#1').outerHeight()); console.log($('#1').outerHeight(true)); </script> </body>
十、事件的委托
1、普通方式绑定事件存在的不足
2、委托的方式绑定事件delegate
$('.c').delegate('a', 'click', function(){
$('.c').undelegate('a', 'click', function(){
十一、阻止事件发生(return false的使用)
1、原理
我们给一个a标签添加一个onclick动作，则这个函数会被执行，执行后，a标签继续完成跳转
如果函数返回值为false时，a标签自带的跳转就会被取消。
我们可以通过这种机制完成界面上一些元素的审核验证。如表单必填框的验证
2、实例：表单验证
思路
2.1 设立标志位作为返回值
2.2 移除所有报错
2.3 逐个检验
2.4 有问题的添加报错的标签，设立报错标签的格式
2.5 报错时设标志位为false
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form action="http://www.qq.com">
<div><input type="text" name="x1"></div>
<div><input type="password" name="x2"></div>
<div><input type="text" name="x3"></div>
<div><input type="text" name="x4"></div>
<div><input type="text" name="x5"></div>
<div><input type="submit" name="x6"></div>
</form>
<script src="jquery-1.12.4.js"></script>
<script>
$('input[name="x6"]').click(function () {
var flag=true;
$('.error').remove();
$('input[type="text"],input[type="password"]').each(function () {
if(this.value.length===0){
var tmp_err_obj=document.createElement('span');
tmp_err_obj.classList.add('error');
tmp_err_obj.innerText='必填！';
$(this).after(tmp_err_obj);
flag=false;
}
});
return flag;});
</script>
</body>
</html>
十二、jQuery的扩展
1、两种扩展方式
1.1 extend
//定义方法 $.extend( {'sb':function () {alert('sb');}} ); //调用方法 $.sb();
1.2 fn.extend
fn.extend的代用需$中有过滤条件
//定义 $.fn.extend( {'ok':function () {console.log('ok');}}); //调用 $('xxx').ok();
2、自执行函数的使用
防止不同的扩展使用同样的变量名，使用自执行函数将他们包起来
( function(arg){ var x='xxx'; arg.fn.extend( {'ok':function () {console.log('ok');}} ); }; )(jQuery)
3、$(function(){})的使用
使用这种格式，当页面框架加载完毕后，开始运行js。不需要等到页面所有都加载完成。
浙公网安备 33010602011771号