jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例
一、样式操作
1、JQ中的样式类
somenode.addClass();// 添加指定的CSS类名。
somenode.removeClass();// 移除指定的CSS类名。
somenode.hasClass();// 判断样式存不存在
somenode.toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。
somenode.className 获取所有样式类名(字符串)
somenode.classList 获取所有样式类名(数组)
somenode.classList.remove("cls") 删除指定类
somenode.classList.add("cls") 添加类
somenode.classList.contains("cls") 存在返回true，否则返回false
somenode.classList.toggle("cls") 存在就删除(返回false)，不存在则添加(返回true)
JS中的class操作
2、CSS
somenode.css("属性","值")
示例：
$("p").css("color", "red"); //将所有p标签的字体设置为红色
$("p").css({"height": "300px","width":"300px"}); // 同时设置多个属性值
somenode.style.color="red"
JS中DOM操作
二、位置操作
somenode.offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
somenode.position()// 获取匹配元素相对父元素的偏移
somenode.scrollTop()// 获取匹配元素相对滚动条顶部的偏移或设置偏移量
somenode.scrollLeft()// 获取匹配元素相对滚动条左侧的偏移或设置偏移量 注意：
.offset()是检索一个元素相对于文档（document）的当前位置。
.position()是相对于父级元素的位移。
只有position不能设置偏移量。
其他三个都可以设置：
不写参数时：获取值
写参数时：设置值 例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body {
margin: 0;
}
.c1 {
position: relative;
left: 100px;
height: 100px;
width: 100px;
background-color: red;
}
.c2 {
position: absolute;
left: 100px;
height: 100px;
width: 100px;
background-color: green;
}
</style>
</head>
<body> <div class="c1">
<div class="c2"></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> </body>
</html>
HTML代码
操作示例：
// 获取匹配元素在当前窗口的相对偏移
$(".c1").offset(); // {top: 0, left: 100}
$(".c2").offset(); // {top: 0, left: 200} // 获取匹配元素相对父元素的偏移
$(".c2").position(); //{top: 0, left: 100} // 给获取的匹配元素设置相对于当前窗口的偏移量
$(".c2").offset({top:100,left:200}); 三、尺寸
somenode.height() // 内容的高度
somenode.width() // 内容的宽度 somenode.innerHeight() // 内容的高度+padding
somenode.innerWidth() // 内容的宽度+padding somenode.outerHeight() // 内容的高度+padding+border
somenode.outerWidth() // 内容的宽度+padding+border 四、文本操作
1、获取(设置)HTML代码
somenode.html() // 获取匹配元素的html内容
somenode.html("内容") // 设置匹配元素的html内容 2、获取(设置)文本值
somenode.text()// 获取匹配元素的内容
somenode.text("内容")// 设置匹配元素的内容
获取内容
somenode.innerHTML;
somenode.innerText; 设置内容
somenode.innerHTML = "内容";
somenode.innerText = "内容";
对比JS
3、value值：适用于表单的input、select、textarea
somenode.val() // 获取当前值
somenode.val("值") // 设置匹配元素的值
somenode.val(["值1", "值2"]) // 设置多选的checkbox、多选select的值
somenode.value // 获取值
somenode.setAttribute("value","值") // 设置值
对比JS
注意：获取表单的text、checkbox、radio、select等值用val()，而获取普通标签的文本内容用text()
4、例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="d1">
《春晓》
<p>
春眠不觉晓，处处闻啼鸟。夜来风雨声，花落知多少。
</p>
</div> <input type="text" id="i1">
<input type="checkbox" name="hobby" value="basketball">篮球
<input type="checkbox" name="hobby" value="football">足球
<input type="checkbox" name="hobby" value="doublecolorball">双色球 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>
</html>
HTML代码
操作示例：
$("#d1").text(); // 只输出内容
$("#d1").html(); // 标签和内容都输出 $("#d1").text("<a href="www.baidu.com">百度</a>"); // 设置值，标签也设置成字符串
$("#d1").html("<a href="www.baidu.com">百度</a>"); // 设置值，标签就会形成标签 $("#i1").val() // 获取文本框的内容 五、属性操作
1、获取文本类属性
somenode.attr("属性名") // 返回匹配元素的属性值
somenode.attr("属性名", "值") // 为匹配元素设置一个属性值
somenode.attr({k1: v1, k2:v2}) // 为匹配元素设置多个属性值
somenode.removeAttr("属性名") // 从匹配的元素中删除一个属性
JS属性(attribute)操作
语法：
为某节点增加一个属性
somenode.setAttribute("属性名","值");
获取这个属性值
somenode.getAttribute("属性名");
删除属性
somenode.removeAttribute("属性名");
对比JS
2、获取表单里的属性(checkbox、select和radio的属性)
somenode.prop("属性名") // 获取属性
somenode.removeProp("属性名") // 移除属性 注意：
在1.x及2.x版本的jQuery中使用attr对checkbox进行赋值操作时会出bug，在3.x版本的jQuery中则没有这个问题。
为了兼容性，我们在处理checkbox和radio的时候尽量使用特定的prop()，不要使用attr("checked", "checked") 3、示例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body> <div id="d1" title="属性示例" name="例子">div</div> <input type="checkbox" id="i1" checked="checked" value="a">
<input type="radio" value="b"> </body>
</html>
HTML代码
操作示例：
$("#d1").attr("title"); // "属性示例"
$("#d1").attr("name"); // "例子" $("#d1").attr("name","嘿嘿嘿");
$("#d1").attr("name"); //"嘿嘿嘿" $("#d1").removeAttr("name"); $(":checkbox[value='a']").prop("checked"); // true
$(":radio[value='b']").prop("checked", true); 4、attr和prop区别
prop和attr的区别：
attr全称attribute(属性)
prop全称property(属性) 虽然都是属性，但他们所指的属性并不相同，attr所指的属性是HTML标签属性，而prop所指的是DOM对象属性，
可以认为attr是显式的，而prop是隐式的。即你选中的时候，标签才会有这个属性，比如checked，当你在多选按钮中选中了某个按钮，
那个按钮就自动会设置checked属性。
比如：
<input type="checkbox" id="i1" value="1"> $("#i1").attr("checked") // undefined
$("#i1").prop("checked") // false 可以看到attr获取一个标签内没有的东西会得到undefined，而prop获取的是这个DOM对象的属性，因此checked为false。 如果换成下面的代码：
<input type="checkbox" id="i1" value="1" checked>
$("#i1").attr("checked") // checked
$("#i1").prop("checked") // true 这已经可以证明attr的局限性，它的作用范围只限于HTML标签内的属性，而prop获取的是这个DOM对象的属性，选中返回true，没选中返回false。 再看一下针对自定义属性，attr和prop的区别：
<input type="checkbox" checked id="i1" value="1" me="自定义属性"> $("#i1").attr("me") // "自定义属性"
$("#i1").prop("me") // undefined
可以看到prop不支持获取标签的自定义属性。 总结
1.对于标签上有的能看到的属性和自定义属性都用attr
2.对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。 六、文档处理(jQuery中没有创建节点的方法)
1、元素内部(A,B代表的都是节点)
添加到指定元素内部的后面
$(A).append($(B))// 把子节点B追加到父节点A的最后
$(B).appendTo($(A))// 把子节点B追加到父节点A的最后
注意：append也可以直接追加HTML代码
$("div").append("<button class="c1">点我</button>"); 添加到指定元素内部的前面
$(A).prepend($(B))// 把子节点B前置到父节点A的最前面
$(B).prependTo($(A))// 把子节点B前置到父节点A的最前面 2、元素外部
添加到指定元素外部的后面
$(A).after($(B))// 把节点B放到节点A的后面(A和B的同级的)
$(B).insertAfter($(A))// 把节点B放到节点A的后面 添加到指定元素外部的前面
$(A).before($(B))// 把节点B放到节点A的前面
$(B).insertBefore($(A))// 把节点B放到节点A的前面 3、删除
移除和清空元素
$(A).remove() // 从DOM中删除所有匹配的元素(包括自身的标签也删除)
$(A).empty() // 删除匹配的元素集合中所有的子节点(只删除所有子节点(包括子节点的标签)，但不删除自身标签) <div id="d1">
<p>嘿嘿嘿</p>
</div> $("#d1").remove(); // 把div标签和<p>嘿嘿嘿</p>都删除了
$("#d1").empty(); // 只删除<p>嘿嘿嘿</p>，div标签没有删除
注意：JS中操作节点都是基于父节点操作的
1.添加节点(子节点)
追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)； 把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点); 示例1：
//创建节点
var pEle = document.createElement("p"); //先找一个父节点
var dEle = document.getElementById("d"); //把子节点追加到父节点
dEle.appendChild(pEle); 示例2：
//创建节点
var pEle = document.createElement("p"); //先找一个父节点
var dEle = document.getElementById("d"); //父节点里面的某个节点
var d1 = document.getElementById('d1'); //把子节点放到d1这个节点前面
dEle.insertBefore(pEle,d1); 2.删除节点
语法：
获得要删除的元素，通过父元素调用该方法删除
somenode.removeChild(要删除的节点) 示例：
//先找一个父节点
var dEle = document.getElementById("d"); //找到父节点里面想要删除的子节点
var d1 = document.getElementById('d1'); //删除子节点
dEle.removeChild(d1); 3.替换节点
语法：
somenode.replaceChild(newnode, 某个节点); 示例：
//创建节点
var pEle = document.createElement("p"); //先找一个父节点
var dEle = document.getElementById("d"); //父节点里面的某个节点
var d1 = document.getElementById('d1'); //用新建的节点替换d1
dEle.replaceChild(pEle,d1);
对比JS
4、替换
$(A).replaceWith($(B)) // 用节点B替换掉所有的A节点
$(B).replaceAll($(A)) // 用节点B替换掉所有的A节点 示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body> <div id="d1"></div> <hr> <div id="d2">
<p>嘿嘿嘿！</p>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>
</html>
HTML代码
操作示例：
var aEle = document.createElement('a');
aEle.innerText = "百度";
aEle.href = "www.baidu.com";
$("p").replaceWith(aEle); // 用新建的a节点替换所有的p标签 var aEle = document.createElement('a');
aEle.innerText = "百度";
aEle.href = "www.baidu.com";
$(aEle).replaceAll($("p")); // 用新建的a节点替换所有的p标签 5、克隆
$(A).clone() // 不加参数true，克隆标签但不克隆标签带的事件
$(A).clone(true) // 加参数true，克隆标签且克隆标签带的事件 七、示例
1、返回顶部
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>返回顶部示例</title>
<style type="text/css">
.content {
height: 3000px;
} .btn {
height: 50px;
width: 50px;
position: fixed;
right:15px;
bottom:15px;
} .hide {
display:none;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head> <body>
<div class="content">
<p>渡远荆门外，来从楚国游。</p>
<p>山随平野尽，江入大荒流。</p>
<p>月下飞天镜，云生结海楼。</p>
<p>仍怜故乡水，万里送行舟。</p>
</div> <div id="b1" class="btn hide">
<button type="button" id="b2" style="background-color: blueviolet">返回顶部</button>
</div> <script type="text/javascript">
// window是DOM对象，所以用$()把它转成JQ对象，scroll是滚动事件的关键字
$(window).scroll(function () {
if ($(window).scrollTop() > 100) {
$("#b1").removeClass('hide');
}else{
$("#b1").addClass('hide');
}
}); $("#b2").on("click",function () {
$(window).scrollTop(0);
}) </script> </body>
</html>
返回顶部按钮
2、登录验证
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>登录示例</title>
</head>
<body>
<form action="">
<p>
<label>用户名
<input type="text" name="username">
</label>
<span style="color: red;"></span>
</p> <p>
<label>密码
<input type="password" name="password">
</label>
<span style="color: red;"></span>
</p> <p>
<button id="login" type="button">登陆</button>
</p> </form>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript">
// 给登陆按钮，绑定点击事件
$("#login").click(function () {
// 1. 找到所有需要判断的input输入框
var $inputEles = $("label>input");
// 2. for循环依次做判断input是否为空
for (var i=0;i<$inputEles.length;i++){
var $inputEle = $($inputEles[i]); // $(DOM对象) --> jQuery对象
if(!$inputEle.val().trim()){
// 获取label的值
var tem = $inputEle.parent().text().trim();
$inputEle.parent().next().text(tem+"不能为空");
} }
}); // 给获取用户输入的input框绑定事件
var $inputEles = $("label>input");
for (var j=0;j<$inputEles.length;j++){
$inputEles[j].onfocus = function () {
$(this).parent().next().text('');
}
} </script> </body>
</html>
登录验证
3、全选反选取消
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>全选反选取消</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<button type="button" id="all">全选</button>
<button type="button" id="reverse">反选</button>
<button type="button" id="cancel">取消</button> <table border="1">
<thead>
<tr>
<th>#</th>
<th>姓名</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>小明</td>
<td>看美女</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小红</td>
<td>化妆</td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>小花</td>
<td>跳舞</td>
</tr>
</tbody> </table>
<script type="text/javascript">
// jQuery绑定事件方法
// 全选，把所有checkbox的checked设置为true
$("#all").click(function(){
$(":checkbox").prop("checked",true);
}); // 取消，把所有checkbox的checked设置为false
$("#cancel").on("click",function(){
$(":checkbox").prop("checked",false);
}); // 反选，先查看checkbox的状态，再把状态设置为相反的
$("#reverse").click(function () {
var $checkbox = $(":checkbox");
for (var i=0;i<$checkbox.length;i++){
// 获取状态
var static = $($checkbox[i]).prop("checked");
// 状态设置为反
$($checkbox[i]).prop("checked",!static);
}
}); </script> </body>
</html>
全选反选取消
4、克隆
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>克隆示例</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<button type="button" class="copy">想要复制自己吗，点击吧</button>
<script type="text/javascript">
$(".copy").click(function () {
$(this).clone(true).insertAfter(this);
})
</script>
</body>
</html>
克隆
jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例的更多相关文章
- jquery、js操作checkbox全选反选
全选反选checkbox在实际应用中比较常见,本文有个不错的示例,大家可以参考下 操作checkbox,全选反选//全选 function checkAll() { $('input[name=&qu ...
- jQuery全选反选实例
1. $('#tb:checkbox').each(function(){ 每次都会执行 全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...
- JQuery 全选 反选 获取Table 中指定td的元素值
//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python: jquery实现全选 反选 取消
引入这个jquery-1.12.4.js jquery实现全选 反选 取消 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitio ...
- jquery、js全选反选checkbox
操作checkbox,全选反选 //全选 function checkAll() { $('input[name="TheID"]').attr("checked&quo ...
- jquery 书写全选反选功能
书写一个后台管理中用到的全选反选功能.代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 关于JQuery全选/反选第二次失效的问题
最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...
- jquery实现全选/反选功能
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
随机推荐
- Linux tail 命令
tail 命令可用于查看文件的内容,有一个常用的参数 -f 常用于查阅正在改变的日志文件. tail -f filename 会把 filename 文件里的最尾部的内容显示在屏幕上,并且不断刷新,只 ...
- iOS----------关于Cornerstone的偏好设置
应用场景:有时候我们的项目会导入一些第三方.a文件,但是当我们在svn上check out下来的时候,会发现少了一些.a文件.于是乎项目就报错了. 针对这种情况,我们应该怎么办呢? 1.先打开Corn ...
- Android入门第一课之Java基础
通知:由于本周六场地申请没通过,所以本周的培训临时取消. 今天给大家带来的是Android入门的第一课,由于教室申请的不确定性,因此,每次培训的内容都会在博客先提前释放出来.首先Android的APP ...
- Linux中VSFTP的配置
配置VSFTP服务器: 1.安装VSFTP,可以参考Linux 中yum的配置来安装: yum installvsftpd.x86_64 -y 2.修改SELinux: setenforce 0 查看 ...
- vue实现打印功能的两种方法
第一种方法:通过npm 安装插件 1,安装 npm install vue-print-nb --save 2,引入 安装好以后在main.js文件中引入 import Print from 'v ...
- Python列表之班荆道故
列表list初识 列表是python的基础数据类型之一 ,它是以[ ]括起来, 每个元素用' , '隔开而且可以存放各种数据类型: list列表的定义: list_ = []list_1 = [&qu ...
- Unity重置Animator到初始状态和重复播放同一个Animation
遇到问题 特效同事给的Animation更改了物体的很多属性,如Active,Alpha, Scale,Position等等,物体本身需要重复利用,因此使用对象池技术不直接销毁而是隐藏等需要时再显示, ...
- python3 Queue（单向队列）
创建队列 import queue q = queue.Queue() empty(如果队列为空,返回True) import queue q = queue.Queue() print(q.empt ...
- C# groupby 应用小技巧
这两天感冒了,导致大脑无法有效运转,一个朋友问我,groupby 怎么给list 分组,然后再将其中一个字段组合起来,恩,觉得很简单,结果才发现,自己的脑子真的是不够用了: 恩,其实是想写其他的,但是 ...
- MySQL从查找数据库表到删除全过程
使用DOS命令进入MySQL:mysql -u root -p 按回车键输入密码显示如下界面成功进入MySQL交互界面. 如果此时不知道MySQL有哪些数据库,使用显示所有数据库名语句:show ...