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&colon; 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=& ...

随机推荐

SGU176 Flow construction
http://acm.sgu.ru/problem.php?contest=0&problem=176 有源汇上下界最小流,可以选择跟有源汇上下界最大流一样的建图方式,然后用二分去二分t-&g ...
Activity Window View的关系
http://blog.csdn.net/chiuan/article/details/7062215 http://blog.163.com/fenglang_2006/blog/static/13 ...
HDU 4914 Linear recursive sequence(矩阵乘法递推的优化)
题解见X姐的论文矩阵乘法递推的优化.仅仅是mark一下. .
ZOJ&Tab;1003 Crashing Balloon
#include<cstdio> #include<cstring> #include<cmath> #include<algorithm> using ...
diskpart修改盘符
开机运行一批处理.内容如下:diskpart /s c:\disk.txt c:\disk.txt内容如下:select disk 1 #1选择第二个硬盘 0选择第二个硬盘sel ...
正则表达式入门案例C&num;
---恢复内容开始--- 在网上百度了好多关于正则表达式的,不过好多都是关于语法的,没有一个具体的案例,有点让人难以入门,毕竟我还是喜欢由具体到抽象的认识.所以我就在这先提供了一个入门小案例(学了了6 ...
RabbitMQ与AMQP协议
AMQP(Advanced Message Queuing Protocol, 高级消息队列协议)是一个提供统一消息服务的应用层标准高级消息队列协议,是应用层协议的一个开放标准,为面向消息的中间件设计 ...
JS高程关于ajax的学习笔记
1.ajax介绍 ajax技术可以实现浏览器向服务器请求数据时不需要重新加载页面,就可以从服务器中获取需要的数据. ajax技术的核心是XMLHttpRequest对象(简称XHR),XHR对象为向服 ...
用Python对html进行编码
原地址:https://*.com/questions/275174/how-do-i-perform-html-decoding-encoding-using-python- ...
timer控件、三级联动、帐号激活权限设置
一.Timer控件 Timer实际就是一个线程控件. 属性:Enabled 是否被启用 Interval 多长时间执行一次控件中的代码事件: Tick 事件中放要执行的代码. ...