JQuery-文档处理&选择器
<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-文档处理&选择器的更多相关文章
- jQuery 效果函数，jquery文档操作，jQuery属性操作方法，jQuerycss操作函数，jQuery参考手册-事件，jQuery选择器
jQuery 效果函数 方法 描述 animate() 对被选元素应用“自定义”的动画 clearQueue() 对被选元素移除所有排队的函数(仍未运行的) delay() 对被选元素的所有排队函数( ...
- HTML jQuery 文档操作 - html() 方法
jQuery 文档操作 - html() 方法 jQuery 文档操作参考手册 实例 设置所有 p 元素的内容: $(".btn1").click(function(){ $(&q ...
- Android 手机卫士--参照文档编写选择器
本文来实现<Android 手机卫士--导航界面1的布局编写>中的图片选择器部分的代码. 本文地址:http://www.cnblogs.com/wuyudong/p/5944356.ht ...
- jQuery 核心 - noConflict() 方法,jQuery 文档操作 - detach() 方法
原文地址:http://www.w3school.com.cn/jquery/manipulation_detach.asp 实例 使用 noConflict() 方法为 jQuery 变量规定新 ...
- jQuery文档加载完毕的几种写法
js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...
- jQuery 文档操作方法
jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). 方法 描述 addClass() 向匹配的元素添加指定的类名. after() 在匹配的元素之 ...
- jQuery文档操作
jQuery文档操作 1.jq文档结构 var $sup = $('.sup'); $sup.children(); // sup所有的子级们 $sup.parent(); // sup的父级(一个, ...
- jQuery文档操作方法对比和src写法
jQuery文档操作方法对比 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...
- jQuery文档就绪事件
[jQuery文档就绪事件] 为了防止文档在完全加载(就绪)之前运行 jQuery 代码.如果在文档没有完全加载之前就运行函数,操作可能失败. $(document).ready(function() ...
- jquery文档加载几种写法，图片加载写法
jquery文档加载写法: $(function(){ }) ; //个人最常使用方式 $(document).ready(function(){ }); //调用文档对象下的ready方法传入一个函 ...
随机推荐
- spring mvc 通过配置xml访问控制器的三种方式
(一)通过 name 来一一映射(默认) (二)通过简单url 来指定映射,key 表示访问url value 是bean的ID (三)通过控制类的类名控制器,访问时类名首字母需要小写 <!-- ...
- spark 部署问题
spark的web UI 端口设置:spark-env.sh 中设置SPARK_MASTER_WEBUI_PORT 为自己想设置的端口号. 其他worker 的web UI 端口默认:8081 mas ...
- HDU3157 Crazy Circuits（有源汇流量有上下界网络的最小流）
题目大概给一个电路,电路上有n+2个结点,其中有两个分别是电源和负载,结点们由m个单向的部件相连,每个部件都有最少需要的电流,求使整个电路运转需要的最少电流. 容量网络的构建很容易,建好后就是一个有源 ...
- HDU 2822 (BFS+优先队列)
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=2822 题目大意:X消耗0,.消耗1, 求起点到终点最短消耗 解题思路: 每层BFS的结点,优先级不同 ...
- JDBC连接各种数据库的字符串，就是不好记
JDBC连接各种数据库的字符串大同小异,在此总结一下,备忘. oracle driverClass:oracle.jdbc.driver.OracleDriver url:jdbc:ora ...
- web移动端性能调优及16ms优化
本文只是一个索引,收集了网络上大部分关于调试及优化方面的文章,从中挑选了一些比较好的文章分享给大家. 移动端性能不及桌面浏览器性能的10分之1,特别是在android设备良莠不齐的情况下,性能显得尤为 ...
- ACM +-字符串
+-字符串 时间限制:1000 ms | 内存限制:65535 KB 难度:1 描述 Shiva得到了两个只有加号和减号的字符串,字串长度相同.Shiva一次可以把一个加号和它相邻的减号交换. ...
- SQL中union运算操作的理解
在SQL中,对于并运算,可以使用union关键字. 例如: SELECT column_name(s) FROM table_name1 UNION SELECT column_name(s) FRO ...
- LINQ to Entities 事务简单例子
默认LINQ to Entities会使用隐式事务,即:对于每一个savechanges都分开在单独的事务之中. 也可以显式地指定事务: using (var db = new TestEntitie ...
- [转]AS3的垃圾回收
GC和内存泄露无关 垃圾回收,这次是一个被无数人讨论过的传统话题. Action Script使用的是和Java相似的内存管理机制,并不会即时回收废弃对象的内存,而是在特定时间统一执行一次GC(Gab ...