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原生方法创建表格效率测试
Jul 08 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
javascript 获取HTML DOM父、子、临近节点
Jun 16 Javascript
总结JavaScript三种数据存储方式之间的区别
May 03 Javascript
完美的js图片轮换效果
Feb 05 Javascript
JavaScript格式化json和xml的方法示例
Jan 22 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 Javascript
Vue实现购物车实例代码两则
May 30 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
vue3+typeScript穿梭框的实现示例
Dec 29 Vue.js
Ajax实现局部刷新的方法实例
Mar 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
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
ThinkPHP连接Oracle数据库
2016/04/22 PHP
ThinkPHP实现更新数据实例详解(demo)
2016/06/29 PHP
PHP 访问数据库配置通用方法(json)
2018/05/20 PHP
php对mongodb的扩展(小试牛刀)
2012/11/11 Javascript
js传中文参数controller里获取参数乱码问题解决方法
2014/01/03 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
举例说明如何为JavaScript的方法参数设置默认值
2015/11/17 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
设置jQueryUI DatePicker默认语言为中文
2016/06/04 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
webpack优化的深入理解
2018/12/10 Javascript
react中使用css的7中方式(最全总结)
2019/02/11 Javascript
微信小程序保持session会话的方法
2020/03/20 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
基于 Vue 的 Electron 项目搭建过程图文详解
2020/07/22 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
python读取浮点数和读取文本文件示例
2014/05/06 Python
一篇文章快速了解Python的GIL
2018/01/12 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Python调用adb命令实现对多台设备同时进行reboot的方法
2018/10/15 Python
Python基于opencv的简单图像轮廓形状识别(全网最简单最少代码)
2021/01/28 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
金牌葡萄酒俱乐部:Gold Medal Wine Club
2017/11/02 全球购物
美国受信赖的教育产品供应商:Nest Learning
2018/06/14 全球购物
什么是TCP/IP
2014/07/27 面试题
仓库管理专业个人自我评价范文
2013/11/11 职场文书
教师师德承诺书
2014/03/26 职场文书
银行求职自荐书
2014/06/25 职场文书
纪念九一八事变演讲稿:牢记历史,捍卫主权
2014/09/14 职场文书
优秀班主任主要事迹材料
2014/12/16 职场文书
教育教学工作反思
2016/02/24 职场文书
争做文明公民倡议书
2019/06/24 职场文书