jQuery相关操作

jQuery学习

创建时间:2020-07-14 16:32

字数:1.4k 阅读:

jQuery相关操作

jQuery相关操作

属性和属性结点

基本概念和简单操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性和属性节点</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            1.什么是属性?
            对象身上保存的变量就是属性
            2.如何操作属性?
            对象.属性名称 = 值;
            对象.属性名称;
            对象["属性名称"] = 值;
            对象["属性名称"];

            3.什么是属性节点?
            <span name = "it666"></span>
            在编写HTML代码时,在HTML标签中添加的属性就是属性节点
            在浏览器中找到span这个DOM元素之后, 展开看到的都是属性
            在attributes属性中保存的所有内容都是属性节点

            4.如何操作属性节点?
            DOM元素.setAttribute("属性名称", "值");
            DOM元素.getAttribute("属性名称");

            5.属性和属性节点有什么区别?
            任何对象都有属性, 但是只有DOM对象才有属性节点
            */

            /*
            function Person() {

            }
            var p = new Person();
            // p.name = "lnj";
            p["name"] = "sl";
            // console.log(p.name);
            console.log(p["name"]);
            */

            var span = document.getElementsByTagName("span")[0];
            span.setAttribute("name", "lnj");
            console.log(span.getAttribute("name"));
        });
    </script>
</head>
<body>
<span name = "it666"></span>
</body>
</html>

attr方法：操作属性节点

作用：获取和设置属性节点
如果传递一个参数：代表获取属性节点的值
如果传递二个参数：代表设置属性节点的值
注意：
如果是获取：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值
1
console.log($("span").attr("class"));
如果是设置1：找到多少个元素就会设置多少个元素
如果是设置2：如果设置的属性节点不存在，那么会自动新增这个节点和节点的值
1
2
//假设不存在属性节点abc
$("span").attr("abc", "123");
删除属性节点：
1
$("span").removeAttr("class name");
prop方法：操作属性
作用：可以操作属性，也可以操作属性节点，基本特点和attr一样
重点：官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

attr和prop方法练习

图片切换功能

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>18-attr和prop方法练习</title>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            // 1.给按钮添加点击事件
            var btn = document.getElementsByTagName("button")[0];
            btn.onclick = function () {
                // 2.获取输入框输入的内容
                var input = document.getElementsByTagName("input")[0];
                var text = input.value;
                // 3.修改img的src属性节点的值
                $("img").attr("src", text);
                // $("images").prop("src", text);
            }
        });
    </script>
</head>
<body>
<input type="text">
<button>切换图片</button><br>
<img src="https://www.baidu.com/img/bd_logo1.png?where=super" alt="">
</body>
</html>

类操作

添加类：addClass()
删除类：removeClass()
切换类：toggleClass()

应用

  <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>19-jQuery操作类相关的方法</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .class1{
            width: 100px;
            height: 100px;
            background: red;
        }
        .class2{
            border: 10px solid #000;
        }
    </style>
    <script src="js/jquery-1.12.4.js"></script>
    <script>
        $(function () {
            /*
            1.addClass(class|fn)
            作用: 添加一个类
            如果要添加多个, 多个类名之间用空格隔开即可

            2.removeClass([class|fn])
            作用: 删除一个类
            如果想删除多个, 多个类名之间用空格隔开即可

            3.toggleClass(class|fn[,sw])
            作用: 切换类
            有就删除, 没有就添加
            */
            var btns = document.getElementsByTagName("button");
            btns[0].onclick = function () {
                // $("div").addClass("class1");
                $("div").addClass("class1 class2");
            }
            btns[1].onclick = function () {
                // $("div").removeClass("class2");
                $("div").removeClass("class2 class1");
            }
            btns[2].onclick = function () {
                $("div").toggleClass("class2 class1");
            }
        });
    </script>
</head>
<body>
<button>添加类</button>
<button>删除类</button>
<button>切换类</button>
<div></div>
</body>
</html>

文本值

html：和原生JS中的innerHTML一样
text：和原生JS中的innerText一样
val：获取值
html和text的区别：html是会添加到相应的子元素到div中，而text只会得到里面的全部内容

操作CSS样式的方法

逐个设置

  <script>
  $(function () {
	$("div").css("width", "100px");
    $("div").css("height", "100px");
    $("div").css("background", "red");
    }
</script>

链式设置：链式操作如果大于3步, 建议分开（提高可读性）

<script>
  $(function () {
	$("div").css("width", "100px").css("height", "100px").css("background", "blue");
    }
</script>

批量设置：建议这样写

<script>
  $(function () {
	$("div").css({
       width: "100px",
       height: "100px",
       background: "red"
    });
    }
</script>

获取CSS样式值

1	console.log($("div").css("background"));

尺寸和位置操作

offset()：获取元素距离窗口的偏移位
position()：获取元素距离定位元素的偏移位，所以position方法只能获取不能设置

scrollTop方法

获取滚动的偏移位
1
console.log($(".scroll").scrollTop());
获取网页滚动的偏移位：为了保证浏览器的兼容, 获取网页滚动的偏移位需要按照如下写法
1
console.log($("body").scrollTop()+$("html").scrollTop());
设置滚动的偏移位
1
$(".scroll").scrollTop(300);
设置网页滚动偏移位：为了保证浏览器的兼容, 设置网页滚动偏移位的时候必须按照如下写法
1
$("html,body").scrollTop(300);

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 2113132982@qq.com

jQuery相关操作

jQuery相关操作

属性和属性结点

基本概念和简单操作

attr方法：操作属性节点

prop方法：操作属性

attr和prop方法练习

类操作

文本值

操作CSS样式的方法

尺寸和位置操作

scrollTop方法