jQuery学习总结之元素的相对定位和选择器(持续更新)


Posted in Javascript onApril 26, 2011

①jQuery元素的相对定位。
jQuery中不仅可以使用选择器就行绝对定位,而且还可以进行相对定位,只要在$()中指定第二个参数,第二个参数就是相对的元素。第二个参数传递一个jQuery对象,则相对于这个对象为基准进行相对的选择。

<html> 
<head> 
<title>jQuery元素的相对定位和选择器</title> 
<script type="text/javascript" src="jQuery-1.4.2.js"></script> 
<script> 
$(function(){ 
//将第1~3行的背景色设置为红色(绝对定位)。 
//注意此处的gt(0)是从lt(4)出的新序列中的序号开始的,而不是原来的。(即在原来的基础上进一步过滤) 
$("#t tr:lt(4):gt(0)").css("background","red"); 
$("#t tr").click(function(){ 
//Dom中的this-->jQuery 中$(this) 
//$("td",$(this))是相对该行tr下的搜有td 
$("td",$(this)).css("background","green"); 
}); 
$("tr[title=ttt ]").css("background","yellow"); 
}); 
</script> 
</head> 
<body> 
<div id="div1"> 
<table id="t"> 
<tr><td>111</td><td>A</td></tr> 
<tr><td>222</td><td>B</td></tr> 
<tr><td>333</td><td>C</td></tr> 
<tr><td>444</td><td>D</td></tr> 
<tr title="ttt"><td>555</td><td>E</td></tr> 
<tr><td>666</td><td>F</td></tr> 
<tr><td>777</td><td>G</td></tr> 
<tr><td>888</td><td>H</td></tr> 
<tr><td>999</td><td>I</td></tr> 
</table> 
<br/> 
</div> 
</body> 
</html>

运行效果图:

jQuery学习总结之元素的相对定位和选择器(持续更新)

②$("div[id]")选取有id属性的div
③$("div[title=test]")选取title属性为"test"的div。注意:一个等号。
$("div[title!=test]")选取title属性不为"test"的div
④$("input:checked")注意:input和:checked之间没有空格
$("input")和$(":input")的区别
$("input")只能取到<input>标签,而<textarea>、<select>等就不能取得了。
$(":input")不仅能取到<input>标签,而<textarea>、<select>等提交服务器的表单都能取到。
类似的$(":text")获取所有单行文本框,我们也可以通过$("input[type=text]")来实现相同的功能。类似的还有$(":passowrd")、$(":radio")、$(":checkbox")、$(":submit")、$(":image")、$(":reset")、$(":button")、$(":file")、$(":hidden")
⑥使用attr()方法读取或者设置元素的属性,对于jQuery没有的封装的属性用attr进行操作。
$("#a:first").attr("href","http://baidu.com");
⑦删除属性removeAttr,删除属性在源代码中看不到,这时和清空属性的区别。
⑧动态创建Dom节点
使用$(html字符串)来动态的创建Dom节点,并返回一个jQuery对象,然后调用append等方法将创建的节点添加到Dom中。
var link=$("<a href='http://www.baidu.com'>百度</a>");
$("div:first").append(link);
append方法用来在元素的末尾追加元素(添加子元素,成为最后一个子元素)
prepend方法在元素的开始添加元素(添加子元素,成为第一个子元素)
after方法在元素之后添加元素(添加兄弟)
before方法在元素之前添加元素(添加兄弟)
⑨删除节点
remove()删除选择的节点,该方法是返回值是被删除的节点对象,还可以继续使用被删除的节点。
 var list=$("#ulLeft li.test").remove();
 $("#ulRight").append(list);

阻止事件冒泡e.stopPropagation();
阻止默认行为:e.preventDefault()和window.event.returnValue=false效果一样

Javascript 相关文章推荐
JavaScript修改css样式style
Apr 15 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
兼容主流浏览器的iframe自适应高度js脚本
Jan 10 Javascript
二叉树的非递归后序遍历算法实例详解
Feb 07 Javascript
JavaScript深度复制(deep clone)的实现方法
Feb 19 Javascript
Spring MVC中Ajax实现二级联动的简单实例
Jul 06 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
js实现简单扫雷
Nov 27 Javascript
详解Howler.js Web音频播放终极解决方案
Aug 23 Javascript
用jquery实现自定义风格的滑动条实现代码
Apr 26 #Javascript
超轻量级的基于jquery的三级展开列表
Apr 26 #Javascript
jqPlot 基于jquery的画图插件
Apr 26 #Javascript
让浏览器非阻塞加载javascript的几种方法小结
Apr 25 #Javascript
jQuery 版元素拖拽原型代码
Apr 25 #Javascript
30个最好的jQuery 灯箱插件分享
Apr 25 #Javascript
分享27个jQuery 表单插件集合推荐
Apr 25 #Javascript
You might like
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
整理的一些实用WordPress后台MySQL操作命令
2013/01/07 PHP
php分页函数示例代码分享
2014/02/24 PHP
浅谈php的优缺点
2015/07/14 PHP
thinkPHP的表达式查询用法详解
2016/09/14 PHP
详解phpstorm2020最新破解方法
2020/09/17 PHP
THINKPHP5分页数据对象处理过程解析
2020/10/28 PHP
css图片自适应大小
2007/11/28 Javascript
JSON语法五大要素图文介绍
2012/12/04 Javascript
JavaScript的递归之递归与循环示例介绍
2013/08/05 Javascript
jQuery ajax中使用confirm,确认是否删除的简单实例
2016/06/17 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
JavaScript自定义分页样式
2017/01/17 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
基于js中的原型(全面讲解)
2017/09/19 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
微信公众平台 客服接口发消息的实现代码(Java接口开发)
2019/04/17 Javascript
Vue绑定用户接口实现代码示例
2020/11/04 Javascript
[09:47]2018DOTA2亚洲邀请赛4.5SOLO赛 No[o]ne vs Sumail
2018/04/06 DOTA
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
Python3.5实现的罗马数字转换成整数功能示例
2019/02/25 Python
Python爬虫实现使用beautifulSoup4爬取名言网功能案例
2019/09/15 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
python 对一幅灰度图像进行直方图均衡化
2020/10/27 Python
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
向全球直邮输送天然健康产品:iHerb.com
2020/05/03 全球购物
.NET初级开发工程师面试题(包括Javascript)
2012/08/22 面试题
大专生自荐信
2013/10/04 职场文书
教育技术学专业职业规划书
2014/03/03 职场文书
父母对孩子说的话
2014/04/12 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
学生个人评语大全
2015/01/04 职场文书
生活小常识广播稿
2015/08/19 职场文书