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()  // 内容的宽度+paddingsomenode.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.对于标签上有的能看到的属性和自定义属性都用attr2.对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。六、文档处理(jQuery中没有创建节点的方法)
1、元素内部(A,B代表的都是节点)
添加到指定元素内部的后面
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
注意：append也可以直接追加HTML代码
$("div").append("<button class="c1">点我</button>");添加到指定元素内部的前面
$(A).prepend($(B))// 把B前置到A
$(A).prependTo($(B))// 把A前置到B2、元素外部
添加到指定元素外部的后面
$(A).after($(B))// 把B放到A的后面
$(A).insertAfter($(B))// 把A放到B的后面添加到指定元素外部的前面
$(A).before($(B))// 把B放到A的前面
$(A).insertBefore($(B))// 把A放到B的前面3、删除
移除和清空元素
$(A).remove()  // 从DOM中删除所有匹配的元素(所有都删除HTML，连带标签也删除)
$(A).empty()  // 删除匹配的元素集合中所有的子节点(只删除内容Text，不删除标签)<div id="d1">嘿嘿嘿
</div>$("#d1").remove();   // 把div标签和嘿嘿嘿都删除了
$("#d1").empty();   // 只删除嘿嘿嘿，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).replaceAll($(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>

克隆

转载于:https://www.cnblogs.com/yidashi110/p/10092043.html

jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例相关推荐

html dom反选,Dom操作--全选反选
我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路: 首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那 ...
js、jquery操作复选框checkbox总结（单个/多个获取选中值、初始化设置默认选中值、全选反选）
一.单个复选框使用label标签可以点击文字就能选中复选框或者是取消选择复选框 label标签的两种使用方法: https://blog.csdn.net/qq_40015157/article ...
jQuery全选反选实例
1. $('#tb:checkbox').each(function(){ 每次都会执行全选-取消操作,注意$('#tb :checkbox').prop('checked',true); tb后面 ...
jQuery如何动态删除TR，input按钮删除本行记录,checkbox全选反选
checkbox 全选反选 1: var i = 1; 2: function CheckAllTeacher() { 3: if (i % 2 == 1) { 4: i++; 5: $(" ...
Jquery实现全选反选
Jquery实现全选反选 <!DOCTYPE html> <html lang="en"><head><meta charset=&qu ...
JQuery全选反选随其他checkbox自动勾选全选反选
工作中的代码片段写出来留作以后对比参考网上没找到自己想要的全选反选代码干脆自己写了个比较臃肿的相信还有更加简单的方法 jquery代码 ============================ ...
关于JQuery全选/反选第二次失效的问题
最近在项目中,遇到一个问题,测试全选/反选功能时,第一次对母框进行选中/非选中时,能同步子框的全选/反选状态,之后再点击母框,子框就没反应了.原代码大致结构关键如下: function selectA ...
jquery实现动态表格项目（表格增加删除/全选/表格变色特效等功能）（附源码+javaWEB开发如果需要可以直接使用）
jquery实现动态表格项目(表格增加删除/全选/表格变色特效)
jQuery 04day 滚动条与全选/反选/全不选
04 day 滚动条属性目录 04 day 滚动条属性全选/反选/全不选 1.scrollTop() :设置//读取滚动条Y坐标 2.$(document.body).scrollTop()+$( ...

jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例

jQuery之标签操作和返回顶部、登录验证、全选反选、克隆示例相关推荐

最新文章

热门文章