标签：
<body>
<div id="textDiv">...</div>
<p>第一段..</p>
<b>第二段..</b>
<div
id="mass">
<span
class="myspan">AAAAAAAAA</span>
<div
id="content">12345678906785.</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的子元素
标签：
原文地址：http://www.cnblogs.com/nemoro1928/p/5418621.html
