day53——标签操作
day53
今日内容
标签操作
值操作
取值:
文本输入框:$('#username').val();
input,type=radio单选框: $('[type="radio"]:checked').val();,首先找到被选中的标签,再进行取值
input,type=checkbox多选框: 通过val方法不能直接获取多选的值,只能拿到一个,想拿到多个项的值,需要循环取值
var d = $('[type="checkbox"]:checked');
for (var i=0;i<d.length;i++){
console.log(d.eq(i).val());
}
单选下拉框select: -- $('#s1').val();
多选下拉框select: -- $('#s2').val(); -- ['1','2']
设置值
文本输入框: -- $('#username').val('xxx');
input,type=radio单选框: -- $(':radio').val(['1']) 找到所有的radio,然后通过val设置值,达到一个选中的效果.
给单选或者多选框设置值的时候,只要val方法中的值和标签的value属性对应的值相同时,那么这个标签就会被选中.
此处有坑:$(':radio').val('1');这样设置值,不带中括号的,意思是将所有的input,type=radio的标签的value属性的值设置为1.
input,type=checkbox多选框: -- $(':checkbox').val(['1','2']);
单选下拉框select: -- $('#s1').val(['3']);
多选下拉框select: -- $('#s2').val(['1','2']);
统一一个方法:
选择框都用中括号设置值.
作业1思路
绑定点击事件
1 获取input标签中的值val
2 val().trim().length
3 =0
方式1:提前在input标签后面放一个span标签,加一个类值{color:red},找到span并添加文本内容, .text() .html()
4 如果不等于0,清空span中的内容
属性操作
设置属性: -- $('#d1').attr({'age1':'18','age2':'19'});
单个设置:$('#d1').attr('age1','18');
查看属性值: -- $('#d1').attr('age1');
删除属性: -- $('#d1').removeAttr('age1'); 括号里面写属性名称
prop和attr方法的区别:
总结一下：
1.对于标签上有的能看到的属性和自定义属性都用attr
2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 att1r()
checked示例:
attr():
查看值,checked 选中--'checked' 没选中--undefined
$('#nv').attr({'checked':'checked'});
设置值,attr无法完成取消选中
$('#nv').attr({'checked':'undefined'});
$('#nv').attr({'checked':undefined});
prop():
查看值,checked 选中--true 没选中--false
$(':checkbox').prop('checked');
设置值:
$(':checkbox').prop('checked',true);
$(':checkbox').prop('checked',false);
文档处理
姿势1:添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
append示例:
方式1:
创建标签
var a = document.createElement('a');
$(a).text('百度');
$(a).attr('href','http://www.baidu.com');
$('#d1').append(a);
方式2:(重点)
$('#d1').append('<a href="xx">京东</a>');
appendto示例
$(a).appendTo('#d1');
姿势2:添加到指定元素内部的前面
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
姿势3:添加到指定元素外部的后面
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
姿势4:
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
移除和清空元素
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还在
示例:
$('#d1').remove();
$('#d1').empty();
替换:
replaceWith()
replaceAll()
示例:
$('#d1').replaceWith(a); 用a替换前面的标签
$(a).replaceAll('#d1');
克隆(复制标签)
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button class="btn">屠龙宝刀,点击就送!</button>
</body>
<script src="jquery.js"></script>
<script>
$('.btn').click(function () {
// var btnEle = $(this).clone(); // 不带参数的克隆不能克隆绑定的事件
var btnEle = $(this).clone(true); // 参数写个true,就能复制事件
$(this).after(btnEle);
})
</script>
</html>
作业3
1 模态对话框结合点击事件完成弹出和隐藏
2 点击取消,关闭对话框
3 点击确认,关闭对话框,获取用户输入的内容
4 拼接一个tr标签,将数据放到里面的td标签里面,然后将tr标签放到tbody标签内部的后面
5 开除,点击这一行的那个开除按钮,就将本行tr标签删除 remove方法
事件
绑定事件的两种方式:
// 绑定事件的方式1
// $("#d1").click(function () {
// $(this).css('background-color','green');
// })
// 方式2
$('#d1').on('click',function () {
$(this).css('background-color','green');
})
常用事件
click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...}) //内容发生变化，input，select等
keyup(function(){...})
mouseover 和 mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#d1{
background-color: red;
height: 200px;
width: 200px;
}
#d2{
background-color: green;
height: 200px;
width: 200px;
}
.dd1{
background-color: yellow;
height: 40px;
width: 40px;
}
.dd2{
background-color: pink;
height: 40px;
width: 40px;
}
</style>
</head>
<body>
<div id="d1">
<div class="dd1"></div>
</div>
<div id="d2">
<div class="dd2"></div>
</div>
用户名:<input type="text" id="username">
<br>
<!--<select name="" id="s1">-->
<!-- <option value="1">上海</option>-->
<!-- <option value="2">深圳</option>-->
<!-- <option value="3">贵州</option>-->
<!--</select>-->
<input type="text" id="xxx">
</body>
<script src="jquery.js"></script>
<script>
// 绑定事件的方式1
// $("#d1").click(function () {
// $(this).css('background-color','green');
// })
// 方式2
// $('#d1').on('click',function () {
// $(this).css('background-color','green');
// });
//
// // 获取光标触发的事件
// $('#username').focus(function () {
// $(this).css('background-color','green');
// });
// // 失去光标触发的事件
// $('#username').blur(function () {
// $(this).css('background-color','white');
// });
// // 域内容发生变化触发的事件,一般用于select标签
// $('#s1').change(function () {
// // $('#d1').css('background-color','black');
// console.log('xxxxx')
//
// });
// $('#xxx').change(function () {
// console.log($(this).val());
// })
// 输入内容实时触发的事件,input事件只能on绑定
// $('#xxx').on('input',function () {
// console.log($(this).val());
// });
//
// //绑定多个事件 事件名称空格间隔
// $('#xxx').on('input blur',function () {
// console.log($(this).val());
// })
// 鼠标进入触发的事件
// $('#d1').mouseenter(function () {
// $(this).css('background-color','green');
// });
// // 鼠标离开触发的事件
// $('#d1').mouseout(function () {
// $(this).css('background-color','red');
// });
// hover事件 鼠标进进出出的事件
// $('#d1').hover(
// // 鼠标进入
// function () {
// $(this).css('background-color','green');
// },
// // 鼠标离开
// function () {
// $(this).css('background-color','red');
// }
// );
$('#d1').mouseenter(function () {
console.log('xxx');
});
$('#d2').mouseover(function () {
console.log('ooo');
});
// 键盘按下
// $(window).keydown(function (e) {
// console.log(e.keyCode);
//
// });
// 键盘抬起
$(window).keyup(function (e) {
console.log(e.keyCode);
});
</script>
</html>
移除事件（不常用）
.off( events [, selector ][,function(){}])
off() 方法移除用 .on()绑定的事件处理程序。
$("li").off("click")；就可以了
事件冒泡
// 事件冒泡,子标签和父标签(祖先标签)绑定了相同的事件,比如点击事件,那么当你点击子标签时,会一层一层的往上触发父级或者祖父级等等的事件
$('.c1').click(function () {
alert('父级标签!!!');
});
$('.c2').click(function (e) {
alert('子标签~~~');
// 阻止事件冒泡(阻止事件发生)
return false; //方式1
// e.stopPropagation() // 方式2
})
事件委托
<div id="d1">
<button class="btn">屠龙宝刀,点击就送!</button>.
</div>
// 事件委托
$('#d1').on('click','.btn',function () {
// $(this)是你点击的儿子标签
var a= $(this).clone();
$('#d1').append(a);
});
//中间的参数是个选择器，前面这个$('table')是父级标签选择器，选择的是父级标签，意思就是将子标签（子子孙孙）的点击事件委托给了父级标签
//但是这里注意一点，你console.log(this)；你会发现this还是触发事件的那个子标签，这个记住昂
day53——标签操作的更多相关文章
- Git 标签操作
允许有意义的名称到一个特定的版本库中的标签操作.Tom 决定标记他们的项目代码,以便他们以后可以更容易访问. 创建标签 让我们标记当前HEAD使用git tag命令.他提供的标记名称前加上-a选项,使 ...
- 前端09 /jQuery标签操作、事件、补充
前端09 /jQuery标签操作.事件.补充 目录 前端09 /jQuery标签操作.事件.补充 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文 ...
- 前端08 /jQuery标签操作、事件
前端08 /jQuery标签操作.事件 目录 前端08 /jQuery标签操作.事件 1.标签内文本操作 1.1 html标签元素中的所有内容 1.2 text 标签元素的文本内容 2.文档标签操作 ...
- jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例
一.样式操作 1.JQ中的样式类 somenode.addClass();// 添加指定的CSS类名. somenode.removeClass();// 移除指定的CSS类名. somenode.h ...
- 从零开始学 Web 之 DOM（一）DOM的概念，对标签操作
大家好,这里是「 Daotin的梦呓 」从零开始学 Web 系列教程.此文首发于「 Daotin的梦呓 」公众号,欢迎大家订阅关注.在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识 ...
- 利用jQuery对li标签操作
<ul class="con" id="products"> <li i=" class=""> < ...
- js之标签操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery标签操作
样式操作 样式类操作 //添加指定的css类名 $('元素选择器')addClass('类名'); //移除指定的css类名 removeClass(); //判断样式存不存在 hasClass(); ...
- git分支/标签操作
git分支类似于某一个模块,等到所有模块开发完毕时,最后聚合在一起形成一个项目.而分支之间一般是不会受影响的. git 分支的基本操作: git branch branchname 表示创建分支,新建 ...
随机推荐
- netflix conductor 2.x 版本新功能简单说明
netflix conductor 2.x 已经发布很长时间了,同时官方也发布了关于2.x 新特性的说明,当前github 行的release 版本为2.14.4 新特性 grpc 框架支持 一个可选 ...
- How to Construct the Input Bet String
The purpose of this section is to describe the format of the string which will submitted to the Pyth ...
- NOI2019 回家路线 DP
「NOI2019」回家路线 链接 loj 思路 f[i][j]第i个点,时间为j,暴力转移 复杂度O(m*t),好像正解是斜率优化,出题人太不小心了233 代码 #include <bits/s ...
- HHHOJ #151. 「NOI模拟 #2」Nagisa
计算几何板子题(我才没有拷板子的说--) 众所周知,三角形的重心坐标是\((\frac{x_1+x_2+x_3}{3},\frac{y_1+y_2+y_3}{3})\) 然后我们发现如果我们有一个点集 ...
- X-factor Chain（信息学奥赛一本通 1628）
题目描述 输入正整数 x,求 x 的大于 1 的因子组成的满足任意前一项都能整除后一项的序列的最大长度,以及满足最大长度的序列的个数. 输入 多组数据,每组数据一行,包含一个正整数 x. 对于全部数据 ...
- Mongoose 预定义模式修饰符 Getters 与 Setters 自定义修饰符
mongoose 预定义模式修饰符 mongoose 提供的预定义模式修饰符,可以对我们增加的数据进行一些格式化,主要有:lowercase.uppercase .trim,这里不一一演示,对trim ...
- Fluent瞬态结果导出为Ensight格式
参考: (1)<ANSYS Fluent User's Guide>的3.13.9. EnSight Case Gold Files (2)https://support.ceisoftw ...
- Phoenix概述
Phoenix是Salesforce.com开源的一个项目,可以让开发者在Apache HBase上执行SQL查询. Phoenix查询引擎会将SQL查询转换为一个或多个HBase scan,并编排执 ...
- 测试winform自动悬浮
using System;using System.Collections.Generic;using System.ComponentModel;using System.Data;using Sy ...
- quartus仿真提示： Can't launch the ModelSim-Altera software
quartus仿真提示: Can't launch the ModelSim-Altera software 2017年07月13日 17:54:50 小怪_tan 阅读数:3255 路径中的结尾 ...