经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
JQuery --- 第二期 (jQuery属性操作)
来源：cnblogs　　作者：CN丶Moti　　时间：2019/4/22 8:57:58　　对本文有异议

个人学习笔记

1.JQuery的内容选择器

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JQuery的内容选择器</title>
  6.         <script src="jquery-1.12.4.js"></script>
  7.         <script>
  8.             $(function () {
  9.                 //:contains(text)   作用:找到包含指定文本内容的指定元素
  10.                 var $div1 = $("div:contains('div')");
  11.                 console.log($div1);
  12.                 //:empty  作用:找到既没有文本内容,也没有子元素的指定元素
  13.                 var $div2 = $("div:empty");
  14.                 console.log($div2);
  15.                 //:has(selector)    作用:找到包含指定子元素的指定元素
  16.                 var $div3 = $("div:has('p')");
  17.                 console.log($div3);
  18.                 //:parent           作用:找到包含指定文本内容或子元素的指定元素
  19.                 var $div4 = $("div:parent");
  20.                 console.log($div4);
  21.             });
  22.         </script>
  23.     <style>
  24.         div{
  25.             width: 100px;
  26.             height: 100px;
  27.             margin-top: 20px;
  28.             background: green;
  29.         }
  30.     </style>
  31. </head>
  32. <body>
  33.     <div></div>
  34.     <div>div 1号</div>
  35.     <div>div 2号</div>
  36.     <div><p></p></div>
  37.     <div><span></span></div>
  38. </body>
  39. </html>

2. 属性和属性节点

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>属性和属性节点</title>
  6.         <script src="jquery-1.12.4.js"></script>
  7.         <script>
  8.                 $(function () {
  9.                     /*
  10.                     什么是属性
  11.                          对象身上的变量就是属性
  12.                     如何操作属性
  13.                          对象.属性名称 = 值
  14.                          对象.属性名称
  15.                          对象['属性名称'] = 值
  16.                          对象['属性名称']
  17.                     什么是属性节点
  18.                         <span name="mySpan"></span>
  19.                         给HTML标签添加的属性就是属性节点
  20.                         在浏览器找到span标签后,展开看到的就是属性
  21.                         在attributes属性中的内容就是属性节点
  22.                     如何操作属性节点使用get和set方法
  23.                         var span = document.getElementsByTagName('span')[0];
  24.                         span.setAttribute("name","newSpan");
  25.                         console.log(span.getAttribute("name"));
  26.                     属性和属性节点的区别
  27.                           任何元素都有属性,但是只有DOM元素有属性节点
  28.                      */
  29.                     var span = document.getElementsByTagName('span')[0];
  30.                     span.setAttribute("name","newSpan");
  31.                     console.log(span.getAttribute("name"));
  32.                 });
  33.         </script>
  34. </head>
  35. <body>
  36.     <span name="mySpan"></span>
  37. </body>
  38. </html>

 3.JQuery-attr方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JQuery-attr方法</title>
  6.         <script src="jquery-1.12.4.js"></script>
  7.         <script>
  8.                 $(function () {
  9.                     /**
  10.                      * 获取或者设置或新增属性节点的值
  11.                      *
  12.                      * 传递一个参数:获得指定属性节点的值,无论找到多少个元素,只会返回第一个属性节点的值
  13.                      * 传递两个参数:如果存在,就更改,不存在就新增.有多少元素就设置多少元素
  14.                      */
  15.                     console.log($('span').attr("class", "newSpan1"));
  16.                     console.log($('span').attr("new", "haha"));
  17.                     console.log($('span').attr("new"));
  18.                     /**
  19.                      * 删除属性节点:会删除所有被找到的元素的属性节点
  20.                      * 如果想要删除多个属性节点,直接敲一个空格就行了
  21.                      */
  22.                     $('span').removeAttr("class new");
  23.                     console.log($('span'));
  24.                 });
  25.         </script>
  26. </head>
  27. <body>
  28.     <span class="span1" name="第一个span"></span>
  29.     <span class="span2" name="第二个span"></span>
  30. </body>
  31. </html>

4.JQuery-prop方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JQuery-prop方法</title>
  6.         <script src="jquery-1.12.4.js"></script>
  7.         <script>
  8.                 $(function () {
  9.                     //和attr方法基本一样
  10.                     $('span').eq(0).prop("test","moti");
  11.                     console.log($("span").prop("test"));
  12.                     $('span').removeProp("class");
  13.                     console.log($('span'));
  15.                     /*
  16.                     官方推荐在操作属性节点的时候,具有true和false两个属性的属性节点,
  17.                     如CheckBox,selected,或者disabled使用prop,
  18.                     其他的时候attr()
  19.                      */
  20.                     console.log($('input').prop("checked"));//返回true和false
  21.                     console.log($('input').attr("checked"));//返回checked和undefined
  22.                 });
  23.         </script>
  24. </head>
  25. <body>
  26. <span class="span1" name="第一个span"></span>
  27. <span class="span2" name="第二个span"></span>
  28. <input type="checkbox" checked>
  29. </body>
  30. </html>

5.attr和prop方法练习

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>attr和prop方法练习</title>
  6.         <script src="jquery-1.12.4.js"></script>
  7.         <script>
  9.                 $(function () {
  10.                     //给button添加点击事件
  11.                     var btn = document.getElementsByTagName("button")[0];
  12.                     btn.onclick = function () {
  13.                         //获取输入框的内容
  14.                         var input = document.getElementsByTagName("input")[0];
  15.                         var text = input.value;
  16.                         //修改img的src属性
  17.                         $('img').attr("src",text);//推荐
  18.                         // $('img').prop("src",text);
  19.                     }
  20.                 });
  21.         </script>
  22. </head>
  23. <img>
  24.     <input type="text"> <button>切换图片</button><br>
  25.     <img src="https://www.baidu.com/img/bd_logo1.png?where=super">
  26. </body>
  27. </html>

 6.JQuery相关类操作方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JQuery相关类操作方法</title>
  6.         <script src="jquery-1.12.4.js"></script>
  7.     <style>
  8.         .class1{
  9.             background: rebeccapurple;
  10.             width: 200px;
  11.             height: 10px;
  12.         }
  13.         .class2{
  14.             background: green;
  15.             height: 100px;
  16.         }
  17.     </style>
  18.         <script>
  19.                 $(function () {
  20.                     var btn0 = document.getElementsByTagName("button")[0];
  21.                     var btn1 = document.getElementsByTagName("button")[1];
  22.                     var btn2 = document.getElementsByTagName("button")[2];
  23.                     /**
  24.                      * addClass:添加一个类,如果要添加多个,多个类名之间用空格隔开
  25.                      */
  26.                     btn0.onclick = function () {
  27.                         $("div").addClass("class2 class1");
  28.                     }
  29.                     /**
  30.                      *  removeClass:删除一个类,如果要删除多个,多个类名之间用空格隔开
  31.                      */
  32.                     btn1.onclick = function () {
  33.                         $("div").removeClass("class2");
  34.                     }
  35.                     /**
  36.                      *  toggleClass:切换类,有就删除,没有就添加
  37.                      */
  38.                     btn2.onclick = function () {
  39.                         $("div").toggleClass("class2 class1");
  40.                     }
  42.                 });
  43.         </script>
  44. </head>
  45. <body>
  46.     <button>添加类</button>
  47.     <button>删除类</button>
  48.     <button>切换类</button>
  49.     <div></div>
  50. </body>
  51. </html>

 7.JQuery文本值相关的方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JQuery文本值相关的方法</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         div{
  12.             width: 100px;
  13.             height: 100px;
  14.             border: 1px solid #000;
  15.         }
  16.     </style>
  17.         <script src="jquery-1.12.4.js"></script>
  18.         <script>
  19.                 $(function () {
  20.                     var btn0 = document.getElementsByTagName("button")[0];
  21.                     var btn1 = document.getElementsByTagName("button")[1];
  22.                     var btn2 = document.getElementsByTagName("button")[2];
  23.                     var btn3 = document.getElementsByTagName("button")[3];
  24.                     var btn4 = document.getElementsByTagName("button")[4];
  25.                     var btn5 = document.getElementsByTagName("button")[5];
  27.                     btn0.onclick = function () {
  28.                         $("div").html("<p>我是段落<span>我是span</span></p>")
  29.                     };
  30.                     btn1.onclick = function () {
  31.                         console.log($("div").html());
  32.                     };
  33.                     btn2.onclick = function () {
  34.                         $("div").text("我是文本内容");
  35.                     };
  36.                     btn3.onclick = function () {
  37.                         console.log($("div").text());
  38.                     };
  39.                     btn4.onclick = function () {
  40.                         $("input").val("请输入内容");
  41.                     };
  42.                     btn5.onclick = function () {
  43.                         console.log($("input").val());
  44.                     };
  45.                 });
  46.         </script>
  47. </head>
  48. <body>
  49.     <button>设置html</button>
  50.     <button>获取html</button>
  51.     <button>设置text</button>
  52.     <button>获取text</button>
  53.     <button>设置value</button>
  54.     <button>获取value</button>
  55.     <div></div>
  56.     <input type="text">
  57. </body>
  58. </html>

 8.jQuery操作CSS样式的方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>jQuery操作CSS样式的方法</title>
  6.         <script src="jquery-1.12.4.js"></script>
  7.         <script>
  8.                 $(function () {
  9.                     /**
  10.                      * 逐个设置
  11.                      */
  12.                     // $("div").css("width","100px");
  13.                     // $("div").css("height","100px");
  14.                     // $("div").css("background","green");
  15.                     /**
  16.                      * 链式设置
  17.                      * 注意:链式操作如果大于三步,建议分开
  18.                      */
  19.                     $("div").css("width","100px").css("height","100px").css("background","red");
  20.                     /**
  21.                      * 批量设置
  22.                      * (推荐)
  23.                      */
  24.                     $("div").css({
  25.                         width:"100px",
  26.                         height:"100px",
  27.                         background:"blue"
  28.                     });
  29.                     /**
  30.                      * 获取CSS样式值
  31.                      */
  32.                     console.log($("div").css("background"));
  33.                 });
  34.         </script>
  35. </head>
  36. <body>
  37. <div></div>
  38. </body>
  39. </html>

9.JQuery位置和尺寸操作的方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JQuery位置和尺寸操作的方法</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .father{
  12.             width: 200px;
  13.             height: 200px;
  14.             background: red;
  15.             border: 20px solid #000;
  16.             margin-left: 50px;
  17.             position: relative;
  18.         }
  19.         .son{
  20.             width: 100px;
  21.             height: 100px;
  22.             background: blue;
  23.             position: absolute;
  24.             left: 50px;
  25.             top: 50px;
  27.         }
  28.     </style>
  29.         <script src="jquery-1.12.4.js"></script>
  30.         <script>
  31.                 $(function () {
  32.                     var btn0 =document.getElementsByTagName("button")[0];
  33.                     var btn1 =document.getElementsByTagName("button")[1];
  34.                     /**
  35.                      * 监听获取
  36.                      */
  37.                     btn0.onclick = function () {
  38.                         //获取元素的宽度
  39.                         console.log("father的宽度:",$(".father").width());
  40.                         //获得元素距离窗口的偏移位
  41.                         console.log("son距离窗口的左偏移位",$(".son").offset().left);
  42.                         //获得元素距离定位元素的偏移位
  43.                         console.log("son距离父元素的左偏移位",$(".son").position().left);
  44.                     };
  45.                     /**
  46.                      * 监听设置
  47.                      */
  48.                     btn1.onclick = function () {
  49.                         //设置元素的宽度
  50.                         $(".father").width("500px")
  51.                         //设置元素距离窗口的偏移位
  52.                         $(".son").offset({
  53.                             top:40
  54.                         });
  55.                         //注意position方法只能获取不能设置,可以使用css方法设置
  56.                         $(".son").css({
  57.                            left:"10px"
  58.                         });
  59.                     };
  60.                 });
  61.         </script>
  62. </head>
  63. <body>
  64. <div class="father">
  65.     <div class="son"></div>
  66. </div>
  67. <button>获取</button>
  68. <button>设置</button>
  69. </body>
  70. </html>

10.JQuery-scrollTop方法

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>JQuery-scrollTop方法</title>
  6.     <style>
  7.         *{
  8.             margin: 0;
  9.             padding: 0;
  10.         }
  11.         .scroll{
  12.             width: 100px;
  13.             height: 200px;
  14.             border: 2px solid #000;
  15.             overflow: auto;
  16.         }
  17.     </style>
  18.         <script src="jquery-1.12.4.js"></script>
  19.         <script>
  20.                 $(function () {
  21.                     var btn0 =document.getElementsByTagName("button")[0];
  22.                     var btn1 =document.getElementsByTagName("button")[1];
  23.                     /**
  24.                      * 监听获取
  25.                      */
  26.                     btn0.onclick = function () {
  27.                         //获取元素滚动的偏移位
  28.                         console.log("scroll 的div滚动的偏移位:",$(".scroll").scrollTop());
  29.                         //获取整个网页滚动的偏移位,为了保证浏览器兼容性,需要按照以下的写法
  30.                         console.log("整个网页滚动的偏移位:",$("body").scrollTop() + $("html").scrollTop());
  31.                     };
  32.                     /**
  33.                      * 监听设置
  34.                      */
  35.                     btn1.onclick = function () {
  36.                         //设置元素滚动的偏移位
  37.                         $(".scroll").scrollTop(200);
  38.                         //设置整个网页的偏移位,为了保证浏览器兼容性,需要按照以下的写法
  39.                         $("html,body").scrollTop(300);
  40.                     };
  41.                 });
  42.         </script>
  43. </head>
  44. <body>
  45. <div class="scroll">
  46.     我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
  47.     我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
  48.     我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
  49.     我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
  50.     我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
  51.     我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
  52.     我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
  53.     我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
  54.     我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
  55.     我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
  56.     我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
  57.     我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
  58.     我是莫提我是莫提我是莫提我是莫提我是莫提我是莫提
  59. </div>
  60. <button>获取</button>
  61. <button>设置</button>
  62. <br>
  63. <br>
  64. <br>
  65. <br>
  66. <br>
  67. <br>
  68. <br>
  69. <br>
  70. <br>
  71. <br>
  72. <br>
  73. <br>
  74. <br>
  75. <br>
  76. <br>
  77. <br>
  78. <br>
  79. <br>
  80. <br>
  81. <br>
  82. <br>
  83. <br>
    </body>
    </html>

原文链接：http://www.cnblogs.com/cnmoti/p/10745103.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号