<body>

        <div id="textDiv">...</div>

        <p>第一段..</p>

        <b>第二段..</b>

        <div id="mass">

            <span class="myspan">AAAAAAAAA</span>

            <div id="content">.</div>

        </div>

    </body>

       /*    五丶文档处理        */

//        $('#textDiv').append('<b>--append--</b>');

//        <div id="textDiv">...<b>--append--</b></div>

//        $('<b>--append--</b>').appendTo( $('#textDiv') );

//        <div id="textDiv">...<b>--append--</b></div>

//        $('#textDiv').prepend('<b>--append--</b>');

//        <div id="textDiv"><b>--append--</b>...</div>

//        $('<b>--append--</b>').prependTo( $('#textDiv') );

//        <div id="textDiv"><b>--append--</b>...</div>

//        $('#textDiv').after( '<b>--append--</b>' );

//        <div id="textDiv">...</div> <b>--append--</b>

//        $('#textDiv').before( '<b>--append--</b>' );

//        <b>--append--</b> <div id="textDiv">...</div>

//        $('#textDiv').wrap('<span></span>')

//        <span><div id="textDiv">...</div></span>

//        $('#textDiv').unwrap('<span></span>')

//        <div id="textDiv">...</div>

//        $('#textDiv').wrapInner('<span></span>')

//        <div id="textDiv"><span>...</span></div>

//        $('p').replaceWith('<b>替换后第一段</b>')

//        <p>第一段..</p>---><b>替换后第一段</b>

//        $('<b>替换的b1</b>').replaceAll('p')

//        <p>第一段..</p>---><b>替换的b1</b>

//        $('#mass').empty()

//        <div id="mass"></div>    清空内部所有内容

//        $('span').remove('.myspan');

//        移除class为.myspan的span, 该span绑定的事件被移除

//        $('span').detach('.myspan');

//        移除class为.myspan的span, 该span绑定的事件被保留

        /*    1.基本选择器        */

        //console.log(    $("#id_1").css({"width":"500px","height":'100px','background':"red"})                    );

//        console.log(    $(".class_1")                );

//        console.log(    $("span")                    );

//        console.log(    $("#id_1,.class_1,span")    );    //    div#id_1, div.class_1, span, span, span

//

//        console.log(    $("div").length                );    //    12

//

//        /*    2.层次选择器        */

//        console.log(    $("#id_2 div")                );    //    4    #id_2(子孙)元素里所有div

//        console.log(    $("#id_2 > span")            );    //    1    #id_2(孩子)元素里所有span

//        console.log(    $(".class_1 ~ span")        );    //    1    .class_1之后所有span(兄弟)元素

//        console.log(    $("#id_2_1 + div")            );    //    1    div#id_2_2紧邻的(兄弟)div

//

//        /*    4.内容过滤选择器        */

//        console.log(    $("div:contains('哈哈哈')")    );    //    2    获取文本含有"哈哈哈"的div元素,(子孙)元素包含也算    div#id_2 div#id_2_3

//        console.log(    $("div:empty")                );    //    5    获取内容为空的div元素,(注意折行算有内容)

//        console.log(    $("div:has(span)")            );    //    3    div#id_2, div#id_2_1, div#id_2_1_1    获取包含span的div元素,祖先元素也算

//        console.log(    $("div:parent")                );    //    8    获取有子元素的div,文本内容也算

//

//        /*    5.可见性过滤选择器        */

//        console.log(    $("div:hidden")                );    //    1    #id_3    获取display: none的元素

//        console.log(    $("div:visible")            );    //    11    获取所有可视的div元素

//

//        /*    6.属性过滤选择器        */

//        console.log(    $("div[id]")　　);    //    11    获取拥有id属性的div元素

//        console.log(    $("div[id=id_3]")　　);    //    1    获取id属性等于id_3的div元素

//        console.log(    $("div[id!=id_3]")　　);    //    11    获取id属性不等于id_3的div元素

//        console.log(    $("div[id^=id]")　　);    //    10    获取id属性以id开头的div元素

//        console.log(    $("div[id$=1]")　　);    //    3    div#id_1, div#id_2_1, div#id_2_1_1    获取id属性以1结尾的div元素

//        console.log(    $("div[id*=2]")　　);    //    8    获取id属性含有2的div元素

//        console.log(    $("div[id|=id]")　　);    //    1    div#id-2    获取id属性是id或者以id-开头的div元素

//        console.log(    $('div[id~="2"]')　　);    //    1    div#id 2    获取id属性空格分隔的字符中有2的div元素

//

//        /*    7.子元素过滤选择器    */

//        console.log(    $("#id_2 :first-child")    );    //    3    获取id=id_2的div的子元素

//        console.log(    $("#id_2 :last-child")    );    //    3    获取id=id_2的div的子元素

//        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. SQL批量更新数据库中所有用户数据表中字段类型为tinyint为int

    --SQL批量更新数据库中所有用户数据表中字段类型为tinyint为int --关键说明:--1.从系统表syscolumns中的查询所有xtype='48'的记录得到类型为[tinyint]的字段- ...

  2. Ext中Grid重新load设置URL

    一.前言    Extjs中grid网格有时候需要重新加载,加载的时候对应不同的URL,什么情况出现:有需要我们在添加附件的时候,添加完成了附件,需要把另一个show添加的数据重新加载到grid中,而 ...

  3. 移动端:active,:hover无法很好触发动画的解决方案

    移动端:active,:hover无法很好触发动画的解决方案 1:问题环境: 用css3定义了一个动画,使用:hover伪类调用动画时在移动端不能很好的进行动画. 2:解决方案: 定义一个open类, ...

  4. android NDK入门 windows下安装cygwin

    一.Android NDK环境简介 Android NDK 是运行于Android 平台上的Native Development Kit 的缩写. Android 应用开发者可以通过NDK 调用C 或 ...

  5. CentOS6.4 配置iptables

    如果没有安装iptables可以直接用yum安装 yum install -t iptables 检查iptables服务的状态, service iptables status 如果出现“iptab ...

  6. 【POJ】3071 Football

    http://poj.org/problem?id=3071 题意:2^n支队伍进行淘汰赛,每一轮都是第一个与第二个,第三个与第四个比赛,给出了这些人之间的胜率,赢了的进入下一轮,相对位置不变.一共n ...

  7. 【bzoj2333】 [SCOI2011]棘手的操作 可并堆+lazy标记

    2016-05-31  21:45:41 题目:http://www.lydsy.com/JudgeOnline/problem.php?id=2333 (学习了黄学长的代码 有如下操作: U x y ...

  8. 淘宝UED上关于chrome的transition闪烁问题的解决方案

    前段时间,有同事和会员反馈使用Chrome访问淘宝首页会出现画面闪动的现象,但是我在Mac和Win下面的Chrome都无法重现这个问题,后来重装了一遍Win7下的Chrome Beta版本,终于重现了 ...

  9. OLTP与OLAP的介绍

    OLTP与OLAP的介绍 数据处理大致可以分成两大类:联机事务处理OLTP(on-line transaction processing).联机分析处理OLAP(On-Line Analytical ...

  10. javascrit2.0完全参考手册(第二版) 第1章第2节：javascript的历史和使用

    javascript曾经带给人许多误解,例如如果你不了解它的历史,那么你可能困惑它和java有什么关系,其实它们一点关系都没有.网景公司1995年在Navigator 2.0 中引入这门语言时它叫Li ...