jQuery属性操作

最新推荐文章于 2022-06-08 14:38:06 发布

我不是小丑

最新推荐文章于 2022-06-08 14:38:06 发布

阅读量344

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/fuxinyu1/article/details/106821534

版权

初始jQuery

属性和属性节点

1.什么是属性？

对象身上保存的变量就是属性

2.如何操作属性？

对象.属性名称 = 值

对象.属性名称

对象[‘属性名称’] = 值

对象[‘属性名称’]

3.什么是属性结点

在编写html代码时在HTML标签中添加的属性就是属性结点

在浏览器中找到span这个DOM元素之后，展开看到的都是属性

在attributes属性中保持的所有内容都是属性结点

4.如何操作属性结点

DOM元素.setAttribute(“属性名称”, “值”);

DOM元素.getAttribute(“属性名称”);

var span = document.getElementsByTagName("span")[0];
span.setAttribute("name", "fu");
console.log(span.getAttribute("name"));

5.属性和属性结点有什么区别

任何对象都有属性，但是只要DOM对象才有属性结点

jQurey的attr方法

1.attr(name|pro|key.val|fn)

作用：获取或者设置属性结点的值

可以传递一个参数,也可以传递两个参数

如果传递一个参数，代表获取属性结点的值

如果传递两个参数，代表设置属性结点的值

注意点：

如果是获取：无论找到多少个元素，都只会反回第一个元素指定的属性结点的值

如果是设置：找到多少个元素就会设置多少个元素

如果是设置：如果设置的属性结点不存在，那么系统会自动新增

console.log($("span").attr("class"));
$("span").attr("class", "box");

2.removeAttr(name)

作用：删除属性结点

注意点：会删除所有找到的属性节点

虽然他只能传递一个参数，但是如果想删除多个属性结点可以在第一个熟悉名称空格写第二个属性名称

$('span').removeAttr('class name')

jQurey的prop方法

1.prop方法

特点和attr方法一致

$("span").eq(0).prop("demo", "fu");
$("span").eq(1).prop("demo", "fxy");
console.log($("span").prop("demo"));

注意点：prop方法不仅能够操作属性，他还能操作属性结点

官方推荐在操作属性结点时，具有true和false两个属性的属性结点，如checked，

selected 或者 disabled 使用 prop(),其他的使用attr()

console.log($("span").prop("class"));
$("span").prop("class", "box")

attr和prop方法练习

输入图片地址点击按钮切换图片

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/jquery-3.5.1.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)
        };
      });
    </script>
  </head>
  <body>
    <input type="text" />
    <button>切换图片</button><br />
    <img
      src="https://img.alicdn.com/tfs/TB17iqBXZ4z2K4jSZKPXXXAYpXa-190-121.gif"
      alt=""
    />
  </body>
</html>

jQurey操作类相关的方法

1.addClass(class|fn)

作用：添加一个类

如果要添加多个，多个类名之间用空格隔开即可

btns[0].onclick = function () {
	// $("div").addClass("class1");
	$("div").addClass("class1 class2");
};

2.removeClass(|class|fn|)

作用：删除一个类

如果要删除多个，多个类名之间用空格隔开即可

btns[1].onclick = function () {
	// $("div").removeClass("class1");
	$("div").removeClass("class1 class2");
};

3.toggleClass

作用：切换一个类

如果有就删除，没有就添加

btns[2].onclick = function () {
	// $("div").toggleClass("class1");
	$("div").toggleClass("class1 class2");
};

jQurey文本值相关的方法

1.html([val|fn])

和原生js中的innerHTML一模一样

2.text([val|fn])

和原生js中的innerHTML一模一样

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/jquery-3.5.1.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
      }
    </style>
    <script>
      $(function () {
        // 1.html([val|fn])
        // 和原生js中的innerHTML一模一样
        // 2.text([val|fn])
        // 和原生js中的innerHTML一模一样
        var btns = document.getElementsByTagName("button");
        btns[0].onclick = function () {
          //和原生的js中的innerText一模一样
          $("div").html("<p>我是段落<span>我是span</span></p>");
        };
        btns[1].onclick = function () {
          console.log($("div").html());
        };
        btns[2].onclick = function () {
          $("div").text("<p>我是段落<span>我是span</span></p>");
        };
        btns[3].onclick = function () {
          console.log($("div").text());
        };
        btns[4].onclick = function () {
          $("input").val("请输入内容");
        };
        btns[5].onclick = function () {
          console.log($("input").val());
        };
      });
    </script>
  </head>
  <body>
    <button>设置html</button>
    <button>获取html</button>
    <button>设置text</button>
    <button>获取text</button>
    <button>设置value</button>
    <button>获取value</button>
    <div></div>
    <input type="text" name="" id="" />
  </body>
</html>

jQurey 文本值相关的方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/jquery-3.5.1.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      div {
        width: 100px;
        height: 100px;
        border: 1px solid #000;
      }
    </style>
    <script>
      $(function () {
        //1.逐个设置
        $("div").css("width", "100px");
        $("div").css("height", "100px");
        $("div").css("background", "red");

        //2.链式设置
        //注意点：链式操作大于三步，建议分开
        $("div")
          .css("width", "100px")
          .css("heigth", "100px")
          .css("background", "blue");

        //3.批量设置
        $("div").css({
          width: "100px",
          height: "100px",
          background: "red",
        });

        //获取css样式值
        console.log($("div").css("background"));
      });
    </script>
  </head>
  <body>
    <div></div>
  </body>
</html>

jQuery位置和尺寸的方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/jquery-3.5.1.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .father {
        width: 200px;
        height: 200px;
        background: red;
        border: 50px solid #000;
        margin-left: 50px;
        position: relative;
      }
      .son {
        width: 100px;
        height: 100px;
        background: blue;
        position: absolute;
        left: 50px;
        top: 50px;
      }
    </style>
    <script>
      $(function () {
        var btns = document.getElementsByTagName("button");
        btns[0].onclick = function () {
          //监听获取
          //获取元素的宽度
          console.log($(".father").width());
          //offset([coordinates])
          //作用：获取元素距离窗口的偏移位
          console.log($(".son").offset().left);
          //position()
          //作用：获取元素距离定位元素的偏移量
          console.log($(".son").position().left);
        };
        btns[1].onclick = function () {
          //设置元素宽度
          $(".father").width("500px");
          $(".son").offset({
            left: 10,
          });
          //position只能获取不能设置
          $(".son").position({
            left: 10,
          });
          $(".son").css({
            left: "10px",
          });
        };
      });
    </script>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
    <button>获取</button>
    <button>设置</button>
  </body>
</html>

注意：position只能获取不能设置

jQuery 的scrollTop方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/jquery-3.5.1.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .scroll {
        width: 100px;
        height: 200px;
        border: 1px solid #000;
        overflow: auto;
      }
    </style>
    <script>
      $(function () {
        var btns = document.getElementsByTagName("button");
        //监听获取
        btns[0].onclick = function () {
          //获取滚动的偏移量
          console.log($(".scroll").scrollTop());
          //获取网页滚动的偏移量
          //注意点：为了保证浏览器的兼容，获取网页滚动的偏移位需要按照如下写法
          console.log($("body").scrollTop() + $("html").scrollTop());
        };
        btns[1].onclick = function () {
          //设置滚动的偏移量
          //注意点：为了保证浏览器的兼容，设置网页滚动的偏移位需要按照如下写法
          $(".scroll").scrollTop(100);
          $("html,body").scrollTop(300);
        };
      });
    </script>
  </head>
  <body>
    <div class="scroll">
      我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是
      div我是div我是div我是div我是div我是div我是div我是div我是div我是div
    </div>
    <button>获取</button>
    <button>设置</button>
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
  </body>
</html>

注意点：为了保证浏览器的兼容，获取网页滚动的偏移位需要按照如下写法

console.log($("body").scrollTop() + $("html").scrollTop());

注意点：为了保证浏览器的兼容，设置网页滚动的偏移位需要按照如下写法

$("html,body").scrollTop(300);

jQurey事假绑定

jQuery中有两种绑定事件方式

1.eventName(fn);

编码效率高/部分时间jQuery没有实现，所以不能添加

$("button").click(function () {
	alert("hello fu1");
});

$("button").click(function () {
	alert("hello fu2");
});

$("button").mouseleave(function () {
	alert("hello mouseleave");
});

$("button").mouseenter(function () {
	alert("hello mouseenter");
});

注意点：可以添加多个相同或者不同类型的时间，不会覆盖

2.on(eventName,fn);

编码效率低/所用js事件都可以添加

$("button").on("click", function () {
	alert("hello click1");
});

$("button").on("click", function () {
	alert("hello click2");
});

$("button").on("mouseleave", function () {
	alert("hello mouseleave");
});

$("button").on("mouseenter", function () {
	alert("hello mouseenter");
});

注意点：可以添加多个相同或者不同类型的时间，不会覆盖

jQurey 事件移除

$(function () {
	function test1() {	
		alert("hello fu1");
	}
	function test2() {
        alert("hello fu2");
	}
	$("button").click(test1);

	$("button").click(test2);

	$("button").mouseleave(function () {
		alert("hello mouseleave");
	});
	
	$("button").mouseenter(function () {
		alert("hello mouseenter");
	});
});

off方法如果不传递参数，会移除所有的事件

$('button').off()

off方法如果传递一个参数，会移除所有指定类型的事件

$('button').off('click')

off方法如果传递两个参数，会移除所有指定类型指定事件

$('button').off('click',test1);

jQurey事件冒泡和默认行为

1.什么是事件冒泡

如何给父元素和子元素都添加了事件，儿子在响应事件的时候父亲也会跟着响应事件。（事件从下级往上级传递的过程）

$(".son").click(function (event) {
	alert("son");
	// return false;
	event.stopPropagation();
});
$(".father").click(function () {
	alert("father");
});

2.如何组织事件冒泡

eturn false;
event.stopPropagation();

3.什么是默认行为

就是默认的提交行为比如a标签，表单提交按钮。

4.如何组织默认行为

return false
event.preventDefault();

jQurey事件自动触发

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="js/jquery-3.5.1.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .father {
        width: 200px;
        height: 200px;
        background: red;
      }
      .son {
        width: 100px;
        height: 100px;
        background: royalblue;
      }
    </style>
    <script>
      $(function () {
        $(".son").click(function (event) {
          alert("son");
        });
        $(".father").click(function () {
          alert("father");
        });
        // $(".father").trigger("click");
        // $(".father").triggerHandler("click");
        // trigger:如果利用trigger自动触发事件，会触发事件冒泡
        // $(".son").trigger("click");
        // triggerHandler:如果利用triggerHandler自动触发事件，不会触发事件冒泡
        // $(".son").triggerHandler("click");
        $("input[type='submit']").click(function () {
          alert("submit");
        });
        // trigger:如果利用trigger自动触发事件会触发默认行为
        // $('input[type="submit"]').trigger("click");
        // trigger: 如果利用triggerHandler自动触发事件不会触发默认行为
        // $('input[type="submit"]').triggerHandler("click");

        $("a").click(function () {
          alert("a");
        });
        // $("a").triggerHandler("click");
        $("span").trigger("click");
      });
    </script>
  </head>
  <body>
    <div class="father">
      <div class="son"></div>
    </div>
    <a href="http://www.baidu.com"><span>注册</span></a>
    <form action="http://www.taobao.com">
      <input type="text" />
      <input type="submit" />
    </form>
  </body>
</html>

注意：如果你想用trigger来触发a标签，并且触发a的时候还想让a执行它的默认行为那么必须在a里面用一个span把a的内容包起来

我不是小丑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
jQuery属性操作

jQuery第三天属性和属性节点1.什么是属性？对象身上保存的变量就是属性2.如何操作属性？对象.属性名称 = 值对象.属性名称对象[‘属性名称’] = 值对象[‘属性名称’]3.什么是属性结点在编写html代码时在HTML标签中添加的属性就是属性结点在浏览器中找到span这个DOM元素之后，展开看到的都是属性在attributes属性中保持的所有内容都是属性结点4.如何操作属性结点DOM元素.setAttribute(“属性名称”, “值”);DOM元素.getAttrib
复制链接

扫一扫