<!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筛选的更多相关文章

  1. jQuery08源码 (5140 , 6057) DOM操作 : 添加 删除 获取 包装 DOM筛选

    jQuery.fn.extend({ //$('ul').find('li').css('background','red'); //$('ul').find( $('li') ).css('back ...

  2. jquery17 DOM操作 : 添加 删除 获取 包装 DOM筛选

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  3. JavaScript Dom基础-9-Dom查找方法; 设置DOM元素的样式; innerHTML属性的应用; className属性的应用; DOM元素上添加删除获取属性;

    JavaScript Dom基础 学习目标 1.掌握基本的Dom查找方法 domcument.getElementById() Domcument.getElementBy TagName() 2.掌 ...

  4. js 表格操作----添加删除

    js 表格操作----添加删除 书名:<input type="text" id="name"> 价格:<input type="t ...

  5. JavaScript学习 - 基础(八) - DOM 节点 添加/删除/修改/属性值操作

    html代码: <!--添加/删除/修改 --> <div id="a1"> <button id="a2" onclick=&q ...

  6. jQuery 源码分析(二十一) DOM操作模块 删除元素 详解

    本节说一下DOM操作模块里的删除元素模块,该模块用于删除DOM里的某个节点,也可以理解为将该节点从DOM树中卸载掉,如果该节点有绑定事件,我们可以选择保留或删除这些事件,删除元素的接口有如下三个: e ...

  7. JavaScript之Dom操作【删除当前节点】

    //最新更新:2017-11-25 //现在可以通过更强大而快捷的方式为所有的HTMLElement元素的Dom操作扩展新的方法[注意事项:处理HTMLElemnt元素时,此法对IE-8无效] //原 ...

  8. 前端性能优化--为什么DOM操作慢? 浅谈DOM的操作以及性能优化问题-重绘重排 为什么要减少DOM操作 为什么要减少操作DOM

    前端性能优化--为什么DOM操作慢?   作为一个前端,不能不考虑性能问题.对于大多数前端来说,性能优化的方法可能包括以下这些: 减少HTTP请求(合并css.js,雪碧图/base64图片) 压缩( ...

  9. OCR/Vote disk 维护操作: (添加/删除/替换/移动) (文档 ID 1674859.1)

    适用于: Oracle Database - Enterprise Edition - 版本 10.2.0.1 到 11.2.0.1.0 [发行版 10.2 到 11.2]本文档所含信息适用于所有平台 ...

随机推荐

  1. centos7 配置redis

    文件上传 yum -y install lrzsz 安装redis部署前操作 同时下载redis-.tar.gz安装包 yum -y install gcc-c++ yum -y install tc ...

  2. laravel中的数据迁移和数据填充

    laravel中的数据迁移和数据填充 标签(空格分隔): php 生成迁移文件两种方式: 1 新建一个表的迁移文件 php artisan make:migration create_students ...

  3. AngularJs轻松入门(一)创建第一个应用

    AngularJs是Google工程师研发的一款JS框架,官方文档中对它的描述是,它是完全使用JavaScript编写的客户端技术,同其他历史悠久的Web技术(HTML,CSS等)配合使用,使得Web ...

  4. CUDA学习之从CPU架构说起

    最近要学习GPU编程,就去英伟达官网下载CUDA, 遇到的第一个问题就是架构的选择 所以我学习的CUDA的第一步是从学习认识CPU架构开始的,x86-64简称x64,是64位版的x86指令集,向前兼容 ...

  5. Service和Servlet的区别

    1. 整体概念 Servlet是Java对于Web开发而产生的一项技术,可以说Servlet技术是Java专有的,它是服务器端的技术,客户端通常是浏览器,Servlet提供了请求/响应模式,是JAVA ...

  6. EasyUI--Alert()

    1.$.messager.alert(title, msg, icon, fn) 2 <script type="text/javascript"> $(functio ...

  7. UI Framework-1: Aura Gesture Recognizer

    Gesture Recognizer Gesture Recognizer Overview This document describes the process by which Touch Ev ...

  8. maven+spring-data-jpa环境搭建

    转自http://www.cnblogs.com/007sx/p/5658194.html 首先看一下项目结构: 所用到的jar(pom.xml): <project xmlns="h ...

  9. Unity 设置窗体透明

    设置窗口透明.窗口置顶.鼠标穿透    方法一. 缺点:边缘不平滑,有毛边 参考博客: 1.https://alastaira.wordpress.com/2015/06/15/creating-wi ...

  10. 【转】C# HttpWebRequest提交数据方式

    [转]C# HttpWebRequest提交数据方式 HttpWebRequest和HttpWebResponse类是用于发送和接收HTTP数据的最好选择.它们支持一系列有用的属性.这两个类位 于Sy ...