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 相关文章推荐
12行javascript代码绘制一个八卦图
Apr 02 Javascript
js实现Form栏显示全格式时间时钟效果代码
Aug 19 Javascript
JS实现弹出居中的模式窗口示例
Jun 20 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
js实现图片左右滚动效果
Feb 27 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
vue2.0 根据状态值进行样式的改变展示方法
Mar 13 Javascript
React Native日期时间选择组件的示例代码
Apr 27 Javascript
代码分析vue中如何配置less
Sep 28 Javascript
jQuery实现tab栏切换效果
Dec 22 jQuery
用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
如何批量替换相对地址为绝对地址(利用bat批处理实现)
2013/05/27 PHP
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
WordPress中用于获取搜索表单的PHP函数使用解析
2016/01/05 PHP
PHP+mysql+ajax轻量级聊天室实现方法详解
2016/10/17 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
用js控制组织结构图可以任意拖拽到指定位置
2014/01/17 Javascript
jQuery检查事件是否触发的方法
2015/06/26 Javascript
对于jQuery性能的一些优化建议
2015/08/13 Javascript
深入理解Vue 的条件渲染和列表渲染
2017/09/01 Javascript
Angularjs使用过滤器完成排序功能
2017/09/20 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
JS实现的base64加密解密操作示例
2018/04/18 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
vue使用axios上传文件(FormData)的方法
2019/04/14 Javascript
通过实例了解Javascript柯里化流程
2020/03/03 Javascript
JQuery复选框全选效果如何实现
2020/05/08 jQuery
如何使用Javascript中的this关键字
2020/05/28 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
[01:03:54]Liquid vs IG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python条件和循环的使用方法
2013/11/01 Python
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
Python 文件处理注意事项总结
2017/04/10 Python
python 重定向获取真实url的方法
2018/05/11 Python
Python如何使用字符打印照片
2020/01/03 Python
Python读取VOC中的xml目标框实例
2020/03/10 Python
python 通过邮件控制实现远程控制电脑操作
2020/03/16 Python
css3实现六边形边框的实例代码
2019/05/24 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
东南亚旅游平台:The Trip Guru
2018/01/01 全球购物
印尼最大的网上书店:Gramedia.com
2018/09/13 全球购物
2013届毕业生求职信范文
2013/11/20 职场文书
数控技术学生的自我评价
2014/02/15 职场文书
基层党组织整改方案
2014/10/25 职场文书
乡镇党的群众路线教育实践活动总结报告
2014/10/30 职场文书
Oracle 区块链表创建过程详解
2021/05/15 Oracle