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 相关文章推荐
WordPress 照片lightbox效果的运用几点
Jun 22 Javascript
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
Js中获取frames中的元素示例代码
Jul 30 Javascript
JS中实现简单Formatter函数示例代码
Aug 19 Javascript
jQuery制作仿Mac Lion OS滚动条效果
Feb 10 Javascript
莱鸟介绍javascript onclick事件
Jan 06 Javascript
全屏滚动插件fullPage.js使用实例解析
Oct 21 Javascript
在Vue组件上动态添加和删除属性方法
Feb 23 Javascript
layer弹出层扩展主题的方法
Sep 11 Javascript
layer弹出层倒计时关闭的实现方法
Sep 27 Javascript
ant-design-vue 实现表格内部字段验证功能
Dec 16 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 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下通过IP获取地理位置的代码(小偷程序)
2011/06/09 PHP
php出现内存位置访问无效错误问题解决方法
2014/08/16 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
php使用curl下载指定大小的文件实例代码
2017/09/30 PHP
JavaScript下申明对象的几种方法小结
2008/10/02 Javascript
javascript实现单击和双击并存的方法
2014/12/13 Javascript
测试IE浏览器对JavaScript的AngularJS的兼容性
2015/06/19 Javascript
值得分享和收藏的Bootstrap学习教程
2016/05/12 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
React中使用UEditor百度富文本的方法
2018/08/22 Javascript
使用validate.js实现表单数据提交前的验证方法
2018/09/04 Javascript
vue中渲染对象中属性时显示未定义的解决
2020/07/31 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
python中Flask框架简单入门实例
2015/03/21 Python
详解Django中的form库的使用
2015/07/18 Python
Python实现新浪博客备份的方法
2016/04/27 Python
Python 专题四 文件基础知识
2017/03/20 Python
python发送邮件实例分享
2017/07/28 Python
python3 enum模块的应用实例详解
2019/08/12 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
Python如何读取、写入CSV数据
2020/07/28 Python
CSS3 制作旋转的大风车(充满童年回忆)
2013/01/30 HTML / CSS
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
美国林业供应商:Forestry Suppliers
2019/05/01 全球购物
《两个铁球同时着地》教学反思
2014/02/13 职场文书
房屋租赁协议书范本
2014/04/10 职场文书
干部考核评语
2014/04/29 职场文书
发票退票证明
2015/06/24 职场文书
2016入党积极分子考察评语
2015/12/01 职场文书
2019XX公司员工考核管理制度!
2019/08/07 职场文书
导游词之贵州百里杜鹃
2019/10/29 职场文书
MySQL中VARCHAR与CHAR格式数据的区别
2021/05/26 MySQL
JavaScript实现简单拖拽效果
2021/09/15 Javascript
jdbc中自带MySQL 连接池实践示例
2022/07/23 MySQL