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 相关文章推荐
jQuery checkbox全选/取消全选实现代码
Nov 14 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
Jul 31 Javascript
TextArea不支持maxlength的解决办法(jquery)
Sep 13 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
jQuery 快速结束当前正在执行的动画
Nov 20 Javascript
根据当前时间在jsp页面上显示上午或下午
Aug 18 Javascript
js H5 canvas投篮小游戏
Aug 18 Javascript
Vue 实用分页paging实例代码
Apr 12 Javascript
Element-UI中Upload上传文件前端缓存处理示例
Feb 21 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 Javascript
js实现简单的点名器随机色实例代码
Sep 20 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
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
初识php MVC
2014/09/10 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
Javascript下的keyCode键码值表
2007/04/10 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
JQuery 文本框使用小结
2010/05/22 Javascript
JS图片无缝滚动(简单利于使用)
2013/06/17 Javascript
javascript检查表单数据是否改变的方法
2013/07/30 Javascript
JQuery中对Select的option项的添加、删除、取值
2013/08/25 Javascript
javascript实现禁止复制网页内容
2014/12/16 Javascript
ztree获取当前选中节点子节点id集合的方法
2015/02/12 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
ionic隐藏tabs的方法
2016/08/29 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
JS+HTML5实现获取手机验证码倒计时按钮
2018/08/08 Javascript
微信小程序上线发布流程图文详解
2019/05/06 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
swiper实现导航滚动效果
2020/12/13 Javascript
python益智游戏计算汉诺塔问题示例
2014/03/05 Python
python迭代器实例简析
2014/09/25 Python
在Django的session中使用User对象的方法
2015/07/23 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
python使用装饰器作日志处理的方法
2019/07/11 Python
Python K最近邻从原理到实现的方法
2019/08/15 Python
Django中的cookie和session
2019/08/27 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
如何使用Python发送HTML格式的邮件
2020/02/11 Python
Django url 路由匹配过程详解
2021/01/22 Python
html5 Canvas画图教程(10)—把面拆成线条模拟出圆角矩形
2013/01/09 HTML / CSS
英国和世界各地预订便宜的酒店:LateRooms.com
2019/05/05 全球购物
护理工作感言
2014/01/16 职场文书
求职信名称怎么写
2014/05/26 职场文书
群众路线教育实践活动调研报告
2014/11/03 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书