找回密码
 立即注册

QQ登录

只需一步,快速开始

微信公众号开发资源

关注:848

所属分类: 微信开发 微信公众号开发资源

本版块为微信公众号开发教程与公众号开发相关技术分享板块,技术提问请到其他对应的问答板块发帖:)

[html5开发博客] jquery 基本操作

[复制链接]
查看: 3928|回复: 2
最佳答案
0 

102

主题

112

帖子

4090

积分

S1

积分
4090
 楼主| 发表于 2016-2-3 20:16:28 | 显示全部楼层 |阅读模式
1.DOM操作
   1. 基本操作
     * html() - 类似于原生DOMinnerHTML属性
       * 获取 - html()
       * 设置 - html(html代码)
     * text() - 类似于原生DOMtextContent属性
       * 获取 - text()
       * 设置 - text(文本内容)
     * val() - 类似于原生DOMvalue属性
       * 获取 - val()
       * 设置 - val(value)
     * attr() - 类似于原生DOMgetAttribute()setAttribute()
       * 获取 - attr(attrName)
       * 设置 - attr(attrName,attrValue)
       * 删除 - removeAttr(attrName)
例如:   
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>DOM基本操作</title>
  6.   <script src="jquery-1.11.3.js"></script>
  7. </head>
  8. <body>
  9.   <ul>
  10. <li id="bj" name="beijing">北京
  11. <ul>
  12. <li>朝阳区</li>
  13. <li>昌平区</li>
  14. <li>东城区</li>
  15. </ul>
  16. </li>
  17. <li id="tj">天津</li>
  18. <li id="nj">南京</li>
  19.   </ul>
  20.   <input type="text" id="user" value="请输入你的用户名">
  21.   <script>
  22. // html()方法
  23. // 1. 获取 - 北京节点的HTML代码
  24. console.log($("#bj").html());
  25. // 2. 设置(不是追加或累加) - 为天津节点设置区
  26. $("#tj").html("天津<ul><li>塘沽区</li></ul>");
  27. // text()方法
  28. // 1. 获取
  29. console.log($("#nj").text());
  30. // 2. 设置
  31. $("#nj").text("被我改了...");
  32. // val()方法
  33. // 1. 获取
  34. console.log($("#user").val());
  35. // 2. 设置
  36. $("#user").val("再次被我改了...");
  37. // attr()方法
  38. // 1. 获取
  39. console.log($("#bj").attr("name"));
  40. // 2. 设置
  41. $("#bj").attr("name","小龙女");
  42. console.log($("#bj").attr("name"));
  43. // 3. 删除
  44. $("#bj").removeAttr("name");
  45. console.log($("#bj").attr("name"));
  46. /* 下面是DOM方法
  47. var bj = document.getElementById("bj");
  48. bj.removeAttribute("name");
  49. console.log(bj.getAttribute("name"));
  50. */
  51.   </script>
  52. </body>
  53. </html>
复制代码

页面效果如下:
       图片1.png
   2.样式操作
     * 基本
       * style属性
       * class属性
     * 方式
       * attr() - attr("style",value)attr("class",className) - 设置样式
       * addClass(className) - 追加样式
         * 在原有基础上累加一个样式
       * removeClass() - 删除样式
         * 不传参数 - 删除所有样式
         * 传递参数 - 删除指定样式
       * toggleClass() - 切换样式
         * 是在没有样式与指定样式之间进行切换
                    * 该方法是addClass()+removeClass()的结合体
       * hasClass() - 判断是否含有指定样式
         * 该方法必须传递参数
         * css()方法
         * 获取 - css(attrName)
                    * 设置
                        * css(attrName,attrValue) - 每次设置一个样式属性
                        * css({                     //- 每次设置多个样式属性
                 attrName : attrValue,
                            attrName : attrValue,
                            ...
                     })
例如:
     
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="Generator" content="EditPlus®">
  6.   <meta name="Author" content="">
  7.   <meta name="Keywords" content="">
  8.   <meta name="Description" content="">
  9.   <title>jQuery操作样式</title>
  10.   <script src="jquery-1.11.3.js"></script>
  11.   <style>
  12. div {
  13. width : 200px;
  14. height : 200px;
  15. border : solid 1px black;
  16. background-color : green;
  17. }
  18. .mini {
  19. width : 100px;
  20. height : 100px;
  21. border : solid 1px black;
  22. background-color : red;
  23. }
  24. .one {
  25. width : 400px;
  26. height : 400px;
  27. border : solid 1px black;
  28. background-color : yellow;
  29. }
  30.   </style>
  31. </head>
  32. <body>
  33.   <input type="button" id="btn1" value="attr方法">
  34.   <input type="button" id="btn2" value="addClass方法">
  35.   <input type="button" id="btn3" value="removeClass方法">
  36.   <input type="button" id="btn4" value="toggleClass方法">
  37.   <input type="button" id="btn5" value="hasClass方法">
  38.   <input type="button" id="btn6" value="css方法">
  39.   <div></div>
  40.   <div></div>

  41.   <script>
  42. $("#btn1").click(function(){
  43. // 设置 - 覆盖之前所有的样式
  44. $("div:first").attr("class","mini");
  45. });
  46. $("#btn2").click(function(){
  47. // 追加 - 在之前样式的基础上累加样式
  48. $("div:first").addClass("one");
  49. });
  50. $("#btn3").click(function(){
  51. /*
  52.    removeClass()方法
  53.    * 不传参 - 删除所有样式
  54.    * 传参 - 删除指定样式
  55. */
  56. $("div:first").removeClass("one");
  57. });
  58. $("#btn4").click(function(){
  59. // toggleClass() - 在没有样式与指定样式之间切换
  60. $("div:first").toggleClass("mini");
  61. });
  62. $("#btn5").click(function(){
  63. // hasClass() - 判断是否含有指定样式
  64. alert($("div:first").hasClass("mini"));
  65. });
  66. $("#btn6").click(function(){
  67. /*
  68. $("div:first").css({
  69. width : 150,
  70. height : 150,
  71. background : "blue"
  72. });
  73. */
  74. $("div:first").css("width","150").css("height","150").css("background","blue");
  75. });
  76.   </script>
  77. </body>
  78. </html>
复制代码

效果如下:
图片2.png       
点击第一个按钮:
   图片3.png    
点击第二个按钮:
   图片4.png       
点击第三个按钮:
图片5.png
点击第四个按钮:
   图片6.png
点击第五个按钮:
图片7.png
点击第六个按钮:
   图片8.png

回复

使用道具 举报

最佳答案
0 

0

主题

4682

帖子

50

积分

新人求带

积分
50
发表于 2018-5-7 23:52:59 | 显示全部楼层
看下能不能拿来运营
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

1

帖子

30

积分

等待验证会员

积分
30
发表于 2019-9-7 12:36:43 | 显示全部楼层
185606xsz9396pm3r32n6o.jpg
185602aph6ygoyy01wo0os.jpg
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com