1. <body>
  2.  
  3.         <div id="textDiv">...</div>
  4.         <p>第一段..</p>
  5.         <b>第二段..</b>
  6.         <div id="mass">
  7.             <span class="myspan">AAAAAAAAA</span>
  8.             <div id="content">.</div>
  9.         </div>
  10.  
  11.     </body>
  12.  
  13.        /*    五丶文档处理        */
  14. //        $('#textDiv').append('<b>--append--</b>');
  15. //        <div id="textDiv">...<b>--append--</b></div>
  16.  
  17. //        $('<b>--append--</b>').appendTo( $('#textDiv') );
  18. //        <div id="textDiv">...<b>--append--</b></div>
  19.  
  20. //        $('#textDiv').prepend('<b>--append--</b>');
  21. //        <div id="textDiv"><b>--append--</b>...</div>
  22.  
  23. //        $('<b>--append--</b>').prependTo( $('#textDiv') );
  24. //        <div id="textDiv"><b>--append--</b>...</div>
  25.  
  26. //        $('#textDiv').after( '<b>--append--</b>' );
  27. //        <div id="textDiv">...</div> <b>--append--</b>
  28.  
  29. //        $('#textDiv').before( '<b>--append--</b>' );
  30. //        <b>--append--</b> <div id="textDiv">...</div>
  31.  
  32. //        $('#textDiv').wrap('<span></span>')
  33. //        <span><div id="textDiv">...</div></span>
  34.  
  35. //        $('#textDiv').unwrap('<span></span>')
  36. //        <div id="textDiv">...</div>
  37.  
  38. //        $('#textDiv').wrapInner('<span></span>')
  39. //        <div id="textDiv"><span>...</span></div>
  40.  
  41. //        $('p').replaceWith('<b>替换后第一段</b>')
  42. //        <p>第一段..</p>---><b>替换后第一段</b>
  43.  
  44. //        $('<b>替换的b1</b>').replaceAll('p')
  45. //        <p>第一段..</p>---><b>替换的b1</b>
  46.  
  47. //        $('#mass').empty()
  48. //        <div id="mass"></div>    清空内部所有内容
  49.  
  50. //        $('span').remove('.myspan');
  51. //        移除class为.myspan的span, 该span绑定的事件被移除
  52.  
  53. //        $('span').detach('.myspan');
  54. //        移除class为.myspan的span, 该span绑定的事件被保留
  55.  
  56.         /*    1.基本选择器        */
  57.         //console.log(    $("#id_1").css({"width":"500px","height":'100px','background':"red"})                    );
  58.  
  59. //        console.log(    $(".class_1")                );
  60. //        console.log(    $("span")                    );
  61. //        console.log(    $("#id_1,.class_1,span")    );    //    div#id_1, div.class_1, span, span, span
  62. //
  63. //        console.log(    $("div").length                );    //    12
  64. //
  65. //        /*    2.层次选择器        */
  66. //        console.log(    $("#id_2 div")                );    //    4    #id_2(子孙)元素里所有div
  67. //        console.log(    $("#id_2 > span")            );    //    1    #id_2(孩子)元素里所有span
  68. //        console.log(    $(".class_1 ~ span")        );    //    1    .class_1之后所有span(兄弟)元素
  69. //        console.log(    $("#id_2_1 + div")            );    //    1    div#id_2_2紧邻的(兄弟)div
  70. //
  71. //        /*    4.内容过滤选择器        */
  72. //        console.log(    $("div:contains('哈哈哈')")    );    //    2    获取文本含有"哈哈哈"的div元素,(子孙)元素包含也算    div#id_2 div#id_2_3
  73. //        console.log(    $("div:empty")                );    //    5    获取内容为空的div元素,(注意折行算有内容)
  74. //        console.log(    $("div:has(span)")            );    //    3    div#id_2, div#id_2_1, div#id_2_1_1    获取包含span的div元素,祖先元素也算
  75. //        console.log(    $("div:parent")                );    //    8    获取有子元素的div,文本内容也算
  76. //
  77. //        /*    5.可见性过滤选择器        */
  78. //        console.log(    $("div:hidden")                );    //    1    #id_3    获取display: none的元素
  79. //        console.log(    $("div:visible")            );    //    11    获取所有可视的div元素
  80. //
  81. //        /*    6.属性过滤选择器        */
  82. //        console.log(    $("div[id]")　　);    //    11    获取拥有id属性的div元素
  83. //        console.log(    $("div[id=id_3]")　　);    //    1    获取id属性等于id_3的div元素
  84. //        console.log(    $("div[id!=id_3]")　　);    //    11    获取id属性不等于id_3的div元素
  85. //        console.log(    $("div[id^=id]")　　);    //    10    获取id属性以id开头的div元素
  86. //        console.log(    $("div[id$=1]")　　);    //    3    div#id_1, div#id_2_1, div#id_2_1_1    获取id属性以1结尾的div元素
  87. //        console.log(    $("div[id*=2]")　　);    //    8    获取id属性含有2的div元素
  88. //        console.log(    $("div[id|=id]")　　);    //    1    div#id-2    获取id属性是id或者以id-开头的div元素
  89. //        console.log(    $('div[id~="2"]')　　);    //    1    div#id 2    获取id属性空格分隔的字符中有2的div元素
  90. //
  91. //        /*    7.子元素过滤选择器    */
  92. //        console.log(    $("#id_2 :first-child")    );    //    3    获取id=id_2的div的子元素
  93. //        console.log(    $("#id_2 :last-child")    );    //    3    获取id=id_2的div的子元素
  94. //        console.log(    $("#id_2 :nth-child(1)")    );    //    3    获取id=id_2的div的子元素

JQuery-文档处理&选择器的更多相关文章

  1. jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器

    jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...

  2. HTML jQuery 文档操作 - html() 方法

    jQuery 文档操作 - html() 方法 jQuery 文档操作参考手册 实例 设置所有 p 元素的内容: $(".btn1").click(function(){ $(&q ...

  3. Android 手机卫士--参照文档编写选择器

    本文来实现<Android 手机卫士--导航界面1的布局编写>中的图片选择器部分的代码. 本文地址:http://www.cnblogs.com/wuyudong/p/5944356.ht ...

  4. jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法

    原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp   实例 使用 noConflict() 方法为 jQuery 变量规定新 ...

  5. jQuery文档加载完毕的几种写法

    js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...

  6. jQuery 文档操作方法

    jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...

  7. jQuery文档操作

    jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...

  8. jQuery文档操作方法对比和src写法

    jQuery文档操作方法对比 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  9. jQuery文档就绪事件

    [jQuery文档就绪事件] 为了防止文档在完全加载(就绪)之前运行 jQuery 代码.如果在文档没有完全加载之前就运行函数,操作可能失败. $(document).ready(function() ...

  10. jquery文档加载几种写法，图片加载写法

    jquery文档加载写法: $(function(){ }) ; //个人最常使用方式 $(document).ready(function(){ }); //调用文档对象下的ready方法传入一个函 ...

随机推荐

  1. linux tomcat配置https

    自己生成一个ssl证书,因为是自己生成的所以该证书,不被浏览器信任(具体表现https前面有个X) [root@centos apache-tomcat-]# keytool -genkey -ali ...

  2. tomcat与HTML命令提示符

    在tomcatwebapps目录下建立一个新文件夹 命名为my 把第一个学习的HTML文件放到my文件夹内 通过tomcat服务器远程访问该网页 把localhost换成自己的IP地址 先查看自己的I ...

  3. node.js第一次

    随着时代的变迁,日月星辰轮回,不断的有新的事物被创造于世,作为在这个世界活着的前端工程崽的我,最近又接触了一门新手艺“node.js”.自从它2009年诞生至今,被很多前端推崇,我起步已经晚了,还好它 ...

  4. Money类型转化为String去除小数点后0解决方法

    Money类型转化为String去除小数点后0从数据库提取Money类型后,字符串如:1212.0000 如何使其成为1212             注:去掉了小数点 如果是:1212.0100 使 ...

  5. Nodepad plus plus--打开时显示“This software need elevation.""Exception 1002"

    解决方法:Settings -> Preferences -> Misc -> Enable Notepad++ Auto-Updater 去掉该选项. 链接:http://sour ...

  6. django 数据库交互

    修改配置文件 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'USER':'root', 'PASSWORD':'1 ...

  7. [R]R的工作流

    最近处理数据时,一直在纠结程序的结构该如何构建,以减少很多简单又很耗时的工作. 刚好把Rob J Hyndman的blog给浏览了一遍,发现一篇2009年的文章,很有启发. 原文: Workflow ...

  8. UVa 10870 & 矩阵快速幂

    题意: 求一个递推式(不好怎么概括..)的函数的值. 即 f(n)=a1f(n-1)+a2f(n-2)+...+adf(n-d); SOL: 根据矩阵乘法的定义我们可以很容易地构造出矩阵,每次乘法即可 ...

  9. Android 蓝牙4.0 BLE

    Android ble (Bluetooth Low Energy) 蓝牙4.0,也就是说API level >= 18,且支持蓝牙4.0的手机才可以使用. BLE是蓝牙4.0的核心Profil ...

  10. OpenResy+Lua 利用百度识图 将图片地址解析成文字

    LUA代码:(注:LUA里有一个调用百度识图的接口IP:123.125.115.189(stu.baidu.com),不知为什么我的虚拟机无法解析stu.baidu.com,所以我只能PING出IP来 ...