本帖最后由 biu波儿了罢 于 2020-1-8 10:14 编辑
例1.添加,删除class 知识要点: 1. 通过<script src='jquery-1.12.4.js></script>调用jquery 2. 相对于Dom的document.getElementbyID('i1'), JQuery直接使用$('#i1'); 类似的,查找类可以用$('.c1'),查找p标签 $('p'),查找form的元素 $(':text') ,还可以组合使用。具体的选择器可以参考https://www.w3schools.com/jquery/jquery_ref_selectors.asp 3. addclass(‘hide’)直接给找到的标签添加一个样式class,removeClass('hide')删除一个class,无需使用classlist了 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
</style>
</head>
<body>
<input type="button" value="hide"/>
<div id="i1">
<div class="item"></div>
<div class="item">
<div class="c1">123</div>
<a>百度</a>
</div>
<div class="item"></div>
</div>
<div id="i2"></div>
<script src="jquery-1.12.4.js"></script>
<script>
flag=true;
function hides() {
if (flag==true){
$('#i1').addClass('hide');
console.log(flag)
flag=false;
}else{
$('#i1').removeClass('hide');
console.log(flag)
flag=true;
}
}
</script>
</body>
</html>
点击hide按钮切换隐藏效果
例2. 全选和反选 这个例子在前面的Dom里面出现过,现在看看JQuery如何实现
知识点: 1. 选择器可以组合使用 比如 $('#tb :checkbox') 表示id=tb下面所有的checkbox元素 2. 对于checkbox的属性,通过prop()来实现,如果是自定义的其他的属性,通过attr()实现 3. each()可以实现循环,循环里面如果输出this,可以看见他是一个dom的格式,如果把他转换成jquery对象的格式(数组格式),可以通过$(this)实现,如果想把jquery转为dom的格式,那么直接取第一个数组的值就行了,例子里面实现了3种方式,dom,jquery以及三元运算符的格式 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="button" value="全选" />
<input type="button" value="反选" />
<input type="button" value="取消" />
<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>
例3 隐藏菜单 知识点: 1. click的事件可以直接选择到标签之后执行,这个比在html里面使用onclick事件要好很多。 2. Jquery支持链式的编程,因此如下所示可以一行实现很多功能 [HTML] 纯文本查看 复制代码 <!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).next().removeClass('hide').parent().siblings().find('.content').addClass('hide')
})
</script>
</body>
</html>
例4. 复制,删除文本框 clone()克隆标签 find()查找标签 attr()添加一个事件 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div>
<p>
<a> + </a>
<input type="text" />
</p>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
function Add(ths){
var p = $(ths).parent().clone();
p.find('a').text(' - ');
p.find('a').attr('onclick', 'Remove(this);');
$(ths).parent().parent().append(p);
}
function Remove(ths){
$(ths).parent().remove();
}
</script>
</body>
</html> 效果:点击+自动复制一行,点击-删除自己所在
例5. 绑定事件-例2的升级版 例2里面我们需要给每个标签都手动的添加onclick事件,如果可以统一绑定事件,会省事很多。有两种方式,如下所示;
$(function){ ....
}里面执行的...会在文档树加载之后自动执行,不会等待所有的图片内容的加载 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none;
}
.menu{
width: 200px;
height: 600px;
border: 1px solid #dddddd;
overflow: auto;
}
.menu .item .title{
height: 40px;
line-height: 40px;
background-color: #2459a2;
color: white;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">
<div class="title">菜单一</div>
<div class="body">
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
<p>内容一</p>
</div>
</div>
<div class="item">
<div class="title" >菜单二</div>
<div class="body hide">
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
<p>内容二</p>
</div>
</div>
<div class="item">
<div class="title">菜单三</div>
<div class="body hide">
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
<p>内容三</p>
</div>
</div>
</div>
<script src="jquery-1.12.4.js"></script>
<script>
//方法一
// $(function(){
// // 当文档树加载完毕后,自动执行
// $('.item .title').click(function(){
// // this,$(this)
// $(this).next().removeClass('hide');
// $(this).parent().siblings().find('.body').addClass('hide');
// });
// });
//方法二
$('.item .title').bind('focus', function () {
$(this).next().removeClass('hide');
$(this).parent().siblings().find('.body').addClass('hide');
})
</script>
</body>
</html>
例6 事件的延迟绑定 比如通过javascript创建的新标签,如何让他自动绑定事件?可以通过delegate实现 [HTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" />
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
<script src="jquery-1.12.4.js"></script>
<script>
$(function(){
/*
$('li').click(function () {
alert($(this).text());
});
*/
$("ul").delegate("li","click",function(){
alert($(this).text());
});
});
function Add(){
var tag = document.createElement('li');
tag.innerText = '666';
$('ul').append(tag);
}
</script>
</body>
</html>
例7 模态对话框 (高级版) 之前用DOM实现过模态对话框,现在用JQuery实现同样的功能。 知识要点:
1.模态对话框的HTML和CSS布局,3层,最上层居中,中间一个阴影层,最下面是主界面,上面两层默认隐藏,通过z-index区分上下顺序 2. 可以通过attr()方法来获取和设置自定义的属性;如果是checkbox或者radio,那么通过prop()方法来获取和设定属性 3.通过属性来定位元素,比如 $("[editable='false']")则可以获取editable属性为false的那个标签元素 4. 文本编辑,对于InnerText的值是通过text()实现,对于input的表单内容则是通过val()实现 5. 添加class,删除class通过addClass()和removeClass()实现 [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: #eeeeee;
z-index: 10;
}
.shadow{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.6;
background-color: black;
z-index: 9;
}
.item{
position: relative;
width: 100px;
margin-top: 20px;
margin-left: 30px;
}
.label{
width: 40px;
color: chocolate;
}
.content{
width:100px;
position: absolute;
right:-80px;
}
.buttons{
margin-top: 20px;
margin-left: 30px;
}
</style>
</head>
<body>
<a>添加</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 editable="true">
<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 editable="true">
<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 editable="true">
<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 editable="true">
<a class="edit">编辑</a> | <a class="del">删除</a>
</td>
</tr>
</table>
<div class="modal hide">
<div >
<div class="item">
<label class="label">主机名</label>
<input class="content" name="hostname" type="text" />
</div>
<div class="item">
<label class="label">端口</label>
<input class="content" name="port" type="text" />
</div>
<div class="item">
<label class="label">IP地址</label>
<input class="content" name="ip" type="text" />
</div>
</div>
<div class="buttons">
<input type="button" value="取消" />
<input type="button" value="添加" />
<input type="button" value="修改" />
</div>
</div>
<div class="shadow hide"></div>
<script src="jquery-1.12.4.js"></script>
<script>
$("#tb").delegate('.del',"click",function () {
$(this).parent().parent().remove();
})
function addModal() {
var tr = document.createElement('tr');
var td1 = document.createElement('td');
td1.innerHTML = $(".modal input[name='hostname']").val();
var att1=document.createAttribute('target');
att1.value='hostname';
td1.setAttributeNode(att1);
var td2 = document.createElement('td');
td2.innerHTML = $(".modal input[name='port']").val();
var att2=document.createAttribute('target');
att2.value='port';
td2.setAttributeNode(att2);
var td3 = document.createElement('td');
td3.innerHTML = $(".modal input[name='ip']").val();;
var att3=document.createAttribute('target');
att3.value='ip';
td3.setAttributeNode(att3);
var td4 = document.createElement('td');
td4.innerHTML = " <a class='edit'>编辑</a> | <a class='del'>删除</a>"
$(tr).append(td1);
$(tr).append(td2);
$(tr).append(td3);
$(tr).append(td4);
$('#tb').append(tr);
$(".modal,.shadow").addClass('hide');
}
function addElement() {
$(".modal,.shadow").removeClass('hide');
}
function cancelModal() {
$(".modal,.shadow").addClass('hide');
$('.modal input[type="text"]').val("");
}
function updateModal(){
var host=$(".modal input[name='hostname']").val()
var port=$(".modal input[name='port']").val()
var ip=$(".modal input[name='ip']").val()
var tds=$("[editable='false']").prevAll()
console.log(tds)
tds.each(
function () {
console.log($(this).attr('target'))
if($(this).attr('target')=='ip'){
$(this).text(ip);
console.log('update ip')
}
else if($(this).attr('target')=='port'){
$(this).text(port);
console.log('update port')
}
else if($(this).attr('target')=='hostname'){
$(this).text(host)
console.log('update host')
}
}
)
$(".modal,.shadow").addClass('hide');
$("[editable='false']").attr('editable','true')
}
$("#tb").delegate(".edit","click",function() {
$(".modal,.shadow").removeClass('hide');
// this
$(this).parent().attr('editable', 'false')
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);
})
})
</script>
</body>
</html>
6. delegate 延迟绑定的实现,一般用于未来的新的标签,比如通过脚本创建的标签 7. 动态的创建标签,可以直接插入html字符串或者通过CreateElement()实现
文章摘自:https://blog.51cto.com/beanxyz/1893396
|