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 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
javascript基本语法分析说明
Jun 15 Javascript
检测jQuery.js是否已加载的判断代码
May 20 Javascript
JavaScript浏览器对象之一Window对象详解
Jun 03 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
详解wow.js中各种特效对应的类名
Sep 13 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
May 13 Javascript
js get和post请求实现代码解析
Feb 06 Javascript
vue下canvas裁剪图片实例讲解
Apr 16 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
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
PHP程序员学习使用Swoole的理由
2018/06/24 PHP
Jquey拖拽控件Draggable使用方法(asp.net环境)
2010/09/28 Javascript
JavaScript自动设置IFrame高度的小例子
2013/06/08 Javascript
通过JavaScript使Div居中并随网页大小改变而改变
2013/06/24 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
jQuery截取指定长度字符串代码
2014/08/21 Javascript
javascript省市区三级联动下拉框菜单实例演示
2015/11/29 Javascript
JS实现的自定义水平滚动字体插件完整实例
2016/06/17 Javascript
详解Angular Reactive Form 表单验证
2017/07/06 Javascript
JScript实现表格的简单操作
2017/08/15 Javascript
JS滚轮控制图片缩放大小和拖动的实例代码
2018/11/20 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
解决layui laydate 时间控件一闪而过的问题
2019/09/28 Javascript
Python中文件操作简明介绍
2015/04/13 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
Python2随机数列生成器简单实例
2017/09/04 Python
python selenium UI自动化解决验证码的4种方法
2018/01/05 Python
python发送告警邮件脚本
2018/09/17 Python
解决Python3 被PHP程序调用执行返回乱码的问题
2019/02/16 Python
详解python pandas 分组统计的方法
2019/07/30 Python
Django 设置admin后台表和App(应用)为中文名的操作方法
2020/05/10 Python
Python中SQLite如何使用
2020/05/27 Python
python实现发送QQ邮件(可加附件)
2020/12/23 Python
基于注解实现 SpringBoot 接口防刷的方法
2021/03/02 Python
什么是Linux虚拟文件系统VFS
2015/08/25 面试题
销售业务实习自我鉴定
2013/09/23 职场文书
口腔医学技术应届生求职信
2013/11/09 职场文书
司机岗位职责
2013/11/15 职场文书
大专应届生个人的自我评价
2013/11/21 职场文书
网络管理员岗位职责
2014/03/17 职场文书
音乐教育专业自荐信
2014/09/18 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
2015年国庆节演讲稿范文
2015/07/30 职场文书
高中运动会广播稿
2015/08/19 职场文书
如何vue使用el-table遍历循环表头和表体数据
2022/04/26 Vue.js