jquery16 DOM操作 : 添加删除获取包装 DOM筛选

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="jquery-2.0.3.js"></script>

<script>

一些变量

$.fn.extend({

    find  √

    has   √

    not    √

    filter   √

    is       √

    closest  √

    index    √

    add      √

    addBack  √

});

function sibling(){}

jQuery.each({

    parent       √

    parents      √

    parentsUntil   √

    next          √

    prev          √

    nextAll      √

    prevAll       √

    nextUntil     √

    prevUntil     √

    siblings      √

    children       √

    contents       √

});

jQuery.extend({

    filter

    dir

    sibling

});

function winnow(){}

一些变量

jQuery.fn.extend({

    text       √

    append     √

    prepend    √

    before      √

    after       √

    remove     √

    empty       √

    clone       √

    html        √

    replaceWith  √

    detach      √

    domManip    √

});

jQuery.each({

    appendTo: "append",      √

    prependTo: "prepend",    √

    insertBefore: "before",   √

    insertAfter: "after",    √

    replaceAll: "replaceWith"  √

});

jQuery.extend({

    clone

    buildFragment

    cleanData

    _evalUrl

});

function manipulationTarget(){}

function disableScript(){}

function restoreScript(){}

function setGlobalEval(){}

function cloneCopyEvent(){}

function getAll(){}

function fixInput(){}

jQuery.fn.extend({

    wrapAll        √

    wrapInner      √

    wrap            √

    unwrap          √

});

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="jquery-2.0.3.js"></script>

<script>

$(function(){

    //filter()  not()

    $('div').filter('.box').css('border','1px red solid');//CLASS=BOX的div

    $('div').not('.box').css('border','1px red solid');//相反

    $('div').has('.box').css('border','1px red solid');//div子元素项有class=box的元素

    $('div').has('span').css('border','1px red solid');//div子元素项有span元素的

    isSimple = /^.[^:#\[\.,]*$/    

    匹配成功 : .box div #div1  :odd     ul li

    匹配不成功 :  div:odd    ul #li   ul[title="hello"]   div.box    ul,ol

-------------------------------------------------------------------

    $('div').filter(function(i,elem){

        return elem.className == 'box';

    }).css('border','1px red solid');

    var oBox = document.getElementsByClassName('box')[0];

    $('div').filter(oBox).css('border','1px red solid');

    $('div').has('span').css('border','1px red solid');

});

</script>

</head>

<body>

<div class="box">div1<span class="box">span</span></div>

<div>div2</div>

</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="jquery-2.0.3.js"></script>

<script>

$(function(){

    $('ul').find( $('li') ).css('background','red');//ul下面的li

    $('ul').find('li').css('background','red');//ul下面的li

    $('div').is('.box')//多个div有一个class=box就返回true,都没有就返回false

    console.log( $('div:last').is('.box') );

    console.log( $('div:first').is('div:last') );

-------------------------------------------------------------------

    console.log( $('#div1').index() );//1,这个元素在所有兄弟节点的排名

    console.log( $('#span1').index() );//0,这个元素在所有兄弟节点的排名

    console.log( $('#span1').index('span') );//span1在所有span中的排名

    console.log( $('span').index( $('#span1') ) );//span1在所有span中的排名，同上。

    $('#div2').closest('.box').css('border','1px red solid');//closest找父节点，爷爷节点，祖先节点，都有时找最近的。

    $('#div2').closest('.box').css('border','1px red solid');

    //限制在body之内，不再往上去找

    $('#div2').closest('.box', $('body').get(0) ).css('border','1px red solid');

});

</script>

</head>

<body  class="box">

<ul>

    <li>

        <ul>

            <li></li>

            <li></li>

            <li></li>

        </ul>

    </li>

    <li></li>

    <li></li>

</ul>

<ol>

    <li></li>

    <li></li>

    <li></li>

</ol>

<div class="box">div1</div>

<div>div2</div>

<div>div<span>span</span></div>

<div id="div1">div<span id="span1">span</span></div>

<div>div<span>span</span></div>

<div id="div1" class="box">aaaaa

    <div id="div2">bbbbb</div>

</div>

</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="jquery-2.0.3.js"></script>

<script>

$(function(){

    $('div ,span').add('span').css('border','1px red solid');

    $('div').add('span').css('border','1px red solid');//一样的

    //addBack()

    //end()

    $('div').find('span').css('color','red').addBack('.box').css('border','1px red solid');//addBack回到栈的下一层，并且当前层和下一层进行操作。

    $('span').parent().css('border','1px red solid');//span的氟元素

    ('span').parent('div').css('border','1px red solid');//span的氟元素必须是div

    $('span').parents().css('border','1px red solid');//span所有各层级父父父节点

    $('span').parents('body').css('border','1px red solid');//父节点必须是body

    $('span').parentsUntil('body').css('border','1px red solid');//span开始找，截至到body，再上层就不找了。

    $('span').parentsUntil('body','div').css('border','1px red solid');//span父节点必须是div,并且最高找到body，body之上就不要找了

    $('span').parent().css('border','1px red solid');

    $('span').next().css('border','1px red solid');

});

</script>

</head>

<body>

<!--<div>div<span>span</span></div>

<div class="box">div<span>span</span></div>

<div>div<span>span</span></div>

<div>div<span>span</span></div>-->

<!--<div>div<p>p<span>span</span></p></div>

<p>p<span>span</span></p>

-->

<div>

<span>span</span>

ssssss

<p>p</p>

</div>

</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>无标题文档</title>

<script src="jquery-2.0.3.js"></script>

<script>

$(function(){

    $('p').parentsUntil('body').css('border','1px red solid');

    $('span').siblings().css('background','red');

    $('body').children().css('background','red');

    console.log( $('body').children() );

    console.log( $('body').contents() );

    console.log( $('iframe').contents().body.style.background = 'red' );

});

</script>

</head>

<body>

<!--<div>div

    <span>span

        <p>p</p>

    </span>

</div>-->

<div>div</div>

<span>span</span>

<p>p</p>

<h1>h1</h1>

<iframe src="a.html"></iframe>

</body>

</html>

jquery16 DOM操作 : 添加删除获取包装 DOM筛选的更多相关文章

jQuery08源码 (5140 , 6057) DOM操作 : 添加删除获取包装 DOM筛选
jQuery.fn.extend({ //$('ul').find('li').css('background','red'); //$('ul').find( $('li') ).css('back ...
jquery17 DOM操作 : 添加删除获取包装 DOM筛选
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;
JavaScript Dom基础学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...
js 表格操作----添加删除
js 表格操作----添加删除书名:<input type="text" id="name"> 价格:<input type="t ...
JavaScript学习 - 基础(八) - DOM 节点添加/删除/修改/属性值操作
html代码:  <div id="a1"> <button id="a2" onclick=&q ...
jQuery 源码分析(二十一) DOM操作模块删除元素详解
本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...
JavaScript之Dom操作【删除当前节点】
//最新更新:2017-11-25 //现在可以通过更强大而快捷的方式为所有的HTMLElement元素的Dom操作扩展新的方法[注意事项:处理HTMLElemnt元素时,此法对IE-8无效] //原 ...
前端性能优化--为什么DOM操作慢？浅谈DOM的操作以及性能优化问题-重绘重排为什么要减少DOM操作为什么要减少操作DOM
前端性能优化--为什么DOM操作慢? 作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...
OCR/Vote disk 维护操作: (添加/删除/替换/移动) (文档 ID 1674859.1)
适用于: Oracle Database - Enterprise Edition - 版本 10.2.0.1 到 11.2.0.1.0 [发行版 10.2 到 11.2]本文档所含信息适用于所有平台 ...

随机推荐

[GDKOI2010] 圈地计划(网络流)
题2链接:https://www.luogu.org/problemnew/show/P1935 Description 最近房地产商GDOI(Group of Dumbbells Or Idiots ...
[Swift] 随机数 | Random numbers
★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★★➤微信公众号:山青咏芝(shanqingyongzhi)➤博客园地址:山青咏芝(https://www.cnblogs. ...
BZOJ 2251 Trie树
思路: i~n加到Trie树里经过的边权+1 DFS一遍搞定~ //By SiriusRen #include <cstdio> #include <cstring> #i ...
SparkCore基础（二）
* SparkCore基础(二) 继续探讨SparkCore,开门见山,不多废话. SparkApplication结构探讨包含关系: 之前我们运行过很多App了,其实每一个App都包含若干个Job ...
重温前端基础之-css浮动之怪异现象
其实,两种情况中box2的内容都是围绕着浮动元素box1来的. 因为:浮动元素会覆盖块元素,但块元素里的内容(内联盒)不会被覆盖,而是围绕着浮动盒. 将box1的背景色去掉,真相就大白了: 此时发现, ...
写给自己的Java程序员学习路线图_转载
如下是我做开发这三年经常使用一些技术和工具,当然这些技术也都是需要加强的(有些是我一直使用的,不过不深入,有些内部的原理等等不是很清楚) 前端部分: 1)HTML:网页的核心语言,构成网页的基础 2) ...
SQL流程控制语句
1 GoTo语句 IF 12>9GOTO print1ELSE GOTO print2 print1:PRINT '执行了流程1'--GOTO theEndprint2:PRINT '执行了流程 ...
NodeJS学习笔记进阶 (10)Nodejs 进阶：log4js入门实例(ok))
个人总结:读完这篇文章讲解了log4js的使用,具体更多可以参考npmjs上看,读完这篇需要15分钟. 摘选自网络对于线上项目用来说,日志是非常重要的一环.log4js是使用得比较多的一个日志组件, ...
OpenStack依然大行其道，可是否能等来属于自己的时代
版权声明:不论什么转载需全文转载并保留来源(微信公众号techculture)和该声明,并同一时候转载文后的二维码.否则视作侵权. OpenStack在云计算领域依然火热,甚至能够说势不可挡.这可能是 ...
Codeforces Round #105 (Div. 2) 148C Terse princess(脑洞)
C. Terse princess time limit per test 1 second memory limit per test 256 megabytes input standard in ...

jquery16 DOM操作 : 添加 删除 获取 包装 DOM筛选

jquery16 DOM操作 : 添加 删除 获取 包装 DOM筛选的更多相关文章

随机推荐

热门专题

jquery16 DOM操作 : 添加删除获取包装 DOM筛选

jquery16 DOM操作 : 添加删除获取包装 DOM筛选的更多相关文章