jQuery 3

jQuery属性节点

  1. 什么是属性?
    对象身上保存的变量就是属性
  2. 如何操作属性?
    对象.属性名称 = 值;
    对象.属性名称;
    对象[“属性名称”] = 值;
    对象[“属性名称”];
  3. 什么是属性节点?

    在编写HTML代码时,在HTML标签中添加的属性就是属性节点
    在浏览器中找到span这个DOM元素之后, 展开看到的都是属性
    在attributes属性中保存的所有内容都是属性节点
  4. 如何操作属性节点?
    DOM元素.setAttribute(“属性名称”, “值”);
    DOM元素.getAttribute(“属性名称”);
  5. 属性和属性节点有什么区别?
    任何对象都有属性, 但是只有DOM对象才有属性节点

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>15-属性和属性节点title>
    <script src="js/jquery-1.12.4.js">script>
    <script>
        $(function () {
      
            /*
            function Person() {

            }
            var p = new Person();
            // p.name = "lnj";
            p["name"] = "zs";
            // 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>
body>
html>

jQuery中 attr 方法


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>16-jQuery的attr方法title>
    <script src="js/jquery-1.12.4.js">script>
    <script>
        $(function () {
      
           /*
            1.attr(name|pro|key,val|fn)
            作用: 获取或者设置属性节点的值
            可以传递一个参数, 也可以传递两个参数
            如果传递一个参数, 代表获取属性节点的值
            如果传递两个参数, 代表设置属性节点的值

            注意点:
            如果是获取:无论找到多少个元素, 都只会返回第一个元素指定的属性节点的值
            如果是设置:找到多少个元素就会设置多少个元素
            如果是设置: 如果设置的属性节点不存在, 那么系统会自动新增

            2.removeAttr(name)
            删除属性节点

            注意点:
            会删除所有找到元素指定的属性节点

           */
            // console.log($("span").attr("class"));
            $("span").attr("class", "box");
            // $("span").attr("abc", "123");

            $("span").removeAttr("class name");
        });
    script>
head>
<body>
<span class="span1" name="it666">span>
<span class="span2" name="cr">span>
body>
html>

jQuery中的 prop 方法


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>17-jQuery的prop方法title>
    <script src="js/jquery-1.12.4.js">script>
    <script>
        $(function () {
      
            /*
            1.prop方法
            特点和attr方法一致
            2.removeProp方法
            特点和removeAttr方法一致
            */
            /*
            $("span").eq(0).prop("demo", "it666");
            $("span").eq(1).prop("demo", "lnj");
            console.log($("span").prop("demo"));

            $("span").removeProp("demo");
            */

            /*
            注意点:
            prop方法不仅能够操作属性, 他还能操作属性节点

            官方推荐在操作属性节点时,具有 true 和 false 两个属性的属性节点,如 checked, selected 或者 disabled 使用prop(),其他的使用 attr()
            */
            // console.log($("span").prop("class"));
            // $("span").prop("class", "box");

            console.log($("input").prop("checked")); // true / false
            console.log($("input").attr("checked")); // checked / undefined

        });
    script>
head>
<body>
<span class="span1" name="it666">span>
<span class="span2" name="lnj">span>

<input type="checkbox">
body>
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 () {
      
            // 编写jQuery相关代码
            // 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>

你可能感兴趣的:(前端,jQuery,3)