<!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>
浙公网安备 33010602011771号