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 相关文章推荐
Angular 根据 service 的状态更新 directive
Apr 03 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
js实现无缝滚动图(可控制当前滚动的方向)
Feb 22 Javascript
详解AngularJS 路由 resolve用法
Apr 24 Javascript
JS实现简单抖动效果
Jun 01 Javascript
vue数据双向绑定的注意点
Jun 23 Javascript
详解node nvm进行node多版本管理
Oct 21 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
详解实现vue的数据响应式原理
Jan 20 Vue.js
用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调用三种数据库的方法(3)
2006/10/09 PHP
DOM基础及php读取xml内容操作的方法
2015/01/23 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
Jquery AJAX 用于计算点击率(统计)
2010/06/30 Javascript
理解Javascript_07_理解instanceof实现原理
2010/10/15 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
javascript学习笔记(七) js函数介绍
2012/06/19 Javascript
JavaScript实现生成GUID(全局统一标识符)
2014/09/05 Javascript
有关jQuery中parent()和siblings()的小问题
2016/06/01 Javascript
Javascript 实现全屏滚动实例代码
2016/12/31 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
2017/12/25 jQuery
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
bootstrap table.js动态填充单元格数据的多种方法
2019/07/18 Javascript
使用Python写个小监控
2016/01/27 Python
Python编程之黑板上排列组合,你舍得解开吗
2017/10/30 Python
python 简单备份文件脚本v1.0的实例
2017/11/06 Python
Python实现的redis分布式锁功能示例
2018/05/29 Python
将tensorflow的ckpt模型存储为npy的实例
2018/07/09 Python
在python中利用GDAL对tif文件进行读写的方法
2018/11/29 Python
解决Python运行文件出现out of memory框的问题
2018/12/03 Python
Python读取Pickle文件信息并计算与当前时间间隔的方法分析
2019/01/30 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
Python List cmp()知识点总结
2019/02/18 Python
浅谈python的elementtree模块处理中文注意事项
2020/03/06 Python
使用tensorflow框架在Colab上跑通猫狗识别代码
2020/04/26 Python
python的链表基础知识点
2020/09/13 Python
欧洲最大的品牌水上运动服装和设备在线零售商:Wuituit Outlet
2018/05/05 全球购物
俄罗斯化妆品和香水网上商店:Iledebeaute
2019/01/03 全球购物
Interhome丹麦:在线预订度假屋和公寓
2019/07/18 全球购物
教师师德反思材料
2014/02/15 职场文书
2014大学生中国梦主题教育学习思想汇报
2014/09/10 职场文书
2015中学政教处工作总结
2015/07/22 职场文书
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
golang中的struct操作
2021/11/11 Golang
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers