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 相关文章推荐
IE中createElement需要注意的一个问题
Jul 13 Javascript
table对象中的insertRow与deleteRow使用示例
Jan 26 Javascript
JavaScript中创建对象和继承示例解读
Feb 12 Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 Javascript
jQuery学习笔记之2个小技巧
Jan 19 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
JS原型链怎么理解
Jun 27 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
vue两个组件间值的传递或修改方式
Jul 04 Javascript
JS学习笔记之贪吃蛇小游戏demo实例详解
May 29 Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 Javascript
24个ES6方法解决JS实际开发问题(小结)
May 31 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管理内存函数 memory_get_usage()使用介绍
2012/09/23 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
PHP中filter函数校验数据的方法详解
2015/07/31 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
jQuery中调用WebService方法小结
2011/03/28 Javascript
JS实现的鼠标跟随代码(卡通手型点击效果)
2015/10/26 Javascript
jQuery实现form表单基于ajax无刷新提交方法详解
2015/12/08 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
2015/12/10 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
node.js版本管理工具n无效的原理和解决方法
2016/11/24 Javascript
详解vue与后端数据交互(ajax):vue-resource
2017/03/16 Javascript
vue-cli项目中怎么使用mock数据
2017/09/27 Javascript
vue实现学生录入系统之添加删除功能
2018/07/11 Javascript
Vue.use()在new Vue() 之前使用的原因浅析
2019/08/26 Javascript
[53:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Magma BO3 第一场 1月31日
2021/03/11 DOTA
Python标准库之sqlite3使用实例
2014/11/25 Python
Python中MySQL数据迁移到MongoDB脚本的方法
2016/04/28 Python
Python实现针对给定单链表删除指定节点的方法
2018/04/12 Python
python list元素为tuple时的排序方法
2018/04/18 Python
Python爬取个人微信朋友信息操作示例
2018/08/03 Python
利用Python半自动化生成Nessus报告的方法
2019/03/19 Python
Python3.6中Twisted模块安装的问题与解决
2019/04/15 Python
python3利用Socket实现通信的方法示例
2019/05/06 Python
python变量的作用域是什么
2020/05/26 Python
Python变量格式化输出实现原理解析
2020/08/06 Python
手把手教你用纯css3实现轮播图效果实例
2017/05/04 HTML / CSS
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
Html5新标签datalist实现输入框与后台数据库数据的动态匹配
2017/05/18 HTML / CSS
机械电子工程毕业生自荐信
2013/11/23 职场文书
公司办公室岗位职责
2014/03/19 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
库房管理员岗位职责
2015/02/12 职场文书
小学教师党员承诺书
2015/04/27 职场文书
幽默导游词开场白
2015/05/29 职场文书
用Python进行栅格数据的分区统计和批量提取
2021/05/27 Python